Documentation

Choice

Description

The Choice module enables the creation of a multiple or a single Choice activity. In the multiple Choice activity, it is possible to give more than one correct answer, whereas in the single Choice, only one option is correct. The Choice module enables the setting of multiple numbers of choice options which can be defined either by texts or by images.

The activity layout is vertical by default, but if needed, it is possible to place it horizontally thanks to the CSS styling.

The module also enables the establishment of different values for the correct answers, e.g., the answer marked as "2" will generate more points than the answer marked as "1". Both of them are correct but one of them is worth more points than the other.

The Choice module also allows inserting simple audio controls. They add the possibility of playing and stopping a sound. Though there may be more than one audio in the text module, only one sound can be played simultaneously.
To add an audio control, use the "Insert Audio" button on the toolbar of the text editor.
Adding the audio control is also possible using \audio{URL} syntax, where URL is the URL of the audio resource.

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.

Property name Description
Is multi Indicates whether the activity is a multiple or single Choice activity. For the single Choice activity, it is enough to leave the box unchecked.
Item This section allows entering all the Choice options in the "Text" field and marking the correct answer(s) as "1" in the "Value" field. The options which are not correct should be marked as "0". Item count serves to indicate the number of options in the activity.
Is disabled Allows disabling the module so that the user is not able to interact with it.
Is activity This property allows defining whether the Choice 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 useful e.g. for simulations.
Random Order If this property is checked, items in the Choice module will appear in a random order every time the lesson's page is reloaded.
Horizontal Layout If this property is checked, the Choice module will be displayed horizontally.
Lang attribute This property allows defining the language for this module (different than the language of the lesson).
Speech texts Sets the values of speech texts - predefined phrases providing additional context while using the module in the Text To Speech mode. Speech texts are always read using the content's default language.
Printable Allows to choose if the module should be included in the printout.

Supported commands

Command name Params Description
disable - Disables the module.
enable - Enables the module.
hide - Hides the module if it is visible.
show - Shows the module if it is hidden.
reset - Resets the module.
isAttempted - Returns true if the Choice has at least one option selected.
isAllOK - Returns "true" if all answers are selected correctly, otherwise "false".
markOptionAsCorrect index Sets the correct CSS style.
markOptionAsWrong index Sets the wrong CSS style.
markOptionAsEmpty index Sets the empty CSS style.
isOptionSelected index Returns "true" if a given option is selected.

Events

OnValueChanged Event

This event contains the following fields

Field name Description
Source module id
Item last changed option id
Value new value 1 or 0
Score Choice item score

AllOk Event

This event contains the following fields

Field name Description
Source module id
Item last changed option id
Value N/A
Score N/A

Supported commands

Command name Params Description
markOptionAsCorrect index - 1-based index of option Marks the option as correct.
markOptionAsWrong index - 1-based index of option Marks the option as wrong.
markOptionAsEmpty index - 1-based index of option Marks the option as empty.
show Shows the module if it is hidden.
hide Hides the module if it is visible.
reset Clears out all answers selected in the module.
isAttempted Returns "true" if the Choice has at least one option selected.

Show Answers

This module is fully compatible with Show Answers module and displays correct answers when an adequate event is sent.

CSS classes

Class name Description
.ic_moption Indicates the look of the multiple Choice option.
.ic_moption-up Indicates the look of the unselected multiple Choice option.
.ic_moption-up-hovering Indicates the look of the multiple Choice selected option while putting a mouse cursor on it.
.ic_moption-down Indicates the look of the multiple Choice option while selecting it.
.ic_moption-down-hovering Indicates the look of the multiple Choice selected option while putting a mouse cursor on it
.ic_moption-up-correct Indicates the look of the correct multiple Choice option — unselected.
.ic_moption-up-wrong Indicates the look of the incorrect multiple Choice option — unselected.
.ic_moption-down-correct Indicates the look of the correct multiple Choice option — selected.
.ic_moption-down-correct-answer Indicates the look of the correct answer in the multiple Choice option after the ShowAnswers event was sent.
.ic_moption-down-wrong Indicates the look of the incorrect multiple Choice option — selected.
.ic_soption Indicates the look of the single Choice option.
.ic_soption-up Indicates the look of the single Choice option while putting a mouse cursor on it.
.ic_soption-up-hovering Indicates the look of the single Choice option while putting a mouse cursor on it.
.ic_soption-down Indicates the look of the single Choice option while selecting it.
.ic_soption-down-hovering Indicates the look of the single Choice selected option while putting a mouse cursor on it.
.ic_soption-up-correct Indicates the look of the correct single Choice option — unselected.
.ic_soption-up-correct-answer Indicates the look of the correct single Choice option — unselected.
.ic_soption-up-wrong Indicates the look of the correct answer in the single Choice option after the ShowAnswers event was sent.
.ic_soption-down-correct Indicates the look of the correct single Choice option — selected.
.ic_soption-down-wrong Indicates the look of the incorrect single Choice option — selected.
ic_soption-markedAsCorrect Indicates the look of the correct single Choice option — it's not important if the option is or isn't selected.
ic_soption-markedAsWrong Indicates the look of the wrong single Choice option — it's not important if the option is or isn't selected.

Examples

1.1. Single Choice:
.ic_soption{
background-position: right center;
background-repeat: no-repeat;
cursor: pointer;
padding-right: 59px;
font-family: Arial;
line-height: 20px;
font-size: 18px;
color: #717171;
}

1.2. Single Choice — up:
.ic_soption-up{
background-image:url('/file/serve/262420');
}

1.3. Single Choice — down:
.ic_soption-down{
background-image:url('/file/serve/263409');
}

1.4. Single Choice — up-correct:
.ic_soption-up-correct{
background-image:url('/file/serve/260411');
}

1.5. Single Choice — down-correct:
.ic_soption-down-correct{
background-image:url('/file/serve/258368');
}

1.6. Single Choice — down-wrong:
.ic_soption-up-wrong{
background-image:url('/file/serve/260411');
}

1.7. Single Choice — down-wrong:
.ic_soption-down-wrong{
background-image:url('/file/serve/258369');
}

1.8. Single Choice — up-wrong:
.ic_soption-up-hovering{
background-image:url('/file/serve/262420');
}

1.9. Single Choice — down-hovering:
.ic_soption-down-hovering{
background-image:url('/file/serve/263409');
}

2.1. Multiple Choice:
.ic_moption{
background-position: right center;
background-repeat: no-repeat;
cursor: pointer;
padding-right: 59px;
font-family: Arial;
line-height: 20px;
font-size: 18px;
color: #717171;
}

2.2. Multiple Choice — up:
.ic_moption-up{
background-image:url('/file/serve/256387');
}

2.3. Multiple Choice — down:
.ic_moption-down{
background-image:url('/file/serve/262418');
}

2.4. Multiple Choice — up-correc:
.ic_moption-up-correct{
background-image:url('/file/serve/262419');
}

2.5. Multiple Choice — down-correc:
.ic_moption-down-correct{
background-image:url('/file/serve/263405');
}

2.6. Multiple Choice — up-wrong:
.ic_moption-up-wrong{
background-image:url('/file/serve/262419');
}

2.7. Multiple Choice — down-wrong:
.ic_moption-down-wrong{
background-image:url('/file/serve/263408');
}

2.8. Multiple Choice — up-hovering:
.ic_moption-up-hovering{
background-image:url('/file/serve/256387');
}

2.9. Multiple Choice — up-hovering:
.ic_moption-down-hovering{
background-image:url('/file/serve/262418');
}

Keyboard navigation

Tab – navigation between modules.
Space – accept the choice option.

Demo presentation

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