@curio-sd/e-module-builder 0.2.0 → 0.3.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

@@ -1,267 +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.
+# `@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/build.mjs

@@ -128,15 +128,12 @@ for (const weekDir of activeWeeks) {
 
   // assignment.md → src/data/inleveropdracht-weekN.json
   const hwMd = readMd(path.join(dir, 'assignment.md'))
-  const hwBody = hwMd.content.trim()
-  const hwParas = hwBody.split(/\n\n+/)
   const hwOut = {
     week: hwMd.data.week ?? weekNum,
     title: hwMd.data.title,
     subtitle: hwMd.data.subtitle ?? '',
     client: hwMd.data.client ?? '',
-    case: hwParas[0] ?? '',
-    assignment: hwParas.slice(1).join('\n\n'),
+    html: marked.parse(hwMd.content ?? ''),
     deliverables: hwMd.data.deliverables ?? [],
     criteria: hwMd.data.criteria ?? [],
     maxPoints: hwMd.data.maxPoints ?? 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@curio-sd/e-module-builder",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "description": "A tool for building e-modules for Curio SD",
   "license": "MIT",
@@ -29,12 +29,12 @@
     "highlight.js": "^11.11.1",
     "marked": "^18.0.5",
     "marked-highlight": "^2.2.4",
-    "monaco-editor": "^0.55.1",
+    "monaco-editor": "^0.53.0",
     "tailwindcss": "^4.1.8",
-    "vite": "^6.3.5",
+    "vite": "^8.0.16",
     "yaml": "^2.9.0"
   },
   "devDependencies": {
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.8"
   }
 }

package/src/js/inleveropdracht.js

@@ -8,7 +8,7 @@ export function initInleveropdracht(data) {
   const container = document.querySelector('[data-inleveropdracht]')
   if (!container) return
 
-  const state = getItem(storageKey(data.week), { criteria: {}, notes: '', submitted: false })
+  const state = getItem(storageKey(data.week), { criteria: {}, submitted: false })
 
   const criteriaHtml = data.criteria
     .map((c) => {
@@ -41,16 +41,15 @@ export function initInleveropdracht(data) {
     <section class="card mb-6">
       <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">Casus</p>
       <h2 class="mt-2 text-xl font-medium text-zinc-900">${data.client}</h2>
-      <p class="mt-4 leading-relaxed text-zinc-600">${data.case}</p>
+    </section>
+
+    <section class="card prose-inleveropdracht mb-6">
+      ${data.html}
     </section>
 
     <section class="card mb-6">
-      <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">Opdracht</p>
-      <p class="mt-3 leading-relaxed text-zinc-600">${data.assignment}</p>
-      <div class="mt-6">
-        <p class="text-sm font-medium text-zinc-900">Inleveren</p>
-        <ul class="mt-2 list-inside list-disc space-y-1">${deliverablesHtml}</ul>
-      </div>
+      <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">Inleveren</p>
+      <ul class="mt-2 list-inside list-disc space-y-1">${deliverablesHtml}</ul>
     </section>
 
     <section class="card mb-6">
@@ -64,18 +63,6 @@ export function initInleveropdracht(data) {
       <div data-criteria-list>${criteriaHtml}</div>
     </section>
 
-    <section class="card mb-6">
-      <label class="block">
-        <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-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>
-      </label>
-    </section>
-
     <section class="card-muted mb-6">
       <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">Tips</p>
       <ul class="mt-3 list-inside list-disc space-y-1">${tipsHtml}</ul>
@@ -89,7 +76,7 @@ export function initInleveropdracht(data) {
   `
 
   const saveState = (updates) => {
-    const current = getItem(storageKey(data.week), { criteria: {}, notes: '', submitted: false })
+    const current = getItem(storageKey(data.week), { criteria: {}, submitted: false })
     setItem(storageKey(data.week), { ...current, ...updates })
   }
 
@@ -115,14 +102,8 @@ export function initInleveropdracht(data) {
     })
   })
 
-  const notesEl = container.querySelector('[data-inleveropdracht-notes]')
-  notesEl?.addEventListener('input', () => {
-    saveState({ notes: notesEl.value })
-  })
-
   container.querySelector('[data-export-inleveropdracht]')?.addEventListener('click', async () => {
     const criteria = getItem(storageKey(data.week), {}).criteria || {}
-    const notes = notesEl?.value || ''
     const lines = [
       data.subtitle,
       data.title,
@@ -136,9 +117,6 @@ export function initInleveropdracht(data) {
       const mark = criteria[c.id] ? '[x]' : '[ ]'
       lines.push(`  ${mark} (${c.points}p) ${c.text}`)
     }
-    if (notes) {
-      lines.push('', 'Notities:', notes)
-    }
     try {
       await navigator.clipboard.writeText(lines.join('\n'))
       const btn = container.querySelector('[data-export-inleveropdracht]')