coursecode 0.1.0

package/template/course/slides/example-preview-tour.js

@@ -0,0 +1,129 @@
+/**
+ * Preview Tour slide - Guide to using the preview server and its tools
+ */
+
+const { iconManager } = CourseCode;
+
+export const slide = {
+  render(_root, _context) {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="stack-lg">
+        
+        <!-- Header -->
+        <header class="slide-header">
+          <h1>Using the Preview</h1>
+          <p>Your course preview simulates a real LMS and includes powerful authoring tools.</p>
+        </header>
+
+        <!-- Starting the Preview -->
+        <section class="card no-hover">
+          <h2 class="text-lg font-bold border-bottom pb-2 mb-4">${iconManager.getIcon('play')} Starting the Preview</h2>
+          <div class="cols-2 gap-6">
+            <div class="stack-sm">
+              <p>In your project folder, run:</p>
+              <pre class="bg-gray-100 p-3 rounded"><code>coursecode preview</code></pre>
+              <p>Then open <code>http://localhost:4173</code> in your browser.</p>
+            </div>
+            <div class="callout callout--success callout--compact">
+              <strong>${iconManager.getIcon('refresh-cw')} Live Reload:</strong> The preview automatically refreshes when you save changes. No need to manually reload.
+            </div>
+          </div>
+        </section>
+
+        <!-- Header Bar Tools -->
+        <section class="card no-hover">
+          <h2 class="text-lg font-bold border-bottom pb-2 mb-4">${iconManager.getIcon('settings')} Header Bar Tools</h2>
+          <p class="mb-4">The header bar at the top of the preview gives you access to these tools:</p>
+          
+          <div class="cols-3 gap-4">
+            <div class="card card-outlined h-full">
+              <h3 class="font-bold mb-2">📊 Status</h3>
+              <p class="text-sm">Dashboard showing course health: build status, slide count, engagement summary, and errors at a glance.</p>
+            </div>
+            <div class="card card-outlined h-full">
+              <h3 class="font-bold mb-2">✏️ Edit</h3>
+              <p class="text-sm">Click any text in your course to edit it directly. Changes save to your source files automatically.</p>
+            </div>
+            <div class="card card-outlined h-full">
+              <h3 class="font-bold mb-2">📄 Review</h3>
+              <p class="text-sm">See all your course content in one scrollable view. Useful for reviewing the full learner experience.</p>
+            </div>
+            <div class="card card-outlined h-full">
+              <h3 class="font-bold mb-2">📋 Config</h3>
+              <p class="text-sm">View and modify course settings, slide properties, and engagement configurations through a visual interface.</p>
+            </div>
+            <div class="card card-outlined h-full">
+              <h3 class="font-bold mb-2">📝 Interactions</h3>
+              <p class="text-sm">Browse and test all interactions on the current slide. See response data and evaluation results.</p>
+            </div>
+            <div class="card card-outlined h-full">
+              <h3 class="font-bold mb-2">🧩 Catalog</h3>
+              <p class="text-sm">Browse all available UI components and CSS patterns with live previews. A visual reference for what's possible.</p>
+            </div>
+          </div>
+        </section>
+
+        <!-- Testing Features -->
+        <section class="card no-hover">
+          <h2 class="text-lg font-bold border-bottom pb-2 mb-4">${iconManager.getIcon('check-circle')} Testing Your Course</h2>
+          <div class="stack-md">
+            <div class="cols-3 gap-4">
+              <div class="callout callout--info callout--compact">
+                <strong>🔍 Debug:</strong> Inspect SCORM state, view every LMS API call, and see validation warnings.
+              </div>
+              <div class="callout callout--info callout--compact">
+                <strong>${iconManager.getIcon('rotate-ccw')} Reset:</strong> Start fresh with a clean slate. Clears all progress and saved state.
+              </div>
+              <div class="callout callout--warning callout--compact">
+                <strong>${iconManager.getIcon('unlock')} Skip Gating:</strong> Toggle in the Config panel to bypass navigation locks during testing.
+              </div>
+            </div>
+            <p class="text-sm text-muted">Your progress is saved automatically, just like in a real LMS. Refresh the page and you'll be right where you left off.</p>
+          </div>
+        </section>
+
+        <!-- URL Parameters -->
+        <section class="card no-hover">
+          <h2 class="text-lg font-bold border-bottom pb-2 mb-4">${iconManager.getIcon('link')} Quick Access URLs</h2>
+          <p class="mb-3">Add these to your URL to enable features automatically:</p>
+          <table class="table table-striped">
+            <thead>
+              <tr>
+                <th>URL</th>
+                <th>Effect</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><code>#example-welcome</code></td>
+                <td>Navigate to any slide by its ID</td>
+              </tr>
+              <tr>
+                <td><code>?skipGating=true</code></td>
+                <td>Bypass all navigation locks</td>
+              </tr>
+              <tr>
+                <td><code>?debug=true</code></td>
+                <td>Open debug panel on load</td>
+              </tr>
+              <tr>
+                <td><code>?dashboard</code></td>
+                <td>Open the status dashboard on load</td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+
+        <!-- MCP Note -->
+        <div class="callout callout--success">
+          <h3 class="font-bold">${iconManager.getIcon('cpu')} AI-Powered Preview with MCP</h3>
+          <p>When your AI is connected via MCP, it can navigate slides, take screenshots, test interactions, and inspect course state directly. You don't need to describe what you see; the AI sees it too.</p>
+        </div>
+
+      </div>
+    `;
+
+    return container;
+  }
+};

package/template/course/slides/example-remedial.js

@@ -0,0 +1,143 @@
+/**
+ * FRAMEWORK EXAMPLE SLIDE
+ * This is a template example demonstrating remedial content patterns. You can keep it as a reference or delete it.
+ * See COURSE_AUTHORING_GUIDE.md for full documentation.
+ */
+
+const { createDragDropQuestion, announceToScreenReader, AppActions, iconManager } = CourseCode;
+export const slide = {
+  render(_root, _context) {
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="stack-lg">
+        
+        <header class="slide-header">
+          <h1>🔄 Review & Practice</h1>
+        </header>
+
+        <div class="callout callout--info">
+          <h2 class="text-lg font-bold">🚀 Let's Review the Basics</h2>
+          <p>Learning takes practice! Let's strengthen your understanding of CourseCode
+             with a quick review of the key concepts and hands-on exercises.</p>
+        </div>
+
+        <section>
+          <h2 class="text-xl font-bold mb-4 border-bottom pb-2">${iconManager.getIcon('target')} CourseCode Key Concepts</h2>
+
+          <div class="cols-3 gap-4">
+            <div class="card no-hover h-full stack-sm">
+              <h3 class="text-lg font-bold">${iconManager.getIcon('folder')} Project Structure</h3>
+              <div class="text-sm">
+                <p class="mb-1"><strong>course-config.js</strong> - Course metadata and slide order</p>
+                <p class="mb-1"><strong>slides/</strong> - Individual slide modules</p>
+                <p class="mb-1"><strong>theme.css</strong> - Custom color variables</p>
+                <p><strong>assets/</strong> - Images, videos, and media</p>
+              </div>
+            </div>
+
+            <div class="card no-hover h-full stack-sm">
+              <h3 class="text-lg font-bold">${iconManager.getIcon('refresh-cw')} Development Workflow</h3>
+              <ol class="list-numbered text-sm pl-4">
+                <li><strong>Create</strong> - <code>coursecode create</code></li>
+                <li><strong>Develop</strong> - <code>coursecode dev</code></li>
+                <li><strong>Preview</strong> - Test in browser with hot reload</li>
+                <li><strong>Build</strong> - <code>coursecode build</code></li>
+              </ol>
+            </div>
+
+            <div class="card no-hover h-full stack-sm">
+              <h3 class="text-lg font-bold">${iconManager.getIcon('target')} LMS Integration</h3>
+              <div class="text-sm">
+                <p class="mb-1"><strong>SCORM 1.2</strong> - Widest LMS compatibility</p>
+                <p class="mb-1"><strong>SCORM 2004</strong> - Enhanced tracking features</p>
+                <p class="mb-1"><strong>cmi5</strong> - Modern xAPI-based standard</p>
+                <p><strong>Scoring</strong> - Automatic score reporting</p>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="card no-hover stack-md">
+          <div>
+            <h2 class="text-xl font-bold">${iconManager.getIcon('settings')} Practice Exercise</h2>
+            <p>Organize the course development workflow steps:</p>
+          </div>
+          <div id="remedial-practice"></div>
+        </section>
+
+        <section class="resources">
+          <h2 class="text-xl font-bold mb-4">${iconManager.getIcon('book-open')} Helpful Resources</h2>
+          <div class="stack-sm">
+            <button data-resource="authoring-guide" class="btn btn-sm btn-outline-primary w-full justify-start">Course Authoring Guide</button>
+            <button data-resource="components" class="btn btn-sm btn-outline-primary w-full justify-start">Component Reference</button>
+            <button data-resource="cli" class="btn btn-sm btn-outline-primary w-full justify-start">CLI Commands</button>
+          </div>
+        </section>
+
+        <div class="flex justify-center mt-4">
+          <button class="btn btn-success btn-lg complete-remedial-btn">
+            ${iconManager.getIcon('check-circle')} Complete Review
+          </button>
+        </div>
+
+      </div>
+    `;
+    
+    setupRemedialContent(container);
+    
+    return container;
+  }
+};
+
+/**
+ * Sets up and initializes remedial content including practice exercises and resource handlers
+ * @param {HTMLElement} container - The container element containing remedial content
+ */
+function setupRemedialContent(container) {
+  // CourseCode workflow practice
+  const remedialConfig = {
+    id: 'remedial-coursecode-workflow',
+    prompt: 'Organize the course development workflow steps',
+    items: [
+      { id: 'create', content: 'Create Project' },
+      { id: 'develop', content: 'Write Slides' },
+      { id: 'test', content: 'Test in Browser' },
+      { id: 'build', content: 'Build Package' }
+    ],
+    dropZones: [
+      { id: 'setup', label: 'Setup Phase', accepts: ['create'] },
+      { id: 'authoring', label: 'Authoring Phase', accepts: ['develop', 'test'] },
+      { id: 'deploy', label: 'Deployment Phase', accepts: ['build'] }
+    ]
+  };
+
+  const remedialQuestion = createDragDropQuestion(remedialConfig);
+  const practiceContainer = container.querySelector('#remedial-practice');
+  if (practiceContainer) {
+    remedialQuestion.render(practiceContainer);
+  }
+
+  async function completeRemedial() {
+    announceToScreenReader('Review completed successfully!');
+  }
+
+  function showResource(resourceType) {
+    const resources = {
+      'authoring-guide': 'The Course Authoring Guide covers slide creation, interactions, assessments, accessibility, and theming. Find it at docs/COURSE_AUTHORING_GUIDE.md',
+      'components': 'CourseCode includes drag-drop, fill-in-the-blank, numeric input, multiple choice, interactive images, tabs, accordions, and more.',
+      'cli': 'Key commands: coursecode create (new project), coursecode dev (development server), coursecode build (production package), coursecode info (project details)'
+    };
+
+    const message = resources[resourceType] || 'Resource not found';
+    AppActions.showNotification(message, 'info', 8000);
+  }
+
+  container.querySelector('.complete-remedial-btn').addEventListener('click', completeRemedial);
+  container.querySelectorAll('.resources button').forEach(link => {
+    link.addEventListener('click', (e) => {
+      e.preventDefault();
+      showResource(link.dataset.resource);
+    });
+  });
+}
+

