Documentation
Image Identification
Description
The Image Identification module allows adding a multiple image selection activity to a presentation. Each element works in a single selection option mode.
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 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 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. |
| Printable | Allows to choose if the module should be included in the printout. |
It is 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". |
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
| 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. |
Events
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.