Puzzle

Discover how to create a puzzle with PandaSuite using the Drag-and-Drop component and setting up conditions.

The puzzle is a simple and fun format to generate engagement.

Preparing the Pieces

Ahead of time, select and prepare an image to be cut into puzzle pieces. You can use an image editing software to pre-cut your image if necessary. Import the images individually.

Import the Drag-and-Drop component into your screen. Use 1 distinct Drag-and-Drop component for each piece. Inside each component, import a puzzle piece. You can also use the Layout > Convert to Drag-and-Drop shortcut to transform your image into a Drag-and-Drop component. 

In the properties, activate the  Moveable to allow free movement on the scene.

Associating with Drop Zones

Use the Drag-and-Drop component for the drop zones as well. Use 1 distinct Drag-and-Drop component for each zone.

In the properties, activate the option Drop Zone, add an association, and select the matching piece.

Setting Up Conditions

Thanks to conditions, check if the puzzle pieces are correctly assembled and trigger an action accordingly.

You need to create a score which these conditions will rely on.

To create variable:

• Add a PandaSuite database
• Create a new property of type Number.
• Rename it: score

On each drop zone, add an action to increment this score. Choose the trigger Drop [object]

and create the action: 

Act on a database > Create / modify data (local). As target, choose score and the function Increment by a Value of 1. 

Then, add a Condition component and create the condition corresponding to a score equal to 3 with Automatic Evaluation.

Add a corresponding action, here the opening of the pop-up.