Challenge your audience and spark their problem-solving skills with the Puzzle Module, a dynamic tool that lets you create sliding puzzle games with ease. With customizable grid options and the ability to upload image assets, you can craft engaging puzzles tailored to your brand or theme.
Use cases
Boost brand recognition by engaging users in a fun game
Example
This ad demonstrates the puzzle module with some fancy animations.
As with all examples, you can request us to copy them over to your company so you can look at how they are built in detail.
Basic setup
First, we upload an asset that shows the finished image that the user will puzzle together by sliding the pieces, which well get re-arranged automatically by our module.
The toggle below lets us activate the initial animation, which will show the user that the puzzle pieces can be moved.
Teaser image
This feature will show a teaser image of the completed puzzle in the beginning to show the user what he is aiming for. With the textfield below, you can change the duration for which this teaser image is shown.
Rows/Columns
With these two fields you can set up the number of rows and columns that the image will be splitted into. A standard setup is often 2x2 to make it really easy or 3x3 to keep it fair. Higher values are an option, but frustrating users is often not a good idea.
Behavior types
There are two behavior types which you can set up for the puzzle module:
Swap = User can only change the position of a puzzle tile with ones right next to it
Free = Users can freely exchange the position of puzzle tiles with any other piece they wish, which makes solving the puzzle quite easy
Transition effect
There are three different transition effects to choose from:
Scale = Slight squeeze effect of puzzle tiles when being moved
Simple = No effect on tiles themselves, giving a smooth sliding effect
Stretch = More pronounced squeeze effect of puzzle tiles
Puzzle difficulty
You can select from a range of difficulties for the puzzle module, with "Random" being the default. The higher the difficulty, the more often pieces will be randomly switched from their default position.
Timeout
You can set up the duration after which the "Puzzle timeout" interaction trigger will be activated here.
Properties & Clickout
As for the Background module, the Puzzle module allows you to change different properties like the opacity seperately in the "Properties" tab.
Also, you can set up a clickout link for the Puzzle module as usual.
Interactions
The Puzzle offers all standard triggers & actions that the Background module offers as well. Furthermore, the Puzzle module offers:
Triggers
Puzzle drag started = Triggers when a user starts a dragging motion on the puzzle
Puzzle drag canceled = Triggers when a user stops his dragging motion on the puzzle before the tile swaps
Puzzle drag finished = Triggers when a user stops his dragging motion, no matter if a swap happened or not
Puzzle user interaction = Triggers when a user first interacts with the puzzle module
Puzzle swapped = Triggers when a user has swapped two tiles
Puzzle completed = Triggers when the puzzle has been succesfully completed
Puzzle timeout = Triggers when the timeout duration of the puzzle module has been reached
Actions for other modules
The Puzzle module offers one more specific action to be triggered by other modules on the puzzle module:
Complete puzzle = Finishes the puzzle. Can be used after a timeout has been reached for example.