Documentation
Multiple Gap
Description
Multiple Gap module constitutes a box where multiple Image Sources or text items from Source Lists should be inserted.
Properties
| Property name | Description |
|---|---|
| Orientation | Indicates if elements placed in the Multiple Gap should have horizontal or vertical alignment |
| Source type | Indicates if the Multiple Gap should accept content from Image Lists (choose "texts"), Image Sources (choose "images"), or MultiAudio modules (choose "audio") |
| Items | List of identifiers of items that are considered as valid answers. In case of Source type set to "images" just define a list of module IDs as they are shown in Modules list in the editor. In case of Source type set to "texts", answer identifier consists of Source List ID concatenated with dash and answer number counted from 1. For instance, if you have placed Source List with ID "MySourceList" and you want to indicate its third text as valid answer, put "MySourceList-3" in this property. Similarly, in case of Source type set to "audio", the answer identifier consists of the MultiAudio module's ID concatenated with dash and the ID of the answer's item ID. |
| Item width | Width in pixels of each item placed into this Multiple Gap |
| Item height | Height in pixels of each item placed into this Multiple Gap |
| Item spacing | Space in pixels between each item placed into this Multiple Gap |
| Stretch images? | In case of Source type set to "images", indicates if images have to be stretched to fit dimensions defined with Item width and Item height |
| Item horizontal align | Indicates how to horizontally align contents within the placeholders |
| Item vertical align | Indicates how to vertically align contents within the placeholders |
| Maximum item count | The amount of items that can be put into multiple gap |
| Is not an activity | With this option selected addon is not an activity, therefore it doesn't mark (in)correct answers and it doesn't return score points (maximum, score and error count) |
| Number of repetitions | This option allows you to define the number of elements needed for the answer to be deemed correct. It doesn't matter which elements have been inserted. |
| ID repeated element | This property allows you to define the element to show when the show answers mode is active. |
| Block wrong answers | With this option checked, wrong answers are removed and the "on wrong" event is sent. |
| Wrap items | With this option checked, all elements are wrapped in columns or rows depending on the orientation property selected. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| countItems | --- | Returns the current number of item places in a gap |
| isAllOK | --- | Returns true if all answers are selected correctly and there are no mistakes, otherwise false. |
| isAttempted | --- | Returns true if there is at least one item in a gap |
Show Answers
This module is fully compatible with Show Answers module and displays correct answers when a relevant event is sent.
Advanced Connector integration
Each command supported by the Multiple Gap addon can be used in the Advanced Connector addon scripts. The below example shows how to display current items count in the Text module.
EVENTSTART
Source:Multiple_Gap_Development1
SCRIPTSTART
var gap = presenter.playerController.getModule('multiplegap1');
var text1 = presenter.playerController.getModule('Text1');
var itemsCount = gap.countItems();
text1.setText('Items count: ' + itemsCount);
SCRIPTEND
EVENTEND
Scoring
By default, the Multiple Gap addon allows to create exercises as well as activities. To set a module in a non-excercise mode, it is necessary to set the 'Is not an activity' property. If the addon is not in an excercise mode, all of the below methods return 0!
| Property | Description |
|---|---|
| maxScore | Number of answer items |
| score | 1 point for each correctly inserted element |
| errorCount | 1 error point for each incorrectly inserted element |
Events
Multiple Gap sends events compatible with both Connector and Advanced Connector modules. When an element is added or removed, it sends an event with following arguments:
| Field name | Description |
|---|---|
| Item | added item's ID, specified in the same way as in the Items property |
| Value | "add" if an element has been added, "remove" if an element has been removed |
| Score | always "1" |
When a user properly places all items without any error, the addon sends the 'ALL OK' event. This event is different from a normal event so its structure is shown below.
| Field name | Description |
|---|---|
| Item | all |
| Value | N/A |
| Score | N/A |
CSS Classes
| Property name | Description |
|---|---|
| .multiplegap_container | Outer container of a whole Addon |
| .multiplegap_active | Outer container of a whole Addon when Source List or Image Source was clicked and Addon is waiting for users activity |
| .multiplegap_inactive | Outer container of a whole Addon in error checking mode and not waiting for users activity |
| .multiplegap_placeholders | Outer container of a box where contents are put, by default it is invisible but it can be used for instance to make margin between contents and inner border of the outer container. |
| .multiplegap_container .placeholder | Container of each content put into Addon, regardless of its type. |
| .multiplegap_container .placeholder_valid | In errors check mode, container of content that is valid. |
| .multiplegap_container .placeholder_invalid | In errors check mode, container of content that is invalid. |
| .multiplegap_container .placeholder img | If Source type is set to "images", that indicates image tag of image placed into the Addon |
| .multiplegap_container .placeholder p | If Source type is set to "images", that indicates paragraph tag of text contents placed into the Addon |
| .placeholder-show-answers | Added to element when Show Answers is active |
Examples
1.1. Inset shadow, yellow background when active, inner margin to separate placeholders from inset shadow
.multiplegap_inset {
}
.multiplegap_inset .multiplegap_container {
background: #f0f0f0;
border-radius: 4px;
box-shadow:inset 1px 1px 8px #000000;
}
.multiplegap_inset .multiplegap_placeholders {
position: absolute;
top: 16px;
left: 16px;
right: 16px;
bottom: 16px;
}
.multiplegap_inset .multiplegap_active {
background: #F2D99C;
}
.multiplegap_inset .multiplegap_container .placeholder {
background: #fff;
border: 1px solid #000;
border-radius: 4px;
}
.multiplegap_inset .multiplegap_container .placeholder_valid {
color: #00ff00;
}
.multiplegap_inset .multiplegap_container .placeholder_invalid {
color: #ff0000;
}
1.2. Simple border, small inneer margin
.multiplegap_simple {
}
.multiplegap_simple .multiplegap_container {
border: 1px solid #000;
border-radius: 4px;
background: #f0f0f0;
}
.multiplegap_simple .multiplegap_placeholders {
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
}
.multiplegap_simple .multiplegap_active {
background: #F2D99C;
}
Demo presentation
Demo presentation contains examples of how this addon can be used.
