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
| 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. |
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.
