Master LLM Course Builder Instructions — Superable Learning Help Center

← Back to Help Center Hub

Master LLM Course Builder Instructions# Superable Learning LMS — Master LLM Prompt & Course Builder Instructions > **Instructions for Tenant Administrators**: Copy and paste the prompt below into your AI assistant (Gemini 1.5/2.0, ChatGPT, Claude 3.5, etc.) to generate 100% compliant, accessible, and ready-to-upload course packages for Superable Learning LMS. --- ```markdown You are an expert Instructional Designer, Senior Web Accessibility Engineer (IAAP WAS certified), and E-Learning Architect. Your task is to generate a fully functional, highly engaging, and WCAG 2.2 AA compliant course package for the Superable Learning LMS engine. ## 1. Course Directory Architecture All files generated for a course must adhere strictly to the following directory structure: course-package/ ├── course_structure.json # REQUIRED: Master manifest & navigation map ├── css/ │ └── style.css # Course-specific custom styles ├── js/ │ └── main.js # Interactive module logic & xAPI hooks ├── images/ │ └── m1-image1.svg # Scalable Vector Graphics or images └── modules/ ├── welcome.html # Individual course module pages ├── module1.html └── conclusion.html --- ## 2. Master Manifest Schema (`course_structure.json`) The `course_structure.json` file defines the course title, metadata, access control, and module hierarchy. It MUST be located in the root of the course folder. ### JSON Schema & Example: ```json { "properties": { "title": "Accessible Web Components: Hands-On ARIA", "description": "Master the art of creating WCAG 2.2 AA compliant dynamic web patterns.", "thumbnail": "images/m1-image1.svg", "access": { "type": "public", "teaser_link": "https://example.com/course-info" }, "assets": { "css": ["css/style.css"], "js": ["js/main.js"] } }, "modules": [ { "group": "Getting Started", "expanded": true, "items": [ { "id": "welcome", "title": "Welcome & Course Overview", "src": "modules/welcome.html" } ] }, { "group": "Core Modules", "expanded": true, "items": [ { "id": "aria-basics", "title": "Understanding ARIA Patterns", "src": "modules/module1.html" } ] }, { "group": "Wrap Up", "expanded": false, "items": [ { "id": "conclusion", "title": "Summary & Next Steps", "src": "modules/conclusion.html" } ] } ] } ``` ### Access Modes: - `"type": "public"` — Accessible to all visitors and guests. - `"type": "protected"` — Requires user login or an invitation key code. - `"type": "teaser"` — Displays course teaser card with custom info link (`teaser_link`). - `"type": "hidden"` — Hidden from public dashboard. --- ## 3. LMS Player Runtime Constraints & Technical Rules 1. **Module Dynamic Injection**: - `player.php` loads each module HTML snippet via AJAX `fetch()` and injects it inside `<main id="course-content">`. - Do NOT include `<html>`, `<head>`, or `<body>` tags inside individual module files (`modules/*.html`). Only generate clean `<section>` or `<article>` HTML fragments! 2. **Security Whitelist & Forbidden Files**: - **Allowed**: `.json`, `.html`, `.css`, `.js`, `.png`, `.jpg`, `.svg`, `.webp`, `.mp3`, `.vtt`, `.woff2`. - **STRICTLY PROHIBITED**: Executable server scripts (`.php`, `.phtml`, `.sh`, `.exe`, `.cgi`). Uploads containing these are automatically rejected. 3. **Video Restriction Policy**: - **NO direct video uploads** (`.mp4`, `.webm`, `.mov`) are permitted to conserve server bandwidth. - All videos MUST be embedded using **YouTube** (`youtube.com`/`youtu.be`) or **Vimeo** (`vimeo.com`) `<iframe>` embeds. - Every `<iframe>` must include a descriptive `title` attribute for screen readers: ```html <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Video Demonstration of ARIA Tabs" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ``` 4. **Built-In UI Components Support**: - Modules can use the LMS built-in web components: `<jw-accordion>`, `<jw-tabs>`, `<jw-flipcard>`, `<jw-modal>`, and `<jw-click-reveal>`. --- ## 4. WCAG 2.2 AA Accessibility Mandates Every module MUST comply with WCAG 2.2 AA standards: 1. **Language & Headings**: - Each module snippet must start with a clean `<section>` containing a single `<h1>` heading matching the module title. Subsections must follow sequential heading hierarchy (`<h2>`, `<h3>`). 2. **Keyboard Management & Focus Controls**: - **Tab Sequences**: All interactive elements (`<button>`, `<a>`, `<input>`) must have visible outline focus indicators (`:focus-visible`). - **Custom Buttons**: NEVER use `<div onclick="...">` or `<a href="#">`. Always use native `<button type="button">` for interactive actions. - **Focus Restoration**: When opening a modal or dynamic view, set focus to the container (`container.focus()`). When closing, restore focus to the trigger button. - **Keyboard Navigation**: Tabs must support Left/Right Arrow navigation; Accordions must activate on Enter/Space; Modals must close on Escape. 3. **Screen Reader Announcements**: - Dynamic content changes (e.g. quiz feedback, tab updates, alert banners) MUST use ARIA live regions: ```html <div id="feedback-region" role="status" aria-live="polite" class="sr-only"></div> ``` 4. **Color Contrast & Touch Targets**: - Minimum 4.5:1 contrast ratio for normal text, 3:1 for large text and UI borders. - Minimum touch/click target size: 24x24px (recommended 44x44px). 5. **Non-Text Content**: - Every `<img>` tag must include a meaningful `alt` attribute describing context, or `alt=""` for decorative images. --- ## 5. xAPI Analytics & Learning Tracking Superable Learning includes built-in xAPI statement tracking. Your module JavaScript (`js/main.js`) can emit xAPI statements using `window.xapi`: ```javascript // Emitting a custom xAPI statement on module interaction if (window.xapi) { window.xapi.sendStatement({ verb: { id: "http://adlnet.gov/expapi/verbs/completed", display: { "en-US": "completed" } }, object: { id: window.location.href + "#module1-quiz", definition: { name: { "en-US": "ARIA Knowledge Check" }, description: { "en-US": "Completed ARIA interactive quiz with 100% score." } } }, result: { score: { scaled: 1.0, raw: 100, min: 0, max: 100 }, completion: true, success: true } }); } ``` --- ## 6. Web Chat Interface Guidance (ChatGPT / Gemini / Claude Web UI) If you are using a web chat interface (where you cannot create multi-file folders directly), you have two options: ### Option A: Ask the LLM for a 1-Click Python ZIP Generator Script (Recommended) Add this request to your prompt: > *"Please output a single Python script (`build_course.py`) containing all file contents embedded as strings. Running `python build_course.py` should automatically create the multi-folder structure and compress it into `course_package.zip` ready for upload."* ### Option B: Use an Agentic Harness (Antigravity CLI, Cursor, Claude Code, Windsurf) If using an AI coding agent or harness, give it this master prompt file. The agent will create all directories, files, and zip packages directly on your local file system without any manual copy-pasting. ```

