A jQuery plugin for creating pretty, dynamic quizzes.
See index.html for demo and suggested HTML structure (the element class names are the important part).
See js/slickQuiz-config.js to set up your quiz copy and questions.
To initialize your quiz:
$(function () {
var options = {
// see below
};
$('#slickQuiz').slickQuiz(options);
});
json (JSON Object) - your quiz JSON, pass this instead of setting quizJSON outside of the plugin (see js/slickQuiz-config.js)
checkAnswerText (String) Default: 'Check My Answer!'; - the text to use on the check answer button
nextQuestionText (String) Default: 'Next »'; - the text to use on the next question button
backButtonText (String) Default: ''; - the text to use on the back button; if left null / blank (default) - no back button will be displayed
tryAgainText (String) Default: ''; - the text to use on the try again button; if left null / blank - no try again button will be displayed
skipStartButton (Boolean) Default: false; - whether or not to skip the quiz "start" button
numberOfQuestions (Integer) Default: null; - the number of questions to load from the question set in the JSON object, defaults to null (all questions); Note: If you set this to an integer, you'll probably also want to set randomSortQuestions to true to ensure that you get a mixed set of questions each page load.
randomSortQuestions (Boolean) Default: false; - whether or not to randomly sort questions ONLY
randomSortAnswers (Boolean) Default: false; - whether or not to randomly sort answers ONLY
preventUnanswered (Boolean) Default: false; - prevents submitting a question with zero answers
perQuestionResponseMessaging (Boolean) Default: true; - Displays correct / incorrect response messages after each question is submitted.
completionResponseMessaging (Boolean) Default: false; - Displays all questions and selected answers with correct or incorrect response messages when the quiz is completed.
disableNext - Prevents submitting a question with zero answers. You should now use preventUnanswered instead.
disableResponseMessaging - Hides all correct / incorrect response messages. You should now use perQuestionResponseMessaging and completionResponseMessaging instead.
randomSort - Randomly sort all questions AND their answers. You should now use randomSortQuestions and randomSortAnswers instead.
Want to manage your quizzes in a content management system?
Simply translate your CMS quiz data into a JSON object formatted like "quizJSON" in js/slickQuiz-config.js. Then assign it as the quizJSON variable instead of loading js/slickQuiz-config.js.
Alternatively, you can pass the JSON right into the plugin using the "json" option (useful if you are placing multiple quizzes on a page):
$(function () {
$('#slickQuiz').slickQuiz({json: {YOUR_JSON_HERE}});
});
The slickQuiz ID and class names are what are important here:
<body id="slickQuiz">
<h1 class="quizName"></h1>
<div class="quizArea">
<div class="quizHeader">
<a class="startQuiz" href="">Get Started!</a>
</div>
</div>
<div class="quizResults">
<h3 class="quizScore">You Scored: <span></span></h3>
<h3 class="quizLevel"><strong>Ranking:</strong> <span></span></h3>
<div class="quizResultsCopy"></div>
</div>
</body>
See js/slickQuiz-config.js
var quizJSON = {
"info": {
"name": "The Quiz Header",
"main": "The Quiz Description Text",
"results": "The Quiz Results Copy",
"level1": "The highest ranking",
"level2": "The almost highest ranking",
"level3": "The middle ranking",
"level4": "The almost lowest ranking",
"level5": "The lowest ranking"
},
"questions": [
{
"q": "The Question?",
"a": [
{"option": "an incorrect answer", "correct": false},
{"option": "a correct answer", "correct": true},
{"option": "another correct answer", "correct": true}
],
"select_any": false, // optional, see below
"correct": "The Correct Response Message",
"incorrect": "The Incorrect Response Message"
}
]
}
Note: select_any is used if there is more than one true answer and when submitting any single true answer is considered correct. (Select ANY that apply vs. Select ALL that apply)
Created by Julie Cameron while previously employed at Quicken Loans, Detroit, MI