@curio-sd/e-module-builder 0.3.1 → 0.5.0

package/src/js/exercises/exercise-runner.js

@@ -66,6 +66,9 @@ export function initAreasExercise(exercise, { onSolved } = {}) {
 
   if (!containerInput || !preview) return
 
+  const outerClassMatch = exercise.previewHtml.match(/<\w+[^>]*\bclass="([^"]*)"/)
+  const gridClass = (outerClassMatch?.[1] ?? '').split(/\s+/)[0] || 'grid-container'
+
   const updatePreview = () => {
     const areas = containerInput.value.trim()
     const itemStyles = Array.from(selects)
@@ -74,7 +77,7 @@ export function initAreasExercise(exercise, { onSolved } = {}) {
 
     preview.innerHTML = `
       <style>
-        .news-grid {
+        .${gridClass} {
           display: grid;
           grid-template-columns: ${exercise.gridColumns || '1fr 1fr 1fr'};
           grid-template-areas: ${areas || '"a b c"'};

package/src/js/exercises/exercise-shared.js

@@ -12,7 +12,7 @@ export function renderExerciseMeta(exercise) {
     diffEl.textContent = `Oefening ${String(exercise.id).padStart(2, '0')} · ${label}`
   }
   if (titleEl) titleEl.textContent = exercise.title
-  if (descEl) descEl.textContent = exercise.description
+  if (descEl) descEl.innerHTML = exercise.descriptionInlineHtml ?? ''
 }
 
 export function markExerciseSolved(week, id) {

package/src/js/exercises/external-exercise.js

@@ -38,7 +38,7 @@ export function initExternalExercise(exercise, weekNum, { onSolved } = {}) {
   const deliverablesEl = document.querySelector('[data-external-deliverables]')
   const feedback = document.querySelector('[data-feedback]')
 
-  if (taskEl) taskEl.innerHTML = exercise.task || exercise.description || ''
+  if (taskEl) taskEl.innerHTML = exercise.taskHtml || exercise.descriptionInlineHtml || ''
   if (stepsEl) stepsEl.innerHTML = renderSteps(exercise.steps)
   if (envEl) envEl.textContent = exercise.environment || 'Je eigen omgeving (editor, server of tool)'
   if (deliverablesEl) {
@@ -48,15 +48,14 @@ export function initExternalExercise(exercise, weekNum, { onSolved } = {}) {
   document.querySelector('[data-hint]')?.addEventListener('click', () => {
     showFeedback(
       feedback,
-      `<p class="text-zinc-600">${(exercise.hint || 'Werk de stappen rustig door in je eigen omgeving.').replace(/\n/g, '<br>')}</p>`
+      exercise.hintHtml || '<p class="text-zinc-600">Werk de stappen rustig door in je eigen omgeving.</p>'
     )
   })
 
   document.querySelector('[data-solution]')?.addEventListener('click', () => {
-    const solution = exercise.solution || 'Vergelijk je werk met de theorie en vraag feedback aan je docent.'
     showFeedback(
       feedback,
-      `<p class="font-medium text-zinc-900">Voorbeelduitwerking</p><p class="mt-2 text-sm text-zinc-600">${solution.replace(/\n/g, '<br>')}</p>`
+      `<p class="font-medium text-zinc-900">Voorbeelduitwerking</p>${exercise.solutionHtml || '<p class="mt-2 text-sm text-zinc-600">Vergelijk je werk met de theorie en vraag feedback aan je docent.</p>'}`
     )
   })
 

package/src/js/exercises/hub.js

@@ -3,6 +3,10 @@ import { sitePath } from '../site-path.js'
 
 const DIFFICULTY = ['', 'Beginner', 'Beginner', 'Gemiddeld', 'Gemiddeld', 'Gevorderd', 'Gevorderd', 'Expert', 'Expert']
 
+function stripHtml(html) {
+  return html.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim()
+}
+
 export function initExerciseHub(weekData, weekNum) {
   const container = document.querySelector('[data-exercise-list]')
   if (!container) return
@@ -36,7 +40,7 @@ export function initExerciseHub(weekData, weekNum) {
               <h3 class="font-medium text-zinc-900">${ex.title}</h3>
               ${done ? '<span class="badge-done">Voltooid</span>' : ''}
             </div>
-            <p class="mt-1.5 text-sm leading-relaxed text-zinc-500">${ex.description}</p>
+            <p class="mt-1.5 text-sm leading-relaxed text-zinc-500">${ex.descriptionInlineHtml ?? ex.description ?? ''}</p>
             ${modeBadge}
           </div>
         </a>

package/src/js/exercises/load-exercise.js

@@ -1,107 +1,59 @@
 import { renderExerciseMeta, markExerciseSolved } from './exercise-shared.js'
 import { sitePath } from '../site-path.js'
-
 import { initExternalExercise } from './external-exercise.js'
-
-
+import { initTheoryPanel } from './theory-panel.js'
 
 async function loadWeekData(weekNum) {
-
   return import(`../../data/exercises/week${weekNum}.json`).then((m) => m.default)
-
 }
 
-
-
 function isExternalMode(weekData, exercise) {
-
   return weekData?.mode === 'external' || exercise?.type === 'external'
-
 }
 
-
-
 function showMissingContent(weekNum) {
-
   const panel = document.querySelector('[data-exercise-content]')
 
   panel?.querySelector('[data-exercise-interactive]')?.classList.add('hidden')
-
   panel?.querySelector('[data-exercise-external]')?.classList.add('hidden')
-
   panel?.querySelector('[data-hint]')?.closest('.mb-4')?.classList.add('hidden')
-
   panel?.insertAdjacentHTML(
-
     'beforeend',
-
     `<div class="card border-l-4 border-l-amber-500">
-
       <p class="font-medium text-zinc-900">Content ontbreekt</p>
-
-      <p class="mt-2 text-sm text-zinc-600">De oefening staat in de navigatie, maar is nog niet gegenereerd. Run in een terminal:</p>
-
-      <pre class="code-block mt-3 text-sm"><code>npm run generate-content</code></pre>
-
-      <p class="mt-2 text-sm text-zinc-500">Herlaad daarna deze pagina.</p>
-
+      <p class="mt-2 text-sm text-zinc-600">De oefening staat in de navigatie, maar de inhoud is niet beschikbaar.</p>
     </div>`
-
   )
-
 }
 
-
-
 export async function initExercisePage(weekNum) {
-
   const params = new URLSearchParams(window.location.search)
-
   const id = parseInt(params.get('id') || '1', 10)
-
-
-
   let weekData
 
   try {
-
     weekData = await loadWeekData(weekNum)
-
   } catch {
-
     document.querySelector('[data-exercise-content]')?.insertAdjacentHTML(
-
       'beforeend',
-
       `<p class="text-red-600">Oefeningdata voor week ${weekNum} niet gevonden.</p>`
-
     )
 
     return
-
   }
 
-
-
   const exercise = weekData?.exercises?.find((e) => e.id === id)
 
-
-
   if (!exercise) {
-
     document.querySelector('[data-exercise-content]')?.insertAdjacentHTML(
-
       'beforeend',
-
       '<p class="text-red-600">Oefening niet gevonden.</p>'
-
     )
 
     return
-
   }
 
-
+  initTheoryPanel(exercise.linked_theory)
 
   if (!exercise.type || exercise.type === 'text') {
     const panel = document.querySelector('[data-exercise-content]')
@@ -121,189 +73,100 @@ export async function initExercisePage(weekNum) {
   }
 
   if (isExternalMode(weekData, exercise)) {
-
     const missing = !exercise.task?.trim() && !exercise.description?.trim()
 
     if (missing) {
-
       showMissingContent(weekNum)
-
       return
-
     }
 
     initExternalExercise(exercise, weekNum, {
-
       onSolved: () => markExerciseSolved(weekNum, exercise.id),
-
     })
 
     renderNavButtons(weekNum, id, weekData.exercises.length)
-
     return
-
   }
 
-
-
   renderExerciseMeta(exercise)
 
-
-
   const missingContent =
-
-    !exercise.starterCss?.trim() ||
-
+    (exercise.type === 'areas' ? !exercise.starterAreas?.trim() : !exercise.starterCss?.trim()) ||
     !exercise.previewHtml?.trim() ||
-
     (exercise.type !== 'areas' && !exercise.checks?.length)
 
-
-
   if (missingContent) {
-
     showMissingContent(weekNum)
-
     return
-
   }
 
-
-
   const {
-
     initCssPlayground,
-
     initAreasExercise,
-
     initResponsiveExercise,
-
+    renderAreaSelects,
   } = await import('./exercise-runner.js')
 
-
-
   document.querySelector('[data-exercise-external]')?.classList.add('hidden')
-
   document.querySelector('[data-exercise-interactive]')?.classList.remove('hidden')
 
-
-
   const cssPanel = document.querySelector('[data-exercise-css-panel]')
-
   const areasPanel = document.querySelector('[data-exercise-areas-panel]')
-
   const responsiveBar = document.querySelector('[data-responsive-bar]')
-
-
-
   const onSolved = () => markExerciseSolved(weekNum, exercise.id)
 
-
-
   if (exercise.type === 'areas') {
-
     cssPanel?.classList.add('hidden')
-
     areasPanel?.classList.remove('hidden')
-
     responsiveBar?.classList.add('hidden')
-
     document.querySelector('[data-solution]')?.classList.add('hidden')
 
-
-
     const containerInput = document.querySelector('[data-areas-container]')
 
     if (containerInput) containerInput.value = exercise.starterAreas || ''
 
-
-
     const selectsEl = document.querySelector('[data-area-selects]')
 
     if (selectsEl) {
-
       selectsEl.innerHTML = renderAreaSelects(exercise.areaItems, exercise.areaOptions)
-
     }
 
-
-
     initAreasExercise(exercise, { onSolved })
-
   } else {
-
     areasPanel?.classList.add('hidden')
-
     cssPanel?.classList.remove('hidden')
 
-
-
     if (exercise.type === 'responsive') {
-
       responsiveBar?.classList.remove('hidden')
-
       initResponsiveExercise(exercise, { onSolved })
-
     } else {
-
       responsiveBar?.classList.add('hidden')
-
       initCssPlayground(exercise, { onSolved })
-
     }
-
   }
 
-
-
   renderNavButtons(weekNum, id, weekData.exercises.length)
-
 }
 
-
-
 function renderNavButtons(week, currentId, total) {
-
   const prev = document.querySelector('[data-prev-exercise]')
-
   const next = document.querySelector('[data-next-exercise]')
 
-
-
   if (prev) {
-
     if (currentId > 1) {
-
       prev.href = `${sitePath(`/pages/week${week}-oefening.html`)}?id=${currentId - 1}`
-
       prev.classList.remove('hidden')
-
     } else {
-
       prev.classList.add('hidden')
-
     }
-
   }
 
-
-
   if (next) {
-
     if (currentId < total) {
-
       next.href = `${sitePath(`/pages/week${week}-oefening.html`)}?id=${currentId + 1}`
-
       next.classList.remove('hidden')
-
     } else {
-
       next.classList.add('hidden')
-
     }
-
   }
-
 }
-
-

package/src/js/exercises/theory-panel.js

@@ -0,0 +1,95 @@
+import { sitePath } from '../site-path.js'
+
+const WEEK_RE = /^([a-zA-Z]+)(\d+)$/
+
+const BOOK_SVG = `<svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.966 8.966 0 0 0-6 2.292m0-14.25v14.25" /></svg>`
+
+export function parseLinkedTheory(linkedTheory) {
+  if (!Array.isArray(linkedTheory) || linkedTheory.length === 0) return []
+
+  return linkedTheory
+    .map((entry) => {
+      if (typeof entry !== 'string') return null
+      const m = entry.trim().match(WEEK_RE)
+      if (!m) return null
+      const prefix = m[1]
+      const num = parseInt(m[2], 10)
+      const label = `${prefix.charAt(0).toUpperCase()}${prefix.slice(1)} ${num}`
+      return { key: entry.trim(), label, num, dirName: entry.trim() }
+    })
+    .filter(Boolean)
+}
+
+export function theoryIframeSrc(dirName) {
+  return sitePath(`/pages/${dirName}-theorie.html`) + '?embedded=1'
+}
+
+export function initTheoryPanel(linkedTheory) {
+  const toggle = document.querySelector('[data-theory-toggle]')
+  const panel = document.querySelector('[data-theory-panel]')
+
+  const tabs = parseLinkedTheory(linkedTheory)
+
+  if (!tabs.length) {
+    toggle?.classList.add('hidden')
+    panel?.classList.add('panel-hidden')
+    return
+  }
+
+  toggle?.classList.remove('hidden')
+
+  const tabsEl = panel?.querySelector('[data-theory-tabs]')
+  const iframe = panel?.querySelector('[data-theory-iframe]')
+  const loader = panel?.querySelector('[data-theory-loader]')
+
+  if (!tabsEl || !iframe || !panel) return
+
+  function showLoader() { loader?.classList.remove('theory-panel-loader-hidden') }
+  function hideLoader() { loader?.classList.add('theory-panel-loader-hidden') }
+
+  iframe.addEventListener('load', hideLoader)
+
+  tabsEl.innerHTML = tabs
+    .map(
+      (t, i) =>
+        `<button class="theory-tab${i === 0 ? ' theory-tab-active' : ''}" data-tab="${t.key}" type="button">${t.label}</button>`
+    )
+    .join('')
+
+  function activateTab(key) {
+    tabsEl.querySelectorAll('[data-tab]').forEach((btn) => {
+      btn.classList.toggle('theory-tab-active', btn.dataset.tab === key)
+    })
+    const tab = tabs.find((t) => t.key === key)
+    if (tab) {
+      showLoader()
+      iframe.src = theoryIframeSrc(tab.dirName)
+    }
+  }
+
+  tabsEl.addEventListener('click', (e) => {
+    const btn = e.target.closest('[data-tab]')
+    if (btn) activateTab(btn.dataset.tab)
+  })
+
+  activateTab(tabs[0].key)
+
+  const closeBtn = panel.querySelector('[data-theory-panel-close]')
+  closeBtn?.addEventListener('click', () => {
+    panel.classList.add('panel-hidden')
+    toggle?.setAttribute('aria-expanded', 'false')
+  })
+
+  toggle?.addEventListener('click', () => {
+    const isHidden = panel.classList.contains('panel-hidden')
+    panel.classList.toggle('panel-hidden', !isHidden)
+    toggle.setAttribute('aria-expanded', String(isHidden))
+  })
+
+  toggle?.setAttribute('aria-expanded', 'false')
+
+  // Enable the slide transition after the first frame has been committed so
+  // the panel doesn't animate from its off-screen position on page load.
+  // Double-rAF ensures this works even when initTheoryPanel is called synchronously.
+  requestAnimationFrame(() => requestAnimationFrame(() => panel.classList.add('panel-ready')))
+}

package/src/js/home.js

@@ -31,7 +31,7 @@ export function initHome() {
 
   if (titleEl) titleEl.textContent = mod.name
 
-  if (descEl) descEl.textContent = mod.description
+  if (descEl) descEl.innerHTML = mod.description
 
 
 

package/src/js/nav.js

@@ -13,9 +13,7 @@ function buildNavItems() {
     })
   }
 
-  for (const page of manifest.nav.examPages) {
-    items.push(page)
-  }
+  items.push(manifest.nav.assessmentSection)
 
   return items
 }
