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 0. The event also has an item, which is the number of a current question.

Configuration

The module expects 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

Default styles:

.quiz-error-layer {
    color: #FF0000;
    background-color: #FFFFFF;
    width:100%;
    height: 100%;
}

.question-wrapper {
    width: 100%;
    height: 100%;
}

.question-wrapper .question-title {
    text-align: center;
    height: 33%;
}

.question-wrapper .hint-button {
    background: url("resources/hint.png");
    width: 60px;
    height: 60px;
    cursor: pointer;
    float: right;
}

.question-wrapper .fifty-fifty {
    background: url("resources/50-50.png");
    width: 60px;
    height: 60px;
    cursor: pointer;
    float: right;
}

.question-wrapper .next-question-button {
    width: 60px;
    height: 60px;
    cursor: default;
    float: right;
    opacity: 0.5;
}

.question-wrapper .next-question-button.active {
    cursor: pointer;
    opacity: 1;
}

.question-wrapper .question-tips {
    display: inline-block;
    width: 80%;
    float: left;
    height: 34%;
}

.question-wrapper .question-hint-buttons {
    display: block;
    width: 20%;
    float: right;
}

.question-wrapper .question-hint-buttons .used {
    opacity: 0.5;
    cursor: default;
}

.question-wrapper .removed {
    opacity: 0.5;
}

.question-wrapper .question-tips .question-tip {
    display: inline-block;
    cursor: pointer;
    width: 50%;
    height: 50%;
}

.question-wrapper .question-tips .question-tip.correct {
    background-color: greenyellow;
}

.question-wrapper .question-tips .question-tip.wrong {
    background-color: #A52A2A;
}

.question-wrapper .question-hint-wrapper {
    height: 33%;
    width: 80%;
    float: left;
    display: block;
}

.question-wrapper .question-hint {
    background-color: #FFFF00;
    color: #000000;
    width: 100%;
    height: 100%;
}

.question-wrapper .game-won-message-wrapper {
    background-color: #00aa00;
    color: #ffffff;
    width: 100%;
    height: 100%;
}
.question-wrapper .game-won-message {
    text-align: center;
}

.question-wrapper .game-lost-message-wrapper {
    background-color: #aa0000;
    color: #ffffff;
    width: 100%;
    height: 100%;

}
.question-wrapper .game-lost-message {
    text-align: center;
}

.question-wrapper.disabled,
.question-wrapper.disabled .hint-button,
.question-wrapper.disabled .fifty-fifty,
.question-wrapper.disabled .question-tips .question-tip {
    cursor: not-allowed;
}

.question-wrapper .question-tips .question-tip.correct-answer {
    background-color: #99FF55;
}

.question-wrapper .quiz-progress {
    width: 60px;
    float: right;
    text-align: center;
}

Demo presentation

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