Login Register

Documentation

Coloring

Description

The Coloring module gives users the ability to upload an image that can be 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 a 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.
Colors The colors that will be available for coloring in the 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.
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 module is not an activity which means it gives neither score nor errors.
Is Disabled Sets the module in a disabled state.
Disable fill on click It is not possible to fill the image with color by clicking.
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 marked, then the Gradual Show Answer module displays the complete solution after using this button only once.
Speech texts Sets the values of speech texts - predefined phrases providing additional context while using the module in the Text To Speech mode. Speech texts are always read using the content's default language.
Lang attribute This property allows defining the language for this module (different than the language of the lesson).

Supported commands

Name Parameters Description
hide --- Hides the module if it is visible.
show --- Shows the module if it is hidden.
disable --- Disables the module.
enable --- Enables the module.
isAllOK --- Returns true if all areas are filled in with correct colors, false otherwise.
getView --- Returns the DOM element wrapped with jQuery which is the main container of the module.
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 module 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 using 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 the Coloring module. In the example below you are listening to the ValueChanged event which will be sent when the 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 the ValueChanged event when the user clicks on any area within the image.

Field name Description
Name ValueChanged
Score It is 1 if the area is colored with proper color, otherwise 0. For colored areas not defined in the "Areas" property, there should be the empty string "".
Value It is 1 if the user colored the area and 0 if the user erased the area.
Item It is x and y provided in the Areas property.

Show Answers

This module is fully compatible with the 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 module.
.coloring-container The inner container of the whole module.
.icon-container The container for the icon that shows up when in the "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 to use the Coloring module.