Documentation
Puzzle
Description
A Puzzle module allows you to insert a puzzle game into a presentation. 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, 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 |
|---|---|
| Image | An image which serves as a base for creating puzzles.
This property allows online resources. Find out more ยป |
| Columns | Number of columns. Required for Addon to work |
| Rows | Number of rows. Required for Addon to work |
| Is Not Activity | Defines if the addon is NOT an activity, which means that it won't be taken into consideration when checking correctness. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| show | --- | Shows the module |
| hide | --- | Hides the module |
| reset | --- | randomly shuffles the pieces |
| isAllOK | --- | Returns true when all pieces are put correctly |
Advanced Connector integration
Each command supported by the Puzzle addon can be used in the Advanced Connector addon scripts. The below example shows how to react on Text module gap content changes (i.e. throughout putting elements from Source List in it) and change puzzles visibility accordingly.
EVENTSTART
Source:Text2
Value:1
SCRIPTSTART
var puzzle = presenter.playerController.getModule('Puzzle1');
puzzle.show();
SCRIPTEND
EVENTEND
EVENTSTART
Source:Text2
Value:2
SCRIPTSTART
var puzzle = presenter.playerController.getModule('Puzzle1');
puzzle.hide();
SCRIPTEND
EVENTEND
Scoring
Puzzle addon allows to create various types of activities:
| Property | Description |
|---|---|
| maxScore | maximum score is 1 point |
| score | 1 if user places all puzzle elements correctly, otherwise 0 |
| errorCount | 1 if user incorrectly places at least one puzzle element, otherwise 0 |
Events
When user moves one piece of the Puzzle addon, it sends the 'ValueChanged' event:
| Field name | Description |
|---|---|
| Item | position of the moved element (where is its correct placement) in format row-column, ie. 1-2 |
| Value | N/A |
| Score | N/A |
When user places all pieces of the Puzzle addon properly, it sends the 'ALL OK' event. This event is 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 surrounding all puzzle elements |
| puzzle | DIV element representing a puzzle element |
| selected | Puzzle elements in selected state |
| mark | Mark element (DIV) shown in the error checking mode. When setting its background-image property, remember to set width and height properties as well |
| correct | Mark element showed in error checking mode when puzzle is in right place |
| wrong | Mark element shown in the error checking mode when a Puzzle is in a wrong place |
| top, right, bottom and right | Classes assigned to puzzles on Addon edges |
| hovered-over-by-other | When puzzle A is dragged over B, assign this class to B |
| being-hovered | Assigned to puzzle that is dragged |
Demo presentation
Demo presentation contains example usage of the Puzzle Addon.