Aller au contenu

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.

Puzzle demonstration

Puzzle avec pop-up

Ajoutez ce template en quelques clics à votre compte. Modifiez et personnalisez-le en toute liberté.

→ Ajouter ce template à votre compte

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.

Preparation des pieces

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

Activation du deplacement

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.

Association aux zones de depot

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 :

Creation de la variable 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.

Action pour incrementer le score

Ensuite, ajoutez un composant Condition et créez la condition correspondant au score égal à 3 avec Évaluation automatique.

Condition pour score egal a 3

Ajoutez une action correspondant, ici l’ouverture du pop-up.

Action pour ouverture du pop-up