Quizify

Page Outline

Demo
Setup & Installation
Initialization
Example Quiz Data
Options
Usage

Demo

This is a very simple presentation of quizify, it isn't flashy. Quizify does allow you to make it flashy however.

Setup & Installation

Download from npm and then require into your project.

                    
> npm install quizify
                    
                

                    
const quizify = require('quizify');
                    
                

Initialization

Create a new quiz object by calling new on quizify. The data argument is required, the options argument is optional.

                    
const quiz = new quizify(data, options = null);
                    
                

Example Quiz Data

Here is an example of quiz data to initialise your quiz with.

                    
[
    {
        id: 1,
        content: 'Which of the following will result in the answer 2?',
        weight: 5,
        answer_limit: null,
        answers: [
            {
                id: 1,
                content: '1 + 1',
                is_correct: true
            },
            {
                id: 2,
                content: '2 - 1 + 3',
                is_correct: false
            },
            {
                id: 3,
                content: '4 / 2',
                is_correct: true
            },
            {
                id: 4,
                content: '42 / 42 + 2',
                is_correct: false
            }
        ]
    },
    ...
];
                    
                

Options

These are the options avaiable when constructing a new quiz via the quizify constructor. These are the defaults

                    
{
    /**
     * Should the questions be shuffled
     */
    shuffle: true,
    /**
     * Should the answers be shuffled
     */
    shuffleAnswers: true,
    /**
     * Limit the total questions presented to
     */
    limitQuestionsTo : null,
    /**
     * The class to attach to the question container
     */
    questionContainerClass : 'quizify-question-container',
    /**
     * The class to attach to the ul answer list
     */
    answerListClass : 'quizify-answer-list',
    /**
     * The class to attach to the li answer
     */
    answerListItemClass : 'quizify-answer-list-item',
    /**
     * The class to attach to the next button
     */
    questionNextButtonClass : 'quizify-button-next'
}
                    
                

Usage

This is an example usage of quizify.

                        
var simpleQuiz = [
{
    id: 1,
    content: 'True or false? Dogs are herbivores.',
    weight: 5,
    answer_limit: null,
    answers: [
        {
            id: 1,
            content: 'False, they are omnivores.',
            is_correct: true
        },
        {
            id: 2,
            content: 'True, they are herbivores.',
            is_correct: false
        }
    ]
},
{
    id: 2,
    content: 'What is the chemical symbol for the element oxygen?',
    weight: 5,
    answer_limit: 6,
    answers: [
        {
            id: 3,
            content: 'Ox',
            is_correct: false
        },
        {
            id: 4,
            content: 'O',
            is_correct: true
        },
        {
            id: 5,
            content: 'Oxy',
            is_correct: false
        },
        {
            id: 6,
            content: 'o2',
            is_correct: false
        }
    ]
}];

document.addEventListener('DOMContentLoaded', function () {
    // the container that houses our quiz
    var quizContainer = document.getElementById('quizContainer');

    // a new quizify object
    var quiz = new quizify(simpleQuiz, {
        questionNextButtonClass: 'pure-button pure-button-primary'
    });

    // listen for an answer selected event on quizify, and then proceed to either the next
    // question or the result
    quiz.addEventListener('answerSelected', handleQuizMoveToNext);

    function handleQuizMoveToNext() {
        // get the next question from the quizfy object
        var question = quiz.getNext();

        // remove all children  in container
        while (quizContainer.hasChildNodes()) {
            quizContainer.removeChild(quizContainer.lastChild);
        }

        // do logic specific to a question here
        if (question.type === 'question')
            quizContainer.appendChild(question.data.dom_node);
        // do logic specific to a result here, you might for 
        // instance want to post the results to a server endpoint
        else if (question.type === 'result'){
            quizContainer.appendChild(question.data.dom_node);
        }            
    }

    // call once on startup
    handleQuizMoveToNext();
});