Documentation
Source list
Description
The Source List module is closely related to the Text and Multiple Gap modules. It enables inserting a ready-made list of text items to be put into a draggable gap activity. The elements can also be filled in with mathematical or chemical formulas thanks to the LaTeX scripting language.
Each item in the Source List can match more than one draggable gap and the already selected elements can either be removed from a Source List or remain in the module.
Depending on the activity type, it is possible to place the items either vertically or horizontally.
Of course, it is possible to alter the look of the individual items included in the Source List. All elements can be of the same or different size, depending on the used CSS style.
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 |
|---|---|
| Items | This property serves for inserting texts to be displayed in the module. Each item should be placed in a separate line. |
| Removable | This property indicates whether the items are to be removed from a Source List after being inserted into another module. |
| Vertical | This property indicates whether the Source List is displayed in a vertical or horizontal position. |
| Random order | Marking this property displays the Source List's items in a random order. |
| Speech texts | List of speech texts: Selected, Deselected. 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 Text module will not fit on the printed page (Print preview), it will be moved to the next printed page. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| reset | --- | Resets the module. |
| getItem | index – 1-based index of item in a module | Returns the item (text) with a given index. The order is based on the module configuration and does not change when the 'Random order' option is selected. |
Markup
It is possible to format all text items included in the Source List by using simple markup language:
| Syntax | Description |
|---|---|
| **sample text** | The "sample text" will be written in bold. |
| __sample text__ | The "sample text" will be written in italics. |
Events
The Source List module sends ItemSelected type of events to the Event Bus when the user selects an item.
| Field name | Description |
|---|---|
| Type | It's a string representation of the selected item's type. |
| Value | The Value is the file path. |
| Item | It's the name of the selected item. |
The Source List module sends ItemConsumed type of events to the Event Bus when the user consumes the item.
| Field name | Description |
|---|---|
| Type | It's a string representation of the consumed item's type. |
| Value | The Value is the file path. |
| Item | It's the name of the consumed item. |
The Source List module sends ItemReturned type of events to the Event Bus when the user returns the item.
| Field name | Description |
|---|---|
| Type | It's a string representation of a returned item's type. |
| Value | The Value is the file path. |
| Item | It's the name of the returned item. |
CSS classes
| Class name | Description |
|---|---|
| ic_sourceListItem | Indicates the look of the items included in the Source List. |
| ic_sourceListItem-selected | Indicates the look of the item selected in the Source List. |
Examples
.ic_sourceListItem {
background-color: #38c8d3;
border: 1px solid #38c8d3;
border-radius: 4px;
cursor: pointer;
display: inline;
margin-right: 10px;
padding: 4px;
text-align: center;
font-size: 16px;
color: #ffffff;
font-family: Verdana;
font-weight: bold;
}
.ic_sourceListItem-selected {
background-color: orange;
cursor: pointer;
border: 1px solid orange;
}
Keyboard navigation
- Tab – move between the items
- Space - select the current item
Demo presentation
Demo presentation showing how to use the Source List module.