SlideDeck

H5P equivalent

H5P Course Presentation — keyboard-navigable slides with optional deck-level scoring.

When to use

Use SlideDeck for presentation-style lessons — onboarding briefings, visual walkthroughs, or conference-style content with one idea per slide.

Children must be Slide blocks. Enable showDeckScore when slides contain scored children and you want aggregate feedback.

The demo uses Heading, Text, and TrueFalse across two slides.

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 

<SlideDeck blockId="onboarding-deck" title="Phishing red flags" showDeckScore>
  <Slide blockId="deck-welcome" title="Welcome">
    <Heading level={2}>Spot the red flags</Heading>
    <Text>Sender impersonation, urgency tactics, and safe reporting.</Text>
  </Slide>
  <Slide blockId="deck-check" title="Check">
    <TrueFalse checkId="deck-tf" question="Urgent language alone proves an email is malicious." answer={false} />
  </Slide>
</SlideDeck>

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

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

Add a SlideDeck block (H5P-style: Course Presentation) like this example inside the active <Lesson>:

<SlideDeck blockId="onboarding-deck" title="Phishing red flags" showDeckScore>
  <Slide blockId="deck-welcome" title="Welcome">
    <Heading level={2}>Spot the red flags</Heading>
    <Text>Sender impersonation, urgency tactics, and safe reporting.</Text>
  </Slide>
  <Slide blockId="deck-check" title="Check">
    <TrueFalse checkId="deck-tf" question="Urgent language alone proves an email is malicious." answer={false} />
  </Slide>
</SlideDeck>

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 `lessonkit.json` row for `SlideDeck` — compose slides in React.
- Set **`blockId`** on `SlideDeck` and each **`Slide`** when `persistCompoundState` is enabled.
- Add child assessment **`checkId`** values (for example `deck-tf`) under `course.assessments[]`.
- Resume persists active slide index and child assessment state.

- 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 lessonkit.json row for SlideDeck — compose slides in React.

  • Set blockId on SlideDeck and each Slide when persistCompoundState is enabled.

  • Add child assessment checkId values (for example deck-tf) under course.assessments[].

  • Resume persists active slide index and child assessment state.

Touch behavior

Previous and Next slide navigation uses shared CompoundNav with lk-button controls (44px minimum height) when @lessonkit/themes/base.css is imported.

See also