Concept guide

Interactive HTML slide format

An HTML slide is a self-contained interactive web experience imported into a course as a ZIP package.

Required ZIP structure

index.html must be at the root of the ZIP. Keep all dependencies inside the package and use relative paths.

interactive-slide.zip
├── index.html
├── styles.css
├── script.js
├── data.json
└── assets/
    ├── diagram.png
    └── background.webp

Minimal entry point

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <title>Interactive slide</title>
  </head>
  <body>
    <main>
      <h1>Explore the process</h1>
      <button id="reveal">Reveal next step</button>
      <p id="answer" hidden>The next step appears here.</p>
    </main>
    <script src="script.js"></script>
  </body>
</html>

Package rules

Maximum 10 MB compressed, 25 MB expanded, and 200 files.
JavaScript, CSS, images, fonts, audio, video, JSON, and WebAssembly are supported.
External websites and APIs are blocked, except privacy-enhanced YouTube embeds from youtube-nocookie.com.
Absolute paths, parent-directory paths, symlinks, encrypted files, and duplicate paths are rejected.
The package runs in a sandbox and cannot access learnsai cookies or the surrounding page.
Interactions are local to each screen; only trainer slide navigation is synchronized.
Design for a responsive 16:9 presentation area and smaller participant devices.

YouTube embeds

Use YouTube's privacy-enhanced domain. Replace VIDEO_ID with the video's ID.

<iframe
  src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
  title="Video title"
  allow="autoplay; encrypted-media; picture-in-picture"
  allowfullscreen
></iframe>

Playback requires internet access and may be unavailable where YouTube is blocked.

Import workflow

Open the course editor and choose where the slide should appear.
Select Add HTML.
Enter a stable slide ID and a title.
Upload the ZIP and select Validate and insert.
Drag the new HTML slide into the required position.
Start a new session to use the updated course snapshot.