Skip to content
Starlight QuizStarlight Quiz

Quick start

Install

Section titled “Install”
Terminal window
npm install starlight-quiz

Add the plugin

Section titled “Add the plugin”

Register the plugin in your Starlight configuration. It wires up the styles and translations for you.

astro.config.mjs
import starlight from '@astrojs/starlight';
import starlightQuiz from 'starlight-quiz';
import { defineConfig } from 'astro/config';


export default defineConfig({
  integrations: [
    starlight({
      title: 'My docs',
      plugins: [starlightQuiz()],
    }),
  ],
});

Write a quiz

Section titled “Write a quiz”

Quizzes are written with markdown inside an imported <Quiz> component. The basic structure is a question, a task list of answers, and an optional content section. A ticked box ([x]) is a correct answer; an empty box ([ ]) is incorrect:

quiz.mdx
import { Quiz } from 'starlight-quiz/components';


<Quiz>
Question text goes here.


- [x] Correct answer
- [ ] Incorrect answer
- [ ] Another incorrect answer


Optional content, revealed after the answer is submitted.
</Quiz>

This renders as:

Question text goes here.

  • Correct answer
  • Incorrect answer
  • Another incorrect answer

Optional content, revealed after the answer is submitted.

Multiple correct answers

Section titled “Multiple correct answers”

With one correct answer you get radio buttons. With more than one, the quiz switches to checkboxes automatically:

quiz.mdx
<Quiz>
Which of these are programming languages?


- [x] Python
- [ ] HTML
- [x] JavaScript
- [ ] CSS


Python and JavaScript are programming languages, while HTML and CSS are
markup/styling languages.
</Quiz>

This renders as:

Which of these are programming languages?

  • Python
  • HTML
  • JavaScript
  • CSS

Python and JavaScript are programming languages, while HTML and CSS are markup/styling languages.

All correct answers (and only the correct answers) must be selected to get the question right.

Fill-in-the-blank

Section titled “Fill-in-the-blank”

For questions where readers type the answer, wrap the expected answer in double square brackets:

quiz.mdx
<Quiz>
The capital of France is [[Paris]].
</Quiz>

This renders as:

The capital of France is [[Paris]].

Answers are case-insensitive, so “Paris”, “paris” and “PARIS” are all accepted.

Next steps

Section titled “Next steps”