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.


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

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.

        var puzzle = presenter.playerController.getModule('Puzzle1');;
        var puzzle = presenter.playerController.getModule('Puzzle1');


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


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.