# Interactive components

> The interactive pack's 7 components: things the reader does on the page, kept on their device and reported back: a quiz, flashcards, a poll, a checklist, and what-if sliders.

Add it with `packs: ["interactive"]`, or leave `packs` out for every pack.

## Quiz

Questions with one right answer each: the reader picks, sees right or wrong and why, then a score. End with one when the reader is learning something.

Between its tags: only `Question` components.

| Attribute | Type | Required | Values |
|---|---|---|---|
| `title` | text |  |  |

```markdown
<Quiz title="Quick check">
<Question text="What absorbs light in a leaf?" answer="B" explain="Chlorophyll in the chloroplasts absorbs red and blue light.">
- A. Stomata
- B. Chlorophyll
- C. Xylem
</Question>
<Question text="Which gas do plants take in?" answer="Carbon dioxide" explain="CO₂ enters through the stomata.">
- Oxygen
- Carbon dioxide
- Nitrogen
</Question>
</Quiz>
```
## Question

One question inside Quiz; its choices are the Markdown list inside; answer, always given, names the right one (its letter or words).

Between its tags: a Markdown list. It goes inside `Quiz`.

| Attribute | Type | Required | Values |
|---|---|---|---|
| `text` | text | yes |  |
| `answer` | text | yes |  |
| `explain` | text |  |  |

```markdown
<Quiz title="Quick check">
<Question text="What absorbs light in a leaf?" answer="B" explain="Chlorophyll in the chloroplasts absorbs red and blue light.">
- A. Stomata
- B. Chlorophyll
- C. Xylem
</Question>
<Question text="Which gas do plants take in?" answer="Carbon dioxide" explain="CO₂ enters through the stomata.">
- Oxygen
- Carbon dioxide
- Nitrogen
</Question>
</Quiz>
```
## Flashcards

Cards the reader flips, from the Markdown table inside: the front, then the back. For words, terms or facts to remember.

Between its tags: a Markdown table (first column labels, the others series).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `title` | text |  |  |

```markdown
<Flashcards title="Key terms">
| Term | Meaning |
|---|---|
| Chlorophyll | The green pigment that absorbs light |
| Stomata | Pores that let gases in and out |
| Glucose | The sugar a plant makes |
| Xylem | Tubes that carry water up from the roots |
</Flashcards>
```
## Poll

A vote with one choice.

Between its tags: nothing: it closes itself (`<Name ... />`).

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `options` | values split by ` | ` | yes |  |
| `name` | text |  |  |

```markdown
<Poll label="Which topic next?" options="Respiration | Transpiration | Cell division" name="next" />
```
## Checklist

Tasks to tick off, one per Markdown list item ([x] marks one done), with progress. For things the reader has to do, pack or buy.

Between its tags: a Markdown list.

| Attribute | Type | Required | Values |
|---|---|---|---|
| `title` | text |  |  |
| `name` | text |  |  |

```markdown
<Checklist title="Revision plan" name="revision">
- [x] Read chapter 4
- [ ] Draw the leaf diagram
- [ ] Do the 2024 past paper
- [ ] Make flashcards for the key terms
</Checklist>
```
## WhatIf

Sliders and the Results they change, worked out as the reader moves them. For an answer that turns on numbers the reader could change.

Between its tags: Markdown and other components.

| Attribute | Type | Required | Values |
|---|---|---|---|
| `title` | text |  |  |

```markdown
<WhatIf title="Order total">
<Slider label="Price" min="5" max="100" value="20" />
<Slider label="Quantity" name="qty" min="1" max="10" value="3" />
<Slider label="Discount (%)" min="0" max="50" value="10" />
<Result label="Total" value="price * qty * (1 - discount / 100)" unit="$" decimals="2" />
<Result label="Saved" value="price * qty * discount / 100" unit="$" decimals="2" />
</WhatIf>
```
## Result

A number inside WhatIf; value is a formula of the Sliders' names (+ - * / ^, min, max, round).

Between its tags: nothing: it closes itself (`<Name ... />`). It goes inside `WhatIf`.

| Attribute | Type | Required | Values |
|---|---|---|---|
| `label` | text | yes |  |
| `value` | text | yes |  |
| `unit` | text |  |  |
| `decimals` | number |  |  |

```markdown
<WhatIf title="Order total">
<Slider label="Price" min="5" max="100" value="20" />
<Slider label="Quantity" name="qty" min="1" max="10" value="3" />
<Slider label="Discount (%)" min="0" max="50" value="10" />
<Result label="Total" value="price * qty * (1 - discount / 100)" unit="$" decimals="2" />
<Result label="Saved" value="price * qty * discount / 100" unit="$" decimals="2" />
</WhatIf>
```