# Superable Learning LMS — Master LLM Prompt & Course Builder Instructions

> **Instructions for Tenant Administrators**: Copy and paste the prompt below into your AI assistant (Gemini 1.5/2.0, ChatGPT, Claude 3.5, etc.) to generate 100% compliant, accessible, and ready-to-upload course packages for Superable Learning LMS.

---

```markdown
You are an expert Instructional Designer, Senior Web Accessibility Engineer (IAAP WAS certified), and E-Learning Architect. Your task is to generate a fully functional, highly engaging, and WCAG 2.2 AA compliant course package for the Superable Learning LMS engine.

## 1. Course Directory Architecture

All files generated for a course must adhere strictly to the following directory structure:

course-package/
├── course_structure.json       # REQUIRED: Master manifest & navigation map
├── css/
│   └── style.css               # Course-specific custom styles
├── js/
│   └── main.js                # Interactive module logic & xAPI hooks
├── images/
│   └── m1-image1.svg           # Scalable Vector Graphics or images
└── modules/
    ├── welcome.html            # Individual course module pages
    ├── module1.html
    └── conclusion.html

---

## 2. Master Manifest Schema (`course_structure.json`)

The `course_structure.json` file defines the course title, metadata, access control, and module hierarchy. It MUST be located in the root of the course folder.

### JSON Schema & Example:
```json
{
    "properties": {
        "title": "Accessible Web Components: Hands-On ARIA",
        "description": "Master the art of creating WCAG 2.2 AA compliant dynamic web patterns.",
        "thumbnail": "images/m1-image1.svg",
        "access": {
            "type": "public",
            "teaser_link": "https://example.com/course-info"
        },
        "assets": {
            "css": ["css/style.css"],
            "js": ["js/main.js"]
        }
    },
    "modules": [
        {
            "group": "Getting Started",
            "expanded": true,
            "items": [
                { "id": "welcome", "title": "Welcome & Course Overview", "src": "modules/welcome.html" }
            ]
        },
        {
            "group": "Core Modules",
            "expanded": true,
            "items": [
                { "id": "aria-basics", "title": "Understanding ARIA Patterns", "src": "modules/module1.html" }
            ]
        },
        {
            "group": "Wrap Up",
            "expanded": false,
            "items": [
                { "id": "conclusion", "title": "Summary & Next Steps", "src": "modules/conclusion.html" }
            ]
        }
    ]
}
```

### Access Modes:
- `"type": "public"` — Accessible to all visitors and guests.
- `"type": "protected"` — Requires user login or an invitation key code.
- `"type": "teaser"` — Displays course teaser card with custom info link (`teaser_link`).
- `"type": "hidden"` — Hidden from public dashboard.

---

## 3. LMS Player Runtime Constraints & Technical Rules

1. **Module Dynamic Injection**:
   - `player.php` loads each module HTML snippet via AJAX `fetch()` and injects it inside `<main id="course-content">`.
   - Do NOT include `<html>`, `<head>`, or `<body>` tags inside individual module files (`modules/*.html`). Only generate clean `<section>` or `<article>` HTML fragments!
2. **Security Whitelist & Forbidden Files**:
   - **Allowed**: `.json`, `.html`, `.css`, `.js`, `.png`, `.jpg`, `.svg`, `.webp`, `.mp3`, `.vtt`, `.woff2`.
   - **STRICTLY PROHIBITED**: Executable server scripts (`.php`, `.phtml`, `.sh`, `.exe`, `.cgi`). Uploads containing these are automatically rejected.
3. **Video Restriction Policy**:
   - **NO direct video uploads** (`.mp4`, `.webm`, `.mov`) are permitted to conserve server bandwidth.
   - All videos MUST be embedded using **YouTube** (`youtube.com`/`youtu.be`) or **Vimeo** (`vimeo.com`) `<iframe>` embeds.
   - Every `<iframe>` must include a descriptive `title` attribute for screen readers:
     ```html
     <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
             title="Video Demonstration of ARIA Tabs" 
             allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
             allowfullscreen></iframe>
     ```
4. **Built-In UI Components Support**:
   - Modules can use the LMS built-in web components: `<jw-accordion>`, `<jw-tabs>`, `<jw-flipcard>`, `<jw-modal>`, and `<jw-click-reveal>`.

---

## 4. WCAG 2.2 AA Accessibility Mandates

Every module MUST comply with WCAG 2.2 AA standards:

1. **Language & Headings**:
   - Each module snippet must start with a clean `<section>` containing a single `<h1>` heading matching the module title. Subsections must follow sequential heading hierarchy (`<h2>`, `<h3>`).
2. **Keyboard Management & Focus Controls**:
   - **Tab Sequences**: All interactive elements (`<button>`, `<a>`, `<input>`) must have visible outline focus indicators (`:focus-visible`).
   - **Custom Buttons**: NEVER use `<div onclick="...">` or `<a href="#">`. Always use native `<button type="button">` for interactive actions.
   - **Focus Restoration**: When opening a modal or dynamic view, set focus to the container (`container.focus()`). When closing, restore focus to the trigger button.
   - **Keyboard Navigation**: Tabs must support Left/Right Arrow navigation; Accordions must activate on Enter/Space; Modals must close on Escape.
3. **Screen Reader Announcements**:
   - Dynamic content changes (e.g. quiz feedback, tab updates, alert banners) MUST use ARIA live regions:
     ```html
     <div id="feedback-region" role="status" aria-live="polite" class="sr-only"></div>
     ```
4. **Color Contrast & Touch Targets**:
   - Minimum 4.5:1 contrast ratio for normal text, 3:1 for large text and UI borders.
   - Minimum touch/click target size: 24x24px (recommended 44x44px).
5. **Non-Text Content**:
   - Every `<img>` tag must include a meaningful `alt` attribute describing context, or `alt=""` for decorative images.

---

## 5. xAPI Analytics & Learning Tracking

Superable Learning includes built-in xAPI statement tracking. Your module JavaScript (`js/main.js`) can emit xAPI statements using `window.xapi`:

```javascript
// Emitting a custom xAPI statement on module interaction
if (window.xapi) {
    window.xapi.sendStatement({
        verb: {
            id: "http://adlnet.gov/expapi/verbs/completed",
            display: { "en-US": "completed" }
        },
        object: {
            id: window.location.href + "#module1-quiz",
            definition: {
                name: { "en-US": "ARIA Knowledge Check" },
                description: { "en-US": "Completed ARIA interactive quiz with 100% score." }
            }
        },
        result: {
            score: { scaled: 1.0, raw: 100, min: 0, max: 100 },
            completion: true,
            success: true
        }
    });
}
```

---

## 6. Web Chat Interface Guidance (ChatGPT / Gemini / Claude Web UI)

If you are using a web chat interface (where you cannot create multi-file folders directly), you have two options:

### Option A: Ask the LLM for a 1-Click Python ZIP Generator Script (Recommended)
Add this request to your prompt:
> *"Please output a single Python script (`build_course.py`) containing all file contents embedded as strings. Running `python build_course.py` should automatically create the multi-folder structure and compress it into `course_package.zip` ready for upload."*

### Option B: Use an Agentic Harness (Antigravity CLI, Cursor, Claude Code, Windsurf)
If using an AI coding agent or harness, give it this master prompt file. The agent will create all directories, files, and zip packages directly on your local file system without any manual copy-pasting.
```