coursecode 0.1.0

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

@@ -0,0 +1,138 @@
+/**
+ * Course Structure slide - Understanding your course files and folders
+ */
+
+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>Your Course Files</h1>
+          <p>A quick tour of where everything lives in your course project.</p>
+        </header>
+
+        <!-- Folder Structure -->
+        <section class="card no-hover">
+          <h2 class="text-lg font-bold border-bottom pb-2 mb-4">${iconManager.getIcon('folder')} Project Structure</h2>
+          <div class="cols-2 gap-6">
+            <div>
+              <pre class="bg-gray-100 p-4 rounded text-sm"><code>my-course/
+├── course/              ← <strong>Your content</strong>
+│   ├── course-config.js
+│   ├── slides/
+│   ├── assets/
+│   ├── theme.css
+│   └── references/
+│
+└── framework/           ← <strong>Don't edit</strong>
+    └── docs/</code></pre>
+            </div>
+            <div class="stack-md">
+              <div class="callout callout--success callout--compact">
+                <strong>course/</strong> - All your content goes here. This is the only folder you'll work with.
+              </div>
+              <div class="callout callout--compact">
+                <strong>framework/</strong> - System files. Your AI assistant uses the docs inside, but you don't need to touch it.
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Key Files -->
+        <section class="card no-hover">
+          <h2 class="text-lg font-bold border-bottom pb-2 mb-4">${iconManager.getIcon('file')} Key Files</h2>
+          
+          <div class="accordion" id="files-accordion" data-component="accordion" data-mode="single">
+            
+            <div data-title="course-config.js - Course Settings" data-icon="settings">
+              <div class="stack-sm">
+                <p>This file controls your entire course structure:</p>
+                <ul class="list-styled">
+                  <li><strong>Metadata</strong> - Title, description, version</li>
+                  <li><strong>Structure</strong> - Order of slides, sections, and assessments</li>
+                  <li><strong>Objectives</strong> - Learning goals to track</li>
+                  <li><strong>Navigation</strong> - How learners move through content</li>
+                  <li><strong>Engagement</strong> - What learners must complete</li>
+                </ul>
+                <p class="text-sm text-muted">Your AI assistant will create and modify this file for you.</p>
+              </div>
+            </div>
+            
+            <div data-title="slides/ - Your Slide Files" data-icon="layers">
+              <div class="stack-sm">
+                <p>Each slide in your course is a separate file in this folder.</p>
+                <ul class="list-styled">
+                  <li>One file per slide (e.g., <code>intro.js</code>, <code>module-1.js</code>)</li>
+                  <li>Contains the content: HTML, text, and interactions</li>
+                  <li>AI generates these based on your outline</li>
+                </ul>
+              </div>
+            </div>
+            
+            <div data-title="assets/ - Media Files" data-icon="image">
+              <div class="stack-sm">
+                <p>All your media lives here, organized by type:</p>
+                <ul class="list-styled">
+                  <li><strong>images/</strong> - Photos, diagrams, icons</li>
+                  <li><strong>audio/</strong> - Narration and sound effects</li>
+                  <li><strong>video/</strong> - Video files (or use YouTube/Vimeo links)</li>
+                </ul>
+              </div>
+            </div>
+            
+            <div data-title="theme.css - Branding" data-icon="palette">
+              <div class="stack-sm">
+                <p>Customize your course appearance:</p>
+                <ul class="list-styled">
+                  <li>Brand colors (primary, accent, backgrounds)</li>
+                  <li>Fonts and typography</li>
+                  <li>Spacing and sizing adjustments</li>
+                </ul>
+                <p class="text-sm text-muted">We'll cover theming in detail later.</p>
+              </div>
+            </div>
+            
+            <div data-title="references/ - Source Materials" data-icon="file-text">
+              <div class="stack-sm">
+                <p>Place your existing content here for conversion:</p>
+                <ul class="list-styled">
+                  <li>PDFs, Word docs, PowerPoints</li>
+                  <li>Run <code>coursecode convert</code> to process them</li>
+                  <li>Converted markdown appears in <code>references/converted/</code></li>
+                </ul>
+              </div>
+            </div>
+            
+          </div>
+        </section>
+
+        <!-- Slides vs Sections -->
+        <section class="card no-hover">
+          <h2 class="text-lg font-bold border-bottom pb-2 mb-4">${iconManager.getIcon('git-branch')} Slides, Sections, and Assessments</h2>
+          <div class="cols-3 gap-4">
+            <div class="callout callout--info">
+              <h3 class="font-bold mb-2">Slides</h3>
+              <p class="text-sm">Individual screens of content. Each has its own file and can contain text, media, and interactions.</p>
+            </div>
+            <div class="callout callout--success">
+              <h3 class="font-bold mb-2">Sections</h3>
+              <p class="text-sm">Groups of related slides. Appear as expandable folders in the navigation menu.</p>
+            </div>
+            <div class="callout callout--warning">
+              <h3 class="font-bold mb-2">Assessments</h3>
+              <p class="text-sm">Graded quizzes. Scores are tracked and reported to your LMS.</p>
+            </div>
+          </div>
+        </section>
+
+      </div>
+    `;
+
+    return container;
+  }
+};

package/template/course/slides/example-final-exam.js

@@ -0,0 +1,144 @@
+/**
+ * FRAMEWORK EXAMPLE SLIDE
+ * This is a template example demonstrating assessment patterns. You can keep it as a reference or delete it.
+ * See COURSE_AUTHORING_GUIDE.md for full documentation.
+ */
+
+const { AssessmentManager } = CourseCode;
+// Standardized named export for assessment configuration.
+// This object is imported by the framework during initialization.
+export const config = {
+  // CORE IDENTITY
+  id: 'example-final-exam', // Unique SCORM-safe assessment key
+  title: 'CourseCode Knowledge Check', // Learner-facing heading
+  icon: 'target', // Optional icon name (from framework icon set) displayed before title
+  description: `
+    <p class="mb-3">Test your understanding of <strong>CourseCode fundamentals</strong>.</p>
+    <ul style="list-style: disc; display: inline-block; text-align: left;" class="text-sm">
+      <li>LMS standards (SCORM & cmi5)</li>
+      <li>Essential CLI commands</li>
+    </ul>
+  `, // Optional HTML description shown below title
+  containerId: 'assessment-container', // DOM node id for rendering
+
+  // ASSESSMENT BEHAVIOR & CONSTRAINTS
+  settings: {
+    passingScore: 50, // Minimum % to pass (cmi5: LMS masteryScore can override)
+    allowReview: true, // Allow review screen before submission
+    showProgress: true, // Display progress bar with question count
+    allowRetake: true, // Permit retake flow when learner fails
+    randomizeQuestions: false, // Shuffle question order (works with questions array OR questionBanks)
+    randomizeOnRetake: true, // Re-randomize on retake (default: true). Set false to keep same questions/order across attempts
+    attemptsBeforeRemedial: 1, // After 1 failures, present remedial content (null = disabled)
+    attemptsBeforeRestart: 2,  // After 2 failures, require course restart (null = disabled, must be > attemptsBeforeRemedial)
+    remedialSlideIds: ['example-remedial'] // Slide IDs to navigate to for remedial review (required when attemptsBeforeRemedial is set)
+  },
+
+  // ===== TEMPLATE EXAMPLE: Question Banks =====
+  // Uncomment and modify the below to use randomized question banks.
+  // This is an advanced feature for courses with multiple question pools.
+  // See SCORM_TEMPLATE_README.md for full documentation.
+  // =============================================
+  // questionBanks: [
+  //   {
+  //     id: 'safety-fundamentals',
+  //     questions: [/* 20 safety questions */],
+  //     selectCount: 5  // Select 5 random questions from this bank
+  //   },
+  //   {
+  //     id: 'technical-procedures',
+  //     questions: [/* 30 technical questions */],
+  //     selectCount: 10  // Select 10 random questions from this bank
+  //   }
+  // ],
+  // Note: When using questionBanks, questions are selected on first start and persist through refresh.
+  // With randomizeOnRetake: true, new selection occurs on each retake.
+  // With randomizeQuestions: true, selected questions are shuffled together.
+
+  // LEARNER EXPERIENCE
+  review: {
+    requireAllAnswered: false // Permit submission with unanswered questions
+  },
+
+  // RESULTS
+  resultsDisplay: {
+    detailLevel: 'detailed', // Render full question-by-question breakdown
+    showScore: true, // Display numeric score summary
+    showPassFail: true, // Indicate pass or fail status
+    showTimeSpent: true, // Show total time spent on assessment
+    showQuestions: true, // List each question in results view
+    showCorrectAnswers: true, // Reveal correct answers when learner is right
+    showIncorrectAnswers: true, // Reveal correct answers when learner is wrong
+    showUserResponses: true, // Display learner responses for each question
+    showCorrectness: true // Tag questions as correct or incorrect
+  },
+
+  // COMPLETION & PROGRESSION LOGIC
+  completionRequirements: {
+    requireSubmission: true, // Assessment must be submitted
+    requirePass: true, // Assessment must be passed (score >= passingScore)
+    blockNavigation: true // Block leaving slide until requirements are met
+  },
+};
+
+// Standardized named export for the slide component.
+export const slide = {
+  assessmentId: config.id,
+  render(_root, context = {}) {
+    // Defensive: ensure context is always an object (handles null/undefined cases)
+    const safeContext = context || {};
+    const overrides = safeContext.assessmentConfig || {};
+    const containerId = overrides.containerId || config.containerId;
+
+    // Create and return container element
+    const slideContainer = document.createElement('div');
+    slideContainer.innerHTML = `<div id="${containerId}"></div>`;
+
+    // Define assessment questions using InteractionTypes format
+    const questions = [
+      {
+        type: 'multiple-choice',
+        id: 'coursecode-fundamentals',
+        prompt: 'Which LMS standard does CourseCode support for tracking learner progress?',
+        weight: 1,
+        choices: [
+          { value: 'scorm', text: 'SCORM 1.2, SCORM 2004, and cmi5', correct: true },
+          { value: 'pdf', text: 'PDF exports only', correct: false },
+          { value: 'html', text: 'Static HTML with no tracking', correct: false },
+          { value: 'video', text: 'Video-only formats', correct: false }
+        ],
+        correctAnswer: 'scorm',
+        feedback: {
+          correct: 'Correct! CourseCode supports SCORM 1.2, SCORM 2004, and cmi5 standards.',
+          incorrect: 'CourseCode supports multiple LMS standards: SCORM 1.2, SCORM 2004, and cmi5 for comprehensive tracking.'
+        }
+      },
+      {
+        type: 'fill-in',
+        id: 'coursecode-commands',
+        prompt: 'Complete the CourseCode CLI commands:',
+        weight: 1,
+        blanks: [
+          { label: 'To create a new course, run', correct: 'coursecode create', placeholder: 'command' },
+          { label: 'To start development mode, run', correct: 'coursecode dev', placeholder: 'command' },
+          { label: 'To build for production, run', correct: 'coursecode build', placeholder: 'command' }
+        ],
+        caseSensitive: false,
+        feedback: {
+          correct: 'Perfect! You know the essential CourseCode CLI commands.',
+          incorrect: 'The main commands are: coursecode create, coursecode dev, and coursecode build.'
+        }
+      }
+    ];
+
+    const assessment = AssessmentManager.createAssessment(
+      { ...config, questions },
+      overrides
+    );
+
+    const container = slideContainer.querySelector(`#${containerId}`);
+    assessment.render(container, safeContext);
+
+    return slideContainer;
+  }
+};

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

