jQuery Quiz Plugin
A simple jQuery quiz plugin.
Disclaimer
This is a very simple quiz plugin I created to port quizzes from an existing platform. It creates simple multiple choice quizzes. You can customize most of the screens that are displayed, as well as the text displayed.
Usage
HTML
<div id="quiz">
<div id="quiz-header">
<h1>Basic Quiz Demo</h1>
<!-- Optionally add a home button -->
<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>
You may optionally add other HTML, this is just the markup required by the plugin (although home button is optional).
Javascript
$('#quiz').quiz({
questions: [
{
'q': 'A smaple question?',
'options': [
'Answer 1',
'Answer 2',
'Answer 3',
'Answer 4'
],
'correctIndex': 1,
'correctResponse': 'Custom correct response.',
'incorrectResponse': 'Custom incorrect response.'
}
]
});
Add as many questions as you like. You may also specify a different number of options (answers) for each question.
Don't forget to include jQuery.
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
%currentdisplays which question you are currently on. The placeholder%totaldisplays 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
%scoredisplays how many questions you got correct. The placeholder%totaldisplays the total number of questions.
gameOverScreen: string [default: '#quiz-gameover-screen']
The id selector of the game over screen. This screen is used when
allowIncorrectis 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.
1 Jun 29, 2022
2 Apr 25, 2022
2 Mar 28, 2022
11 Dec 4, 2022
6 Aug 13, 2022
1 Aug 22, 2022
1 Aug 10, 2022
2 Nov 7, 2021
12 Aug 25, 2022
1.6k Dec 31, 2022
714 Jul 21, 2022
32 Dec 14, 2022
8 Aug 3, 2022
8 Jun 9, 2022
42 Dec 29, 2022
5 Apr 25, 2021
1 Feb 15, 2022
0 Dec 28, 2020
3 Sep 3, 2022