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.

Properties

Property name Description
Is visible This property allows to hide or show the module depending on the activity requirements.
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.

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.
shows --- show module
hides --- hide 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.