TimedCue

H5P equivalent

H5P Interactive Video (cue)

Parent compound

TimedCue only works inside InteractiveVideo. It is not a standalone video block — use Video for clips without timed overlays.

When to use

Use TimedCue as a child of InteractiveVideo to surface content or assessments at a timestamp. Set mustComplete on scored cues that should block video progress.

The demo shows a required TrueFalse at 3s and an informational Text cue at 8s.

Requirements

  • atSeconds is the trigger time.

  • Cue children are usually assessments or short content blocks.

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 

<InteractiveVideo blockId="access-briefing" title="Facility access" src="/media/sample-briefing.mp4">
  <TimedCue atSeconds={3} label="Tailgating" mustComplete>
    <TrueFalse checkId="cue-tf" question="Tailgating through secure doors is allowed." answer={false} />
  </TimedCue>
  <TimedCue atSeconds={8} label="Badges">
    <Text>Badges must be visible in secure areas.</Text>
  </TimedCue>
  <TimedCue atSeconds={9} label="Reporting" mustComplete>
    <TrueFalse checkId="cue-tf-2" question="Report lost badges to security the same day." answer={true} />
  </TimedCue>
</InteractiveVideo>

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

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

Add a TimedCue block (H5P-style: Interactive Video (cue)) like this example inside the active <Lesson>:

<InteractiveVideo blockId="access-briefing" title="Facility access" src="/media/sample-briefing.mp4">
  <TimedCue atSeconds={3} label="Tailgating" mustComplete>
    <TrueFalse checkId="cue-tf" question="Tailgating through secure doors is allowed." answer={false} />
  </TimedCue>
  <TimedCue atSeconds={8} label="Badges">
    <Text>Badges must be visible in secure areas.</Text>
  </TimedCue>
  <TimedCue atSeconds={9} label="Reporting" mustComplete>
    <TrueFalse checkId="cue-tf-2" question="Report lost badges to security the same day." answer={true} />
  </TimedCue>
</InteractiveVideo>

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:
`TimedCue` is a child of [`InteractiveVideo`](interactive-video.md) — no manifest row for the cue wrapper.
- Scored children inside a cue need **`checkId`** entries in `course.assessments[]`.
- Set **`mustComplete`** on cues that should block video progress.

- 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

TimedCue is a child of InteractiveVideo — no manifest row for the cue wrapper.

  • Scored children inside a cue need checkId entries in course.assessments[].

  • Set mustComplete on cues that should block video progress.

See also