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
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 |
|---|---|
| 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 | Allows disabling the module so that the user is not able to interact with it. |
| 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.