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 | List of speech texts: Selected, Deselected, Replaced with, Correct, Wrong. This text will be read by the Text to Speech module after the user performs a certain action. |
| 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. |
| show | --- | Shows the module if it is hidden. |
| hide | --- | Hides the module if it is visible. |
| reset | --- | Resets the module. |
Events
The Ordering sends 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 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 showing how to use the Ordering module.