InteractiveBook

H5P equivalent

H5P Interactive Book — paginated content with optional checks per page and resume state.

When to use

Use InteractiveBook for multi-page reading inside one lesson — handbooks, policy digests, or guided walkthroughs where learners move page-by-page.

Children must be Page blocks. Each page can contain content blocks and assessments (the demo ends with a TrueFalse on the last page).

Supports compound resume state so learners can continue where they left off.

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 

<InteractiveBook blockId="safety-book" title="Security handbook">
  <Page blockId="book-intro" title="Reporting">
    <Text>Use the Report phishing action - do not forward suspicious messages.</Text>
  </Page>
  <Page blockId="book-devices" title="Devices">
    <Text>Lock your screen when leaving your desk.</Text>
  </Page>
  <Page blockId="book-check" title="Knowledge check">
    <TrueFalse checkId="book-tf" question="Forwarding suspicious mail is better than Report phishing." answer={false} />
  </Page>
</InteractiveBook>

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

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

Add a InteractiveBook block (H5P-style: Interactive Book) like this example inside the active <Lesson>:

<InteractiveBook blockId="safety-book" title="Security handbook">
  <Page blockId="book-intro" title="Reporting">
    <Text>Use the Report phishing action - do not forward suspicious messages.</Text>
  </Page>
  <Page blockId="book-devices" title="Devices">
    <Text>Lock your screen when leaving your desk.</Text>
  </Page>
  <Page blockId="book-check" title="Knowledge check">
    <TrueFalse checkId="book-tf" question="Forwarding suspicious mail is better than Report phishing." answer={false} />
  </Page>
</InteractiveBook>

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:
Compound blocks are authored in React — there is no `lessonkit.json` row for `InteractiveBook` itself.
- Set stable **`blockId`** on `InteractiveBook` and each child **`Page`** when `config.session.persistCompoundState` is true (default).
- Add nested assessment **`checkId`** values under `course.assessments[]` (for example `book-tf` on a page).
- Session resume stores page index and child assessment state. See [Core — compound state](../core.md#compound-state-and-resume).

- 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

Compound blocks are authored in React — there is no lessonkit.json row for InteractiveBook itself.

  • Set stable blockId on InteractiveBook and each child Page when config.session.persistCompoundState is true (default).

  • Add nested assessment checkId values under course.assessments[] (for example book-tf on a page).

  • Session resume stores page index and child assessment state. See Core — compound state.

Touch behavior

Book page navigation uses CompoundNav with lk-button Prev/Next controls sized for coarse pointers (44px minimum with base theme CSS).

See also