Documentation
Image Identification
Description
This addon allows users to add 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 a user should do 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, 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. |
Events
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.