QuizLib

Contents

• Demo
• Usage
  • HTML
  • JavaScript
• Docs
• Release Notes and Migration Guide
  • 1.0.1

Demo

View the code for this example, and a multi-quiz example, on GitHub

Usage

Compatibility

QuizLib makes use of Element.classList which is supported by all modern browsers. For Internet Explorer, this means v10+.

HTML

1. Import quizlib.js (or quizlib.min.js) and the optional stylesheet.

QuizLib makes use of the following classes as described below. Classes are not exclusive, so you can use your own alongside them:

• quizlib-question: used to identify a question element
• quizlib-question-title: used to identify the question title element
• quizlib-question-answers: used to identify the element containing question answers
• quizlib-question-warning: used by the 'unanswered question warning' element
• quizlib-correct: added to question titles to highlight correctly answered questions
• quizlib-incorrect: added to question titles to highlight incorrectly answered questions
• quizlib-temp: any question child elements with this class will be removed automatically by checkAnswers

See Quiz.Classes for constants of classes

2. Basic HTML setup:

• Create a quiz container element containing child elements for each question. Each question element must use the question class.
• Each question element must have a question title element using the class question-title. The unanswered question warning will be appended to this element.
• Each question element must also have a question answers element using the class question-answers. This element must contain answers that use the input tag. You can use any input type, quantity and structure you like.
• Each answer input must have an arbitrary value which will be used as its answer value.

Example:

<!-- Quiz Container -->  
<div id="quiz-div">  
<!-- Question 1 -->  
<div class="quizlib-question my-class">  
    <div class="quizlib-question-title">1. Question Title</div>  
    <div class="quizlib-question-answers">  
        <!-- Answer structure can be as simple or as complicated as you like, 
             only the input elements matter to the library -->
        <input type="radio" name="q1" value="a"> Option 1<br/>
        <input type="radio" name="q1" value="b"> Option 2<br/>
    </div>  
</div>  
<!-- Question 2 -->  
<div class="quizlib-question my-class">  
    <div class="quizlib-question-title">2. Question Title</div>  
    <div class="quizlib-question-answers">
        <ul>  
            <li><label><input type="checkbox" name="q2" value="a"> Option 1</label></li>  
            <li><label><input type="checkbox" name="q2" value="b"> Option 2</label></li>  
            <li><label><input type="checkbox" name="q2" value="c"> Option 3</label></li>  
            <li><label><input type="checkbox" name="q2" value="d"> Option 4</label></li>  
        </ul>  
    </div>  
</div>
<!-- Answer Button -->
<button type="button" onclick="myAnswerCheckMethod();">Check Answers</button>
</div>

JavaScript

• To check answers, call Quiz.checkAnswers which returns false if some questions have been skipped and marks them with a message appended to the title. Otherwise returns true and updates Quiz.result. You can pass false to Quiz.checkAnswers to ignore unanswered questions.
• You can then access score data through Quiz.result which is a QuizResult object.

Example
Create the quiz instance

var quiz = new Quiz('quiz-div', ['a', ['b', 'c', 'd']]);

Create a method to check the answers and optionally handle each answer, such as highlighting correct answers:

function myAnswerCheckMethod() {
    // checkAnswers returns true if all questions have been answered and updates the result object
    if (quiz.checkAnswers()) {
        console.log('Correct answers: ' + quiz.result.score + '/' + quiz.result.totalQuestions);
        console.log('Percent correct: ' + quiz.result.scorePercentFormatted + '%');
    }
        
    // Alternatively, we can ignore unanswered questions by passing false
    quiz.checkAnswers(false);
    console.log('Correct answers: ' + quiz.result.score + '/' + quiz.result.totalQuestions);
    console.log('Percent correct: ' + quiz.result.scorePercentFormatted + '%');

    // We can also use the highResults method to highlight correct and incorrect answers.
    // We pass a callback which takes the quiz object, the current question, the question number and whether it was answered correctly.
    quiz.highlightResults(myHandleAnswerMethod);
}

// Callback for quiz.highlightResults called for each question. Parameters are: The quiz object the question belongs to,
// the question element, the question number and a boolean indicating if the question was answered correctly.
function myHandleAnswerMethod(quiz, question, no, correct) {
    if (!correct) {
        // Highlight the correct answers.
        // See the example code on GitHub for an example implementation.
    }
}

Docs

Release Notes and Migration Guide

1.0.1

• Moved Quiz.Classes to the static context. (Instance access still exists for backwards compatibility with 1.0.0).
• Added quiz object as first argument in highlightResults callback.

Migrating from 1.0.0 to 1.0.1

• Update your highResults callback to take the quiz object as the first argument:

  // 1.0.0
  function myHandleAnswerMethod(question, no, correct) {}
  
  // 1.0.1
  function myHandleAnswerMethod(quiz, question, no, correct) {}
                  

• Access Quiz.Classes through the static context instead of the quiz instance:

  // 1.0.0
  myQuizInstance.Classes.CORRECT;
  
  // 1.0.1
  Quiz.Classes.CORRECT;