Documentation
Image source
Description
The Image Source module is a draggable image that should be placed in the corresponding Image Gap module. Each image and each gap constitute separate modules – Image Source and Image Gap 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.
For example: <svg width="800" height="400" viewBox="0 0 800 400" ...
You can edit .svg files in any text editor.
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 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 path. |
| Item | It is the name of the selected image. |
The Image Source module sends 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 path. |
| Item | It is the name of the consumed image. |
The Image Source module sends 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 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
1.1. Source image
.ic_sourceImage{
cursor: pointer;
border: 2px solid #d2d2d2;
background-position: center;
box-shadow: 2px 2px 3px #406d93;
}
1.2. Source image — selected
.ic_sourceImage-selected{
cursor: pointer;
border: 2px solid orange;
background-position: center;
}
Demo presentation
Demo presentation showing how to use the Image Source module.