# Advanced formatting

Because a quiz is just markdown, the question, the answers and the content section can all contain rich markdown:
code blocks, tables, lists, images and inline formatting.

## Code in the question

<Quiz id="adv-code">
What does this snippet log?

```js
const xs = [1, 2, 3];
console.log(xs.map((x) => x * 2));
```

- [ ] `[1, 2, 3]`
- [x] `[2, 4, 6]`
- [ ] `[1, 4, 9]`

`Array.prototype.map` returns a new array with the callback applied to each element.

</Quiz>

`````mdx title="quiz.mdx"
<Quiz>
What does this snippet log?

```js
const xs = [1, 2, 3];
console.log(xs.map((x) => x * 2));
```

- [ ] `[1, 2, 3]`
- [x] `[2, 4, 6]`
- [ ] `[1, 4, 9]`

`Array.prototype.map` returns a new array with the callback applied to each element.
</Quiz>
`````

## Code block features

Code blocks in a quiz are rendered by [Expressive Code](https://expressive-code.com/), so the full meta-string syntax
works inside a quiz too: a filename `title`, highlighted lines (`{2}`), and `ins`/`del` diff markers:

<Quiz id="adv-eccode">
This refactor introduced a bug. Which highlighted change causes it?

```js title="cart.js" {2} del={4} ins={5}
function total(items) {
  let sum = 0;
  for (const item of items) {
    sum += item;
    sum += item.price;
  }
  return sum;
}
```

- [x] The inserted line should read `item.price`, not the removed `item`
- [ ] The highlighted initialiser
- [ ] The loop header

</Quiz>

`````mdx title="quiz.mdx"
<Quiz>
This refactor introduced a bug. Which highlighted change causes it?

```js title="cart.js" {2} del={4} ins={5}
function total(items) {
  let sum = 0;
  for (const item of items) {
    sum += item;
    sum += item.price;
  }
  return sum;
}
```

- [x] The inserted line should read `item.price`, not the removed `item`
- [ ] The highlighted initialiser
- [ ] The loop header
</Quiz>
`````

You can also give a marker a [label on its own line](https://expressive-code.com/key-features/text-markers/#adding-long-labels-on-their-own-lines)
with the `{"label":line}` syntax, handy for walking through an answer in the content section:

````md
```js {"This runs first, the accumulator starts at zero:":1}
let sum = 0;
```
````

## Rich content section

The content section revealed after submitting can hold headings, lists, tables and more:

<Quiz id="adv-content">
Which status code means "Not Found"?

- [ ] 200
- [ ] 301
- [x] 404
- [ ] 500

### Common status codes

| Code | Meaning               |
| ---- | --------------------- |
| 200  | OK                    |
| 301  | Moved Permanently     |
| 404  | Not Found             |
| 500  | Internal Server Error |

</Quiz>

```mdx title="quiz.mdx"
<Quiz>
Which status code means "Not Found"?

- [ ] 200
- [ ] 301
- [x] 404
- [ ] 500

### Common status codes

| Code | Meaning               |
| ---- | --------------------- |
| 200  | OK                    |
| 301  | Moved Permanently     |
| 404  | Not Found             |
| 500  | Internal Server Error |
</Quiz>
```

## Formatting in answers

Answers themselves accept inline markdown: `code`, **bold**, _italic_ and links:

<Quiz id="adv-answers">
Which command installs the package?

- [x] `npm install starlight-quiz`
- [ ] `npm start starlight-quiz`
- [ ] `npm run starlight-quiz`

</Quiz>

```mdx title="quiz.mdx"
<Quiz>
Which command installs the package?

- [x] `npm install starlight-quiz`
- [ ] `npm start starlight-quiz`
- [ ] `npm run starlight-quiz`
</Quiz>
```

:::note
Images work too: a standard markdown `![alt](src)` works in the question or content section.
:::