@curio-sd/e-module-builder 0.1.0 → 0.2.0

package/LICENSE

@@ -1,7 +1,7 @@
-Copyright 2026 Curio Software Developer
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+Copyright 2026 Curio Software Developer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,267 @@
+# `@curio-sd/e-module-builder`
+
+A CLI build tool for creating interactive e-learning modules. It processes a structured `content/` directory of Markdown files and produces a Vite-powered, single-page-style site with theory pages, quizzes, exercises, and assignments — one per week.
+
+## Installation
+
+```bash
+npm install --save-dev @curio-sd/e-module-builder
+```
+
+Add these scripts to your project's `package.json`:
+
+```json
+{
+  "scripts": {
+    "dev":     "e-module-builder dev",
+    "build":   "e-module-builder build",
+    "preview": "e-module-builder preview"
+  }
+}
+```
+
+## Commands
+
+| Command | Description |
+| ------- | ----------- |
+| `dev` | Start dev server at `localhost:5173`, watches `content/` and hot-reloads |
+| `build` | Production build to `dist/` |
+| `preview` | Locally preview the `dist/` build |
+
+## Project structure
+
+Your project only needs a `content/` directory. Everything else (`src/data/`, `pages/`, `index.html`) is generated automatically.
+
+```txt
+content/
+  module.md               ← module metadata (name, weeks, language, exercise mode)
+  week1/
+    theory.md             ← theory content (Markdown + YAML frontmatter)
+    quiz.md               ← mid-week quiz questions
+    assignment.md         ← hand-in assignment
+    exercises/
+      _meta.md            ← exercise set metadata (week, title, color)
+      1.md                ← exercise 1
+      2.md                ← exercise 2
+      …
+  week2/ … weekN/         ← same structure
+  exams/
+    theory-exam.md        ← final theory exam (optional)
+    practical-exam.md     ← final practical exam (optional)
+```
+
+## Content file formats
+
+### `content/module.md`
+
+```yaml
+---
+name: CSS Grid
+subtitle: E-module
+weeks: 4
+language: nl
+exerciseMode: interactive   # or: external
+description: Learn CSS Grid from the ground up.
+youtube: https://www.youtube.com/watch?v=...
+logoAlt: My module logo
+algemeen:
+  - I can explain the difference between Flexbox and Grid
+---
+```
+
+| Field | Required | Description |
+| ----- | -------- | ----------- |
+| `name` | yes | Module title |
+| `weeks` | yes | Number of weeks to include (limits which `weekN/` dirs are processed) |
+| `exerciseMode` | yes | `interactive` (Monaco editor) or `external` (link-out) |
+| `language` | no | UI language, default `nl` |
+| `subtitle` | no | Shown below the title |
+| `description` | no | Short module description |
+| `youtube` | no | Intro video URL |
+| `algemeen` | no | General learning outcomes added to the checklist |
+
+---
+
+### `content/weekN/theory.md`
+
+YAML frontmatter + Markdown body. The body supports standard Markdown, syntax-highlighted code blocks, and custom block-level elements (see [Custom elements](#custom-elements)).
+
+```yaml
+---
+week: 1
+title: The building blocks
+goal: You understand what CSS Grid is and when to use it.
+accent: indigo          # Tailwind color name used as the week's accent color
+summary: Short summary shown on the home page.
+leeruitkomsten:
+  - I can explain what a grid container is
+  - I can define columns with grid-template-columns
+---
+
+Markdown content here…
+```
+
+---
+
+### `content/weekN/quiz.md`
+
+```yaml
+---
+title: Mid-week quiz — Week 1
+passScore: 70
+questions:
+  - id: q1
+    question: What does display:grid do?
+    options:
+      - Creates a flex container
+      - Activates CSS Grid on the element
+    correct: 1
+    explanation: display:grid activates CSS Grid.
+---
+```
+
+---
+
+### `content/weekN/assignment.md`
+
+The Markdown **body** is split on blank lines: the first paragraph becomes the `case`, the rest becomes the `assignment` description.
+
+```yaml
+---
+week: 1
+title: Build a page layout
+subtitle: Practical assignment
+client: Acme Corp
+deliverables:
+  - A working HTML/CSS page
+criteria:
+  - Grid is used for the overall layout
+maxPoints: 10
+tips:
+  - Start with the grid container
+---
+
+Case description paragraph.
+
+Assignment instructions paragraph.
+```
+
+---
+
+### `content/weekN/exercises/_meta.md`
+
+```yaml
+---
+week: 1
+title: CSS Grid exercises
+color: indigo
+mode: interactive   # optional, overrides module-level exerciseMode for this set
+---
+```
+
+---
+
+### `content/weekN/exercises/N.md`
+
+Each file is a single exercise defined entirely in YAML frontmatter.
+
+**Text/instructions exercise:**
+
+```yaml
+---
+type: text
+title: Columns
+description: |
+  Create a grid with two equal columns.
+---
+```
+
+**Interactive (Monaco editor) exercise:**
+
+```yaml
+---
+type: interactive
+title: Add a gap
+starterHtml: "<div class='grid'>…</div>"
+starterCss: ".grid { display: grid; }"
+solution: ".grid { display: grid; gap: 16px; }"
+---
+```
+
+**External exercise (link-out):**
+
+```yaml
+---
+type: external
+title: Grid Garden
+url: https://cssgridgarden.com
+---
+```
+
+---
+
+### `content/exams/theory-exam.md` and `practical-exam.md`
+
+Same structure as `quiz.md`. Practical exam questions may include a `preview` field with `css` and `html` for a live CSS preview alongside the question.
+
+---
+
+## Custom elements in Markdown
+
+Theory pages support these custom block elements in Markdown:
+
+| Element | Purpose |
+| ------- | ------- |
+| `<x-callout>` | Highlighted note block. Add `type="warning"` for warnings. |
+| `<x-card title="…">` | Content card with a title. |
+| `<x-compare>` / `<x-compare-item title="…">` | Side-by-side comparison columns. |
+| `<x-nav label="…">` | Bottom navigation links (one Markdown link per line). |
+
+Example:
+
+```markdown
+<x-callout type="warning">
+Watch out: only **direct children** of the grid container become grid items.
+</x-callout>
+
+<x-compare>
+<x-compare-item title="Flexbox — one direction">
+
+Use for components: navbars, button rows.
+
+</x-compare-item>
+<x-compare-item title="Grid — two directions">
+
+Use for full page layouts.
+
+</x-compare-item>
+</x-compare>
+```
+
+---
+
+## What gets generated
+
+The build pipeline runs before Vite and produces:
+
+| Output | Source |
+| ------ | ------ |
+| `src/data/manifest.json` | `module.md` + all week frontmatter |
+| `src/data/theory-weekN.json` | `weekN/theory.md` |
+| `src/data/tussentoets-weekN.json` | `weekN/quiz.md` |
+| `src/data/exercises/weekN.json` | `weekN/exercises/` |
+| `src/data/inleveropdracht-weekN.json` | `weekN/assignment.md` |
+| `src/data/checklist.json` | `leeruitkomsten` from all weeks |
+| `src/data/toets-theorie.json` | `exams/theory-exam.md` |
+| `src/data/toets-praktijk.json` | `exams/practical-exam.md` |
+| `pages/weekN-theorie.html` | generated from template |
+| `pages/weekN-oefeningen.html` | generated from template |
+| `pages/weekN-toets.html` | generated from template |
+| `pages/weekN-oefening.html` | generated from template |
+| `pages/weekN-inleveropdracht.html` | generated from template |
+| `pages/checklist.html` | generated from template |
+| `pages/toets-theorie.html` | generated from template |
+| `pages/toets-praktijk.html` | generated from template |
+| `index.html` | generated from template |
+
+In `dev` mode, changes to `content/` trigger an automatic rebuild and browser reload.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@curio-sd/e-module-builder",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "A tool for building e-modules for Curio SD",
   "license": "MIT",
@@ -17,13 +17,24 @@
   "bin": {
     "e-module-builder": "./bin/cli.js"
   },
+  "scripts": {
+    "dev": "node scripts/dev-testbed.mjs",
+    "build:testbed": "node scripts/build-testbed.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.8",
     "gray-matter": "^4.0.3",
+    "highlight.js": "^11.11.1",
     "marked": "^18.0.5",
+    "marked-highlight": "^2.2.4",
     "monaco-editor": "^0.55.1",
     "tailwindcss": "^4.1.8",
     "vite": "^6.3.5",
     "yaml": "^2.9.0"
+  },
+  "devDependencies": {
+    "vitest": "^3.2.4"
   }
-}
+}

