Documentation
Connecting Dots
Description
The Connecting Dots module enables the creation of a puzzle containing a sequence of numbered dots. Choosing the consecutive numbers starting from one allows drawing the 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 |
|---|---|
| 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. |
| Is activity | Enables to define whether the module is an activity or not. |
| Animation time | This property allows defining 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 for the module.
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. |
| Show all answers in gradual show answers mode | If this property is marked, then the Gradual Show Answer module displays the complete solution after using this button only once. |
Events
The Connecting Dots module sends the ValueChanged type events to the Event Bus when a user selects a point.
| Field name | Description |
|---|---|
| Source | The module's ID. |
| Item | The number of the clicked point. |
| Value | it's 1 when a correct point is selected, otherwise 0. |
| Score | It's 1 when all points are selected, otherwise 0. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
| reset | --- | Clears out all drawn lines and selected points. |
| enable | --- | Enables the module. |
| disable | --- | Disables the module. |
Scoring
The Connecting Dots module allows creating exercises. To set the module in exercise mode, choose its 'Is activity' property. If the module is not in exercise mode, all the methods below return 0!
| Property | Description |
|---|---|
| maxScore | Maximum score is 1 point. |
| score | It's 1 if all lines were drawn, otherwise 0. |
| errorCount | It's 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 module.