@@ -69,16 +67,68 @@ function renderNavGroup(group) {
     ? `<p class="mt-0.5 text-[10px] font-normal leading-snug text-zinc-500">${group.title}</p>`
     : ''
   return `
-    <div class="space-y-0.5">
-      <div class="px-3 pb-1 pt-4">
-        <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-zinc-400">${group.label}</p>
-        ${title}
+    <div class="space-y-0.5" data-nav-group="${group.label}">
+      <button class="nav-group-toggle" data-group-toggle="${group.label}">
+        <div>
+          <p class="text-[10px] font-semibold uppercase tracking-[0.14em] text-zinc-400">${group.label}</p>
+          ${title}
+        </div>
+        <svg class="nav-group-chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+        </svg>
+      </button>
+      <div class="nav-group-children" data-group-children="${group.label}">
+        <div class="nav-group-inner">${childLinks}</div>
       </div>
-      ${childLinks}
     </div>
   `
 }
 
+function initCollapsible(navEl, defaultExpandedKeys) {
+  const STORAGE_KEY = 'nav-collapsed-groups'
+
+  function getCollapsed() {
+    try {
+      return new Set(JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'))
+    } catch {
+      return new Set()
+    }
+  }
+
+  function saveCollapsed(collapsed) {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify([...collapsed]))
+  }
+
+  if (localStorage.getItem(STORAGE_KEY) === null) {
+    const allKeys = [...navEl.querySelectorAll('[data-group-toggle]')].map((b) => b.dataset.groupToggle)
+    saveCollapsed(new Set(allKeys.filter((k) => !defaultExpandedKeys.has(k))))
+  }
+
+  const collapsed = getCollapsed()
+
+  navEl.querySelectorAll('[data-group-toggle]').forEach((btn) => {
+    const key = btn.dataset.groupToggle
+    const children = navEl.querySelector(`[data-group-children="${key}"]`)
+    const chevron = btn.querySelector('.nav-group-chevron')
+    const hasActive = !!children?.querySelector('.text-white')
+
+    if (!hasActive && collapsed.has(key)) {
+      children?.classList.add('collapsed')
+      chevron?.classList.add('-rotate-90')
+    }
+
+    btn.addEventListener('click', () => {
+      const nowCollapsed = children?.classList.toggle('collapsed')
+      chevron?.classList.toggle('-rotate-90', nowCollapsed)
+
+      const saved = getCollapsed()
+      if (nowCollapsed) saved.add(key)
+      else saved.delete(key)
+      saveCollapsed(saved)
+    })
+  })
+}
+
 export function getManifest() {
   return manifest
 }
