Shape Tracing


Shape Tracing addon allows you to check the correctness of written signs. The addon consists of 3 layers (in top-to-bottom order):

  1. two drawing layers (the area where you can draw, it has no effect on other layers)
  2. correct image
  3. background image
  4. shape image (it can be hidden or visible)


The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.

Property name Description
Shape image Image file – every non-white pixel is interpreted by the addon as a boundary point of a shape. (only .png files are permitted).

An image from an online resource different from mAuthor's origin is not supported.

This property allows online resources. Find out more »

Show Shape image true / false - shows the shape image.
Hide Shape image on check true / false - hides the shape image on check.
Show Boundaries (editor) true / false - this option works only in editor. It enables users to check how the boundaries of a shape image are interpreted by the addon.
Background image An image file (only .png files are permitted).

An image from an online resource different from mAuthor's origin is not supported.

This property allows online resources. Find out more »

Correct number of lines You can define the correct number (e.g. 1;3 - it's interpreted as <1, 3>) of lines or leave it empty, then you can draw any number of lines with a positive result.
Points' coordinates In every line, 3 numbers semi-colon separated ";". The first number means the number of pixels to the right from the top-left corner, the second number is the number of pixels down and the third is the ray of an activity point, e.g. 45;34;15. You can define as many points as you like.
Mind points' order true / false - if true, then the addon will check the order of points.
Color The pencil's color specified in '#RRGGBB' notation or by name, e.g. 'pink'.
Thickness The pencil's width. A number between 1 and 40.
Opacity The opacity of the whole addon. A number between 0-1
Border The border size. A number between 0 (no border) and 5 (5px black border)

Show Answers

This module is fully compatible with Show Answers module and displays correct answers when a relevant event is sent.


Property Description
maxScore the maximum score is always 1
score the score is 1 if the exercise is done correctly, otherwise 0
errorCount errorCount is always 0 or 1 - it depends on the score result. If the score is 1, then the errorCount is 0 and when the score is 0, the errorCount is 1

CSS classes

Class name Description
.outer DIV wrapping Addon elements
.shape DIV wrapping shape image
.background DIV wrapping background image
.drawing DIV wrapping drawing field
.correct Addon marked as correct
.wrong Addon marked as wrong
.shape-tracing-show-answers Added to addon when Show Answers is active

Supported commands

Command name Params Description
hide --- Hides the addon.
show --- Shows the addon.
reset --- Resets drawing.
setEraserOn --- Sets eraser.
setThickness thickness Sets drawing thickness, e.g. '2'.
setColor color Sets drawing color specified in '#RRGGBB' notation or by name, e.g. 'red'.
descentsFromShape --- Returns the number of descents from a declared shape.
numberOfLines --- Returns the number of drawn lines.
pointsMissed --- Returns the number of points missed by a user.
getDirections --- Returns the array of directions or 'Dot'. Every line is separated with the value 'Up' in Array. Possible direction values:
  • N - North
  • NE - Northeast
  • E - East
  • SE - Southeast
  • S - South
  • SW - Southwest
  • W - West
  • NW - Northwest
isOrderCorrect boolean (optional: true or false) Returns the boolean value if drawing order is correct. The parameter is optional (default: false). If true, user can avoid the points but the order has to be correct.


allOk event

Field name Description
Source addon ID
Item allOk
Value empty
Score Always: 1

error event

Field name Description
Source addon ID
Item empty
Value Always: 0
Score empty

Advanced Connector integration

Each command supported by the Shape Tracing addon can be used in the Advanced Connector addon's scripts. The below example shows how to change color (to green) and thickness (to 13) when the Image Source is selected and the Text module's gap content changes.

    var drawing = presenter.playerController.getModule('Shape_Tracing1');

    var drawing = presenter.playerController.getModule('Shape_Tracing1');

To turn on the eraser, you have to use function:


To set the eraser's and pencil's thickness, use function:


To turn off the eraser, just set the pencil's color, e.g.:


Demo presentation

Demo presentation contains examples on how to use the Shape Tracing addon.