BranchingScenario

H5P equivalent

H5P Branching Scenario — directed graph of nodes and choices with optional terminal assessments.

When to use

Use BranchingScenario when learner decisions change the path — customer de-escalation, ethics dilemmas, troubleshooting trees, or “choose your response” simulations.

The scenario shows a path indicator (visited steps), a status line when the active node changes, and a Scenario complete banner at terminal nodes. Optional showPathRecap adds a full ordered recap at the end.

Compose with:

  • BranchNode — narrative and choices (BranchChoice children)

  • BranchChoice — label + targetNodeId

  • Terminal nodes — may include scored blocks like TrueFalse

Set startNodeId to the entry node. Use showPathScore when terminal nodes contain assessments.

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 

<BranchingScenario blockId="call-paths" title="Suspicious charge call" startNodeId="opening" showPathScore>
  <BranchNode nodeId="opening">
    <Text>A customer reports a duplicate charge after clicking a shipping email link.</Text>
    <BranchChoice label="Acknowledge concern and verify account" targetNodeId="empathy" />
    <BranchChoice label="Quote the no-refund policy first" targetNodeId="policy" />
  </BranchNode>
  <BranchNode nodeId="empathy" terminal>
    <Text>You secured the account and escalated to fraud review.</Text>
  </BranchNode>
</BranchingScenario>

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

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

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

<BranchingScenario blockId="call-paths" title="Suspicious charge call" startNodeId="opening" showPathScore>
  <BranchNode nodeId="opening">
    <Text>A customer reports a duplicate charge after clicking a shipping email link.</Text>
    <BranchChoice label="Acknowledge concern and verify account" targetNodeId="empathy" />
    <BranchChoice label="Quote the no-refund policy first" targetNodeId="policy" />
  </BranchNode>
  <BranchNode nodeId="empathy" terminal>
    <Text>You secured the account and escalated to fraud review.</Text>
  </BranchNode>
</BranchingScenario>

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.
Packaging notes:
No manifest row for `BranchingScenario` unless nodes contain scored blocks.
- Set stable **`blockId`** and valid **`startNodeId`** when using session resume.
- Optional **`showPathScore`** aggregates visited-path weights from [`BranchChoice`](branch-choice.md).
- Validate the graph with `validateBranchGraph()` from `@lessonkit/core`. See [Core — branching](../core.md#branching-scenario-meta).
- Add `course.assessments[]` only for embedded checks (for example `branch-tf` on a terminal node).

- 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

No manifest row for BranchingScenario unless nodes contain scored blocks.

  • Set stable blockId and valid startNodeId when using session resume.

  • Optional showPathScore aggregates visited-path weights from BranchChoice.

  • Validate the graph with validateBranchGraph() from @lessonkit/core. See Core — branching.

  • Add course.assessments[] only for embedded checks (for example branch-tf on a terminal node).

See also