> ## Documentation Index
> Fetch the complete documentation index at: https://docs.junojourney.com/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML Lessons

> Build an interactive HTML lesson with your AI assistant, refine it in a draft workspace, save it as a tracked unit, and preview or restore earlier versions.

export const RelatedPages = ({pages = []}) => {
  if (pages.length === 0) return null;
  return <>
      <br />
      <strong>Related articles</strong>
      <CardGroup cols={2}>
        {pages.map(page => <Card title={page.title} href={page.href} key={page.href} />)}
      </CardGroup>
    </>;
};

export const Prerequisites = ({items = []}) => {
  return <Note title="Before you start">
      {items.length > 0 && <ul>
          {items.map((item, index) => <li key={index}>{item}</li>)}
        </ul>}
    </Note>;
};

export const RoleBadge = ({roles = []}) => {
  const colorMap = {
    Admin: "yellow",
    Manager: "blue",
    Learner: "green",
    "Co-editor": "purple"
  };
  return <>
      {roles.map(role => <span key={role}><Badge color={colorMap[role] || "gray"} size="sm" shape="pill">{role}</Badge>{" "}</span>)}
    </>;
};

export const FeatureAvailability = ({module, feature}) => {
  const label = feature || module;
  return <Info title="Feature availability">
      {label ? <>This feature requires the <strong>{label}</strong> module. </> : <>This feature may not be enabled for your organization. </>}
      If you don't see it in Juno, contact your administrator.
    </Info>;
};

<RoleBadge roles={["Admin", "Manager"]} />

<FeatureAvailability module="LMS" />

An **HTML lesson** is an interactive lesson, such as a practice scenario, a simulation, or a game, that your AI assistant builds from HTML and saves in Juno as a SCORM unit. Juno records score, completion, and resume position the same way it does for any [SCORM content](/learning/scorm-content).

This page covers the full loop: draft, preview, save, edit, and restore an earlier version.

<Prerequisites
  items={[
"Your AI assistant is connected to the Juno MCP server",
"Your organization has the LMS module",
"You can create SCORM content in Juno",
]}
/>

***

## How building a lesson works

You describe the lesson to your assistant: what learners should practice, who it is for, what material you have, and whether it is scored. The assistant does the building. You review and approve.

<Steps>
  <Step title="The assistant opens a draft workspace">
    A draft workspace is a set of files the assistant can edit and preview. Drafts are invisible to learners. It can start from a full HTML document, from a lesson already saved in Juno, or from an empty draft. Images, video, and audio that the assistant generated are copied next to the lesson, so the lesson plays offline.
  </Step>

  <Step title="You preview it">
    The assistant gives you a preview link. The preview plays the lesson as a learner would and logs every tracking call the lesson makes: status, score, completion, and resume position. Use it to check both how the lesson looks and how it grades.
  </Step>

  <Step title="You comment on what to change">
    The preview has a review mode. Select any element, leave a comment, and copy the prompt it builds. The prompt names the element and its current text, so the assistant knows exactly what to edit.
  </Step>

  <Step title="The assistant revises the draft in place">
    It changes one file at a time, by swapping a piece of text, rewriting the file, or deleting it. It can also add images, video, audio, fonts, and large files, either by copying media already hosted in Juno or by uploading the file. Nothing is re-sent in full, so revising stays fast.
  </Step>

  <Step title="You approve and the assistant saves">
    Saving creates a playable unit in Juno. It appears in the catalog by default, and you can assign it, pin it to a channel, or add it to a Journey like a course. It is **live immediately**. There is no separate publish step, so ask your assistant to save only when you are ready.
  </Step>
</Steps>

<Tip>
  A lesson that your assistant sends in a single message is limited to about 60 KB of HTML. For larger lessons and for media, the assistant uploads files into the draft instead. You do not need to do anything differently.
</Tip>

<Note>
  The preview shows tracking only if the lesson reports progress through the SCORM standard. A static page with no tracking still renders, but it records nothing. Ask your assistant to confirm that completion and score fire in the preview before you save.
</Note>

***

## Start from the Create menu

If your organization has AI assistant prompts turned on, a sparkle button, or your assistant's logo, appears when you hover **SCORM** in the **+ Create** menu, and next to the **Upload your SCORM file** heading in the SCORM editor. Select it to open a ready-made prompt, **Build interactive lessons with AI**, in your assistant. If you have not connected an assistant yet, managers and admins see how to connect one instead. This may not be enabled for your organization.

