Documentation
Image gap
Description
The Image Gap module is an empty box that should be filled in with a relevant item (image) from the Image Source module. Each gap and each image are separate modules – Image Gap and Image Source, respectively. In order to indicate the correct answer, it is required to put the ID of the appropriate Image Source module in the "Answer ID" section of the Image Gap module.
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 Image Source module which is the correct answer for this module. |
| Is activity | This property allows defining whether the 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 e.g. for simulations. |
| onCorrect | This property indicates the events sent when the gap's state is changed to correct. |
| onWrong | This property indicates the events sent when the gap's state is changed to wrong. |
| onEmpty | This property indicates the events sent when the 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. |
| Add container for response mark | Attach a new HTML element for the response mark, when checking answers is active. The element overlays the Image Gap. |
| Speech texts | List of speech texts: Inserted, Removed, Correct, Wrong, Empty. This text will be read by the Text to Speech module after the user performs a certain action. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| markGapAsCorrect | index – 1-based gap index in text | Marks the gap as correct. |
| markGapAsWrong | index – 1-based gap index in text | Marks the gap as wrong. |
| markGapAsEmpty | index – 1-based gap index in text | Marks the gap as empty. |
| isAttempted | – | Returns "true" if the gap is filled in. |
| disable | – | Disables the module. |
| enable | – | Enables the module. |
| getImageId | – | Returns the image ID in the gap. |
| isAllOK | – | Returns "true" if the image in the gap is correct. |
Show Answers
This module is fully compatible with the Show Answers module and displays correct answers when an adequate event is sent.
CSS classes
| Class name | Description |
|---|---|
| .ic_imageGap | Indicates the look of the Image Gap. |
| .ic_imageGap-filled | Indicates the look of the Image Gap with an Image Source placed in it. |
| .ic_imageGap-correct | Indicates the look of the Image Gap with a correct answer. |
| .ic_gapImage-wrong | Indicates the look of the Image Gap with a wrong answer. |
| .ic_gapImageFilled-disabled | Indicates the look of the disabled Image Gap. |
| .ic_gapImageFilled-empty | Indicates the look of the Image Gap with an empty answer. |
| .ic_imageGap-correct-answer | Indicates the look of the Image Gap with the correct answer displayed. |
| .ic_imageGap-mark-container | Indicates the look of the response mark container. |
| .correct-container | Indicates the look of the response mark container on the correct answer. |
| .wrong-container | Indicates the look of the response mark container on the wrong answer. |
| .disabled-container | Indicates the look of the disabled response mark container. |
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 showing how to use the Image Gap module.