Packs

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.

View as Markdown

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

Quick check

  1. What absorbs light in a leaf?
    Answer

    Chlorophyll · Chlorophyll in the chloroplasts absorbs red and blue light.

  2. Which gas do plants take in?
    Answer

    Carbon dioxide · CO₂ enters through the stomata.

The model's answer
<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

Quick check

  1. What absorbs light in a leaf?
    Answer

    Chlorophyll · Chlorophyll in the chloroplasts absorbs red and blue light.

  2. Which gas do plants take in?
    Answer

    Carbon dioxide · CO₂ enters through the stomata.

The model's answer
<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

Key terms

  1. Chlorophyll

    The green pigment that absorbs light

  2. Stomata

    Pores that let gases in and out

  3. Glucose

    The sugar a plant makes

  4. Xylem

    Tubes that carry water up from the roots

The model's answer
<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
Which topic next?
The model's answer
<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

Revision plan

1 of 4 done

The model's answer
<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

Order total

Total $54.00

Saved $6.00

The model's answer
<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

Order total

Total $54.00

Saved $6.00

The model's answer
<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>