# Results screen

Drop a `<QuizResults>` component onto a page to show aggregate progress across every quiz on it. As readers answer, the
panel tracks how many quizzes are done; once they have all been answered it reveals a score with an encouraging
message.

```mdx
import { Quiz, QuizResults } from 'starlight-quiz/components';

<Quiz>…</Quiz>
<Quiz>…</Quiz>

<QuizResults />
```

## Try it

Answer both quizzes to reveal the score panel below.

<Quiz id="results-q1">
What does HTML stand for?

- [x] HyperText Markup Language
- [ ] Hyperlink Text Mode Language
- [ ] Home Tool Markup Language

</Quiz>

<Quiz id="results-q2">
Which language styles a web page?

- [x] CSS
- [ ] SQL
- [ ] JSON

</Quiz>

<QuizResults />

```mdx title="quiz.mdx"
<Quiz>
What does HTML stand for?

- [x] HyperText Markup Language
- [ ] Hyperlink Text Mode Language
- [ ] Home Tool Markup Language
</Quiz>

<Quiz>
Which language styles a web page?

- [x] CSS
- [ ] SQL
- [ ] JSON
</Quiz>

<QuizResults />
```

## Score tiers

The message shown depends on the percentage of quizzes answered correctly:

| Score    | Message                                    |
| -------- | ------------------------------------------ |
| 90–100 % | Outstanding! You aced it!                  |
| 75–89 %  | Great job! You really know your stuff!     |
| 60–74 %  | Good effort! Keep learning!                |
| 40–59 %  | Not bad, but there's room for improvement! |
| 0–39 %   | Better luck next time! Keep trying!        |

## Confetti

Confetti fires on a first-time completion (when the score is at least 10 %) **by default**. Pass `confetti={false}`
to turn it off:

```mdx
<QuizResults confetti={false} />
```

The confetti library is loaded with a dynamic import, so it adds nothing to your bundle unless it actually fires. Confetti
is also skipped for readers who set **`prefers-reduced-motion`**.

## Resetting

The results panel includes a **Reset all answers** button that clears every quiz on the page. Each quiz also keeps its
own reset button when [`disableAfterSubmit`](/starlight-quiz/guides/configuration/#disableaftersubmit) is `false`.