The Coloring addon gives users the ability to upload an image which can be later colored.


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 and the color.
For example: 155;100;255 255 50 255
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.
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.

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.

    var textModule = presenter.playerController.getModule('Text1');
    textModule.setText('The user has colored area: x = 155, y = 12');


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.