Documentation
Source list
Description
Source list is closely related to Text and Multigap modules. It enables to insert 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 can 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 the same or different size, depending on the CSS style used.
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 text to be displayed in the module. Each item should be placed in a seperate line. |
| Removable | This property indicates whether texts are to be removed from a source list after being inserted into a text module. |
| Vertical | This property indicates whether the source list is in a vertical or horizontal position. |
| Random order | This property indicates whether the source list items are to be displayed in random order. |
| 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. This texts will be read by Text to Speech addon after a user performs an action. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| reset | --- | Reset a module. |
| getItem | index – 1-based index of item in a module | Returns item (text) with a given index. The order is based on the module configuration and does not change when '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** | "sample text" will be written in bold. |
| __sample text__ | "sample text" will be written in italics. |
Events
The Source List addon sends ItemSelected type of events to Event Bus when a user selects an object.
| Field name | Description |
|---|---|
| Type | It's a string representation of a selected object type. |
| Value | The Value is the file path. |
| Item | It's a name of a selected item. |
The Source List addon sends ItemConsumed type of events to Event Bus when a user consumes the object.
| Field name | Description |
|---|---|
| Type | It's a string representation of a consumed object type. |
| Value | The Value is the file path. |
| Item | It's a name of a consumed object. |
The Source List addon sends ItemReturned type of events to Event Bus when a user returns the object.
| Field name | Description |
|---|---|
| Type | It's a string representation of a returned object type |
| Value | The Value is the file path. |
| Item | It's a name of a returned object. |
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 elements
- Space - select a current element
Demo presentation
Demo presentation contains examples of the addon's usage.