# Quiz

> Learn how to create a simple quiz with custom-designed questions, a score variable, and clear feedback using pop-ups, states, and conditional actions.

https://docs.pandasuite.com/essentials/gamification/quiz/

**Engage your audience with interactive quizzes: single or multiple-choice questions, real-time scoring, visual feedback, and personalized paths based on results. PandaSuite gives you all the building blocks to create any format.**

> **Info**
>
> This tutorial uses standard building blocks:
> [variables](https://docs.pandasuite.com/essentials/data/variables/), [data
> binding](https://docs.pandasuite.com/essentials/data/data-binding/),
> [pop-ups](https://docs.pandasuite.com/essentials/components/pop-up/),
> [states](https://docs.pandasuite.com/essentials/interactions/understand-states/), and optionally
> [conditions](https://docs.pandasuite.com/essentials/components/condition/).

> **Tip**
>
> To create a questionnaire with result profiles instead of a score, see the
> [Personality quiz](https://docs.pandasuite.com/essentials/gamification/personality-quiz/) tutorial.

## Step 1: Create a `score` variable

1. Add a [Datastore](https://docs.pandasuite.com/essentials/data/datastore/) at the **Project** level.
2. Click **Add property**.
3. Name it `score`, choose **Number**, and set the default value to `0`.

> **Tip**
>
> For a score linked to a user account (leaderboard, cross-device progress), use
> [Firebase](https://docs.pandasuite.com/essentials/integrations/save-user-data-in-firebase/) instead of a
> local variable.

## Step 2: Build your question screen(s)

On a screen, design a question card with your own style:

- A **Text** block for the question
- One interactive element per answer (button design, shape, or image)

Each answer must be tappable/clickable. A simple pattern is to design the button look (shape or image), then place an [Interactive Zone](https://docs.pandasuite.com/essentials/components/interactive-zone/) on top to handle the tap/click area and actions.

For a multi-question quiz, the clearest structure is usually **one screen per question**:

1. Create your first question screen.
2. Duplicate it for each additional question, then update the question and answers.
3. Add navigation actions to go to the next screen.

[Image: Quiz structure with one screen per question in PandaSuite Studio]

## Step 3: Increment the score on the correct answer

For each answer, configure actions on **Tap / Click**.

### Correct answer button (recommended pattern)

1. Select the correct answer button.
2. Open **Actions** and choose the **Tap / Click** trigger.
3. Add an action to increment `score`:
   - **Interact with a data source** → select your **Datastore**
   - **Modify data** → choose `score`
   - Function: **Increment** → Value: `1`

[Image: Configuring the score increment action in the Actions panel]

Then add your feedback and navigation (choose one):

- **User feedback (Correct / Incorrect)**: open a pop-up (see Step 5) or change a state (see Step 6).
- **Next question**: **Go to screen** → select the next question screen

> **Tip**
>
> While building your quiz, it is often helpful to display the `score` variable
> in the interface (see Step 4). This makes it easy to confirm that your
> increment logic is working correctly. You can remove or hide it before
> publishing.

For more (including reset), see: [Score](https://docs.pandasuite.com/essentials/gamification/score/).

### Incorrect answer buttons

For wrong answers, you typically:

- Do not increment `score`
- Show "Incorrect" feedback (pop-up or state)
- Optionally allow a retry, or move on to the next question

## Step 4: Display the score while testing (optional)

If you want to check your logic while you configure the quiz, you can display the live score in the UI:

1. Insert a **Text** block (for example: "Score: 0").
2. In the Text properties, create a [data binding](https://docs.pandasuite.com/essentials/data/data-binding/) to the `score` variable value.

## Step 5: Give feedback with pop-ups (correct / incorrect)

Feedback is the immediate response shown after the user selects an answer (for example: "Correct" / "Incorrect"). Pop-ups are a simple and clear way to do this.

1. Insert two **Pop-up** components: one "Correct", one "Incorrect".
2. Design each pop-up (short message, icon, and a **Close** button is a good default).
3. On each answer button, add an action:
   - **Interact with a component** → **Pop-up** → **Open pop-up**
   - Select the "Correct" or "Incorrect" pop-up

Tip: On the pop-up **Close** button, you can also add a navigation action (next question, next screen, etc.).

## Step 6: Go further with states (selection, validation, explanations)

States help you create richer quiz experiences (highlighting the selected answer, revealing the correct one, showing an explanation) without multiplying screens or pop-ups.

Depending on your layout, you can use:

- **Screen states** (recommended when you build one screen per question). See [Screens](https://docs.pandasuite.com/essentials/layout/screens/) and [Understand states](https://docs.pandasuite.com/essentials/interactions/understand-states/).
- A [Multi-state](https://docs.pandasuite.com/essentials/components/multi-state/) component (useful when only part of the UI needs to change, such as the answer group, or when you keep multiple questions on one screen).

## Step 7: Add conditional actions (end screen, branching outcomes)

When you want the quiz to branch based on the score (or any other rule), use a [Condition](https://docs.pandasuite.com/essentials/components/condition/) component.

Examples:

- Show a "Beginner / Intermediate / Advanced" result screen based on `score`
- Unlock a bonus question if `score` is above a threshold

Workflow:

1. Insert a **Condition** component (screen level or **Project** level).
2. Create one condition per outcome (for example: "Score ≥ 3").
3. On the last question validation button, add an action to evaluate the condition.
4. In the Condition actions, navigate to the right screen (or open the right pop-up).

## Best practices

- **Reset the score**: if users can replay the quiz, reset `score` to zero at the start (action **Modify data** → **Set** → `0`).

For more on score management (display, data binding), see: [Score](https://docs.pandasuite.com/essentials/gamification/score/).

## See also

- [Score](https://docs.pandasuite.com/essentials/gamification/score/)
- [Variables](https://docs.pandasuite.com/essentials/data/variables/)
- [Pop-up](https://docs.pandasuite.com/essentials/components/pop-up/)
- [Understand states](https://docs.pandasuite.com/essentials/interactions/understand-states/)
- [Multi-state](https://docs.pandasuite.com/essentials/components/multi-state/)
- [Condition](https://docs.pandasuite.com/essentials/components/condition/)
- [Personality quiz](https://docs.pandasuite.com/essentials/gamification/personality-quiz/)

[Template: Interactive Bee Quiz](https://pandasuite.com/templates/bee-interactive-quiz/)

[Template: Multiple Choice Quiz (MCQ)](https://pandasuite.com/templates/multiple-choice-quiz/)