Documentation

Description

The Quiz module allows creating a single choice test. When a user selects the wrong answer – the test will end. The module allows you to add hints to questions and use 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 Show Answers module and displays correct answers when a relevant event is sent.

Events

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

When a user selects the answer, the addon sends the 'ValueChanged' event. This event has score 1 if the answer is correct, otherwise 0. The event has also 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 addon.