Documentation
Ordering
Description
The Ordering module enables to insert a ready-made activity template with different, pre-defined items which can be determined either by texts or by 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 to indicate multiple items, their content and of course the correct order. 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 "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 to insert texts describing these elements and to define optional position, on which item should always be placed during randomizing order. Starting position value should be integer higer than 0 and lower or equal to 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 amount of items. |
| Is activity | This property allows to define 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 for e.g. simulations. |
| Even width for all elements | If this property is selected all option will have the same width. |
| Graduate Score | This property allows defining the score calculation. If the property is checked, max score equals to the number of items items, and score equals to the correct answer divided by max score. |
| Don't generate correct order | If this property is selected the generated order will not be correct. |
| Lang attribute | This property allows to define the language for this addon (different than the language of the lesson). |
| Speech texts | List of speech texts: Selected, Deselected, Replaced with, Correct, Wrong. This texts will be read by Text to Speech addon after a user performs an action. |
| Disable axis lock | When selected, it allows the items to be dragged also vertically. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| isAllOK | --- | Returns true if all items are in correct order, otherwise false. |
| isAttempted | --- | returns true if user tries to solve module. This command is not available if module has 'Is Activity' property deselected. |
| show | --- | shows module |
| hide | --- | hides module |
| reset | --- | resets module |
Events
Ordering sends ValueChanged type events to Event Bus when a user changes the position of any element.
| Field name | Description |
|---|---|
| Item | Element (index) position before movement |
| Value | Element (index) position after movement |
| Score | Module score after movement |
Show Answers
This module is fully compatible with Show Answers module and displays correct answers when 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 case of a 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. |
| .ic_ordering-item | indicates the look of a stationary items |
| .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 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 the addon's usage.