# Live demo

This page exercises every question type and feature. It also doubles as the fixture for the package's end-to-end tests,
so the quizzes here have stable ids. Switch each example to **Source** to see the markdown behind it.

<QuizIntro />

## Single choice

<Quiz id="demo-single">
Which planet is known as the Red Planet?

- [ ] Venus
- [x] Mars
- [ ] Jupiter

</Quiz>

```mdx title="quiz.mdx"
<Quiz>
Which planet is known as the Red Planet?

- [ ] Venus
- [x] Mars
- [ ] Jupiter
</Quiz>
```

## Multiple choice

<Quiz id="demo-multiple">
Which of these are prime numbers?

- [x] 2
- [ ] 4
- [x] 7
- [ ] 9

</Quiz>

```mdx title="quiz.mdx"
<Quiz>
Which of these are prime numbers?

- [x] 2
- [ ] 4
- [x] 7
- [ ] 9
</Quiz>
```

## Fill in the blank

<Quiz id="demo-blank">
The chemical symbol for water is [[H2O]].

</Quiz>

```mdx title="quiz.mdx"
<Quiz>
The chemical symbol for water is [[H2O]].
</Quiz>
```

## Kitchen sink

Most opt-in features at once: a `title`, shuffled answers, a manual Submit button (`autoSubmit={false}`), a retry
button (`disableAfterSubmit={false}`), a formatted question with a code block, per-answer feedback, and a rich content
section (heading, table, code and an image) revealed after submitting.

<Quiz
  id="demo-feedback"
  title="Which language runs in the browser?"
  shuffle
  autoSubmit={false}
  disableAfterSubmit={false}
  showCorrect
>
Which language runs **natively** in the browser, with no server or runtime required? Picture this running straight from a
`<script>` tag:

```js
console.log('hello from the browser');
```

- [x] JavaScript
  > Correct. It's the language of the web.
- [ ] Python
  > Needs a server or a runtime like Pyodide to run in a page.
- [ ] `C++`
  > Compiled ahead of time; it doesn't run directly in a page.
- [ ] Rust 🦀
  > Only via a WebAssembly build step.

---

### Why?

JavaScript is the only one of these that browsers execute directly. Everything else needs a server, a runtime, or a
compile step first:

| Option   | How it gets there            |
| -------- | ---------------------------- |
| `<script>` | Runs as-is, natively       |
| Pyodide  | Ships a Python runtime       |
| Wasm     | Compiled ahead of time       |

Images work in the content section too:

<img
  src="https://picsum.photos/seed/starlight-quiz/480/220"
  alt="A placeholder photo demonstrating images inside a quiz"
  width="480"
  style="max-width: 100%; height: auto; border-radius: 0.5rem;"
/>

</Quiz>

`````mdx title="quiz.mdx"
<Quiz
  title="Which language runs in the browser?"
  shuffle
  autoSubmit={false}
  disableAfterSubmit={false}
  showCorrect
>
Which language runs **natively** in the browser, with no server or runtime required? Picture this running straight from a
`<script>` tag:

```js
console.log('hello from the browser');
```

- [x] JavaScript
  > Correct. It's the language of the web.
- [ ] Python
  > Needs a server or a runtime like Pyodide to run in a page.
- [ ] `C++`
  > Compiled ahead of time; it doesn't run directly in a page.
- [ ] Rust 🦀
  > Only via a WebAssembly build step.

---

### Why?

JavaScript is the only one of these that browsers execute directly. Everything else needs a server, a runtime, or a
compile step first:

| Option   | How it gets there            |
| -------- | ---------------------------- |
| `<script>` | Runs as-is, natively       |
| Pyodide  | Ships a Python runtime       |
| Wasm     | Compiled ahead of time       |

Images work in the content section too:

<img src="https://picsum.photos/seed/starlight-quiz/480/220" alt="A random photo" width="480" />
</Quiz>
`````

## Results

<QuizResults />