Documentation
Shape Tracing
Description
The Shape Tracing module allows checking the correctness of written signs. The module consists of 3 layers (in top-to-bottom order):
- two drawing layers (the area where you can draw, it does not affect 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 module as a boundary point of a shape. Please note that only PNG files are permitted.
An image from an online resource different from the mAuthor's origin is not supported by default. A resource from an origin other than the mAuthor can be supported, after adding such an origin to the player's white list. This property allows online resources. Find out more » |
| Show shape image | When marked shows the shape image. |
| Hide shape image on check | Mark it to hide the shape image on checking the answer. |
| Show Boundaries (editor) | This option works only in the editor. It enables users to check how the boundaries of the shape image are interpreted by the module. |
| Background image | An image file. Please note that only PNG files are permitted.
An image from an online resource different from the mAuthor's origin is not supported by default. A resource from an origin other than the mAuthor can be supported, after adding such an origin to the player's white list. This property allows online resources. Find out more » |
| Correct number of lines | You can define the correct number (e.g., 1;3 is 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, input 3 semi-colon separated ";" numbers. 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 | If marked, then the module 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 module. A number between 0 and 1. |
| Border | The border size. A number between 0 (no border) and 5 (5px black border). |
| Correct Answer Image | An image that will be shown after using the show answers functionality. |
Show Answers
This module is fully compatible with the Show Answers module and displays correct answers when an adequate 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 | The 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 the module's elements. |
| .shape | DIV wrapping the shape image. |
| .background | DIV wrapping the background image. |
| .drawing | DIV wrapping the drawing field. |
| .correct | The module marked as correct. |
| .wrong | The module marked as wrong. |
| .shape-tracing-show-answers | Added to the module when the show answers feature is active. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
| reset | --- | Resets the drawing. |
| setEraserOn | --- | Sets the eraser. |
| setThickness | thickness | Sets the drawing thickness, e.g., '2'. |
| setColor | color | Sets the drawing color specified in the '#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 the user. |
| getDirections | --- | Returns the array of directions or 'Dot'. Every line is separated with the value 'Up' in the Array. Possible direction values:
|
| isOrderCorrect | boolean (optional: true or false) | Returns the boolean value if the drawing order is correct. The parameter is optional (default: false). If true, the user can avoid the points, but the order has to be correct. |
Events
allOk event
| Field name | Description |
|---|---|
| Source | module's ID |
| Item | allOk |
| Value | empty |
| Score | Always: 1 |
error event
| Field name | Description |
|---|---|
| Source | module's ID |
| Item | empty |
| Value | Always: 0 |
| Score | empty |
Advanced Connector integration
Each command supported by the Shape Tracing module can be used in the Advanced Connector module's scripts. The example below shows how to change the 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 tracing = presenter.playerController.getModule('Shape_Tracing1');
tracing.setColor('green');
SCRIPTEND
EVENTEND
EVENTSTART
Source:Text1
Item:1
Value:^medium$
SCRIPTSTART
var tracing = presenter.playerController.getModule('Shape_Tracing1');
tracing.setThickness(13);
SCRIPTEND
EVENTEND
To turn on the eraser, you have to use the function:
tracing.setEraserOn();
To set the thickness of the eraser and pencil, use the function:
tracing.setThickness(10);
To turn off the eraser, just set the pencil's color, e.g.:
tracing.setColor('pink');
Demo presentation
Demo presentation contains examples on how to use the Shape Tracing module.