Documentation
Image source
Description
The Image Source module is a draggable image that should be placed in the corresponding Image Gap or Multiple Gap (Source type: images) module. Each image and each gap constitute separate modules - Image Source and Image Gap / Multiple Gap, respectively. 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 / Multiple 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 |
|---|---|
| Image | This property serves for inserting the image to be displayed in the module.
This property allows online resources. Find out more ยป |
| Is Disabled | Allows disabling the module so that the user is not able to interact with it. |
| Removable | This property indicates whether the image is to be removed from its location after being inserted into the module. |
| Alternative text | This text will be added to the module's HTML tag. It will be read by the Text To Speech module (if used) after the user performs a certain action. |
| 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. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| reset | --- | Resets the module to its original state. |
| getImageUrl | --- | Returns the image's URL. |
| disable | --- | Disables the module. |
| enable | --- | Enables the module. |
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
Events
The Image Source module sends the ItemSelected type of events to the Event Bus when the user selects the image.
| Field name | Description |
|---|---|
| Type | It's a string representation of the selected object type. |
| Value | The Value is the file's path. |
| Item | It is the name of the selected image. |
The Image Source module sends the ItemConsumed type of events to the Event Bus when the user uses the image.
| Field name | Description |
|---|---|
| Type | It's a string representation of the consumed object type. |
| Value | The Value is the file's path. |
| Item | It is the name of the consumed image. |
The Image Source module sends the ItemReturned type of events to the Event Bus when the user returns the image.
| Field name | Description |
|---|---|
| Type | It is a string representation of the returned object type. |
| Value | The Value is the file's path. |
| Item | It is the name of the returned image. |
CSS classes
| Class name | Description |
|---|---|
| .ic_sourceImage | Indicates the draggable source image. |
| .ic_sourceImage-selected | Indicates the selected source image. |
| .ic_sourceImage-disabled | Indicates the disabled source image. |
Examples
.ic_sourceImage {
cursor: pointer;
border: 2px solid #d2d2d2;
background-position: center;
box-shadow: 2px 2px 3px #406d93;
}
.ic_sourceImage-selected {
cursor: pointer;
border: 2px solid orange;
background-position: center;
}
Demo presentation
Demo presentation contains examples of how to use the Image Source module.