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.

Note: To display .svg files in Internet Explorer browsers correctly, 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

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.