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
| Property name | Description |
|---|---|
| Is visible | This property allows to hide or show the module depending on the activity requirements. |
| Image | This property serves for inserting images to be displayed in the module.
This property allows online resources. Find out more » |
| Is Disabled | This property allows you to disable the module so that the element cannot be selected and dragged & dropped. |
| 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.
