Documentation
Figure Drawing
Description
A Figure Drawing addon enables you to add a set of grid points where by choosing two points you can draw or remove the segment connecting the two points. This addon can be used to draw figures.
In the drawing mode, it is possible to use either the click&click operations to select the two points that make a segment or drag the line from one point to another with the drag&drop method.
In the coloring mode, the already drawn figures can be colored using the available color palette.
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 |
---|---|
3D grid | Enables to change the grid into a pseudo 3D grid. |
Show grid | Enables to hide or show the grid lines. |
Point radius | This property defines the radius of the point. If left empty, it is equal to 5. |
Starting lines | This property allows to define the segments that will be visible at the beginning.
Define the segment by writing the column and the row of its points separated with a dash (the column and the row are separated with a semicolon). A definition of different segments should be written in separate lines. If you want the line to be removable, add an asterisk (*) after the second point. e.g.: 3;5-1;5 2;3-3;4* |
Answer lines | This property allows to define the segments that are to be drawn as the answer. Define the segment by writing the column and the row of the points separated with a dash (the column and the row are separated with a semicolon). A definition of different segments should be written in separate lines. |
Is activity | Enables to define whether the module is an activity or not. |
Is disabled | Allows disabling the module so that the user is not able to interact with it. |
Coloring | This property allows users to color the figures drawn in the addon. |
Default Color | This property allows to define the default color for coloring figures. The color needs to be define in the RGB format, e.g.: 255 10 255 |
Starting Colors | This property allows users to define the colors in which the figures are colored at the beginning. It's a new line separated property. The single line should contain x, y of the point inside the figure and the color in RGB format, e.g.: 105;35;0 255 255 47;127;255 100 0 |
Answer Colors | This property allows users to define the figures which need to be colored.
In the "Figure" property, define the figure you want to color by writing the points of the figure (the figure needs to be closed, so the first and the last points have to be the same), e.g.: 1;1-1;5-3;5-3;1-1;1 In the "Point and Color" property, define a point inside this figure and the color in RGB format, e.g.: 50;50;255 10 10 |
Block coloring mode until all lines are OK | If this property is selected, the coloring mode is blocked until all lines are correct. Then, when all lines are correct, the addon automatically changes to the coloring mode. |
Show Answers in Editor | If this property is selected, the defined answers are shown in the Editor. |
Events
The Figure Drawing addon sends ValueChanged type of events to Event Bus when a line is drawn or removed.
Field name | Description |
---|---|
Source | module ID |
Item | the name of the line defined as: line_column1_row1_column2_row2 |
Value | 1 when a line is drawn, 0 when a line is removed |
Score | 1 if the added line should be drawn, otherwise 0 |
When all lines are drawn correctly, the addon sends another event.
Field name | Description |
---|---|
Source | module ID |
Item | lines |
Value | N/A |
Score | N/A |
In the coloring mode, the addon sends ValueChanged type of events to Event Bus when a figure is colored.
Field name | Description |
---|---|
Source | module ID |
Item | coordinates of the clicked point |
Value | color in RGBA format |
Score | N/A |
When a user completes all lines and colors correctly, the addon sends the 'ALL OK' event.
Field name | Description |
---|---|
Source | module ID |
Item | all |
Value | N/A |
Score | N/A |
Supported commands
Command name | Params | Description |
---|---|---|
show | --- | Shows the addon. |
hide | --- | Hides the addon. |
reset | --- | Resets the addon. |
enable | --- | Enables the addon. |
disable | --- | Disables the addon. |
isAllOK | --- | Returns true if all lines and colors are made correctly and there are no errors. |
isAttempted | --- | Returns true if any segment is selected or any figure drawn. |
setColor | color | Sets the current filling color, for example: Coloring1.setColor('255 50 50'). |
setDrawMode | --- | Sets the addon into the line drawing mode. |
setColorMode | --- | Sets the addon into the coloring mode. |
setEraserOn | --- | Turns on the eraser mode. |
allLinesDrawn | --- | Returns true if all lines are drawn corectly. |
isDrawn | column1, row1, column2, row2 | Returns true if a line from point (column1, row1) to point (column2, row2) is drawn. |
countDrawnLines | --- | Returns the number of drawn lines (non-removable). Be aware that every part of the drawn segment is counted separately. |
markAsCorrect | --- | Marks the addon as correct. |
markAsWrong | --- | Marks the addon as wrong. |
markAsNeutral | --- | Marks the addon as neutral. |
Show Answers
This module is fully compatible with Show Answers module and displays correct answers when an adequate event is sent.
Scoring
The Figure Drawing addon allows to create exercises as well as activities.
Property | Description |
---|---|
maxScore | The number of defined answer lines (including the lines defined in the Figures Answer Colors property) plus the number of defined figures to be colored. As the line counts every part of the drawn segment, then in segment 1;2-1;4 there are two lines: 1;2-1;3 and 1;3-1;4. |
score | 1 point for each correct line and 1 point for each correctly collored figure. |
errorCount | 1 error point for each incorrect line and 1 error point for each figure that has the correct boundaries but its color is wrong. |
CSS classes
Class name | Description |
---|---|
.figure | DIV containing the addon |
.correct | additional class for .figure (added using the markAsCorrect command) |
.wrong | additional class for .figure (added using the markAsCorrect command) |
.drawing_mode | additional class for the addon in the drawing mode |
.coloring_mode | additional class for the addon in the coloring mode |
.disabled | additional class for a disabled addon |
.chart | SVG containing the points and figures |
.point | indicates the look of the point |
.grid | indicates the look of the grid lines |
.line | indicates the look of the figure's lines |
.line .noremovable | additional class for the lines that can’t be removed |
.line .correct | additional class for the correct lines |
.line .wrong | additional class for the incorrect lines |
.line .show-answers | additional class for the lines in the show answers mode |
.icon-container | the container for the icon which shows up when in the check errors mode |
.icon-container .wrong | additional class for the icon-container when the answer is wrong |
.icon-container .correct | additional class for the icon-container when the answer is correct |
Demo presentation
Demo presentation contains examples on how to use the Figure Drawing addon.