package/template/course/slides/example-summary.js

@@ -0,0 +1,103 @@
+/**
+ * FRAMEWORK EXAMPLE SLIDE
+ * This is a template example demonstrating summary/completion patterns. You can keep it as a reference or delete it.
+ * See COURSE_AUTHORING_GUIDE.md for full documentation.
+ */
+
+const { interactionManager, AppActions, iconManager } = CourseCode;
+export const slide = {
+  render(_root, _context) {
+    const interactions = interactionManager.getAllInteractions();
+    const sessionDurationMs = AppActions.getSessionDuration();
+    const interactionCount = interactions.length;
+    const averageScore = interactionCount > 0
+      ? Math.round((interactions.reduce((sum, i) => sum + (i.score || 0), 0) / interactionCount) * 100)
+      : 0;
+    const sessionDurationMinutes = Math.floor(sessionDurationMs / 60000);
+    const sessionDurationDisplay = sessionDurationMinutes > 0
+      ? `${sessionDurationMinutes} minutes`
+      : 'Less than a minute';
+
+    const container = document.createElement('div');
+    container.innerHTML = `
+      <div class="stack-lg">
+        
+        <header class="slide-header">
+          <h1>Template Complete!</h1>
+        </header>
+
+        <div class="callout callout--success">
+          <h2 class="text-xl font-bold">You've explored CourseCode!</h2>
+          <p>You've seen the key features of the CourseCode framework. Now you're ready to build
+             your own interactive e-learning courses with full LMS compatibility.</p>
+        </div>
+
+        <section class="card no-hover">
+          <h2 class="text-lg font-bold border-bottom pb-2 mb-4">${iconManager.getIcon('bar-chart')} Session Summary</h2>
+          <div class="cols-3 gap-4">
+            <div class="p-4 bg-gray-50 rounded text-center">
+              <h3 class="text-sm font-bold text-muted uppercase">Time Spent</h3>
+              <p class="text-xl font-bold text-primary">${sessionDurationDisplay}</p>
+            </div>
+            <div class="p-4 bg-gray-50 rounded text-center">
+              <h3 class="text-sm font-bold text-muted uppercase">Interactions</h3>
+              <p class="text-xl font-bold text-primary">${interactionCount} completed</p>
+            </div>
+            <div class="p-4 bg-gray-50 rounded text-center">
+              <h3 class="text-sm font-bold text-muted uppercase">Average Score</h3>
+              <p class="text-xl font-bold text-primary">${averageScore}%</p>
+            </div>
+          </div>
+        </section>
+
+        <section>
+          <h2 class="text-xl font-bold mb-4">Features Demonstrated</h2>
+          <div class="cols-2 gap-4">
+            <div class="flex gap-2 items-start">
+              <span class="text-success">${iconManager.getIcon('check-circle')}</span>
+              <div><strong>Drag & Drop:</strong> Interactive sorting and categorization</div>
+            </div>
+            <div class="flex gap-2 items-start">
+              <span class="text-success">${iconManager.getIcon('check-circle')}</span>
+              <div><strong>Fill in the Blank:</strong> Text input with flexible matching</div>
+            </div>
+            <div class="flex gap-2 items-start">
+              <span class="text-success">${iconManager.getIcon('check-circle')}</span>
+              <div><strong>Numeric Input:</strong> Number entry with tolerance</div>
+            </div>
+            <div class="flex gap-2 items-start">
+              <span class="text-success">${iconManager.getIcon('check-circle')}</span>
+              <div><strong>Interactive Images:</strong> Hotspots linked to content</div>
+            </div>
+            <div class="flex gap-2 items-start">
+              <span class="text-success">${iconManager.getIcon('check-circle')}</span>
+              <div><strong>Assessments:</strong> Graded quizzes with feedback</div>
+            </div>
+            <div class="flex gap-2 items-start">
+              <span class="text-success">${iconManager.getIcon('check-circle')}</span>
+              <div><strong>Accessibility:</strong> Dark mode, fonts, contrast, motion</div>
+            </div>
+            <div class="flex gap-2 items-start">
+              <span class="text-success">${iconManager.getIcon('check-circle')}</span>
+              <div><strong>Navigation:</strong> Sidebar, gating, progress tracking</div>
+            </div>
+          </div>
+        </section>
+
+        <section class="card no-hover bg-gray-50">
+          <h2 class="text-lg font-bold mb-4">🚀 Next Steps</h2>
+          <p class="mb-4">Ready to build your own course? Here's how to get started:</p>
+          <ul class="list-styled">
+            <li><strong>Read the Docs:</strong> Check out COURSE_AUTHORING_GUIDE.md for detailed instructions</li>
+            <li><strong>Customize Theme:</strong> Edit theme.css to match your brand colors</li>
+            <li><strong>Add Slides:</strong> Create new slide files in the slides/ folder</li>
+            <li><strong>Configure Structure:</strong> Update course-config.js with your content</li>
+            <li><strong>Build & Deploy:</strong> Run <code>coursecode build</code> to create your LMS package</li>
+          </ul>
+        </section>
+      </div>
+    `;
+    
+    return container;
+  }
+};