jQuizMe Demo 4 - by Larry Battle

Using jQuery and jQuizMe

jQuizMe Demo 4

Back to HowToUse Wiki
Quiz using jQuery·nazmulweb.com
View Source

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?

    <div class="quiz-text" data-answer="1024">
        <p>What is the smallest perfect square that is bigger than 1000?</p>
        <input type="text" class="quiz-answerbox"/>
        <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>

    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>
        <p><textarea class="quiz-answerbox" cols="70"></textarea></p>
        <button class="quiz-submit">Submit</button>
        <button class="quiz-clear">Clear</button>

    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


    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:


    or also


    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.


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