Login Register

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.