package/src/js/{thuiswerk.js → inleveropdracht.js}

@@ -1,11 +1,11 @@
 import { getItem, setItem } from './storage.js'
 
 function storageKey(week) {
-  return `thuiswerk:week${week}`
+  return `inleveropdracht:week${week}`
 }
 
-export function initThuiswerk(data) {
-  const container = document.querySelector('[data-thuiswerk]')
+export function initInleveropdracht(data) {
+  const container = document.querySelector('[data-inleveropdracht]')
   if (!container) return
 
   const state = getItem(storageKey(data.week), { criteria: {}, notes: '', submitted: false })
@@ -69,7 +69,7 @@ export function initThuiswerk(data) {
         <p class="text-sm font-medium text-zinc-900">Notities / link naar je bestanden</p>
         <p class="mt-1 text-sm text-zinc-500">Bijv. GitHub-link, Google Drive, of een korte toelichting voor je docent.</p>
         <textarea
-          data-thuiswerk-notes
+          data-inleveropdracht-notes
           class="mt-3 min-h-[120px] w-full border border-zinc-200 bg-white p-4 text-sm text-zinc-700 focus:border-zinc-900 focus:outline-none"
           placeholder="Plak hier je inlever-link of notities..."
         >${state.notes || ''}</textarea>
@@ -82,7 +82,7 @@ export function initThuiswerk(data) {
     </section>
 
     <div class="flex flex-wrap gap-3">
-      <button type="button" data-export-thuiswerk class="btn-secondary">Exporteer checklist</button>
+      <button type="button" data-export-inleveropdracht class="btn-secondary">Exporteer checklist</button>
       <button type="button" data-mark-submitted class="btn-primary">${state.submitted ? 'Ingeleverd ✓' : 'Markeer als ingeleverd'}</button>
     </div>
     <p data-submitted-hint class="mt-3 text-sm text-zinc-500 ${state.submitted ? '' : 'hidden'}">Je hebt deze opdracht gemarkeerd als ingeleverd. Lever ook in via het kanaal van je docent.</p>
@@ -115,12 +115,12 @@ export function initThuiswerk(data) {
     })
   })
 
-  const notesEl = container.querySelector('[data-thuiswerk-notes]')
+  const notesEl = container.querySelector('[data-inleveropdracht-notes]')
   notesEl?.addEventListener('input', () => {
     saveState({ notes: notesEl.value })
   })
 
-  container.querySelector('[data-export-thuiswerk]')?.addEventListener('click', async () => {
+  container.querySelector('[data-export-inleveropdracht]')?.addEventListener('click', async () => {
     const criteria = getItem(storageKey(data.week), {}).criteria || {}
     const notes = notesEl?.value || ''
     const lines = [
@@ -141,7 +141,7 @@ export function initThuiswerk(data) {
     }
     try {
       await navigator.clipboard.writeText(lines.join('\n'))
-      const btn = container.querySelector('[data-export-thuiswerk]')
+      const btn = container.querySelector('[data-export-inleveropdracht]')
       btn.textContent = 'Gekopieerd!'
       setTimeout(() => { btn.textContent = 'Exporteer checklist' }, 2000)
     } catch { /* ignore */ }

package/src/js/theory.js

@@ -1,5 +1,3 @@
-import './components.js'
-
 function esc(s) {
   return String(s)
     .replace(/&/g, '&')

package/templates/pages/inleveropdracht.html

@@ -1,28 +1,33 @@
 <!DOCTYPE html>
 <html lang="nl">
-  <head>
-    <!-- include:head -->
-    <title>{{pageTitle}}</title>
-  </head>
-  <body class="font-sans antialiased">
-    <div data-page-content>
-      <main class="px-4 py-10 md:px-10">
-        <div class="mx-auto max-w-3xl">
-          <span class="week-label">Week {{weekPadded}} — Inleveropdracht</span>
-          <h1 class="text-3xl font-semibold tracking-tight text-zinc-900" data-thuiswerk-title></h1>
-          <p class="mt-2 text-zinc-600">Werk de casus uit en lever in via het kanaal van je docent.</p>
-          <div data-thuiswerk class="mt-8"></div>
-        </div>
-      </main>
-    </div>
-    <script type="module">
-      import { initPage } from '/src/js/nav.js'
-      import { initThuiswerk } from '/src/js/thuiswerk.js'
-      import thuiswerkData from '/src/data/thuiswerk-week{{week}}.json'
-      initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: 'Week {{week}}', href: '/pages/week{{week}}-theorie.html' }, { label: 'Inleveropdracht' }] })
-      const titleEl = document.querySelector('[data-thuiswerk-title]')
-      if (titleEl) titleEl.textContent = thuiswerkData.title
-      initThuiswerk(thuiswerkData)
-    </script>
-  </body>
-</html>
+
+<head>
+  <!-- include:head -->
+  <title>{{pageTitle}}</title>
+</head>
+
+<body class="font-sans antialiased">
+  <div data-page-content>
+    <main class="px-4 py-10 md:px-10">
+      <div class="mx-auto max-w-3xl">
+        <span class="week-label">Week {{weekPadded}} — Inleveropdracht</span>
+        <h1 class="text-3xl font-semibold tracking-tight text-zinc-900"
+            data-inleveropdracht-title></h1>
+        <p class="mt-2 text-zinc-600">Werk de casus uit en lever in via het kanaal van je docent.</p>
+        <div data-inleveropdracht
+             class="mt-8"></div>
+      </div>
+    </main>
+  </div>
+  <script type="module">
+    import { initPage } from '/src/js/nav.js'
+    import { initInleveropdracht } from '/src/js/inleveropdracht.js'
+    import inleveropdrachtData from '/src/data/inleveropdracht-week{{week}}.json'
+    initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: 'Week {{week}}', href: '/pages/week{{week}}-theorie.html' }, { label: 'Inleveropdracht' }] })
+    const titleEl = document.querySelector('[data-inleveropdracht-title]')
+    if (titleEl) titleEl.textContent = inleveropdrachtData.title
+    initInleveropdracht(inleveropdrachtData)
+  </script>
+</body>
+
+</html>

