@haztivity/hz-quiz v0.7.5-beta.11

hz-quiz

hz-quiz is an haztivity resource to create quiz.\ hz-quiz uses jqQuiz under the hood.

Install

NPM

npm i --save @haztivity/hz-quiz

Dependencies

• JQuery
• jqQuiz
• @haztivity/core

Usage

1. Import @haztivity/hz-quiz
2. Add HzQuizResource to the page
3. Create the quiz structure with HTML or Pug
4. Set data-hz-resource="HzQuiz"

Ts

import {PageFactory, Page, PageController, PageRegister} from "@haztivity/core";
import template from "./page.pug";
import {HzQuizResource} from "@haztivity/hz-quiz";
export let page: PageRegister = PageFactory.createPage(
    {
        name: "myPage",
        resources: [
            HzQuizResource
        ],
        template: template
    }
);

Pug

include node_modules/jqQuiz/dist/jq-quiz
+jq-quiz({
    id:"myQuiz",
    attributes:{
        "data-hz-resource":"HzQuiz"
    },
    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"
            }
        ]
    }
})

or

HTML

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

Options

jqQuiz options

All the options of jqQuiz quiz except functions could be specified by attributes using:

    data-opt-jq-quiz-[option]=[value]

If the option have multiple words, use dashes, for example pointsForSuccess have to be provided as points-for-success\ For more info please visit jqQuiz

HzQuiz options

HzQuiz provides specific options for the integration quiz haztivity.