jQuery Question Answer Plugin – jQuery Quiz

An awesome jQuery Quiz plugin to generate multiple choice question answer dynamically. The Quiz let’s you to create MCQs based quiz test tool or game.

Plugin Overview

Plugin: Quiz
Author: jchamill
Licence: MIT Licence
Published: March 1, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.8.2 or Latest version
File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 15 KB

How to Use Quiz (Question Answer) Plugin:

1. To getting started with Quiz, load the plugin’s JavaScript & CSS file after jQuery library.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Quiz Js -->
<script src="dist/jquery.quiz-min.js"></script>

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

2. Create HTML structure for Quiz where the multiple choice questions will be shown.

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

3. Initialize the Quiz plugin with the following structure and add your question and answer in option’s array.

$('#quiz').quiz({
    //resultsScreen: '#results-screen',
    //counter: false,
    //homeButton: '#custom-home',
    counterFormat: 'Question %current of %total',
    questions: [
      {
        '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',
          'Answer 3',
          'Answer 4'
        ],
        'correctIndex': 2,
        'correctResponse': 'Custom correct response.',
        'incorrectResponse': 'Custom incorrect response.'
      },
    ]
  });

Note: Add as many questions as you like. You may also specify a
different number of options (answers) for each question.

4. Customise CSS style for the jQuery question answer plugin’s interface.

.quiz-container {
    padding: 1em;
    max-width: 100%;
    margin: 1em auto;
}

.quiz-container a {
    text-decoration: none;
    color: #333;
}

#quiz-header,
#quiz-start-screen,
#quiz-results-screen,
#quiz-counter {
    text-align: center;
}

.question {
    font-size: 1.25em;
}

.answers {
    list-style: none;
    padding: 0;
}

.answers a {
    display: block;
    padding: 0.5em 1em;
    margin-bottom: 0.5em;
    background: #fff;
    border-radius: 10px;
}

.answers a.correct {
    background: #090;
}
.answers a.incorrect {
    background: #c00;
}

.answers a.correct,
.answers a.incorrect {
    color: #fff;
}

#quiz-controls {
    background: #333;
    color: #fff;
    padding: 0.5em 1em;
    text-align: center;
    border-radius: 10px;
}

#quiz-response {}
#quiz-results {
    font-size: 1.25em;
}

#quiz-buttons a,
.quiz-container .quiz-button {
    display: inline-block;
    padding: 0.5em 1em;
    background: #333;
    color: #fff;
    border-radius: 10px;
}
#quiz-buttons a {
    background: #fff;
    color: #333;
}

/* Quiz State Overrides */

.quiz-results-state #quiz-controls {
    background: none;
    padding: 0;
}
.quiz-results-state #quiz-buttons a {
    background: #333;
    color: #fff;
}

Quiz Plugin’s Options

The following are some useful options for customization of working of the plugin.

allowIncorrect: true, //If false plugin will show game over on the screen

counter: true, //Specify the counter for quiz 

nextButtonText: 'Next', //Text on the the next button 

finishButtonText: 'Finish', //Text on the finish button 

restartButtonText: 'Restart', //Text on restart button 

resultsScreen: '#results-screen', // selector for result screen 

homeButton: '#custom-home', //selector for home button 

jQuery Question Answer Plugin’s Callback Function

The following are some callbacks possibilities to fired custom function.

answerCallback: function(){}, // Callback fired after an answer is selected.

nextCallback: function(){}, //Callback fired after the next button is clicked.

finishCallback: function(){}, // Callback fired after the finish button is clicked.

homeCallback: function(){}, //Callback fired after the home button is clicked.

1 thought on “jQuery Question Answer Plugin – jQuery Quiz”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X