jQuizMe Demo 4 - by Larry Battle

Using jQuery and jQuizMe

jQuizMe Demo 4

Back to HowToUse Wiki
Quiz using jQuery·nazmulweb.com

A demo based on jQuery Quiz maker.

1. Sun rises in the east

• True
• False
2. How many days in a week?

• Five days
• Seven days
• Thirty days
3. How much is jQuiz worth?

• \$0
• \$100
• \$1,000
• \$1,000,000
• \$1,000,000,000,000,000,000

How much is 2+2?

• 1
• 2
• 3
• 4
• How much is 2+2?

• 1
• 2
• 3
• 4
• Try decomposing 2 + 2 into 1 + 1 + 1 + 1.

Explanation: since 2 + 2 is 1 + 1 + 1 + 1, 2 + 2 is also 4*1, and, since any number times one is the number itself, the answer is 4.

Which of these are roots of the equation x²+x-6 = 0?

• -3
• -2
• 0
• 2
• 3
• Explanation: Gerard's relations tell us that the roots of this equation must satisfy the conditions (1) r1 + r2 = -1, and (2) r1 * r2 = -6. -3 and 2 are, thus, the only numbers that satisfy both conditions.

Using quiz-text

`quiz-text` quizzes work somewhat differently than the previous types, but not too much that you'd have a hard time trying to put it to work. All controls that worked before will continue to work now. The main difference is that you have to create a `input type="text"` or `textarea` with the class `quiz-answerbox`. This is the input field which will receive the user's input.

Then, you can put the attribute `data-answer` containing the correct answer for that quiz. By default, the correction will be case-insensitive and trimmed (eliminating whitespace before and after, the string). However, you can change it by specifying the attributes `data-sensitive` and `data-notrim`, respectively. Let's see?

``````
<p>What is the smallest perfect square that is bigger than 1000?</p>
<button class="quiz-submit">Submit</button>
<button class="quiz-clear">Clear</button>
<div class="quiz-hint">It's a power of 2.</div>
<div class="quiz-explanation">There's nothing to explain, it's 1024.</div>
</div>
``````

Brings up the following quiz:

What is the smallest perfect square that is bigger than 1000?

It's a power of 2.
There's nothing to explain, it's 1024.

If you are a bit versed in JavaScript, you can also specify your own validation function via the attribute data-validator. Notice, however, that if you don't specify an attribute `data-answer` you won't be able to add a `quiz-show-answer` element.

``````
<div class="quiz-text" data-validator="function(x) {return x.length <= 140;}">
<p>Type 140 or less characters, please.</p>
<button class="quiz-submit">Submit</button>
<button class="quiz-clear">Clear</button>
</div>
``````

Type 140 or less characters, please.

JavaScript API

Well, as said in the first paragraph, all JavaScript you'll need in most of the cases is simply

``\$.quiz();``

which looks for all elements with a handler class (by default, quiz-single, quiz-multiple, and quiz-text) and transform them into quizzes. However, there are times when you need to be more specific on which quizzes to transform or not. To do this, you can simply use standard jQuery way:

``\$('#quiz-id').quiz();``

or also

``\$.quiz(\$('#quiz-id'));``

You can also specify, instead of a element, a context in which to search, like

``\$('#quizzes').quiz(); // search for quizzes only inside #quizzes.``
``\$.quiz(\$('#quizzes')); // same as above.``

There's an array, `\$.quiz.quizzes` containing the handler object of the quizzes handled.

All of them have the following methods implemented:

• `.makeCorrection()`: the same effect as clicking a element with the class 'quiz-submit'.
• `.clear()`: the same effect as clicking a element with the class 'quiz-clear'.
• `.clearCorrection()`: removes any 'quiz-correct' or 'quiz-wrong' classes.
• `.showAnswer()`: the same effect as clicking a element with the class 'quiz-show-answer'.
• `.hintVisible(boolean)`: shows or hides the hint.
• `.toggleHint()`: the same effect as clicking a element with the class 'quiz-toggle-hint'.
• `.explanationVisible(boolean)`: shows or hides the explanation.
• Finally, there's an attribute `.question`, which contains the jQuery object of the quiz.

Extending our plugin

Besides our three predefined handlers, you can also create your own, specific handler to fully meet your needs. To do this, simply add it to the `\$.quiz.handlers` object, with a key containing the css classname for the handler (e.g. 'quiz-something'), and the value, the name of your JavaScript type.

The API will pass to the constructor of your class two parameters: `question`, a jQuery object pointing to the question to transform, and `idQuestion`, which is its id, or an distinct integer if it doesn't have and id. The objects of the class must have a method `init()`, which will render the quiz properly.

Finally...

That's it! Feel free to study the source code and create your own quiz handlers! See you!