jqQuiz works reading the HTML instead of use a JSON to provide more flexibility in the construction of the markup, as many other jquery plugins do (jquery accordion for example).
jqQuiz is divided in small pieces, each piece has a specific rol inside the quiz, this rol is specified by an attribute of type data-jq-quiz-**, the rest of the markup is totally up to you!
So, if you don't want to include some optional element, simply remove it from the markup.\
Most of the markup is totally free but, of course, a little structure must be provided.
The available roles (attributes to add to the HTML) for jqQuiz are:
data-jq-quiz-wrapper : Wrapper for the quiz. Is the main container for all the quiz markup
|- data-jq-quiz-header : Header for the quiz. Visible when the quiz IS NOT running. Contains the info about the questionnaire
| |- data-jq-quiz-title : OPTIONAL. A title for the quiz. Only one is allowed
| |- data-jq-quiz-description : OPTIONAL. A description for the quiz. Could be the instructions to resolve it. Only one is allowed
| |- data-jq-quiz-properties : OPTIONAL. The properties of the quiz, for example the cut of mark. You could see the full list of properties [here](). Only one is allowed
| | |- data-jq-quiz-property : Some property of the quiz. Multiple items are allowed.
| |- data-jq-quiz-actions : Available actions when the quiz is not running.
| |- data-jq-quiz-start : Starts the quiz. Only one is allowed
|- data-jq-quiz-body : Body for the quiz. Visible when te quiz IS running. Contains the questions, options and actions for the running state. Only one is allowed
| |- data-jq-quiz-questions : The container of the questions. Only one is allowed
| | |- data-jq-quiz-question : Some question of the quiz. Multiple items are allowed
| | |- data-jq-quiz-statement : The text for the question. Only one is allowed
| | |- data-jq-quiz-options : The container for the options of a question. Only one is allowed
| | | |- data-jq-quiz-option : Some option for a question. Multiple items are allowed. Each question must have the attribute data-is-correct with true or false
| | |- data-jq-quiz-feedback : OPTIONAL. Some feedback for the. Multiple items are allowed.
| |- data-jq-quiz-actions : OPTIONAL. Available actions when the quiz is running. Multiple items are allowed.
| |- data-jq-quiz-prev : OPTIONAL. Go to the prev question. Only one is allowed (per actions group)
| |- data-jq-quiz-next : OPTIONAL. Go to the next question. Only one is allowed (per actions group)
| |- data-jq-quiz-end : OPTIONAL. Ends the quiz. Only one is allowed (per actions group)
|- data-jq-quiz-result : OPTIONAL. A result to show when the quiz is finished. You could see the full list of available items [here](). Only one is allowed
|- data-jq-quiz-result-item : Some item of the result. Multiple items are allowed
Please note that the order of elements in their container is not mandatory, you could use the order you want. A valid structure could be:
<section class="jq-quiz" id="myQuiz">
<form class="jq-quiz__form" data-jq-quiz-wrapper="data-jq-quiz-wrapper">
<header class="jq-quiz__header" data-jq-quiz-header>
<!--Quiz title-->
<h1 class="jq-quiz__title" data-jq-quiz-title>My quiz title</h1>
<!--End quiz title-->
<!--Questionnaire description-->
<p class="jq-quiz__description" data-jq-quiz-description>Description for my quiz</p>
<!--End quiz description-->
<!--Quiz actions-->
<div class="jq-quiz__actions" data-jq-quiz-actions>
<!--Quiz actions-->
<button class="jq-quiz__action" data-jq-quiz-start>Start the quiz</button>
<!--End quiz actions-->
</div>
<!--End quiz actions-->
</header>
<!--Quiz body-->
<div class="jq-quiz__body" data-jq-quiz-body>
<!--Quiz questions-->
<div class="jq-quiz__questions" data-jq-quiz-questions>
<!--Quiz question-->
<fieldset class="jq-quiz__question" data-jq-quiz-question>
<!--Quiz statement-->
<legend class="jq-quiz__statement" data-jq-quiz-statement>Some question</legend>
<!--End quiz statement-->
<!--Quiz options-->
<div class="jq-quiz__options" data-jq-quiz-options>
<!--Quiz option-->
<div class="jq-quiz__option" data-jq-quiz-option>
<label class="jq-quiz__option-label">
<span>Incorrect</span>
<input class="jq-quiz__option-field" type="radio" name="q1">
</label>
</div>
<!--End quiz option-->
<!--Quiz option-->
<div class="jq-quiz__option" data-jq-quiz-option data-is-correct="true">
<label class="jq-quiz__option-label">
<span>Correct</span>
<input class="jq-quiz__option-field" type="radio" name="q1">
</label>
</div>
<!--End quiz option-->
</div>
<!--End quiz options-->
</fieldset>
<!--End quiz question-->
</div>
<!--End quiz questions-->
<!--Quiz actions-->
<div class="jq-quiz__actions" data-jq-quiz-actions>
<!--Quiz actions-->
<button class="jq-quiz__action" data-jq-quiz-end>End the quiz</button>
<!--End quiz actions-->
</div>
<!--End quiz actions-->
</div>
<!--End quiz body-->
<!--Questionnaire result-->
<div class="jq-quiz__result" data-jq-quiz-result>
<!--Questionnaire body-->
<div class="jq-quiz__result-item" data-jq-quiz-result-item="success ? Perfect! : Ohhh, try again"></div>
<!--End quiz body-->
</div>
<!--End quiz result-->
</form>
</section>
But it's a lot of code and it's a bit difficult to read, right?
To make your(our) life easier, we have created some pug mixins, you only have to call the mixin of the element you want to place without add anything more.
The same that appears above could be specified with mixins:
+jq-quiz({
id:"myQuiz"
})
+jq-quiz__header()
+jq-quiz__title({
content:"My quiz title"
})
+jq-quiz__description({
content:"Description for my quiz"
})
+jq-quiz__actions()
+jq-quiz__action({
type:"start",
content:"Start the quiz"
})
+jq-quiz__body()
+jq-quiz__questions()
+jq-quiz__question({
statement:"Some question"
})
+jq-quiz__options()
+jq-quiz__option({
name:"q1",
isCorrect:false,
content:"Incorrect"
})
+jq-quiz__option({
name:"q1",
isCorrect:true,
content:"Correct"
})
+jq-quiz__actions()
+jq-quiz__action({
type:"end",
content:"End the quiz"
})
+jq-quiz__result()
+jq-quiz__result-item({
type: "success ? Perfect! : Ohhh, try again"
})
Much better right?. The mixins provides multiple ways for render the quiz, making the code more readable.
For more info please see mixins