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.

Note: To correctly display .svg files in Internet Explorer browser, you have to add to <svg> tag the following parameter: viewBox="0 0 WIDTH HEIGHT".
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.