coursecode 0.1.0

package/framework/docs/examples/cloudflare-channel-relay.js

@@ -0,0 +1,169 @@
+/**
+ * Cloudflare Worker + Durable Object - Generic Pub/Sub Channel Relay
+ * 
+ * Content-agnostic message fan-out. Receives JSON via POST, broadcasts to all
+ * connected SSE clients on the same channel. Does not parse or interpret messages.
+ * 
+ * SETUP:
+ * 1. Create a Cloudflare account and go to Workers & Pages
+ * 2. Create a new Worker and paste this code
+ * 3. Add Durable Object binding in wrangler.toml:
+ *    [[durable_objects.bindings]]
+ *    name = "CHANNEL"
+ *    class_name = "ChannelRelay"
+ *    
+ *    [[migrations]]
+ *    tag = "v1"
+ *    new_classes = ["ChannelRelay"]
+ * 4. Add COURSE_API_KEY secret in Settings > Variables (optional, for auth)
+ * 5. Deploy and copy your worker URL
+ * 6. Add the URL to course-config.js:
+ *    environment: {
+ *        channel: {
+ *            endpoint: 'https://your-worker.your-subdomain.workers.dev',
+ *            apiKey: 'your-shared-secret',  // Must match COURSE_API_KEY secret
+ *            channelId: 'my-session-123'
+ *        }
+ *    }
+ * 
+ * ENDPOINTS:
+ *   POST /:channelId  — publish a JSON message to all listeners
+ *   GET  /:channelId  — SSE stream, receive all messages on that channel
+ * 
+ * FREE TIER LIMITS:
+ * - Cloudflare Workers: 100,000 requests/day
+ * - Durable Objects: 1M requests/month (paid plan required for production)
+ */
+
+const corsHeaders = {
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+    'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+};
+
+export default {
+    async fetch(request, env) {
+        if (request.method === 'OPTIONS') {
+            return new Response(null, { headers: corsHeaders });
+        }
+
+        // Extract channelId from URL path
+        const url = new URL(request.url);
+        const channelId = url.pathname.replace(/^\/+/, '');
+
+        if (!channelId) {
+            return new Response('Missing channelId in URL path', {
+                status: 400,
+                headers: corsHeaders
+            });
+        }
+
+        // Validate API key if configured
+        if (env.COURSE_API_KEY) {
+            // POST uses Authorization header; SSE GET uses ?token= param (EventSource can't send headers)
+            const auth = request.method === 'GET'
+                ? url.searchParams.get('token')
+                : request.headers.get('Authorization')?.replace('Bearer ', '');
+            if (!auth || auth !== env.COURSE_API_KEY) {
+                return new Response('Unauthorized', { status: 401, headers: corsHeaders });
+            }
+        }
+
+        // Route to Durable Object for this channel
+        const id = env.CHANNEL.idFromName(channelId);
+        const stub = env.CHANNEL.get(id);
+        return stub.fetch(request);
+    }
+};
+
+/**
+ * Durable Object — one instance per channelId
+ * Holds connected SSE clients and fans out messages.
+ */
+export class ChannelRelay {
+    constructor() {
+        this.clients = new Set();
+    }
+
+    async fetch(request) {
+        if (request.method === 'GET') {
+            return this.handleSSE();
+        }
+
+        if (request.method === 'POST') {
+            return this.handlePublish(request);
+        }
+
+        return new Response('Method not allowed', {
+            status: 405,
+            headers: corsHeaders
+        });
+    }
+
+    /**
+     * SSE connection — client listens for messages
+     */
+    handleSSE() {
+        const { readable, writable } = new TransformStream();
+        const writer = writable.getWriter();
+        const encoder = new TextEncoder();
+
+        // Track this client
+        const client = { writer, encoder };
+        this.clients.add(client);
+
+        // Send keepalive comment every 30s to prevent timeout
+        const keepalive = setInterval(() => {
+            writer.write(encoder.encode(': keepalive\n\n')).catch(() => {
+                clearInterval(keepalive);
+                this.clients.delete(client);
+            });
+        }, 30000);
+
+        // Clean up when client disconnects
+        request?.signal?.addEventListener?.('abort', () => {
+            clearInterval(keepalive);
+            this.clients.delete(client);
+            writer.close().catch(() => {});
+        });
+
+        return new Response(readable, {
+            status: 200,
+            headers: {
+                'Content-Type': 'text/event-stream',
+                'Cache-Control': 'no-cache',
+                'Connection': 'keep-alive',
+                ...corsHeaders
+            }
+        });
+    }
+
+    /**
+     * Publish — fan out message to all connected SSE clients
+     */
+    async handlePublish(request) {
+        const data = await request.text();
+
+        // Fan out to all connected clients
+        const message = `data: ${data}\n\n`;
+        const dead = [];
+
+        for (const client of this.clients) {
+            try {
+                await client.writer.write(client.encoder.encode(message));
+            } catch {
+                dead.push(client);
+            }
+        }
+
+        // Clean up disconnected clients
+        for (const client of dead) {
+            this.clients.delete(client);
+        }
+
+        return new Response(JSON.stringify({ success: true, listeners: this.clients.size }), {
+            status: 200,
+            headers: { 'Content-Type': 'application/json', ...corsHeaders }
+        });
+    }
+}

package/framework/docs/examples/cloudflare-data-worker.js

@@ -0,0 +1,102 @@
+/**
+ * Cloudflare Worker - Course Data Reporting Endpoint
+ * 
+ * Receives batched learning records (assessments, objectives, interactions) 
+ * from courses and stores them for analytics or forwards to your data warehouse.
+ * 
+ * SETUP:
+ * 1. Create a Cloudflare account and go to Workers & Pages
+ * 2. Create a new Worker and paste this code
+ * 3. (Optional) Add KV namespace for storage, or forward to your API
+ * 4. Add COURSE_API_KEY secret in Settings > Variables (optional, for auth)
+ * 5. Deploy and copy your worker URL
+ * 6. Add the URL to course-config.js:
+ *    environment: {
+ *        dataReporting: {
+ *            endpoint: 'https://your-worker.your-subdomain.workers.dev',
+ *            apiKey: 'your-shared-secret',  // Must match COURSE_API_KEY secret
+ *            batchSize: 10,
+ *            flushInterval: 30000
+ *        }
+ *    }
+ * 
+ * PAYLOAD FORMAT:
+ * {
+ *   records: [
+ *     { type: 'assessment', data: { assessmentId, score, passed, ... }, timestamp },
+ *     { type: 'objective', data: { objectiveId, completion_status, ... }, timestamp },
+ *     { type: 'interaction', data: { interactionId, type, result, ... }, timestamp }
+ *   ],
+ *   course: { title, version, id },
+ *   sentAt: '2024-01-15T10:30:00.000Z'
+ * }
+ * 
+ * FREE TIER LIMITS:
+ * - Cloudflare Workers: 100,000 requests/day
+ * - KV Storage: 100,000 reads/day, 1,000 writes/day
+ */
+
+export default {
+    async fetch(request, env) {
+        const corsHeaders = {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'POST, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        };
+
+        if (request.method === 'OPTIONS') {
+            return new Response(null, { headers: corsHeaders });
+        }
+
+        if (request.method !== 'POST') {
+            return new Response('Method not allowed', {
+                status: 405,
+                headers: corsHeaders
+            });
+        }
+
+        // Validate API key if configured
+        if (env.COURSE_API_KEY) {
+            const auth = request.headers.get('Authorization');
+            if (!auth || auth !== `Bearer ${env.COURSE_API_KEY}`) {
+                return new Response('Unauthorized', { status: 401, headers: corsHeaders });
+            }
+        }
+
+        try {
+            const data = await request.json();
+
+            // Log for debugging (visible in Cloudflare dashboard)
+            console.warn(`[Data Worker] Received ${data.records?.length || 0} records from ${data.course?.title || 'Unknown Course'}`);
+
+            // Option 1: Store in KV (simple, built-in)
+            // Uncomment and bind a KV namespace called DATA_STORE
+            // const key = `${data.course?.id || 'unknown'}_${Date.now()}`;
+            // await env.DATA_STORE.put(key, JSON.stringify(data), { expirationTtl: 86400 * 30 });
+
+            // Option 2: Forward to your API/webhook
+            // await fetch('https://your-api.com/learning-data', {
+            //     method: 'POST',
+            //     headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${env.API_KEY}` },
+            //     body: JSON.stringify(data)
+            // });
+
+            // Option 3: Insert into D1 database (Cloudflare's SQLite)
+            // await env.DB.prepare('INSERT INTO records (course_id, data, created_at) VALUES (?, ?, ?)')
+            //     .bind(data.course?.id, JSON.stringify(data.records), data.sentAt)
+            //     .run();
+
+            return new Response(JSON.stringify({ success: true, count: data.records?.length }), {
+                status: 200,
+                headers: { 'Content-Type': 'application/json', ...corsHeaders }
+            });
+
+        } catch (error) {
+            console.error('Worker error:', error);
+            return new Response('Internal error', {
+                status: 500,
+                headers: corsHeaders
+            });
+        }
+    }
+};

package/framework/docs/examples/cloudflare-error-worker.js

@@ -0,0 +1,228 @@
+/**
+ * Cloudflare Worker - Course Error & Issue Report Email Notifications
+ * 
+ * Deploy this worker to receive error reports and user issue reports from courses
+ * and send email alerts. The API key stays server-side, so it's never exposed in the course.
+ * 
+ * SETUP:
+ * 1. Create a Cloudflare account and go to Workers & Pages
+ * 2. Create a new Worker and paste this code
+ * 3. Add these secrets in Settings > Variables:
+ *    - RESEND_API_KEY: Your Resend API key
+ *    - ALERT_EMAIL: Email address to receive alerts
+ *    - FROM_EMAIL: Verified sender email (e.g., errors@yourdomain.com)
+ *    - COURSE_API_KEY: Shared secret for authenticating course requests (optional)
+ * 4. Deploy and copy your worker URL
+ * 5. Add the URL to course-config.js:
+ *    environment: {
+ *        errorReporting: {
+ *            endpoint: 'https://your-worker.your-subdomain.workers.dev',
+ *            apiKey: 'your-shared-secret',  // Must match COURSE_API_KEY secret
+ *            enableUserReports: true
+ *        }
+ *    }
+ * 
+ * FREE TIER LIMITS:
+ * - Cloudflare Workers: 100,000 requests/day
+ * - Resend: 3,000 emails/month
+ */
+
+export default {
+    async fetch(request, env) {
+        // CORS headers for cross-origin requests from courses
+        const corsHeaders = {
+            'Access-Control-Allow-Origin': '*',
+            'Access-Control-Allow-Methods': 'POST, OPTIONS',
+            'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        };
+
+        // Handle CORS preflight (must be checked BEFORE POST check)
+        if (request.method === 'OPTIONS') {
+            return new Response(null, { headers: corsHeaders });
+        }
+
+        // Only accept POST requests
+        if (request.method !== 'POST') {
+            return new Response('Method not allowed', { 
+                status: 405,
+                headers: corsHeaders 
+            });
+        }
+
+        // Validate API key if configured
+        if (env.COURSE_API_KEY) {
+            const auth = request.headers.get('Authorization');
+            if (!auth || auth !== `Bearer ${env.COURSE_API_KEY}`) {
+                return new Response('Unauthorized', { status: 401, headers: corsHeaders });
+            }
+        }
+
+        try {
+            const data = await request.json();
+            
+            // Determine if this is a user report or automatic error
+            const isUserReport = data.type === 'user_report';
+            
+            // Build email content
+            const subject = isUserReport 
+                ? `[User Report] Issue reported in ${data.course?.title || 'Course'}`
+                : `[Course Error] ${data.domain}: ${data.operation}`;
+            const text = isUserReport 
+                ? formatUserReportEmail(data) 
+                : formatErrorEmail(data);
+
+            // Send via Resend
+            const emailResponse = await fetch('https://api.resend.com/emails', {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${env.RESEND_API_KEY}`,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    from: env.FROM_EMAIL || 'Course Errors <errors@yourdomain.com>',
+                    to: env.ALERT_EMAIL,
+                    subject: subject,
+                    text: text
+                })
+            });
+
+            if (!emailResponse.ok) {
+                const errorText = await emailResponse.text();
+                console.error('Resend error:', errorText);
+                return new Response('Failed to send email', { 
+                    status: 500,
+                    headers: corsHeaders 
+                });
+            }
+
+            return new Response(JSON.stringify({ success: true }), {
+                status: 200,
+                headers: {
+                    'Content-Type': 'application/json',
+                    ...corsHeaders
+                }
+            });
+
+        } catch (error) {
+            console.error('Worker error:', error);
+            return new Response('Internal error', { 
+                status: 500,
+                headers: corsHeaders 
+            });
+        }
+    }
+};
+
+/**
+ * Format user-submitted issue report into email
+ */
+function formatUserReportEmail(data) {
+    const lines = [
+        '=== USER ISSUE REPORT ===',
+        '',
+        `Time: ${data.timestamp}`,
+        ''
+    ];
+    
+    if (data.course) {
+        lines.push(
+            '--- Course ---',
+            `Title: ${data.course.title || 'N/A'}`,
+            `Version: ${data.course.version || 'N/A'}`,
+            ''
+        );
+    }
+    
+    if (data.currentSlide) {
+        lines.push(
+            '--- Location ---',
+            `Current Slide: ${data.currentSlide}`,
+            ''
+        );
+    }
+    
+    lines.push(
+        '--- User Description ---',
+        data.description || '(No description provided)',
+        '',
+        '--- Environment ---',
+        `URL: ${data.url}`,
+        `User Agent: ${data.userAgent}`,
+        ''
+    );
+    
+    return lines.join('\n');
+}
+
+/**
+ * Format error data into a readable email.
+ * Handles both single errors and batched errors (data.errors array).
+ */
+function formatErrorEmail(data) {
+    const lines = [
+        '=== COURSE ERROR REPORT ===',
+        '',
+        `Time: ${data.timestamp}`,
+    ];
+
+    // Batched errors: the payload contains an `errors` array
+    if (Array.isArray(data.errors) && data.errors.length > 1) {
+        lines.push(`Errors: ${data.errors.length}`, '');
+        for (let i = 0; i < data.errors.length; i++) {
+            const err = data.errors[i];
+            lines.push(
+                `--- Error ${i + 1} ---`,
+                `Domain: ${err.domain || 'unknown'}`,
+                `Operation: ${err.operation || 'unknown'}`,
+                err.message || '(no message)',
+                ''
+            );
+            if (err.stack) lines.push('Stack:', err.stack, '');
+        }
+    } else {
+        // Single error (backward-compatible flat format)
+        lines.push(
+            `Domain: ${data.domain}`,
+            `Operation: ${data.operation}`,
+            '',
+            '--- Message ---',
+            data.message,
+            ''
+        );
+
+        if (data.stack) {
+            lines.push(
+                '--- Stack Trace ---',
+                data.stack,
+                ''
+            );
+        }
+
+        if (data.context) {
+            lines.push(
+                '--- Context ---',
+                JSON.stringify(data.context, null, 2),
+                ''
+            );
+        }
+    }
+
+    if (data.course) {
+        lines.push(
+            '--- Course ---',
+            `Title: ${data.course.title || 'N/A'}`,
+            `Version: ${data.course.version || 'N/A'}`,
+            `ID: ${data.course.id || 'N/A'}`,
+            ''
+        );
+    }
+
+    lines.push(
+        '--- Environment ---',
+        `URL: ${data.url}`,
+        `User Agent: ${data.userAgent}`,
+        ''
+    );
+
+    return lines.join('\n');
+}

package/framework/index.html

@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <title id="page-title">Loading...</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" id="page-description" content="" />
+  <link rel="stylesheet" href="css/framework.css" />
+  <link rel="stylesheet" href="../course/theme.css" />
+  <!-- Skip link is styled via framework.css for accessibility -->
+</head>
+
+<body>
+  <!-- Accessibility: Skip to main content link -->
+  <a href="#content" class="skip-link">Skip to main content</a>
+
+  <div id="app" role="application" aria-label="SCORM Learning Module">
+    <!-- ========== LIVE REGIONS FOR SCREEN READERS ========== -->
+    <!-- Progress/status announcements for screen readers -->
+    <div id="progress-announce" aria-live="polite" aria-atomic="true" class="sr-only"></div>
+
+    <!-- ========== HEADER ========== -->
+    <header class="course-header" role="banner">
+      <!-- Navigation Menu Toggle -->
+      <button id="sidebar-toggle" class="sidebar-toggle" aria-label="Toggle navigation menu" aria-expanded="false"
+        aria-controls="sidebar" data-testid="nav-menu-toggle" data-tooltip="Toggle navigation menu"
+        data-tooltip-position="right">
+        <span class="toggle-icon" aria-hidden="true"><!-- Icon --></span>
+      </button>
+
+      <!-- Branding -->
+      <div id="brand" aria-label="Course brand">
+        <!-- Dynamically populated from course-config.js -->
+      </div>
+
+      <!-- Course Progress Indicator -->
+      <div id="header-progress" class="header-progress" hidden aria-label="Course progress">
+        <span class="header-progress-text">Slide 1 of 1</span>
+        <div class="header-progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+          <div class="header-progress-fill"></div>
+        </div>
+      </div>
+
+      <!-- Accessibility Options Menu -->
+      <button id="accessibility-button" class="sidebar-toggle" aria-label="Accessibility options" aria-haspopup="true"
+        aria-expanded="false" data-tooltip="Accessibility settings" data-tooltip-position="left">
+        <span aria-hidden="true"><!-- Icon --></span>
+      </button>
+
+      <!-- Accessibility Menu Popup -->
+      <div id="accessibility-menu" class="popup-menu" role="menu" aria-label="Settings" hidden>
+        <button id="theme-toggle" role="menuitem" aria-label="Toggle dark mode">
+          <span aria-hidden="true"><!-- Icon --></span>
+          <span class="menu-label">Dark Mode</span>
+        </button>
+        <button id="font-size-toggle" role="menuitem" aria-label="Increase font size">
+          <span aria-hidden="true">A+</span>
+          <span class="menu-label">Font Size</span>
+        </button>
+        <button id="high-contrast-toggle" role="menuitem" aria-label="Toggle high contrast">
+          <span aria-hidden="true"><!-- Icon --></span>
+          <span class="menu-label">High Contrast</span>
+        </button>
+        <button id="reduced-motion-toggle" role="menuitem" aria-label="Toggle reduced motion">
+          <span aria-hidden="true"><!-- Icon --></span>
+          <span class="menu-label">Reduced Motion</span>
+        </button>
+        <hr class="menu-divider" id="report-issue-divider" hidden />
+        <button id="report-issue-button" role="menuitem" aria-label="Report an issue" hidden>
+          <span aria-hidden="true"><!-- Icon --></span>
+          <span class="menu-label">Report Issue</span>
+        </button>
+        <hr class="menu-divider exit-divider" />
+        <button id="menu-exit-button" role="menuitem" aria-label="Exit course" data-action="exit-course">
+          <span aria-hidden="true"><!-- Icon --></span>
+          <span class="menu-label">Exit Course</span>
+        </button>
+      </div>
+    </header>
+
+    <!-- ========== MAIN CONTENT AREA ========== -->
+    <div class="app-body">
+      <!-- Sidebar Backdrop (for mobile overlay) -->
+      <div id="sidebar-backdrop" class="sidebar-backdrop" aria-hidden="true"></div>
+
+      <!-- Navigation Sidebar -->
+      <aside id="sidebar" class="sidebar collapsed" aria-label="Course navigation sidebar">
+        <nav id="menu" aria-label="Course navigation menu" role="navigation">
+          <!-- Dynamically populated from course-config.js -->
+          <div id="menu-help" class="sr-only">Use these buttons to navigate between course sections</div>
+        </nav>
+        <!-- Document Gallery (populated by document-gallery.js when enabled) -->
+        <div id="sidebar-gallery" class="sidebar-gallery" hidden aria-label="Course resources"></div>
+      </aside>
+
+      <!-- Main Content -->
+      <main id="content" tabindex="-1" role="main" aria-live="polite" aria-atomic="false">
+        <!-- Loading indicator -->
+        <div id="loading" aria-hidden="true">
+          <div class="spinner" role="status" aria-label="Loading"></div>
+          <span class="loading-text">Loading course content...</span>
+        </div>
+        <!-- Slide content injected here -->
+        <div id="slide-container"></div>
+      </main>
+    </div>
+
+    <!-- ========== FOOTER / NAVIGATION CONTROLS ========== -->
+    <footer class="app-footer" role="contentinfo">
+      <div class="nav-controls" role="toolbar" aria-label="Navigation controls">
+        <div class="nav-nav-buttons">
+          <!-- Previous/Next Navigation -->
+          <button id="prevBtn" class="btn btn-secondary" aria-describedby="nav-help" aria-keyshortcuts="Alt+Left"
+            data-action="nav-prev" data-testid="nav-prev" data-tooltip="Previous"><span
+              class="btn-text">Previous</span></button>
+          <button id="nextBtn" class="btn btn-secondary" aria-describedby="nav-help" aria-keyshortcuts="Alt+Right"
+            data-action="nav-next" data-testid="nav-next" data-tooltip="Next"><span
+              class="btn-text">Next</span></button>
+          <!-- Engagement Progress Indicator -->
+          <div id="engagement-indicator" class="engagement-indicator-footer" hidden aria-live="polite"
+            data-tooltip="Slide Progress: 0%" data-testid="engagement-indicator">
+            <svg class="engagement-circle" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
+              <!-- Invisible hit area for tooltip - covers entire circle -->
+              <circle class="engagement-hit-area" cx="16" cy="16" r="16" fill="transparent"></circle>
+              <circle class="engagement-track" cx="16" cy="16" r="14" fill="none" stroke-width="3"></circle>
+              <circle class="engagement-progress" cx="16" cy="16" r="14" fill="none" stroke-width="3"
+                stroke-linecap="round"></circle>
+              <text class="engagement-checkmark" x="16" y="16" text-anchor="middle" dominant-baseline="central"
+                font-size="16">✓</text>
+            </svg>
+          </div>
+        </div>
+        <!-- Audio Player (hidden by default, shown when narration is active) -->
+        <div id="audio-player" hidden aria-label="Audio narration player" data-testid="audio-player">
+          <!-- Controls rendered by audio-player.js -->
+        </div>
+        <!-- Exit Course Button -->
+        <div class="nav-exit-button">
+          <button id="exitBtn" class="btn btn-secondary" aria-describedby="nav-help" data-action="exit-course"
+            data-testid="nav-exit" data-tooltip="Save progress and exit"><!-- icon -->Exit Course</button>
+        </div>
+      </div>
+      <!-- Screen reader help text -->
+      <div id="nav-help" class="sr-only">Use Previous/Next to navigate, or use keyboard shortcuts</div>
+    </footer>
+
+    <!-- ========== GLOBAL MODAL ========== -->
+    <div id="global-modal" class="modal" role="dialog" aria-labelledby="global-modal-title"
+      aria-describedby="global-modal-body" aria-hidden="true" data-testid="modal-global">
+      <div class="modal-header">
+        <h2 id="global-modal-title" class="modal-title"></h2>
+        <button class="modal-close" aria-label="Close dialog" data-action="close-modal">&times;</button>
+      </div>
+      <div id="global-modal-body" class="modal-body">
+        <!-- Dynamic content injected here -->
+      </div>
+      <div id="global-modal-footer" class="modal-footer">
+        <!-- Dynamic buttons injected here -->
+      </div>
+    </div>
+
+    <!-- Modal Backdrop -->
+    <div class="modal-backdrop" aria-hidden="true"></div>
+
+    <!-- ========== NOTIFICATIONS ========== -->
+    <div id="notification-container" class="notification-container" aria-live="polite" aria-relevant="additions"></div>
+  </div>
+
+  <!-- ========== SCRIPTS ========== -->
+  <!-- Application entry point (loads SCORM API wrapper dynamically) -->
+  <script type="module" src="./js/main.js"></script>
+</body>
+
+</html>