Documentation
Image source
Description
An 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 insert a correct answer, it is required to put the image source module ID in the Answer ID section.
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 images 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 images are to be removed from a source list after being inserted into the module. |
| Alternative text | This property enables to define a text description that will be added to an image's HTML tag |
| Lang attribute | This property allows to define the language for this addon (different than the language of the lesson). |
| Speech texts |
List of speech texts: Selected, Deselected. This texts will be read by Text to Speech addon after a user performs an action. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| reset | --- | Reset module to its original state |
| getImageUrl | --- | Returns image URL |
| disable | --- | Disables module |
| enable | --- | Enables module |
| show | --- | Shows module |
| hide | --- | Hides module |
Events
The Image Source addon sends ItemSelected type of events to Event Bus when a user selects an image.
| Field name | Description |
|---|---|
| Type | It's a string representation of a selected object type. |
| Value | The Value is the file path. |
| Item | It's a name of a selected image. |
The Image Source addon sends ItemConsumed type of events to Event Bus when a user consumes the image.
| Field name | Description |
|---|---|
| Type | It's a string representation of a consumed object type. |
| Value | The Value is the file path. |
| Item | It's a name of a consumed image. |
The Image Source addon sends ItemReturned type of events to Event Bus when a user returns the image.
| Field name | Description |
|---|---|
| Type | It's a string representation of a returned object type |
| Value | The Value is the file path. |
| Item | It's a name of a returned image. |
CSS classes
| Class name | Description |
|---|---|
| .ic_sourceImage | Indicates a draggable source image. |
| .ic_sourceImage-selected | Indicates a selected source image. |
| .ic_sourceImage-disabled | Indicates a 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 contains examples of the addon's usage.