Documentation
Puzzle
Description
The Puzzle module allows you to insert a puzzle game into your lesson. It is enough to upload an image which is later automatically divided into separate items and put in rows and columns. The required number of rows and columns can be defined in the Properties menu.
Note: Puzzle supports the following graphic formats: JPG, PNG, and BMP. Vector formats are not supported.
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 |
|---|---|
| Columns | Number of columns. Required for the module to work. |
| Rows | Number of rows. Required for the module to work. |
| Image | An image that serves as a base for creating the puzzle.
This property allows online resources. Find out more ยป |
| Is Not Activity | With this option marked, the score and errors will not be returned by the module. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
| reset | --- | Randomly shuffles the pieces. |
| isAllOK | --- | Returns true when all the pieces are placed correctly. |
Advanced Connector integration
Each command supported by the Puzzle module can be used in the Advanced Connector module's scripts. The example below shows how to react to changes in the gap of the Text module (i.e. when putting into it the elements from the Source List module) and change the puzzle's visibility accordingly.
EVENTSTART
Source:Text1
Value:1
SCRIPTSTART
presenter.playerController.getModule('Puzzle1').show();
SCRIPTEND
EVENTEND
EVENTSTART
Source:Text1
Value:2
SCRIPTSTART
presenter.playerController.getModule('Puzzle1').hide();
SCRIPTEND
EVENTEND
Scoring
The Puzzle module allows the creation of various types of activities:
| Property | Description |
|---|---|
| maxScore | The maximum score is 1 point. |
| score | 1 if the user places all puzzle pieces correctly, otherwise 0. |
| errorCount | 1 if the user incorrectly places at least one puzzle piece, otherwise 0. |
Events
When the user moves one piece of the Puzzle module, it sends the 'ValueChanged' event:
| Field name | Description |
|---|---|
| Item | position of the moved piece (where is its correct placement) in format row-column, i.e. 1-2. |
| Value | N/A |
| Score | N/A |
When the user places all pieces of the Puzzle module properly, it sends the 'ALL OK' event. This event is of the ValueChanged type, and its structure is shown below.
| Field name | Description |
|---|---|
| Item | all |
| Value | N/A |
| Score | N/A |
CSS classes
| Class name | Description |
|---|---|
| puzzle-container | DIV that surrounds all the puzzle pieces. |
| puzzle | DIV element representing a puzzle piece. |
| selected | Puzzle pieces in the selected state. |
| mark | Mark piece (DIV) shown in the error-checking mode. When setting its background-image property, remember to set the width and height properties as well. |
| correct | Mark piece showed in the error-checking mode when the puzzle piece is in the right place. |
| wrong | Mark the piece shown in the error-checking mode when the puzzle piece is in the wrong place. |
| top, right, bottom and right | Classes assigned to puzzle pieces on module's edges. |
| hovered-over-by-other | When puzzle piece A is dragged over B, assign this class to B. |
| being-hovered | Assigned to the puzzle piece that is dragged. |
Demo presentation
Demo presentation contains examples of how to use the Puzzle module.