Documentation
Points and Lines
Description
The Points and Lines module enables you to present a set of points on a plane, where, by choosing two points, you can draw or remove a segment connecting the two points. This can be used as an activity or as a presentation/simulation.
The module supports both click & click and drag & drop operating methods. You may choose a more convenient gesture depending on the situation and the device being used.
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 |
|---|---|
| Points' coordinates | Here you define the points' 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] |
| Points' indexes | This property allows adding indexes to the points. Separate the indexes with commas, e.g., A, B, C, D, E. Remember that the number of indexes must be equal to the number of points.
If left empty, the points will appear without indexes. |
| Starting lines | This property allows you to define the segments that will be visible at the beginning.
Define a segment by writing the numbers of its endpoints separated with a dash (points are numbered in the order they appear in the Points' coordinates). Definitions of different segments should be comma-separated. If you want the line to be nonremovable, add an asterisk (*) after the second point. e.g.: 1-2, 1-3, 1-4* |
| Answer | This property allows you to define the segments that are to be drawn as an answer. Define the segment by writing the numbers of its endpoints separated with a dash (points are numbered in the order they appear in the Points' coordinates). Definitions of different segments should be comma-separated. |
| Is activity | Enables you to define whether the module is an activity or not. |
| Show all answers in GSA mode | If this property is selected, the Gradual Show Answers button will show the correct answers for the entire module. |
| Is disabled | Allows disabling the module so that the user is not able to interact with it. |
| Blocked lines | This property allows you to define the segments that cannot be drawn.
Define a segment by writing the numbers of its endpoints separated with a dash (points are numbered in the order they appear in the "Points' coordinates" property). Definitions of different segments should be comma-separated. |
| Block wrong answers | With this option checked, wrong answers are removed, and the "on wrong" event is sent. |
| Single Connection | With this option checked, only one line can go out from a point. |
| Alternative texts | This property allows you to add points descriptions used in TTS mode. Put each description in a new line, for example:
Point 1 Point 2 Point 3 If no value is defined for this property, then values from the property "Points' indexes" or numbers will be used to describe the points, which will read as follows: 'Point A', where 'A' is a point index defined in "Points' indexes" 'Point 1', where '1' is an index of the point when not defined in "Points' indexes" It is not necessary to declare alternative text for all points. A point without alternative text will read as previously presented. For example: Point A Point C will be read as: Point A Point 1 Point C |
| Lang attribute | This property allows defining the language for this module (different than the language of the lesson). |
| Speech texts | Sets the values of speech texts - predefined phrases providing additional context while using the module in the Text To Speech mode. Speech texts are always read using the content's default language. |
Events
The Points and Lines 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 defined as: line_point1_point2. |
| Value | 1 when a line is drawn, 0 when a line is removed. |
| Score | 1 if the added line should be drawn or if the removed line should be removed, otherwise 0. |
When the user makes all lines properly without any errors, the module sends the 'ALL OK' event.
| Field name | Description |
|---|---|
| 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 are made correctly and there are no mistakes, otherwise false. |
| markAsCorrect | --- | Mark the module as correct. |
| markAsWrong | --- | Mark the module as wrong. |
| markAsNeutral | --- | Mark the module as neutral. |
| isConnected | index1, index2 | (integers from 1 to the number of points defined) Returns true if the points 'index1' and 'index2' are connected with a line, otherwise false. |
| isEmpty | --- | Returns true if no line was added or removed by the user, otherwise false. |
| isAttempted | --- | Returns true if any segment is selected. |
Scoring
The Points and Lines module allows you to create exercises. To set the module in an exercise mode, mark the "Is activity" property. If the module is not in an exercise mode, all of the below methods return 0!
| Property | Description |
|---|---|
| maxScore | The sum of all lines given in the "Answer" property that are not defined in the "Starting lines" property and the lines provided in the "Starting lines" property (not marked with an asterisk) that are not defined in the "Answer" property. |
| score | The sum of all drawn lines given in the "Answer" property that are not defined in the "Starting lines" property and the removed lines entered in the "Starting lines" property (not marked with an asterisk) that are not defined in the "Answer" property. |
| errorCount | The sum of all drawn lines that are not defined in the "Answer" property or the "Starting lines" property, and the removed lines given both in the "Starting lines" and "Answer". |
CSS classes
| Class name | Description |
|---|---|
| .pointslines | DIV containing the points. |
| .disabled | Additional class for the disabled module. |
| .point_container | DIV element, a child of pointslines, adding more styling possibilities. |
| .point | Indicates the look of the point. |
| .point_index | Indicates the look of the index of the point. |
| .line | Indicates the look of the line. |
| .selected | Additional class for the selected point. |
| .correct | Additional class for the pointslines for an activity solved correctly. |
| .wrong | Additional class for the pointslines for an activity not solved completely. |
| .noremovable | Additional class for the nonremovable line. |
| .correctLine | Additional class for the correct line. |
| .wrongLine | Additional class for the wrong line. |
Demo presentation
Demo presentation contains examples of how to use the Points and Lines module.