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