@@ -108,6 +158,11 @@ export function initNav() {
       <div class="sidebar-scroll space-y-1">${links}</div>
     </div>
   `
+  const groups = NAV_ITEMS.filter((i) => i.children)
+  const defaultExpandedKeys = new Set()
+  if (groups[0]) defaultExpandedKeys.add(groups[0].label)
+  if (manifest.nav.assessmentSection?.label) defaultExpandedKeys.add(manifest.nav.assessmentSection.label)
+  initCollapsible(navEl, defaultExpandedKeys)
 }
 
 export function initMobileNav() {

package/src/js/theory.js

@@ -15,7 +15,6 @@ export async function initTheory(week) {
   } catch {
     container.innerHTML = `
       <p class="text-red-600">Theorie voor week ${week} niet gevonden.</p>
-      <p class="mt-2 text-sm text-zinc-500">Run <code class="font-mono">npm run generate-content</code> om content te genereren.</p>
     `
     return
   }
@@ -23,7 +22,6 @@ export async function initTheory(week) {
   if (!data?.html) {
     container.innerHTML = `
       <p class="text-amber-700">Theorie voor week ${week} is nog leeg.</p>
-      <p class="mt-2 text-sm text-zinc-500">Run <code class="font-mono">npm run generate-content</code> om content te genereren.</p>
     `
     return
   }

package/templates/index.html

@@ -70,11 +70,11 @@
                 <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-zinc-900 font-mono text-xs text-white">3</span>
 
                 <div>
-                  <p class="font-medium text-zinc-900">Eindtoetsen toevoegen (optioneel)</p>
+                  <p class="font-medium text-zinc-900">Meetmomenten toevoegen (optioneel)</p>
 
                   <p class="mt-1 text-sm text-zinc-500">
-                    Plaats <code class="font-mono text-xs">content/exams/theory-exam.md</code> en
-                    <code class="font-mono text-xs">practical-exam.md</code> met vragen in YAML frontmatter.
+                    Plaats <code class="font-mono text-xs">content/assessments/theory-assessment.md</code> en
+                    <code class="font-mono text-xs">practical-assessment.md</code> met vragen in YAML frontmatter.
                   </p>
                 </div>
               </li>
@@ -120,12 +120,20 @@ npm run preview  # preview van dist/</code></pre>
             </p>
           </div>
 
-          <p class="mb-6 text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">Curriculum</p>
+          <div class="mb-6 flex items-center justify-between">
+            <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">Curriculum</p>
+
+            <a href="e-module.pdf"
+               download
+               class="inline-flex items-center gap-1.5 rounded border border-zinc-200 bg-white px-3 py-1.5 text-xs font-medium text-zinc-600 hover:bg-zinc-50">
+              Download als PDF
+            </a>
+          </div>
 
           <div class="mb-14 grid gap-px bg-zinc-200 sm:grid-cols-2"
                data-home-curriculum></div>
 
-          <p class="mb-6 text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">Eindtoets</p>
+          <p class="mb-6 text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">Meetmoment</p>
 
           <div class="grid gap-px bg-zinc-200 sm:grid-cols-3">
             <a href="pages/checklist.html"
@@ -136,16 +144,16 @@ npm run preview  # preview van dist/</code></pre>
               <p class="mt-1 text-sm text-zinc-500">Houd je voortgang bij</p>
             </a>
 
-            <a href="pages/toets-theorie.html"
+            <a href="pages/meetmoment-theorie.html"
                class="card-interactive block bg-white">
-              <h3 class="font-medium text-zinc-900">Eindtoets theorie</h3>
+              <h3 class="font-medium text-zinc-900">Meetmoment theorie</h3>
 
               <p class="mt-1 text-sm text-zinc-500">Meerkeuzevragen</p>
             </a>
 
-            <a href="pages/toets-praktijk.html"
+            <a href="pages/meetmoment-praktijk.html"
                class="card-interactive block bg-white">
-              <h3 class="font-medium text-zinc-900">Eindtoets praktijk</h3>
+              <h3 class="font-medium text-zinc-900">Meetmoment praktijk</h3>
 
               <p class="mt-1 text-sm text-zinc-500">Praktijkvragen</p>
             </a>