Login Register

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.