Login Register

Documentation

Ordering

Description

The Ordering module enables inserting a ready-made activity template with different, pre-defined items that can be either texts or images. All the elements are automatically disarranged and are to be put in the correct order. Each time the page is re-entered or the activity is reset, a new random order is generated. It is possible to place the items either vertically or horizontally, depending on the activity type.

The module allows defining the content and the correct order of multiple items. By default, the correct answers are not counted individually, the Ordering activity is to be solved right or wrong as a whole. However, it is possible to define more than one correct order.

The Ordering 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 Vertical This property indicates whether the Ordering module is in a vertical or horizontal position.
Ordering item This property indicates the number of items in the Ordering activity and allows defining the content of these items. The "Starting position" allows setting the incorrect position in which the item should always be displayed after the activity is generated. The starting position value should be an integer higher than 0 and lower or equal to the items count.
Alternative Correct Order This property allows you to insert an alternative order of the items, e.g., if the correct order is item 3, item 2, item 1, then it should be entered like this: 3,2,1. Of course, the default order doesn't have to be typed in and it is always active. Numbers cannot be larger than the number of items.
Is activity This property allows defining whether this 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 e.g. for simulations.
Even width for all elements If this property is selected, all items will have the same width.
Gradually Score This property allows defining the score calculation. If the property is checked, the max score is equal to the number of items, and the score equals the correct answer divided by the max score.
Disable dragging If this property is marked, the user needs to select one item and then another one with which the first item should switch its position.
Don't generate correct order If this property is selected, the generated order will never be correct.
Show all answers in gradual show answers mode If this property is marked, then the Gradual Show Answer module displays the complete solution after using this button only once.
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.
Lang attribute This property allows defining the language for this module (different than the language of the lesson).
Printable Allows to choose if the module should be included in the printout.
Block splitting in print If this checkbox is marked, and the "Don't randomize" or "Randomize" option is selected in the Printable property, then if the entire module will not fit on the printed page (Print preview), it will be moved to the next printed page.
Disable axis lock When selected, it allows the items to be dragged both horizontally and vertically.

Supported commands

Command name Params Description
isAllOK --- Returns "true" if all items are in the correct order, otherwise "false".
isAttempted --- Returns "true" if the user tries to solve the module. This command is not available if the module has the 'Is Activity' property deselected.
hide --- Hides the module if it is visible.
show --- Shows the module if it is hidden.
reset --- Resets the module.

Events

The Ordering sends the ValueChanged type events to the Event Bus when the user changes the position of any element.

Field name Description
Item Element's (index) position before movement.
Value Element's (index) position after movement.
Score Module's score after movement.

Show Answers

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

CSS classes

Class name Description
.ic_ordering Indicates the external look not related to the Ordering draggable items, e.g., the background behind the items. In the case of standard styling, this CSS class will not have any style. If the class does not have a complete definition, it should be entered as empty.
.ice_even_width CSS class added to the same element that has the .ic_ordering CSS class when using the presentation's editor and when the property "Even width for all elements" is checked. This class allows freely changing the width and height of the module.
.ic_ordering-item Indicates the look of the stationary item.
.ic_ordering-item-correct Indicates the look of an item marked as correct.
.ic_ordering-item-wrong Indicates the look of an item marked as wrong.
.ic_drag-source Indicates the look of a single item ready to be dragged to the proper place.
.correct-answer Indicates the look of an item in the show answers mode.

Examples

1.1. Ordering
.ic_ordering{
}

1.2. Ordering item
.ic_ordering-item{
margin: 5px;
padding: 4px;
border: 2px solid #66cc33;
border-radius: 3px;
background-color: #66cc33;
font-size: 16px;
color: #ffffff;
font-family: Verdana;
height: 18px;
line-height: 18px;
text-align: center;
}

1.3. Ordering item — drag source
.ic_drag-source{
background-color: #38c8d3;
border: 2px solid #38c8d3;
}

1.4. Ordering item — correct
.ic_ordering-item-correct{ border: 2px solid green; }

1.5. Ordering item — wrong
.ic_ordering-item-wrong{
border: 2px solid red;
}

Demo presentation

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