InteractiveLesson

learning · interactive (ships a small web component) · no children. All components: component playground.

Description for the model

An author-uploaded interactive package (3D scene, map, simulation) in a sandboxed frame on the tenant content origin, inline or as the background of the page, with steps, a text version and the licence. Progress goes through the learner session.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "InteractiveLesson",
  "props": {
    "src": "https://content.localhost/interactive/0f8c1c3e-4d5b-4a8e-9c0a-1b2c3d4e5f60/v1/index.html",
    "title": "Too slow: the Sun and a falling Earth",
    "topicId": 42,
    "courseId": 7,
    "display": "background",
    "height": 640,
    "startStep": "too-slow",
    "endStep": "too-slow",
    "steps": [
      {
        "id": "too-slow",
        "title": "Too slow, it falls in",
        "text": "Earth moving much slower than its orbital speed falls toward the Sun instead of circling it.",
        "poster": "https://content.localhost/interactive/0f8c1c3e-4d5b-4a8e-9c0a-1b2c3d4e5f60/v1/posters/too-slow.webp"
      }
    ],
    "text": "Drag the speed slider and watch what happens to the orbit.",
    "requires": [
      "webgl"
    ],
    "reducedMotionSupported": true,
    "locale": "en",
    "licence": "MIT",
    "attribution": "Written by the course authors.",
    "sourceUrl": "https://example.com/gravity"
  }
}

Props

Prop	Type	Required	Notes
src	string (href)	yes	Entry file on the content origin (from POST /api/interactive/launches/{topic}). max length 2048
title	string	yes	Title. max length 160
topicId	integer		Topic id for the events call (omitted in a preview: nothing is tracked). ≥ 0
courseId	integer		Course id. ≥ 0
display	"inline" | "background"		Inline in the page, or the background of the page with the text over it. default "inline"
height	integer		Frame height px (inline only). ≥ 240, ≤ 2000, default 640
startStep	string		First step of the range this topic plays. max length 64
endStep	string		Last step of the range this topic plays. max length 64
steps	array of objects	yes	Steps with their text alternatives and posters. min 1 items, max 200 items
steps[].id	string	yes	Step id. max length 64
steps[].title	string	yes	Step title. max length 255
steps[].text	string	yes	Text alternative of the step. max length 4000
steps[].poster	string (href)		Poster image of the step. max length 2048
text	string		The lesson’s own explanation (Markdown). max length 20000
requires	array of string		Capabilities the package needs. max 5 items
reducedMotionSupported	boolean		The package handles reduced motion itself. default false
locale	string		Language of the texts. max length 16, default "en"
licence	string		SPDX licence id. max length 64
attribution	string		Attribution line. max length 1000
sourceUrl	string (href)		Source code or origin of the package. max length 2048
id	string		Anchor id for in-page links (letters, digits, dashes). max length 40

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Too slow: the Sun and a falling Earth

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "src": "javascript:alert(1)",
  "title": "Unsafe",
  "steps": []
}

Issues:

• /src unsafe or empty link
• /steps fewer than 1 items

Rendered as:

Unsafe

Accessibility

axe-core: 21 rules passed, 0 violations, 1 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.