***

## Edit a saved lesson

Your assistant edits a lesson that is already saved without rebuilding it from memory:

1. It reads what the lesson is serving now, so it starts from the real current version.
2. It opens that lesson into a new draft workspace and makes its changes.
3. You preview the draft.
4. It saves the draft as a **new version** of the same unit.

The new version goes live immediately. Nothing else about the unit changes: assignments, channels, and Journey placements stay as they are. Media the lesson already had is carried forward. Earlier versions are kept.

### Edit an uploaded package

The same flow works for a package you uploaded, such as an export from Articulate Rise or Storyline. Your assistant can change the package's text and styling and save it back as a new version. It leaves the package's generated scripts alone. For a package like this, the assistant cannot show you a readable document, so it reads the file list instead and works from a draft.

***

## Version history

<RoleBadge roles={["Admin", "Manager", "Co-editor"]} />

Anyone who can edit the unit can see its version history. Each time your assistant saves a new version of a lesson, Juno adds it to the unit's history. To see the history, open the unit's editor and scroll to **Version history**. It lists every save, newest first.

| What you see | What it means |
| - | - |
| **Version N** | One saved version. Numbers only go up. |
| **Live** chip | The version learners get right now. |
| A label | A note saved with the version, if there is one. A unit that was already live before history was kept shows one row labeled **Before version history was kept**. |
| **Restored from version N** | This version is a copy of an earlier one, not new authoring. |
| Date and time | When the version was saved. |

### Preview an old version

Select **Preview** on any row, including the live one, to play that version in a new tab. Preview reads only. It changes nothing and does not affect what learners see.

### Restore an old version

<Steps>
  <Step title="Select Restore">
    Select **Restore** on the version you want. The live version has no **Restore** button.
  </Step>

  <Step title="Confirm">
    The dialog **Restore version N?** explains that Juno copies that version forward as a new version and makes it live right away. Learners who open the lesson from then on see it.
  </Step>

  <Step title="Check the result">
    A message confirms **Version N restored as version M.** The restored copy appears at the top of the list as the new **Live** version.
  </Step>
</Steps>

Restoring does not delete anything. The version you replaced stays in the list, so you can restore it again. Learners who are part-way through the lesson are not interrupted.

<Warning>
  Unlike a course draft, a restore goes live immediately. Preview the version first if you are not sure which one you want.
</Warning>

If you restore the version that is already live, Juno tells you **That version is already live — nothing changed.** On an archived unit you can preview versions, but **Restore** is turned off.

***

## Tools your assistant uses

Your assistant picks these itself. The names are useful when you read its activity log.

| Tool | What it does |
| - | - |
| `get_html_lesson_guide` | Returns the authoring guide for HTML lessons: the code that records score, completion, and resume position, and the media rules for saving. |
| `draft_html_lesson` | Opens a draft workspace from a full HTML document, from a saved lesson, or empty. |
| `edit_html_lesson_file` | Changes one text file in a draft in place: swaps an exact piece of text, overwrites the file, or deletes it. |
| `put_html_lesson_file` | Adds an image, video, audio clip, font, or large file to a draft. |
| `read_html_lesson` | Reads what a saved lesson is serving, or one file of a draft. |
| `preview_html_lesson` | Plays a draft or saved lesson, logs its tracking calls, and returns a preview link with review mode. |
| `create_html_lesson` | Saves a draft as a new unit. |
| `update_html_lesson` | Saves a draft as a new version of a saved lesson. |
| `list_html_lesson_versions` | Lists every saved version, newest first, with who saved it and when. |
| `revert_html_lesson_to_version` | Puts an earlier version back in front of learners as a new version. |

To add a ZIP package you already have, upload it in Juno instead. See [Uploading SCORM content](/learning/scorm-content#uploading-scorm-content).

<RelatedPages
  pages={[
{ href: "/learning/scorm-content", title: "SCORM Content" },
{ href: "/mcp/overview", title: "Juno MCP server" },
{ href: "/learning/video-content", title: "Video & Media" },
{ href: "/learning/courses", title: "Courses" },
]}
/>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.