MapStage

H5P equivalent

H5P Game Map (stage)

When to use

Use MapStage only inside GameMap. Each stage is content shown when the learner visits a point on the background image (x/y percentages position the marker).

Requirements

  • stageId must be unique within the map.

  • startStageId on the parent must match a stage.

  • Children may include MapExit, content blocks, and 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 

<GameMap blockId="zones" title="Building zones" backgroundSrc="/map.svg" startStageId="lobby">
  <MapStage stageId="lobby" x={30} y={55} label="Lobby">
    <Text>Reception verifies visitors before secure areas.</Text>
    <MapExit label="Enter work floor" targetStageId="floor" />
  </MapStage>
  <MapStage stageId="floor" x={70} y={40} label="Work floor">
    <TrueFalse checkId="stage-tf" question="Tailgating is acceptable when you recognize someone." answer={false} />
  </MapStage>
</GameMap>

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

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

Add a MapStage block (H5P-style: Game Map (stage)) like this example inside the active <Lesson>:

<GameMap blockId="zones" title="Building zones" backgroundSrc="/map.svg" startStageId="lobby">
  <MapStage stageId="lobby" x={30} y={55} label="Lobby">
    <Text>Reception verifies visitors before secure areas.</Text>
    <MapExit label="Enter work floor" targetStageId="floor" />
  </MapStage>
  <MapStage stageId="floor" x={70} y={40} label="Work floor">
    <TrueFalse checkId="stage-tf" question="Tailgating is acceptable when you recognize someone." answer={false} />
  </MapStage>
</GameMap>

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:
`MapStage` is a child of [`GameMap`](game-map.md) — no manifest row for the stage itself.
- Unique **`stageId`** per stage; **`startStageId`** on the parent must match one stage.
- Children may include `MapExit`, content blocks, and assessments.

- 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

MapStage is a child of GameMap — no manifest row for the stage itself.

  • Unique stageId per stage; startStageId on the parent must match one stage.

  • Children may include MapExit, content blocks, and assessments.

See also