Login Register

Documentation

Figure Drawing

Description

The Figure Drawing module enables adding sets of grid points where by choosing two points you can draw or remove the segment connecting the two points. This module 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 When marked the grid lines will be visible.
Grid step Allows to set the distances between the points in the grid.
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 defining 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 This property allows defining whether the Choice module is an activity or not. When it is not defined as an activity, the answers given are not taken into account in the overall result. It is useful e.g. for simulations.
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 module.
Default Color This property allows defining the default color for coloring figures. The color needs to be defined 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 the x and 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 must 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 module 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 module sends the ValueChanged type of events to the Event Bus when a line is drawn or removed.

Field name Description
Source Module's ID
Item The name of the line is defined as: line_column1_row1_column2_row2.
Value 1 when a line is drawn, 0 when a line is removed.
Score 1 if the module's line should be drawn, otherwise 0.

When all lines are drawn correctly, the module sends another event.

Field name Description
Source Module's ID
Item lines
Value N/A
Score N/A

In the coloring mode, the module sends the ValueChanged type of events to the Event Bus when a figure is colored.

Field name Description
Source Module's ID
Item Coordinates of the clicked point.
Value Color in the RGBA format.
Score N/A

When the user completes all lines and colors correctly, the module sends the 'ALL OK' event.

Field name Description
Source Module's ID
Item all
Value N/A
Score N/A

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 module.
enable --- Enables the module.
disable --- Disables the module.
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 --- Switches the module to the line drawing mode.
setColorMode --- Switches the module to the coloring mode.
setEraserOn --- Turns on the eraser mode.
allLinesDrawn --- Returns "true" if all lines are drawn correctly.
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 module as correct.
markAsWrong --- Marks the module as wrong.
markAsNeutral --- Marks the module as neutral.

Show Answers

This module is fully compatible with the Show Answers module and displays correct answers when an adequate event is sent.

Scoring

The Figure Drawing module allows the creation of 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 colored 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 module.
.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 module in the drawing mode.
.coloring_mode Additional class for the module in the coloring mode.
.disabled Additional class for the disabled module.
.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 that shows 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 of how to use the Figure Drawing module.