Scenario

When to use

Use Scenario for narrative framing — inbox simulations, dialogue setup, or situational context before a decision. It is a semantic content container, not a scored assessment.

Set blockId when you want stable block URNs on manual interaction events via useTracking().

Pair with Quiz, TrueFalse, or custom buttons that call useTracking().interaction() when learners take an action.

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 

<Scenario blockId="inbox-scenario">
  <p>
    You receive an email from <strong>payroll-notify@hr-portal-support.net</strong> asking
    you to confirm direct deposit details before end of day.
  </p>
  <p>What is your first move?</p>
</Scenario>

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

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

Add a Scenario block like this example inside the active <Lesson>:

<Scenario blockId="inbox-scenario">
  <p>
    You receive an email from <strong>payroll-notify@hr-portal-support.net</strong> asking
    you to confirm direct deposit details before end of day.
  </p>
  <p>What is your first move?</p>
</Scenario>

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.
- 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

See also