Quiz

Testez les connaissances de votre audience avec des quiz interactifs : questions à choix unique ou multiple, score en temps réel, feedback visuel, et parcours personnalisés selon les résultats. PandaSuite vous donne toutes les briques nécessaires pour créer n’importe quel format.

Étape 1 : Créer une variable score

1. Ajoutez une base de données PandaSuite au niveau Projet.
2. Cliquez sur Ajouter une propriété.
3. Nommez-la score, choisissez le type Nombre, et définissez la valeur par défaut à 0.

Étape 2 : Créer vos écrans question / réponses

Sur un écran, préparez une carte de question avec votre propre design :

• Un bloc Texte pour la question
• Un élément interactif par réponse (design de bouton, forme ou image)

Chaque réponse doit être cliquable. Une méthode simple consiste à créer le design du bouton (forme ou image), puis à placer une Zone interactive au-dessus pour gérer la zone de clic et les actions.

Pour un quiz à plusieurs questions, la structure la plus claire est souvent : un écran par question :

1. Créez votre premier écran de question.
2. Dupliquez-le pour chaque question supplémentaire, puis mettez à jour la question et les réponses.
3. Ajoutez des actions de navigation vers l’écran suivant.

Étape 3 : Incrémenter le score sur la bonne réponse

Pour chaque réponse, configurez des actions sur le déclencheur Tap / clic.

Bouton de bonne réponse (pattern recommandé)

1. Sélectionnez le bouton correspondant à la bonne réponse.
2. Ouvrez la fenêtre Actions et choisissez le déclencheur Tap / clic.
3. Ajoutez une action pour incrémenter score :
   • Agir sur une base de données → sélectionnez votre base de données PandaSuite
   • Modifier la donnée → choisissez score
   • Fonction : Incrémenter → Valeur : 1

Puis ajoutez le retour et la navigation (au choix) :

• Retour utilisateur (Bonne réponse / Mauvaise réponse) : ouvrir une pop-up (voir Étape 5) ou changer d’état (voir Étape 6).
• Question suivante : Aller à l’écran → sélectionnez l’écran de la question suivante

Pour aller plus loin (y compris la remise à zéro), consultez : Score.

Boutons de mauvaise réponse

Pour les mauvaises réponses, vous pouvez généralement :

• Ne pas incrémenter score
• Afficher un retour “Incorrect” (pop-up ou état)
• Proposer une nouvelle tentative, ou passer à la question suivante

Étape 4 : Afficher le score pendant les tests (optionnel)

Si vous souhaitez vérifier votre logique pendant la configuration, vous pouvez afficher le score en temps réel dans l’interface :

1. Insérez un bloc Texte (par exemple : “Score : 0”).
2. Dans les propriétés du texte, créez un data binding sur la valeur de la variable score.

Étape 5 : Donner un retour avec des pop-ups (bon / mauvais)

Le “retour utilisateur” est la réponse immédiate affichée après un clic (par exemple : “Bonne réponse” / “Mauvaise réponse”). Les pop-ups sont une méthode simple et très claire pour ce type de confirmation.

1. Insérez deux composants Pop-up : un “Bonne réponse”, un “Mauvaise réponse”.
2. Concevez chaque pop-up (message court, icône, et un bouton Fermer est un bon défaut).
3. Sur chaque bouton de réponse, ajoutez une action :
   • 1 Agir sur un composant

     →

     2 Pop-up

     →

     3 Ouvrir la pop-up
   • Sélectionnez la pop-up “Bonne réponse” ou “Mauvaise réponse”

Astuce : sur le bouton Fermer de la pop-up, vous pouvez aussi ajouter une action de navigation (question suivante, écran suivant, etc.).

Étape 6 : Aller plus loin avec les états (sélection, validation, explications)

Les états permettent de créer des expériences de quiz plus riches (mise en évidence de la réponse sélectionnée, affichage de la bonne réponse, explication) sans multiplier les écrans ou les pop-ups.

Selon votre structure, vous pouvez utiliser :

• Les états d’écran (recommandé si vous avez un écran par question). Voir Ecrans et Comprendre les états.
• Un composant Multi-état (utile si seule une partie de l’UI doit changer, comme le groupe de réponses, ou si vous gardez plusieurs questions sur un seul écran).

Étape 7 : Ajouter des actions conditionnelles (résultat, branches)

Lorsque vous souhaitez adapter la suite du quiz en fonction du score (ou d’une autre règle), utilisez un composant Condition.

Exemples :

• Afficher un écran de résultat “Débutant / Intermédiaire / Avancé” selon score
• Débloquer une question bonus si score dépasse un seuil

Workflow :

1. Insérez un composant Condition (au niveau de l’écran ou du Projet).
2. Créez une condition par résultat (par exemple : “Score ≥ 3”).
3. Sur le bouton de validation de la dernière question, ajoutez une action pour évaluer la condition.
4. Dans les actions du composant Condition, naviguez vers le bon écran (ou ouvrez la bonne pop-up).

Bonnes pratiques

• Réinitialiser le score : si l’utilisateur peut rejouer le quiz, remettez score à zéro au démarrage (action
  1 Modifier la donnée

  →

  2 Définir
  → 0).

Pour aller plus loin sur la gestion du score (affichage, data binding), consultez : Score.

Voir aussi

• Score
• Variables
• Pop-up (fenêtre)
• Comprendre les états
• Multi-état
• Condition
• Test de personnalité