Créer un puzzle
Découvrez comment créer un puzzle avec PandaSuite à l'aide du composant Glisser-déposer et la mise en place de conditions.
Le puzzle est un format simple et ludique pour générer de l'engagement.
⚡️ TEMPLATE DISPONIBLE : Puzzle avec pop-up
Ajoutez ce template en quelques clics à votre compte. Modifiez et personnalisez-le en toute liberté.
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 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.
Dans les propriétés, activez le Déplacement pour permettre le déplacement libre sur la scène.
Association aux zones de dépôt
Utilisez le composant Glisser-déposer pour les zones de dépôt également. Utilisez 1 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 correspondants.
Mise en place de conditions
Grâce aux conditions, vérifiez si les pièces du puzzle sont correctement assemblées et déclenchez une action en fonction.
Vous avez besoin de créer un score sur lequel s'appuieront ces conditions.
Pour créer une variable score :
- Ajoutez une base de données PandaSuite
- Créez une nouvelle propriété de type Nombre.
- Renommez-la : score
Sur chaque zone de dépôt, ajoutez une action pour incrémenter ce score. Choisissez le déclencheur Dépose [objet] et créez l'action :
Agir sur une base de données > Créer / modifier une donnée (locale). Comme cible, choisissez score et la fonction Incrémenter d'une Valeur de 1.
Ensuite, ajoutez un composant Condition et créez la condition correspondant au score égal à 3 avec Évaluation automatique.
Ajoutez une action correspondant, ici l'ouverture du pop-up.