BranchChoice

H5P equivalent

H5P Branching Scenario (choice)

Parent compound

BranchChoice only works inside an active BranchNode, which must be a child of BranchingScenario.

When to use

Use BranchChoice inside BranchNode to offer labeled navigation to another nodeId. After a choice is selected, the parent scenario advances and the status line confirms the new step. Optional scoreWeight contributes to showPathScore totals on the parent scenario.

Requirements

  • targetNodeId must reference another BranchNode in the same scenario.

  • Choices render as radio-style buttons; only the active node accepts input.

Try it

Documentation demo

Use the Live demo, React, AI prompt, and Packaging / Manifest tabs below. Embedded demos disable telemetry, xAPI, and the LMS bridge. For production delivery, use the CLI template src/courseConfig.ts and LMS Go-Live.

Open demo in full tab 

<BranchNode nodeId="fork">
  <Text>Finance flagged a duplicate wire with end-of-day pressure.</Text>
  <BranchChoice label="Escalate and hold payment" targetNodeId="supervisor" scoreWeight={1} />
  <BranchChoice label="Approve to avoid delays" targetNodeId="approve" />
</BranchNode>

Copy into Cursor, Copilot, or ChatGPT after the vibe coding starter context:

Read lessonkit.json and src/App.tsx before editing.

Add a BranchChoice block (H5P-style: Branching Scenario (choice)) like this example inside the active <Lesson>:

<BranchNode nodeId="fork">
  <Text>Finance flagged a duplicate wire with end-of-day pressure.</Text>
  <BranchChoice label="Escalate and hold payment" targetNodeId="supervisor" scoreWeight={1} />
  <BranchChoice label="Approve to avoid delays" targetNodeId="approve" />
</BranchNode>

Requirements:
- Import only from @lessonkit/react; use block types from block-catalog.v3.json.
- Keep existing courseId, lessonId, and navigation stable unless I ask to add a lesson.
- Mount only inside the documented parent compound (see component page When to use).
Packaging notes:
`BranchChoice` links [`BranchNode`](branch-node.md) steps — no manifest entry.
- **`targetNodeId`** must reference another node in the same scenario.
- Optional **`scoreWeight`** contributes to `showPathScore` on the parent scenario.

- After edits, list changed files and what to verify in the browser (lessonkit dev).

Workflow tips: https://lessonkit.readthedocs.io/en/latest/guides/vibe-coding/prompting-and-workflows.html

BranchChoice links BranchNode steps — no manifest entry.

  • targetNodeId must reference another node in the same scenario.

  • Optional scoreWeight contributes to showPathScore on the parent scenario.

See also