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 this Multiple Gap should accept content from Image Lists (choose "texts") or Image Sources (choose "images")
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.
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.