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 the 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 is used 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 the Source List after being inserted into another module. |
| Vertical | This property indicates whether the Source List is displayed in the vertical or horizontal position. |
| Random order | Marking this property displays the Source List's items in a random order. |
| Speech texts | Sets the values of speech texts - predefined phrases providing additional context while using the module in the Text To Speech mode. Speech texts are always read using the content's default language. |
| 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. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| reset | --- | Resets the module. |
| getItem | index – 1-based index of item | 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 the 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 the 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 the 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 contains examples of how to use the Source List module.