Documentation

Description

The Quiz module is used for creating a single-choice test. When the user selects the wrong answer, the test will end. The module allows adding hints to questions and using the 50/50 type of assistance.

Properties

The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.

Supported commands

Show Answers

This module is fully compatible with the Show Answers module and displays correct answers when a relevant event is sent.

Events

When the user answers all questions properly, the module sends the 'ALL OK' event. This event is different from a normal event, so its structure is shown below.

When the user selects the answer, the module sends the 'ValueChanged' event. This event has a score of 1 if the answer is correct, otherwise it's 0. The event also has an item, which is the number of the current question.

Configuration

The module needs at least one fully configured question to appear correctly. If the "Show help buttons" option is marked, each question needs to have a specified hint. Otherwise, the hint is not required.

CSS classes

Example quiz styles

.addon_Quiz {
    width: 750px !important;
    height: 300px !important;
}

/* question title */
.question-wrapper .question-title {
    display: table-cell;
    width: 740px;
    text-align: center;
    height: 60px;
    margin: 5px 0;
    padding: 5px 0;
    vertical-align: middle;
    box-shadow: 0 0 0 3px #fff;
    background-color: #2a8edc;
    border-radius: 50px;
    color: #fff;
    font-size: 18px;
    line-height: 28px;
}

/* question tips */
.question-wrapper .question-tips {
    width: 100%;
    height: 135px;
    margin-top: 20px;
}

.question-wrapper .question-tips .question-tip {
    float: left;
    width: 343px;
    height: 28px;
    border-radius: 50px;
    margin: 5px 5px 0 0;
    padding: 10px;
    background-color: #57a6e2;
    border: solid 3px #fff;
    color: #fff;
    font-size: 18px;
    line-height: 28px;
}

.question-wrapper .question-tips .question-tip.wrong {
    color: #fff;
    font-size: 18px;
    background-color: #aa0000;
}

.question-wrapper .question-tips .question-tip.correct {
    color: #fff;
    background-color: #4CAF50;
}

/* question feedback */
.question-wrapper .question-hint-wrapper {
    height: 75px;
    width: 740px;
    background-color: #fff;
    border-radius: 100px;
}

.question-wrapper .game-lost-message-wrapper,
.question-wrapper .game-won-message-wrapper,
.question-wrapper .question-hint {
    display: table-cell;
    vertical-align: middle;
    border-radius: 100px;
    width: 740px;
    height: 75px;
    color: #fff;
    text-align: center;
    font-size: 18px;
}

/*question hint buttons*/
.question-wrapper .question-hint-buttons {
    width: 740px;
    position: absolute;
    top: 315px;
}

.question-wrapper .next-question-button {
    text-indent: -9999px;
    background-image: url(/file/serve/5800091593867264);
    background-size: 34px 34px;
    background-position: center center;
    border-radius: 50%;
    background-repeat: no-repeat;
}

.question-wrapper .hint-button,
.question-wrapper .fifty-fifty {
    background-image: url(/file/serve/4715951553380352);
    background-size: 34px 34px;
    background-position: center center;
}

.question-wrapper .fifty-fifty {
    background-image: url(/file/serve/4683842109440000);
    background-size: 54px 54px;
}

.question-wrapper .fifty-fifty,
.question-wrapper .hint-button,
.question-wrapper .next-question-button {
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

.question-wrapper .quiz-progress {
    position: absolute;
    left: 350px;
    width: 64px;
    height: 64px;
    border-radius: 3px;
    line-height: 65px;
    color: #fff;
    background-color: cadetblue;
    border-radius: 50%;
    text-align: center;
    font-size: 18px;
}

.question-wrapper .hint-button,
.question-wrapper .fifty-fifty {
    float: left;
    margin-right: 15px;
}

.question-wrapper .fifty-fifty {
    background-color: #e59d14;
}

.question-wrapper .hint-button {
    background-color: #e354b6;
}

.question-wrapper .next-question-button {
    background-color: #4caf50;
}

.question-wrapper .question-hint {
    background-color: #e354b6;
}

.shape_quiz {
    background-color: #011645;
}

Demo presentation

Demo presentation contains examples of how to use the Quiz module.