Image Identification


The Image Identification module allows adding a multiple image selection activity to a presentation. Each element works in a single selection option mode.

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.


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 ยป

Selection is correct This property indicates whether the selected element is correct, and the user should select it in order to solve the activity successfully.
Is Disabled Allows disabling the module so that the user is not able to interact with it.
Is not an activity With this option marked, the score and errors will not be returned by the module.
Block in error checking mode If this option is selected, the module is blocked in the error checking mode.
Block wrong answers With this property marked, wrong answers are removed, and the "on wrong" event is sent.
Alternative text This property enables defining a text description that will be added to the image.
Lang attribute This property allows defining the language for this module (different than the language of the lesson).
Speech texts List of speech texts: Selected, Deselected, Correct, Wrong. This text will be read by the Text to Speech module after the user performs a certain action.
Printable Allows to choose if the module should be included in the printout.

It is a very good practice to set the Image property in the form of the sprite image and operate on it via CSS attributes (see the "CSS classes" section below). You can read more about sprites on Wikipedia.

Supported commands

Command name Params Description
select --- Select the element if not selected (not available in the error checking mode).
deselect --- Deselect the element if selected (not available in the error checking mode).
isAllOK --- Returns "true" if the image is (not)selected correctly, otherwise "false".
isSelected --- Returns "true" if the image is selected correctly, otherwise "false".
show --- Shows the module if it is hidden.
hide --- Hides the module if it is visible.
markAsCorrect --- Marks the module as correct.
markAsWrong --- Marks the module as wrong.
markAsEmpty --- Marks the module as empty.
removeMark --- Removes the module's mark (class).
disable --- Disables the module.
enable --- Enables the module.


The Image Identification module sends ValueChanged type events to the Event Bus when the element selection changes.

Field name Description
Item N/A
Value 1 when the element is selected, 0 if deselected.
Score 1 if the element should be selected, 0 if not.

CSS classes

Class name Description
image-identification-element The element's base class when it has no other state.
image-identification-element-selected Class for the selected element while not in the error checking mode.
image-identification-element-empty Class for the element that should be selected while it is not in the error checking mode.
image-identification-element-correct Class for the element (un)selected correctly while in the error checking mode.
image-identification-element-incorrect Class for the element (un)selected incorrectly while in the error checking mode.
image-identification-element-mouse-hover Class for the element on mouse hover while not in the error checking mode.
image-identification-background-image Inner DIV element where the background is the provided image.
image-identification-element-show-answers Class for the element in the show answers mode.

Note that the module's size is the same in every state so the properties responsible for dimensions (i.e. width, height, border/margin/padding size) should be consistent across all states.

Demo presentation

Demo presentation showing how to use the Image Identification module.