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.

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

<QuizIntro />

<Quiz>…</Quiz>

Try it

Preview

Quiz answers on this page are saved to your browser's local storage and persist between visits.

Reset all answers

Where are your quiz answers stored?

• The browser’s local storage
• A remote database
• Nowhere, they’re lost on reload

Source

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 reset). On pages with the progress sidebar, 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:

<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:

<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 for the full list of component props.