ImageSequencing

H5P equivalent

H5P Image Sequencing

When to use

Use ImageSequencing when learners must order images correctly — process steps, timeline photos, or procedure screenshots.

Requirements

  • correctOrder is an array of image id values in the target sequence.

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 

<ImageSequencing
  checkId="report-flow"
  images={[
    { id: "step-1", src: "/step-1.png", alt: "Do not click further links" },
    { id: "step-2", src: "/step-2.png", alt: "Report via mail client" },
  ]}
  correctOrder={["step-1", "step-2"]}
/>

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

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

Add a ImageSequencing block (H5P-style: Image Sequencing) like this example inside the active <Lesson>:

<ImageSequencing
  checkId="report-flow"
  images={[
    { id: "step-1", src: "/step-1.png", alt: "Do not click further links" },
    { id: "step-2", src: "/step-2.png", alt: "Report via mail client" },
  ]}
  correctOrder={["step-1", "step-2"]}
/>

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.
Sync lessonkit.json — add under course.assessments[]:

{
  "checkId": "procedure-seq",
  "kind": "imageSequencing",
  "question": "Order the procedure steps.",
  "correctOrder": ["step-1", "step-2"]
}

- 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

Add under course.assessments[]:

{
  "checkId": "procedure-seq",
  "kind": "imageSequencing",
  "question": "Order the procedure steps.",
  "correctOrder": ["step-1", "step-2"]
}

Touch behavior

Reorder with Up / Down lk-button lk-button--icon controls (44px minimum). Check and retry use lk-button. No drag-to-reorder—optimized for touch and keyboard.

See also