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
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 |
|---|---|
| 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 disabling the module so that the user is not able to interact with it. |
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.