# Intro panel

Drop a `<QuizIntro>` component near the top of a page to reassure readers that their answers are saved between visits,
and to give them a one-click button to clear every quiz on the page. It is the equivalent of mkdocs-quiz's
`<!-- mkdocs-quiz intro -->` placeholder.

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

<QuizIntro />

<Quiz>…</Quiz>
```

## Try it

<QuizIntro />

<Quiz id="intro-demo">
Where are your quiz answers stored?

- [x] The browser's local storage
- [ ] A remote database
- [ ] Nowhere, they're lost on reload

</Quiz>

```mdx title="quiz.mdx"
<QuizIntro />

<Quiz>
Where are your quiz answers stored?

- [x] The browser's local storage
- [ ] A remote database
- [ ] Nowhere, they're lost on reload
</Quiz>
```

Answer the quiz, then press **Reset all answers** to clear it.

## Reset behaviour

The button clears the saved progress for **every** quiz on the current page (the same action as the
[results panel](/starlight-quiz/guides/results-screen/) reset). On pages with the
[progress sidebar](/starlight-quiz/guides/progress-tracking/), that widget already offers a reset link, so an intro
panel is optional.

## Customising the text

Pass your own message as the component's children to override the default. Markdown works here, so you can add
emphasis or a link:

```mdx
<QuizIntro>Your answers are **saved locally**, clear them any time.</QuizIntro>
```

The message and the button label are also translatable (13 languages out of the box). Outside
Starlight (where markdown children aren't available in a plain `.astro` file), set them with props instead:

```astro
<QuizIntro textLabel="Your answers are saved locally." resetLabel="Start over" />
```

A slot, when given, wins over `textLabel`, which in turn wins over the translated default. See
[Configuration](/starlight-quiz/guides/configuration/) for the full list of component props.