jqQuiz provides a plenity of options for a fully customize behavior.
With the same plugin you could create an exam type quiz or an strengthen knowledge type quiz.
The options are provided like in any other jquery plugin:
$(".myQuiz").jqQuiz({
immediateFeedback:true
});
jqQuiz uses jquery widget factory allowing to use the jquery ui plugins' way of use options
//Getter
$(".myQuiz").option("option","immediateFeedback");
//Setter
$(".myQuiz").option("option","immediateFeedback",true);
With the default values
let options = {
"classes": {
"firstQuestion": "jq-quiz--first-question",
"lastQuestion": "jq-quiz--last-question",
"widget": "jq-quiz",
"questionCorrect": "jq-quiz--correct",
"questionIncorrect": "jq-quiz--incorrect",
"selected": "jq-quiz--selected",
"stateResult": "jq-quiz--result",
"stateReview": "jq-quiz--review",
"stateRunning": "jq-quiz--running",
"multichoice": "jq-quiz--multi-choice",
"wrapper": "jq-quiz__form",
"header": "jq-quiz__header",
"body": "jq-questionnaire__body",
"startBtn": "jq-quiz__start",
"nextBtn": "jq-quiz__next",
"prevBtn": "jq-quiz__prev",
"endBtn": "jq-quiz__end",
"result": "jq-quiz__result",
"question": "jq-quiz__question",
"option": "jq-quiz__option",
"navbar": "jq-quiz__navbar",
"button": "jq-quiz__action",
"properties": "jq-quiz__properties",
"questions": "jq-quiz__questions"
},
"delayOnAutoNext": 500,//delay before auto go next question. Only applies if autoGoNext == true
"pointsForSuccess": 1,//amount of points to increase when a question is answered correctly
"pointsForFail": 0,//amount of points to substract when a question is answered incorrectly
"cutOffMark": 50,//minimum % of points to pass the quiz
"immediateFeedback": false,//show if the question has been answered correctly or incorrectly immediatly after choose an option
"disableOptionAfterSelect": true,//Disables the options of the question answered before choose one option. Only applies if immediateFeedback == true
"autoGoNext": true,//Go to the next question after choose an option. Only applies if multichoice == false
"showCorrection": true,//Show the question corrections at the end of the quiz
"showResult": true,//show the result dialog
"multichoice": false,
"disableNextUntilSuccess": false,//disable the next action until select the correct answer. Only available when immediateFeedback is true and disableOptionAfterSelect is false
"disableEndActionUntil":0,//disable the end action until a condition. Use DISABLE_END conditions. Only available when immediateFeedback is true and disableOptionAfterSelect is false.
"dialog": {//dialog options. All options of jquery ui dialog could be used https://api.jqueryui.com/dialog/
"draggable": false,
"autoOpen": true,
"resizable": false,
"modal": true
}
}
+jq-quiz({
id:"myQuiz",
header: {
title: "Quiz options example",
properties: {
items: [
{
type: "cutOfMark",
content: "Cut of mark"
},
{
type: "immediateFeedback ? Yes : No",
content: "Immediate Feedback"
},
{
type: "pointsForSuccess",
content: "Points to add for each correct answer"
},
{
type: "pointsForFail",
content: "Points to substract for each incorrect answer"
}
]
},
actions: [
{
type: "start",
content: "Start the quiz"
}
]
},
body: {
questions: [
{
content: "1 + 1 = ",
options: [
{
name: "q1",
content: "7",
isCorrect: false
},
{
name: "q1",
content: "2",
isCorrect: true
},
{
name: "q1",
content: "Mind blown",
isCorrect: false
}
],
feedback:[
{
type:"ok",
content:"Yeeessss, auto continue in 2 seconds."
},
{
type:"ko",
content:"Had a bad day? Don't worry, you will success the next question."
}
]
},
{
content: "NPM or YARN?",
options: [
{
name: "q2",
content: "NPM",
isCorrect: true
},
{
name: "q2",
content: "YARN",
isCorrect: true
}
],
feedback: [
{
type: "ok",
content: "Both are correct :P Multiple correct options are allowed"
}
]
},
{
content: "\"0\" == false",
options: [
{
name: "q3",
content: "true",
isCorrect: true
},
{
name: "q3",
content: "false",
isCorrect: false
}
]
}
],
actions: [
{
type: "end",
content: "End the quiz"
}
]
},
result: {
items: [
{
type: "success ? Well done! : Ohhh, try again",
content:"Feedback"
}
]
}
})
$("#myQuiz").jqQuiz({
delayOnAutoNext:2000,
cutOfMark:80,
immediateFeedback:true,
pointsForFail:0.2,
showCorrection:false,
disableEndActionUntil:1,
dialog:{
resizable:true,
modal:false
}
});