QrContent

H5P equivalent

H5P KewAr Code

When to use

Use QrContent for scan-to-reveal bonus material — optional modules, job aids, or Easter-egg content unlocked after displaying a QR code.

Requirements

• payload becomes the encoded QR target (URL or text).

• Hidden content appears after the learner activates reveal.

• The live demo encodes the published security policy on Read the Docs so scanning opens a reachable page.

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.

Live demo

Open demo in full tab

React

<QrContent
  blockId="bonus-qr"
  title="Scan for security checklist"
  payload="https://lessonkit.readthedocs.io/en/latest/project/security.html"
  hiddenTitle="Checklist unlocked"
  hiddenBody="Optional deep dive: password managers and travel VPN."
/>

AI prompt

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

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

Add a QrContent block (H5P-style: KewAr Code) like this example inside the active <Lesson>:

<QrContent
  blockId="bonus-qr"
  title="Scan for security checklist"
  payload="https://lessonkit.readthedocs.io/en/latest/project/security.html"
  hiddenTitle="Checklist unlocked"
  hiddenBody="Optional deep dive: password managers and travel VPN."
/>

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

• Block catalog