# Puzzle

> Découvrez comment créer un puzzle engageant avec PandaSuite en utilisant le composant Glisser-déposer et en configurant des conditions pour vérifier l'assemblage.

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

**Créez un puzzle avec PandaSuite à l'aide du composant Glisser-déposer et de conditions pour vérifier l'assemblage.**

[Vidéo : les trois pièces du puzzle sont glissées une à une dans le cadre blanc jusqu'à compléter la scène du train dans le désert]

[Modèle : Puzzle avec pop-up](https://pandasuite.com/dashboard/use-template/qxEHQosB5IBMJWwgC_MX)

## Préparation des pièces

En amont, sélectionnez et préparez une image à découper en pièces de puzzle. Vous pouvez utiliser un logiciel de retouche d'image pour pré-découper votre image si nécessaire. Importez les images individuellement.

Importez le composant [Glisser-déposer](https://docs.pandasuite.com/fr/essentials/components/drag-and-drop/) dans votre écran. Utilisez 1 composant Glisser-déposer distinct pour chaque pièce. À l'intérieur de chaque composant, importez une pièce du puzzle. Vous pouvez également utiliser le raccourci **Mise en page** > **Convertir en Glisser-déposer** pour transformer votre image en composant [Glisser-déposer](https://docs.pandasuite.com/fr/essentials/components/drag-and-drop/).

[Image : Menu Mise en page de PandaSuite Studio : une flèche désigne Convertir en Glisser-déposer, pour transformer la pièce sélectionnée en composant]

Dans les propriétés, activez le **Déplacement** pour permettre le déplacement libre sur la scène.

[Image : Propriétés Glisser-déposer de la pièce Piece03 : l'option Déplacement, encadrée en rouge, est réglée sur Oui]

## Association aux zones de dépôt

Utilisez le composant **Glisser-déposer** pour les zones de dépôt également. Utilisez un composant **Glisser-déposer** distinct pour chaque zone.

Dans les propriétés, activez l'option **Zone de dépôt**, ajoutez une association et sélectionnez la pièce correspondante.

[Image : Propriétés d'une zone de dépôt : Zone de dépôt sur Oui et Piece03 choisie comme pièce associée]

## Mise en place des conditions

Grâce aux [conditions](https://docs.pandasuite.com/fr/essentials/components/condition/), vérifiez si les pièces du puzzle sont correctement assemblées et déclenchez une action en fonction.

### 1. Créer la variable score

Dans le [Datastore](https://docs.pandasuite.com/fr/essentials/data/datastore/), créez une nouvelle propriété de type **Nombre** et renommez-la : *score*.

[Image : Datastore du projet de puzzle : une propriété score de type Nombre, de valeur 0]

### 2. Incrémenter le score à chaque dépôt

Sur chaque zone de dépôt, ajoutez une action avec le déclencheur **Dépose \[objet]** :

**Agir sur une source de données > Datastore > Créer/Modifier une donnée (Local).** Comme cible, choisissez **score** et la fonction **Incrémenter** avec une **Valeur** de 1.

[Image : Action sur la zone Drop03 : à la dépose de Piece03, Créer/Modifier une donnée (Local) sur score, fonction Incrémenter, valeur 1]

### 3. Évaluer la condition de réussite

Ajoutez un composant [Condition](https://docs.pandasuite.com/fr/essentials/components/condition/) et créez la condition correspondant au score égal au nombre total de pièces, avec **Évaluation automatique**.

[Image : Condition « Score is equal to 3 » avec Évaluation automatique sur Oui : le score du Datastore doit valoir 3, le nombre de pièces]

Ajoutez l'action à déclencher lorsque la condition est remplie — ici, l'ouverture d'un pop-up.

[Image : Action de la condition : quand « Score is equal to 3 » est vraie, elle ouvre le pop-up Pop-up15753 en 0,4 s]

Lorsque toutes les pièces sont placées correctement, le pop-up s'ouvre automatiquement.