PracticeActivity

learning · interactive (ships a small web component) · no children. All components: component playground.

Description for the model

Scaffolded practice container (required for any practice in a layout): an intro, a toolbox of allowed resources, and 1-6 challenges of rising level (1 guided, 2 supported, 3 independent). Each challenge may offer hints in tiers (nudge, then pointer, then near_solution), answer options that each explain why, and a worked solution that stays hidden until the learner has made an attempt.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "PracticeActivity",
  "props": {
    "title": "Dial in a pour-over",
    "intro": "Practise adjusting one variable at a time, with less help at each level.",
    "toolbox": [
      {
        "label": "Brew ratio chart",
        "text": "Check the target ratio before you change anything."
      },
      {
        "label": "Taste wheel",
        "text": "Name what you taste before deciding what to fix."
      }
    ],
    "challenges": [
      {
        "id": "c1",
        "level": 1,
        "prompt": "The cup tastes sour and thin. Which single change should you try first?",
        "hints": [
          {
            "tier": "near_solution",
            "text": "Sour usually means under-extraction; you want more extraction, not less."
          },
          {
            "tier": "nudge",
            "text": "What does sourness tell you about how much was dissolved?"
          },
          {
            "tier": "pointer",
            "text": "Look at the grind and temperature rows of the troubleshooting chart."
          }
        ],
        "options": [
          {
            "label": "Grind finer",
            "correct": true,
            "feedback": "A finer grind exposes more surface, so more dissolves and the sourness fades."
          },
          {
            "label": "Use cooler water",
            "correct": false,
            "feedback": "Cooler water dissolves less, which makes under-extraction worse."
          }
        ],
        "workedSolution": "Sour and thin points to under-extraction. Change one variable: grind one step finer and brew again. Cooler water would extract even less."
      },
      {
        "id": "c2",
        "level": 3,
        "prompt": "Write the adjustment plan for a bitter, dry cup, in your own words.",
        "hints": [
          {
            "tier": "nudge",
            "text": "Bitter and dry is the opposite problem of sour."
          }
        ],
        "workedSolution": "Bitter and dry means over-extraction: grind one step coarser or shorten the brew time, change only one, and taste again."
      }
    ]
  }
}

Props

Prop	Type	Required	Notes
id	string		Anchor id. max length 40, default "practice"
title	string		Section title. max length 160
intro	string	yes	What the learner will practise and why, in one or two sentences. max length 800
toolbox	array of objects	yes	Resources the learner may use (formulas, glossary, earlier lesson); at least one. min 1 items, max 8 items
toolbox[].label	string	yes	Resource or tool. max length 80
toolbox[].text	string		When and how to use it. max length 300
challenges	array of objects	yes	Challenges in rising level. min 1 items, max 6 items
challenges[].id	string	yes	Stable challenge id, unique in this activity. max length 40
challenges[].level	integer	yes	1 = guided, 2 = supported, 3 = independent. ≥ 1, ≤ 3
challenges[].prompt	string	yes	The task. max length 800
challenges[].hints	array of objects		Hints, revealed one at a time in tier order. max 3 items
challenges[].hints[].tier	"nudge" | "pointer" | "near_solution"	yes	nudge = a question to think about; pointer = where to look; near_solution = almost the answer
challenges[].hints[].text	string	yes	The hint. max length 400
challenges[].options	array of objects		Answer options; leave empty for an open task the learner marks as tried. max 6 items
challenges[].options[].label	string	yes	Answer option. max length 300
challenges[].options[].correct	boolean		Whether this option is right. default false
challenges[].options[].feedback	string	yes	Why this option is right or wrong. max length 500
challenges[].workedSolution	string	yes	Full worked solution; shown only after the learner has made an attempt. max length 2000

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Dial in a pour-over
Practise adjusting one variable at a time, with less help at each level.
Toolbox: Brew ratio chart
Toolbox: Taste wheel
Level 1: The cup tastes sour and thin. Which single change should you try first?
Level 3: Write the adjustment plan for a bitter, dry cup, in your own words.

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "intro": "Missing the toolbox and the challenges."
}

Issues:

• /toolbox is required
• /challenges is required
• /toolbox fewer than 1 items
• /challenges fewer than 1 items

Rendered as:

Missing the toolbox and the challenges.

Accessibility

axe-core: 22 rules passed, 0 violations, 1 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.