package/templates/pages/toets.html

@@ -1,33 +1,38 @@
 <!DOCTYPE html>
 <html lang="nl">
-  <head>
-    <!-- include:head -->
-    <title>{{pageTitle}}</title>
-  </head>
-  <body class="font-sans antialiased">
-    <div data-page-content>
-      <main class="px-4 py-10 md:px-10">
-        <div class="mx-auto max-w-3xl">
-          <span class="week-label">Week {{weekPadded}} — Tussentoets</span>
-          <h1 class="text-3xl font-semibold tracking-tight text-zinc-900">{{weekTitle}}</h1>
-          <p class="mt-2 text-zinc-600">Test je kennis van week {{week}}. Minimaal 70% om te slagen.</p>
-          <div data-quiz class="mt-8"></div>
-          <div class="card mt-10 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-            <div>
-              <p class="font-medium text-zinc-900">Toets afgerond?</p>
-              <p class="mt-1 text-sm text-zinc-500">Werk de inleveropdracht uit.</p>
-            </div>
-            <a href="week{{week}}-thuiswerk.html" class="btn-primary shrink-0">Naar inleveropdracht</a>
+
+<head>
+  <!-- include:head -->
+  <title>{{pageTitle}}</title>
+</head>
+
+<body class="font-sans antialiased">
+  <div data-page-content>
+    <main class="px-4 py-10 md:px-10">
+      <div class="mx-auto max-w-3xl">
+        <span class="week-label">Week {{weekPadded}} — Tussentoets</span>
+        <h1 class="text-3xl font-semibold tracking-tight text-zinc-900">{{weekTitle}}</h1>
+        <p class="mt-2 text-zinc-600">Test je kennis van week {{week}}. Minimaal 70% om te slagen.</p>
+        <div data-quiz
+             class="mt-8"></div>
+        <div class="card mt-10 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+          <div>
+            <p class="font-medium text-zinc-900">Toets afgerond?</p>
+            <p class="mt-1 text-sm text-zinc-500">Werk de inleveropdracht uit.</p>
           </div>
+          <a href="week{{week}}-inleveropdracht.html"
+             class="btn-primary shrink-0">Naar inleveropdracht</a>
         </div>
-      </main>
-    </div>
-    <script type="module">
-      import { initPage } from '/src/js/nav.js'
-      import { initQuiz } from '/src/js/quiz.js'
-      import quizData from '/src/data/tussentoets-week{{week}}.json'
-      initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: 'Week {{week}}', href: '/pages/week{{week}}-theorie.html' }, { label: 'Tussentoets' }] })
-      initQuiz(quizData)
-    </script>
-  </body>
-</html>
+      </div>
+    </main>
+  </div>
+  <script type="module">
+    import { initPage } from '/src/js/nav.js'
+    import { initQuiz } from '/src/js/quiz.js'
+    import quizData from '/src/data/tussentoets-week{{week}}.json'
+    initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: 'Week {{week}}', href: '/pages/week{{week}}-theorie.html' }, { label: 'Tussentoets' }] })
+    initQuiz(quizData)
+  </script>
+</body>
+
+</html>