
jQuery quiz.js is a small, cross-browser jQuery plugin used to dynamically generate unlimited quizzes and surveys on the webpage.
Features:
- Unlimited number of questions and answers.
- Custom correct/incorrect responses.
- Custom counter.
- Custom controls.
- Allows incorrect or not.
- Callback functions.
See also:
How to use it:
1. Include the plugin's stylesheet in 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 jQuery library and the minified version of the jQuery quiz.js at the bottom 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 own questions, options (answers), correct index and custom correct/incorrect messages in the JavaScript.
const myQuiz = [ { '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' ], '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 following 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 functions available.
$('#quiz').quiz({ answerCallback: function(currentQuestion, selected, questions[currentQuestionIndex]){ // do something }, nextCallback: function(){ // do something }, finishCallback: function(){ // do something }, homeCallback: function(){ // do something } });
This awesome jQuery plugin is developed by jchamill. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 25.09.2018
- Source