jqQuiz

jqQuiz is a jquery widget for create quizzes

Features

• Easy creation with PUG mixins
• Super HTML customization
• A lot of options to customize the behavior:
  • Immediate feedback, show to the user if the answer is correct or incorrect immediately
  • After end the quiz, show the correction of each question
  • Customizable feedback messages for questions and options
  • Show a result dialog at the end with info like the score, feedback, number of success, fails, questions without answer
  • Points to sum if the answer is correct
  • Points to substract if the answer is incorrect
  • Posibility of disable navigation until answer correctly (for pedagogical pruposes) See the options
• It's free! Beautiful word, right?.
• Created with jquery ui widget factory. For more info see widget factory

Installation

NPM

npm i -s jq-quiz
We have plans to support bower soon.
You also could download the last release from github

Simple usage

Include the jqQuiz mixin and call it with some questions and init the plugin in the same way that any other jquery plugin. Voila!
If you don't want to use Pug you could use HTML like always. Please go here

Pug

There are several ways to use the pug mixins, the simplest is call the main mixin jq-quiz with a JSON of config, but also is possible use the sub mixins and have more control over the elements. Please go here

//-Include the jqQuiz mixin from node_modules/jqQuiz/dist
include node_modules/jqQuiz/dist/jq-quiz
+jq-quiz({
    id:"myQuiz",
    header:{
        title:"My quiz", //title for the quiz
        description:"Description for my quiz", //a description for the student
        actions:[ //actions when the quiz has not been started
            {
                type:"start", //the type of the action, for more info please go to the actions section
                content:"Start the quiz" // The content for the button
            }
        ]
    },
    body:{
        //the questions
        questions:[
            {
                content:"Some question",
                options:[
                    {
                        name:"q1",//all the options of the same question must has the same name
                        content:"Incorrect",//text for the option
                        isCorrect:false //set if is the correct option
                    },
                    {
                        name:"q1",
                        content:"Correct",
                        isCorrect:true
                    }
                ]
            }
        ],
        //available actions during the quiz.
        actions:[
            {
                type:"end", //the type of the action, for more info please go to the actions section
                content:"End the quiz" // The content for the button
            }
        ]
    },
    //jquery ui dialog result
    result:{
        items: [
            {
                type: "success ? Perfect! : Ohhh, try again"
            }
        ]
    }
})

HTML

If you use HTML you must provide the data-jq-quiz-* attributes.

<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>

Then call the plugin like any other jquery plugin

$("#myQuiz").jqQuiz();

The result is:

Next:

structure & roles