Documentation

Quiz

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.

The demo presentation is available here.

Properties

Property name Description
Is visible This property allows hiding or showing the module depending on the activity requirements.
Questions This property contains a list of questions. Each question must have a specified Question topic, a CorrectAnswer and three wrong answers. If the module is configured to show help buttons, each question also needs to have a specified Hint.
Show help buttons If this property is marked, in the module area the buttons "50/50" and "Show Hint" are displayed. Each button can be used once in a whole excersise – no matter how many questions are put.
Game lost message Information that appears when a user selects the wrong answer.
Game won message Information that appears when a user gives proper answers to all questions.
Is activity This property allows defining whether the quiz module is an activity or not. When it is not defined as an activity, the answers given are not taken into account in the overall result. It is helpful for e.g. simulations.
Next label The text which appears on the "Next" button

Supported commands

Command name Params Description
isAllOK --- Returns true when all questions are answered correctly, otherwise false.
isAttempted --- Returns true if a user has made any interaction with the module, false otherwise.
show --- Shows the module.
hide --- Hides the module.
enable --- Enables the module.
disable --- Disables the module.
reset --- Resets the module.

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.

Field name Description
Item all
Value N/A
Score N/A

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.

Field name Description
source ID of this instance of the addon.
Item The number of a currently answered question.
Value 1
Score 1 - answered correctly
0 - answered incorrectly

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

Class name Description
.question-wrapper the main addon's layer
.question-wrapper .question-title indicates the style that applies to the question content
.question-wrapper .hint-button indicates the style that applies to the "Hint" button
.question-wrapper .fifty-fifty indicates the style that applies to the "50/50" button
.question-wrapper .next-question-button indicates the style that applies to the inactive "Next question" button
.question-wrapper .next-question-button.active indicates the style that applies to the active "Next question" button
.question-wrapper .question-tips indicates the style that applies to a layer with possible answers
.question-wrapper .question-hint-buttons indicates the style that applies to a layer with special buttons (Next Button, Hint, 50/50)
.question-wrapper .question-hint-buttons .used indicates the style that applies to the inactive Hint and/or 50/50 buttons
.question-wrapper .removed indicates the style that applies to a possible answer removed by the 50/50 hint.
.question-wrapper .question-tips .question-tip indicates the style that applies to each possible answer
.question-wrapper .question-tips .question-tip.correct indicates the style that applies to a correct answer
.question-wrapper .question-tips .question-tip.wrong indicates the style that applies to a wrong answer
.question-wrapper .question-hint-wrapper indicates the style that applies to a wrapper of a feedback area
.question-wrapper .question-hint indicates the style that applies to a layer with a hint to a current question, placed in a feedback area
.question-wrapper .game-won-message-wrapper indicates the style of the overlay placed in feedback area, when game is won.
.question-wrapper .game-won-message indicates the style of a layer placed in a feedback area with "Game Won Message"
.question-wrapper .game-lost-message-wrapper indicates the style of an overlay placed in a feedback area, when a game is lost.
.question-wrapper .game-lost-message indicates the style of a layer placed in a feedback area with "Game Lost Message"
.question-wrapper .question-tips .question-tip.correct-answer indicates the style that applies to a correct possible answer in the "Show Answers" mode
.question-wrapper .quiz-progress indicates the style that applies to a layer with information about progress
.question-wrapper.disabled indicates the style that applies to the module when it is disabled

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.