Skip to main content

Puzzle

Jan Meuser avatar
Written by Jan Meuser
Updated over a year ago

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.

Did this answer your question?