Image Identification


This addon allows users to add 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.


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 a user should do it in order to solve the activity successfully.
Is Disabled This property allows to disable a module so that it is not possible to select or deselect it.
Is not an activity With this option, the selected score and errors will not be returned by addon
Block in error checking mode If this option is selected, the addon is blocked in error checking mode.
Block wrong answers With this option checked, wrong answers are removed and the "on wrong" event is sent.
Alternative text This property enables to define a text description that will be added to the image.
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, Correct, Wrong.
This texts will be read by Text to Speech addon after a user performs an action.

It's very good practice to set the Image property in a 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 an element if not selected (not available in the error checking mode)
deselect --- Deselect an 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
hide --- Hides the module
markAsCorrect --- Marks addon as correct.
markAsWrong --- Marks addon as wrong.
markAsEmpty --- Marks addon as empty.
removeMark --- Removes addon mark (class).
disable --- Disables module activities.
enable --- Enables module activities.


The Image Identification addon sends ValueChanged type events to 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 selected, 0 if not

Show Answers

This module is fully compatible with Show Answers module and displays correct answers when adequate event is sent.

CSS classes

Class name Description
image-identification-element The element base class when it has no other state.
image-identification-element-selected Class for a selected element while not in the error checking mode.
image-identification-element-empty Class for the element that should be selected while it's 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 whose background is the provided image.
image-identification-element-show-answers Class for the element in the show answers mode.

Note that the addon'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 contains examples of how the Image Identification addon can be used.