Documentation
Coloring
Description
The Coloring addon gives users the ability to upload an image which can be later colored.
Properties
Property name | Description |
---|---|
Image | An image to be colored.
An image from an online resource different from mAuthor's origin is not supported. This property allows online resources. Find out more ยป |
Areas | The areas with provided correct coloring settings. It's a new line separated property. Each single line should contain x, y values, the color and an optional description for Text to speech. For example: 155;100;255 255 50 255; Head area The color is in RGBA format. x and y can be taken from the top-left corner of the Coloring module when in Editor. The color can also be "transparent". For example: 155; 100; transparent. Marking the area as transparent makes this area to be correct only when it is left without being colored. Coloring this area will be counted as mistake. |
Colors |
The colors that will be available for coloring in Text to speech use.
Description - Description of the color. Read during color selection and while pointing at a colored area Color RGBA - RGBA for the color |
Default Filling Color | The default color that is used for coloring. This property left empty will provide the default filling color as "255 100 100 255" RGBA value. |
Tolerance | The tolerated difference between the colored area and the contours. It should be used with caution and only when absolutely necessary. |
Is Not Activity | The addon is not an activity which means it gives neither score nor errors. |
Is Disabled | Sets the addon in a disabled state. |
Color correct | With this option checked, all areas will be colored correctly when clicked. |
Show all answers in gradual show answers mode | If this property is selected the gradual show answer button will show correct answers for entire addon. | Speech texts | Sets the values of speech texts - predefined phrases providing additional context while using the module in the TTS mode. Speech texts are always read using the content's default language. |
Lang attribute | Allows you to set the langauge used to read the area names and color descriptions via the TTS module. |
Supported commands
Name | Parameters | Description |
---|---|---|
show | --- | Shows the addon. |
hide | --- | Hides the addon. |
disable | --- | Disables the addon. |
enable | --- | Enables the addon. |
isAllOK | --- | Returns true if all areas are filled in with correct colors, false otherwise |
getView | --- | Returns the DOM element wrapped with jQuery which is a main container of the addon. |
setColor | color | Sets a current filling color, for example Coloring1.setColor('255 50 50 255'). |
getColor | color | Returns current color at a point, for example Coloring1.getColor(116, 73). |
setEraserOn | --- | Turns on the eraser mode. |
isAttempted | --- | Returns true if the addon has been attempted to be completed, otherwise false. |
fillArea | x coordinate, y coordinate, color | Colors the selected area, for example Coloring1.fillArea(200,300,'255 50 50 255'). If the color is not specified, this method will color the area on the defined color, for exampleColoring1.fillArea(200,300). |
clearArea | x coordinate, y coordinate | Clears the selected area, for example Coloring1.clearArea(200,300) |
Advanced Connector integration
In Advanced Connector you can react to events that are sent by Coloring addon. In the example below: you are listening to a ValueChanged event which will be sent when a user fills in the area (x: 155, y: 12). When the event arrives, you set relevant text in the Text module.
EVENTSTART
Source:Coloring1
Name:ValueChanged
Value:1
Item:155;12
SCRIPTSTART
var textModule = presenter.playerController.getModule('Text1');
textModule.setText('The user has colored area: x = 155, y = 12');
SCRIPTEND
EVENTEND
Events
Coloring sends events compatible with both Connector and Advanced-Connector modules.
It sends a ValueChanged event when a user clicks on any area within the image.
Field name | Description |
---|---|
Name | ValueChanged |
Score | It is 1 if the area is colored with a proper color, otherwise 0. For colored areas not defined in the "Areas" property, it should be the empty string "". |
Value | It is 1 if a user colored the area and 0 if the user erased the area. |
Item | It is x and y provided in Areas property |
Show Answers
This module is fully compatible with Show Answers module and displays correct answers when an adequate event is sent.
CSS Classes
Property name | Description |
---|---|
.coloring-wrapper | The outer wrapper of the whole addon |
.coloring-container | The inner container of the whole addon |
.icon-container | The container for the icon which shows up when in "Check Errors" mode |
Default Styling
.coloring-wrapper .coloring-container canvas { display: table; margin: auto; } .coloring-wrapper { display: table; width: 100%; height: 100%; } .coloring-wrapper .coloring-container { display: table-cell; vertical-align: middle; } .coloring-wrapper .coloring-container .icon-container { border: 1px solid #111111; border-radius: 50%; font-size: 10px; height: 8px; line-height: 6px; padding: 2px; position: absolute; width: 8px; font-weight: bold; } .coloring-wrapper .coloring-container .icon-container.wrong { background-color: #ff5599; } .coloring-wrapper .coloring-container .icon-container.correct { background-color: #55ff99; } .coloring-wrapper .coloring-container .icon-container.correct:after { content: 'v'; } .coloring-wrapper .coloring-container .icon-container.wrong:after { content: 'x'; }
Demo presentation
Demo presentation contains examples of how this addon can be used.