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. To indicate the correct answer, it is required to put the ID of the appropriate Image Source module in the 'Answer ID' property 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 allows defining answers by inputting the ID of the Image Source module, which is the correct answer for this Image Gap. |
| Is activity | This property allows defining whether the module is an activity or not. When it is not defined as an activity, the answers given are not considered in the overall result. It is helpful when, e.g., creating 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 | 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. |
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 ID of the Image Source placed in the gap. |
| isAllOK | --- | Returns true if the Image Source placed in the gap is correct. |
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
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 the Image Source placed in it. |
| .ic_imageGap-correct | Indicates the look of the Image Gap with the correct answer. |
| .ic_gapImage-wrong | Indicates the look of the Image Gap with the wrong answer. |
| .ic_gapImageFilled-disabled | Indicates the look of the disabled Image Gap. |
| .ic_gapImageFilled-empty | Indicates the look of the Image Gap with the 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:
/* Image Gap */
.ic_imageGap {
cursor: pointer;
border: 2px solid #d5dddf;
background-color: #fdfbf2
}
/* Image Gap filled */
.ic_imageGap-filled {
cursor: pointer;
border: 2px solid #d5dddf;
background-color: #fdfbf2;
box-shadow: 2px 2px 3px #406d93;
}
/* Image Gap filled — correct */
.ic_imageGap-correct {
border: 2px solid green;
}
/* Image Gap filled — wrong */
.ic_imageGap-wrong {
border: 2px solid red;
}
Demo presentation
Demo presentation contains examples of how to use the Image Gap module.