Documentation

Image gap

Description

An Image gap module is an empty box which should be filled in with a relevant item (image) from an Image source module. Each gap and each image are separate modules – Image gap and Image source respectively. In order to indicate a correct answer, it is required to put the image source module ID in the Answer ID section.

Properties

Property name Description
Is visible This property allows to hide or show the module depending on the activity requirements.
Answer ID This property serves for inserting the ID of the corresponding answer in the Image source module
Is activity This property allows to define whether an image gap module is an activity or not. When it is not defined as an activity, the answers given are not taken into account in the overall result. It is helpful for e.g. simulations.
onCorrect This property indicates the events sent when a gap's state is changed to correct.
onWrong This property indicates the events sent when a gap's state is changed to wrong.
onEmpty This property indicates the events sent when a gap's state is changed to empty.
Is Disabled This property allows you to disable the module so that the element cannot be selected and dragged & dropped.
Block wrong answers With this option checked, wrong answers are removed and the "on wrong" event is sent.

Supported commands

Command name Params Description
markGapAsCorrect index – 1-based gap index in text Marks gap as correct.
markGapAsWrong index – 1-based gap index in text Marks gap as wrong.
markGapAsEmpty index – 1-based gap index in text Marks gap as empty.
isAttempted Returns True if a gap is filled in.
disable Disables the module.
enable Enables the module.
getImageId Returns the image ID in a gap.
isAllOK Returns true if an image in a gap is correct.

Show Answers

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

CSS classes

Class name Description
.ic_imageGap indicates the look of the items included in the source list
.ic_imageGap-filled indicates the look of an image gap with an image source placed in it
.ic_imageGap-correct indicates the look of an image gap with a correct answer
.ic_gapImage-wrong indicates the look of an image gap with a wrong answer
.ic_gapImageFilled-disabled indicates the look of a disabled image gap
.ic_gapImageFilled-empty indicates the look of an image gap with an empty answer
.ic_imageGap-correct-answer indicates the look of an image gap with the correct answer displayed

Examples

2.1. Image gap
.ic_imageGap{
cursor: pointer;
border: 2px solid #d5dddf;
background-color: #fdfbf2
}

2.2. Image gap filled
.ic_imageGap-filled{
cursor: pointer;
border: 2px solid #d5dddf;
background-color: #fdfbf2;
box-shadow: 2px 2px 3px #406d93;
}

2.3. Image gap filled — correct
.ic_imageGap-correct{
border: 2px solid green;
}

2.4. Image gap filled — wrong
.ic_imageGap-wrong{
border: 2px solid red;
}

Demo presentation

Demo presentation contains examples of the addon's usage.