Login Register

Documentation

Multiple Gap

Description

The Multiple Gap module allows adding gaps for multiple texts, images, or audio. The user is to put the answers that come from the Source List, Image Source, or MultiAudio modules. These modules cannot be placed together (mixed) in one gap.

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
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 the Source List (choose "texts"), Image Sources (choose "images"), or MultiAudio modules (choose "audio").
Items List of identifiers of items that are considered valid answers. In the case of Source type set to "images" just define a list of module IDs as they are shown in the Modules list in the editor. In the case of the Source type set to "texts", the answer identifier consists of Source List ID concatenated with a dash and the answer number counted from 1. For instance, if you have placed a Source List with ID "MySourceList" and you want to indicate its third text as a valid answer, put "MySourceList-3" in this property. Similarly, in the case of the Source type set to "audio", the answer identifier consists of the MultiAudio module's ID concatenated with a dash and the ID of the answer's item ID.
Wrap items With this option checked, all elements are wrapped in columns or rows depending on the selected orientation property.
Item width Width in pixels of each item placed in the Multiple Gap.
Item height Height in pixels of each item placed in the Multiple Gap.
Item spacing Space in pixels between each item placed in the Multiple Gap.
Stretch images? In the case of 'Source type' set to "images", indicates if images must be stretched to fit dimensions defined in the Item width and Item height.
Item horizontal align Indicates how to horizontally align contents within the items placed in the Multiple Gap.
Item vertical align Indicates how to vertically align contents within the items placed in the Multiple Gap.
Maximum item count The number of items that can be put into the Multiple Gap.
Is not an activity With this option marked, the score and errors will not be returned by the module.
Number of repetitions This option allows defining the number of elements needed for the answer to be deemed correct. It doesn't matter which elements have been inserted. Please fill in the ID repeated element property for this feature to work.
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.
Lang attribute This property allows defining the language for this module (different than the language of the lesson).
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.
Printable Allows to choose if the module should be included in the printout.

Supported commands

Command name Params Description
countItems --- Returns the current number of items placed in the gap.
hide --- Hides the module if it is visible.
show --- Shows the module if it is hidden.
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 the gap.

Show Answers

This module is fully compatible with the Show Answers module and displays correct answers when an adequate event is sent.

Advanced Connector integration

Each command supported by the Multiple Gap module can be used in the Advanced Connector module's scripts. The example below shows how to display the current item's 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 module allows you to create activities. To set the module in the non-exercise mode, it is necessary to set the Is not an activity> property. If the module is not in the activity mode, all 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

The Multiple Gap sends events compatible with both the Connector and the Advanced Connector modules. When an element is added or removed, it sends an event with the following arguments:

Field name Description
Item the 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 the user properly places all items without any error, the module sends the 'ALL OK' event. This event is different from the 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 the whole module.
.multiplegap_active Outer container of the whole module when the Source List, Image Source, or MultiAudio is clicked, and the module is waiting for the user's activity.
.multiplegap_inactive Outer container of the whole module in error-checking mode and not waiting for users' activity.
.multiplegap_placeholders Outer container of the box where the contents are put. By default, it is invisible, but it can be used, for instance, to make a margin between the contents and the inner border of the outer container.
.multiplegap_container .placeholder Container of each content put into the module, regardless of its type.
.multiplegap_container .placeholder_valid In error check mode, the container of content that is valid.
.multiplegap_container .placeholder_invalid In error check mode, the container of content that is invalid.
.multiplegap_container .placeholder img If the Source type is set to "images", that indicates the image tag of the image placed in the module.
.multiplegap_container .placeholder p If the Source type is set to "images", that indicates the paragraph tag of text contents placed in the module.
.placeholder-show-answers Added to the element when the show answers is active.

Examples

1.1. Inset shadow, yellow background when active, inner margin to separate placeholders from the 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 inner 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 to use the Multiple Gap module.