Customizable Dynamic Quiz Plugin With jQuery - quiz.js

jQuery quiz.js is a small, cross-browser jQuery plugin used to dynamically generate unlimited quizzes and surveys on the webpage.

Features:

• Unlimited number of questions and answers.
• Custom correct/incorrect responses.
• Custom counter.
• Custom controls.
• Allows incorrect or not.
• Callback functions.

See also:

• Pretty & Dynamic Quizzes Plugin - SlickQuiz
• Easy Dynamic Quiz Plugin In Pure JavaScript – ysQuiz.js

How to use it:

1. Include the plugin's stylesheet in the header of the webpage.

<link rel="stylesheet" href="/dist/jquery.quiz-min.css">

2. Create the HTML for the quiz.

<div id="quiz">
  <div id="quiz-header">
    <h1>Quiz Example</h1>
    <p><a id="quiz-home-btn">Quiz Home</a></p>
  </div>
  <div id="quiz-start-screen">
    <p>
      <a href="#" id="quiz-start-btn" class="quiz-button">Start Quiz</a>
    </p>
  </div>
</div>

3. Include jQuery library and the minified version of the jQuery quiz.js at the bottom of the webpage.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="/dist/jquery.quiz-min.js"></script>

4. Define your own questions, options (answers), correct index and custom correct/incorrect messages in the JavaScript.

const myQuiz = [
  {
    'q': 'A smaple question?',
    'options': [
      'Answer 1',
      'Answer 2',
      'Answer 3',
      'Answer 4'
    ],
    'correctIndex': 1,
    'correctResponse': 'Custom correct response.',
    'incorrectResponse': 'Custom incorrect response.'
  },
  {
    'q': 'A smaple question?',
    'options': [
      'Answer 1',
      'Answer 2'
    ],
    'correctIndex': 1,
    'correctResponse': 'Custom correct response.',
    'incorrectResponse': 'Custom incorrect response.'
  },
  {
    'q': 'A smaple question?',
    'options': [
      'Answer 1',
      'Answer 2',
      'Answer 3',
      'Answer 4'
    ],
    'correctIndex': 2,
    'correctResponse': 'Custom correct response.',
    'incorrectResponse': 'Custom incorrect response.'
  },
  {
    'q': 'A smaple question?',
    'options': [
      'Answer 1',
      'Answer 2'
    ],
    'correctIndex': 1,
    'correctResponse': 'Custom correct response.',
    'incorrectResponse': 'Custom incorrect response.'
  },
  {
    'q': 'A smaple question?',
    'options': [
      'Answer 1',
      'Answer 2',
      'Answer 3',
      'Answer 4'
    ],
    'correctIndex': 3,
    'correctResponse': 'Custom correct response.',
    'incorrectResponse': 'Custom incorrect response.'
  }
]

5. Generate a default quiz on the webpage.

$('#quiz').quiz({
  questions: myQuiz
});

6. Customize the quiz by overriding the following options.

$('#quiz').quiz({

  // allows incorrect options
  allowIncorrect: true,

  // counter settings
  counter: true,
  counterFormat: '%current/%total',

  // default selectors & format
  startScreen: '#quiz-start-screen',
  startButton: '#quiz-start-btn',
  homeButton: '#quiz-home-btn',
  resultsScreen: '#quiz-results-screen',
  resultsFormat: 'You got %score out of %total correct!',
  gameOverScreen: '#quiz-gameover-screen',

  // button text
  nextButtonText: 'Next',
  finishButtonText: 'Finish',
  restartButtonText: 'Restart'
  
});

7. Callback functions available.

$('#quiz').quiz({

  answerCallback: function(currentQuestion, selected, questions[currentQuestionIndex]){
    // do something
  },

  nextCallback: function(){
    // do something
  },

  finishCallback: function(){
    // do something
  },

  homeCallback: function(){
    // do something
  }

  resetCallback: function(){
    // do something
  },

  setupCallback: function(){
    // do something
  },

});

Changelog:

2023-04-13

• add amd support and refactor to allow multiple quizzes on one page

2022-05-20

• add quiz results container to custom results screen demo

2021-11-12

• Bugfix: quiz no longer fails if only one question

2021-05-15

• update dependencies

2021-04-27

• add setup and reset callbacks

---

This awesome jQuery plugin is developed by jchamill. For more Advanced Usages, please check the demo page or visit the official website.