@@ -0,0 +1,127 @@
+/**
+ * Finishing slide - Theming, branding, and deployment
+ */
+
+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>Finishing Your Course</h1>
+          <p>Customize the look, then build and deploy to your LMS.</p>
+        </header>
+
+        <!-- Theming Section -->
+        <section class="card no-hover">
+          <h2 class="text-lg font-bold border-bottom pb-2 mb-4">${iconManager.getIcon('palette')} Theming and Branding</h2>
+          <div class="cols-2 gap-6">
+            <div class="stack-md">
+              <p>Edit <code>course/theme.css</code> to customize your course appearance:</p>
+              <ul class="list-styled">
+                <li><strong>Primary color</strong> - Buttons, links, accents</li>
+                <li><strong>Secondary color</strong> - Alternate highlights</li>
+                <li><strong>Background colors</strong> - Page and card backgrounds</li>
+                <li><strong>Fonts</strong> - Headings and body text</li>
+              </ul>
+            </div>
+            <div class="callout callout--info callout--compact">
+              <strong>${iconManager.getIcon('message-square')} AI Prompt:</strong>
+              <p class="text-sm mt-2 font-mono">"Update theme.css to use [your brand color] as the primary color, with [font name] for headings."</p>
+            </div>
+          </div>
+        </section>
+
+        <!-- Logo and Branding -->
+        <section class="card no-hover">
+          <h2 class="text-lg font-bold border-bottom pb-2 mb-4">${iconManager.getIcon('image')} Adding Your Logo</h2>
+          <div class="stack-md">
+            <p>Place your logo in <code>course/assets/images/</code>, then update course-config.js:</p>
+            <div class="cols-2 gap-4">
+              <pre class="bg-gray-100 p-3 rounded text-sm"><code>branding: {
+  logo: './course/assets/images/your-logo.svg',
+  logoAlt: 'Your Company',
+  companyName: 'Your Company',
+  courseTitle: 'Course Name'
+}</code></pre>
+              <div class="callout callout--compact">
+                <strong>Tip:</strong> SVG logos work best because they scale perfectly at any size.
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <!-- Deployment -->
+        <section class="card no-hover">
+          <h2 class="text-lg font-bold border-bottom pb-2 mb-4">${iconManager.getIcon('package')} Deploying Your Course</h2>
+          <div class="stack-md">
+            <p>When your course is ready, build a package for your LMS:</p>
+            <pre class="bg-gray-100 p-3 rounded"><code>coursecode build</code></pre>
+            
+            <h3 class="font-bold mt-4">Choosing a Format</h3>
+            <p class="text-sm">Your LMS requires a specific format. If you're unsure, ask your LMS admin or try SCORM 1.2.</p>
+            <table class="table table-striped">
+              <thead>
+                <tr>
+                  <th>Format</th>
+                  <th>What It Is</th>
+                  <th>Command</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><strong>cmi5</strong></td>
+                  <td>Modern standard, rich data</td>
+                  <td><code>coursecode build</code> (default)</td>
+                </tr>
+                <tr>
+                  <td><strong>SCORM 2004</strong></td>
+                  <td>Enterprise standard</td>
+                  <td><code>coursecode build --format scorm2004</code></td>
+                </tr>
+                <tr>
+                  <td><strong>SCORM 1.2</strong></td>
+                  <td>Most compatible</td>
+                  <td><code>coursecode build --format scorm1.2</code></td>
+                </tr>
+              </tbody>
+            </table>
+
+            <h3 class="font-bold mt-4">CDN Deployment (Advanced)</h3>
+            <p class="text-sm">For frequent updates, host on a CDN and upload a tiny proxy to your LMS. Changes go live instantly without re-uploading. Ask your AI about <code>scorm1.2-proxy</code> or <code>cmi5-remote</code> formats.</p>
+          </div>
+        </section>
+
+        <!-- Sharing Previews -->
+        <section class="card no-hover">
+          <h2 class="text-lg font-bold border-bottom pb-2 mb-4">${iconManager.getIcon('share-2')} Sharing for Review</h2>
+          <div class="cols-2 gap-6">
+            <div class="stack-sm">
+              <p>Share your course with stakeholders before LMS deployment:</p>
+              <pre class="bg-gray-100 p-3 rounded"><code>coursecode preview --export</code></pre>
+              <p>Creates a folder you can upload to any web host (Netlify, GitHub Pages, etc.). Add password protection and other options with flags.</p>
+            </div>
+            <div class="stack-sm">
+              <p><strong>Export content for SME review:</strong></p>
+              <pre class="bg-gray-100 p-3 rounded"><code>coursecode export-content -o review.md</code></pre>
+              <p class="text-sm text-muted">Extracts all slide text, interactions, and questions into a single document for subject matter expert review.</p>
+            </div>
+          </div>
+        </section>
+
+        <!-- Next Steps -->
+        <div class="callout callout--success">
+          <h3 class="font-bold">${iconManager.getIcon('check-circle')} You're Ready!</h3>
+          <p>You now know the basics of creating courses with CourseCode. Explore the UI Showcase and Interactions Showcase to see what components are available, then take the assessment to test your knowledge.</p>
+        </div>
+
+      </div>
+    `;
+
+        return container;
+    }
+};