# Puzzle

> Learn how to create a puzzle in PandaSuite using the Drag-and-Drop component and setting up conditions to verify the assembly.

https://docs.pandasuite.com/essentials/gamification/puzzle/

**Create a puzzle with PandaSuite using the Drag-and-Drop component and conditions to verify the assembly.**

[Video: the three puzzle pieces are dragged one by one into the white frame until the desert train scene is complete]

[Template: Puzzle with pop-up](https://pandasuite.com/dashboard/use-template/qxEHQosB5IBMJWwgC_MX)

## Preparing the pieces

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

Import the [Drag-and-Drop](https://docs.pandasuite.com/essentials/components/drag-and-drop/) component into your screen. Use one 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](https://docs.pandasuite.com/essentials/components/drag-and-drop/) component.

[Image: Layout menu in PandaSuite Studio: an arrow points to Convert to Drag-and-Drop, to turn the selected puzzle piece into a component]

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

[Image: Drag-and-Drop properties of the Piece03 puzzle piece: the Movement option, framed in red, is set to Yes]

## Associating with drop zones

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

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

[Image: Drop zone properties: Drop Zone set to Yes and Piece03 chosen as the associated draggable]

## Setting up conditions

Thanks to [conditions](https://docs.pandasuite.com/essentials/components/condition/), you can check whether the puzzle pieces are correctly assembled and trigger an action accordingly.

### 1. Create the score variable

In the [Datastore](https://docs.pandasuite.com/essentials/data/datastore/), create a new property of type **Number** and rename it: *score*.

[Image: Datastore of the puzzle project: a score property of type Number, with a value of 0]

### 2. Increment the score on each drop

On each drop zone, add an action with the trigger **Drop \[object]**:

**Interact with a data source > Datastore > Create/Update Data (Local).** As the target, choose **score** and the function **Increment** with a **Value** of 1.

[Image: Action on the Drop03 zone: when Piece03 is dropped, Create/Update Data (Local) on score, function Increment, value 1]

### 3. Evaluate the success condition

Add a [Condition](https://docs.pandasuite.com/essentials/components/condition/) component and create the condition where the score equals the total number of pieces, with **Automatic Evaluation**.

[Image: Condition “Score is equal to 3” with Automatic Evaluation set to Yes: the Datastore score must equal 3, the number of pieces]

Add the action to trigger when the condition is met — here, opening a pop-up.

[Image: Action of the condition: when “Score is equal to 3” is true, it opens the pop-up Pop-up15753 with a 0.4 s duration]

When all pieces are correctly placed, the pop-up opens automatically.