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 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 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.