A Simple jQuery Dynamic Quiz Plugin

jquery-dynamic-quiz-plugin

jQuery quiz.js is a small, multi-browser jQuery component used to dynamically create unlimited quizzes and surveys on a webpage.

This is a very simple testing plugin that I created for running tests from an existing platform. It creates simple, multiple-choice tests. You can customize most of the displayed screens as well as the displayed text.

Features:

  • An unlimited number of questions and answers.
  • Correct / incorrect custom responses.
  • Custom counter.
  • Custom controls.
  • Incorrect or not allowed.
  • Callback functions.

How to make use of it:

1. Include the plugin’s stylesheet within 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 the jQuery library and the minified model of the jQuery quiz.js on the backside of the webpage.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="/dist/jquery.quiz-min.js"></script>

4. Define your individual questions, options, correct index, and customized correct/incorrect messages within JavaScript.

const myQuiz = [
  {
    'q': 'A sample 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 next 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 capabilities accessible.

$('#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
  },

});

Options

allowIncorrect: boolean [default: true]

If false, the quiz will show the gameOver screen if a question is answered incorrectly. This will force the user to get a perfect score to complete the quiz.

counter: boolean [default: true]

If true, a counter will be shown displaying the current question and how many questions there are. The output of the counter can be customized using counterFormat.

counterFormat: string [default: '%current/%total']

Specify the counter format. The placeholder %current displays which question you are currently on. The placeholder %total displays the total number of questions.

startScreen: string [default: '#quiz-start-screen']

The id selector of the start screen. The start screen should contain the start button.

startButton: string [default: '#quiz-start-btn']

The id selector of the start button.

homeButton: string [default: '#quiz-home-btn']

The id selector of the home button.

resultsScreen: string [default: '#quiz-results-screen']

The id selector of the results screen. This screen will display the number of questions correct.

resultsFormat: string [default: 'You got %score out of %total correct!']

Specify the results format. The placeholder %score displays how many questions you got correct. The placeholder %total displays the total number of questions.

gameOverScreen: string [default: '#quiz-gameover-screen']

The id selector of the game over screen. This screen is used when allowIncorrect is set to false.

nextButtonText: string [default: 'Next']

The text is to display on the next button.

finishButtonText: string [default: 'Finish']

The text is to display on the finish button.

restartButtonText: string [default: 'Restart']

The text is to display on the restart button.

Callbacks

setupCallback: function [default: undefined]

The callback is fired after the quiz is set up.

answerCallback: function [default: undefined]

Callback fired after an answer is selected.

nextCallback: function [default: undefined]

The callback is fired after the next button is clicked.

finishCallback: function [default: undefined]

The callback is fired after the finish button is clicked.

homeCallback: function [default: undefined]

The callback is fired after the home button is clicked.

resetCallback: function [default: undefined]

The callback is fired after the quiz is reset. This happens when the home and finish buttons are clicked.

Customizable Dynamic Quiz Plugin, jQuery Quiz Plugin/Github

See Demo And Download

Official Website(jchamill): Click Here

This superior jQuery/javascript plugin is developed by jchamill. For extra Advanced usage, please go to the official website.