Documentation

Description

Multiple Gap module constitutes a box where multiple Image Sources or text items from Source Lists should be inserted.

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.

Supported commands

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!

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:

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.

CSS Classes

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.