# Quiz

> Apprenez à créer un quiz simple avec un design sur mesure, une variable de score, et des retours clairs grâce aux pop-ups, aux états et aux actions conditionnelles.

https://docs.pandasuite.com/fr/essentials/gamification/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.**

> **Info**
>
> Ce tutoriel s'appuie sur des briques essentielles :
> [variables](https://docs.pandasuite.com/fr/essentials/data/variables/), [data
> binding](https://docs.pandasuite.com/fr/essentials/data/data-binding/),
> [pop-ups](https://docs.pandasuite.com/fr/essentials/components/pop-up/),
> [états](https://docs.pandasuite.com/fr/essentials/interactions/understand-states/), et éventuellement
> [conditions](https://docs.pandasuite.com/fr/essentials/components/condition/).

> **Astuce**
>
> Pour créer un questionnaire avec des profils de résultat plutôt qu'un score,
> consultez le tutoriel [Test de
> personnalité](https://docs.pandasuite.com/fr/essentials/gamification/personality-quiz/).

## Étape 1 : Créer une variable `score`

1. Ajoutez un [Datastore](https://docs.pandasuite.com/fr/essentials/data/datastore/) 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`.

> **Astuce**
>
> Pour un score lié à un compte utilisateur (leaderboard, progression
> multi-appareils), utilisez
> [Firebase](https://docs.pandasuite.com/fr/essentials/integrations/save-user-data-in-firebase/) à la place
> d'une variable locale.

## É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](https://docs.pandasuite.com/fr/essentials/components/interactive-zone/) 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.

[Image : Structure d'un quiz avec un écran par question dans PandaSuite Studio]

## É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 source de données** → sélectionnez votre **Datastore**
   - **Modifier la donnée** → choisissez `score`
   - Fonction : **Incrémenter** → Valeur : `1`

[Image : Configuration de l'action d'incrémentation du score dans le panneau Actions]

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

> **Astuce**
>
> Pendant la configuration du quiz, il est souvent utile d'afficher la variable
> `score` dans l'interface (voir Étape 4). Cela permet de vérifier rapidement
> que votre logique d'incrémentation est correcte. Vous pourrez ensuite retirer
> ou masquer cet affichage avant la mise en ligne.

Pour aller plus loin (y compris la remise à zéro), consultez : [Score](https://docs.pandasuite.com/fr/essentials/gamification/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](https://docs.pandasuite.com/fr/essentials/data/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 :
   - **Agir sur un composant** → **Pop-up** → **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](https://docs.pandasuite.com/fr/essentials/layout/screens/) et [Comprendre les états](https://docs.pandasuite.com/fr/essentials/interactions/understand-states/).
- Un composant [Multi-état](https://docs.pandasuite.com/fr/essentials/components/multi-state/) (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](https://docs.pandasuite.com/fr/essentials/components/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 **Modifier la donnée** → **Définir** → `0`).

Pour aller plus loin sur la gestion du score (affichage, data binding), consultez : [Score](https://docs.pandasuite.com/fr/essentials/gamification/score/).

## Voir aussi

- [Score](https://docs.pandasuite.com/fr/essentials/gamification/score/)
- [Variables](https://docs.pandasuite.com/fr/essentials/data/variables/)
- [Pop-up (fenêtre)](https://docs.pandasuite.com/fr/essentials/components/pop-up/)
- [Comprendre les états](https://docs.pandasuite.com/fr/essentials/interactions/understand-states/)
- [Multi-état](https://docs.pandasuite.com/fr/essentials/components/multi-state/)
- [Condition](https://docs.pandasuite.com/fr/essentials/components/condition/)
- [Test de personnalité](https://docs.pandasuite.com/fr/essentials/gamification/personality-quiz/)

[Modèle : Quiz interactif Abeilles](https://pandasuite.com/fr/templates/quiz-interactif-abeilles/)

[Modèle : Quiz à choix multiples (QCM)](https://pandasuite.com/fr/templates/quizz-qcm/)