Press "Enter" to skip to content

A Simple 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.

create a quiz using jquery, jquery question answer plugin, dynamic quiz questions, javascript quiz code generator, jquery mcq plugin

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" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="/dist/jquery.quiz-min.js"></script>

4. Define your individual questions, options, correct index, and customized correct/incorrect messages within the 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 placehoder %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 placehoder %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 to display on the next button.

finishButtonText: string [default: 'Finish']

The text to display on the finish button.

restartButtonText: string [default: 'Restart']

The text to display on the restart button.

Callbacks

setupCallback: function [default: undefined]

Callback fired after quiz is setup.

answerCallback: function [default: undefined]

Callback fired after an answer is selected.

nextCallback: function [default: undefined]

Callback fired after the next button is clicked.

finishCallback: function [default: undefined]

Callback fired after the finish button is clicked.

homeCallback: function [default: undefined]

Callback fired after the home button is clicked.

resetCallback: function [default: undefined]

Callback fired after the the quiz is reset. This happens when the home and finish button 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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *