Documentation

Connecting Dots

Description

A Connecting Dots module enables to make a puzzle containing a sequence of numbered dots. Choosing the consecutive numbers starting from one allows to draw lines that connect the points.

Properties

Property name Description
Is visible Enables to hide or show the module.
Is activity Enables to define whether the module is an activity or not.
Dots' coordinates Here you define the dots' coordinates. Put the coordinates in brackets and separate them with a comma. Put each point in a new line, for example:
[30,60]
[70,120]
[50,200]
Dots' indexes This property allows to change the default dots’ indexes.
If left empty, the indexes will be numbered from 1 to the number of points.
If you want the indexes to be consecutive multiples of a number, write *number (e.g. when you want multiples of 2, write *2).
You can also specify all indexes by separating them with commas, e.g. A, B, C, D, E. Remember that the number of indexes must be equal to the number of points.
Animation time This property allows to define the time (in milliseconds) needed to draw a line. By default, it is equal to zero.
Start image Enables to add an image as a background to the addon.

This property allows online resources. Find out more »

End image Allows to add an image that will appear as a background after selecting the last point.

This property allows online resources. Find out more »

Is disabled Allows to disable the module so that it won't be possible to select any point.

Events

The Connecting Dots addon sends ValueChanged type events to Event Bus when a user selects a point.

Field name Description
source module ID
item the number of the clicked point
value 1 when a correct point is selected, otherwise 0
score 1 when all points are selected, otherwise 0

Supported commands

Command name Params Description
show --- Shows the addon.
hide --- Hides the addon.
reset --- Clears out all drawn lines and selected points.
enable --- Enables the addon.
disable --- Disables the addon.

Scoring

Connecting Dots addon allows to create exercises. To set the module in an excercise mode, choose the 'Is activity' property. If the addon is not in an excercise mode, all of the below methods return 0!

Property Description
maxScore maximum score is 1 point
score 1 if all lines were drawn, otherwise 0
errorCount 0 if all lines were drawn or the first point was not selected, otherwise 1

CSS classes

Class name Description
.connectingdots DIV containing the points.
.dot_container DIV element, a child of connectingdots that gives more styling possibilities.
.dot Indicates the look of a dot.
.dot_number Indicates the look of the number next to a point.
.line Indicates the look of a line.
.active Additional class for a dot and a dot number for a selected point.
.correct Additional class for connectingdots for an activity solved correctly.
.wrong Additional class for connectingdots for an activity not solved completely.
.image-start Class for the starting image.
.image-end Class for the ending image.
.line-show-answer Added to a line in the show answers mode.

Demo presentation

Demo presentation contains examples of how to use the Connecting Dots addon.