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.
|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|
|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
Puzzle addon allows to create various types of activities:
|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|
When user moves one piece of the Puzzle addon, it sends the 'ValueChanged' event:
|Item||position of the moved element (where is its correct placement) in format row-column, ie. 1-2|
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.
|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 contains example usage of the Puzzle Addon.