Documentation
Shape Tracing
Description
Shape Tracing addon allows you to check the correctness of written signs. The addon consists of 3 layers (in top-to-bottom order):
- two drawing layers (the area where you can draw, it has no effect on other layers)
- correct image
- background image
- shape image (it can be hidden or visible)
Properties
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.
Scoring
| 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:
|
| 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. |
Events
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.
EVENTSTART
Name:ItemSelected
Item:green
SCRIPTSTART
var drawing = presenter.playerController.getModule('Shape_Tracing1');
drawing.setColor('green');
SCRIPTEND
EVENTEND
EVENTSTART
Source:Text1
Item:1
Value:^medium$
SCRIPTSTART
var drawing = presenter.playerController.getModule('Shape_Tracing1');
drawing.setThickness(13);
SCRIPTEND
EVENTEND
To turn on the eraser, you have to use function:
drawing.setEraserOn();
To set the eraser's and pencil's thickness, use function:
drawing.setThickness(10);
To turn off the eraser, just set the pencil's color, e.g.:
drawing.setColor('pink');
Demo presentation
Demo presentation contains examples on how to use the Shape Tracing addon.