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

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

@@ -1,6 +1,7 @@
 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)
@@ -52,6 +53,8 @@ export async function initExercisePage(weekNum) {
     return
   }
 
+  initTheoryPanel(exercise.linked_theory)
+
   if (!exercise.type || exercise.type === 'text') {
     const panel = document.querySelector('[data-exercise-content]')
     panel?.querySelector('[data-exercise-interactive]')?.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/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>

package/templates/pages/inleveropdracht.html

@@ -19,14 +19,46 @@
       </div>
     </main>
   </div>
+
+  <div data-theory-panel class="theory-panel panel-hidden">
+    <div class="theory-panel-header">
+      <div data-theory-tabs class="theory-panel-tabs"></div>
+      <button data-theory-panel-close
+              type="button"
+              class="theory-panel-close"
+              aria-label="Sluit theorievenster">
+        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+      </button>
+    </div>
+    <div class="theory-panel-body">
+      <div data-theory-loader class="theory-panel-loader">
+        <div class="theory-panel-spinner"></div>
+      </div>
+      <iframe data-theory-iframe
+              class="theory-panel-iframe"
+              title="Theorie"></iframe>
+    </div>
+  </div>
+
+  <button data-theory-toggle
+          type="button"
+          class="theory-panel-toggle hidden"
+          aria-label="Toon theorie"
+          aria-expanded="false">
+    <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>
+    Theorie
+  </button>
+
   <script type="module">
     import { initPage } from '/src/js/nav.js'
     import { initInleveropdracht } from '/src/js/inleveropdracht.js'
+    import { initTheoryPanel } from '/src/js/exercises/theory-panel.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)
+    initTheoryPanel(inleveropdrachtData.linked_theory)
   </script>
 </body>
 

package/templates/pages/meetmoment-praktijk.html

@@ -0,0 +1,35 @@
+<!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">
+        <h1 class="text-3xl font-semibold tracking-tight text-zinc-900"
+            data-praktijk-title></h1>
+        <p class="mt-2 text-zinc-600"
+           data-praktijk-description></p>
+        <div data-praktijk-content
+             class="prose mt-8"></div>
+      </div>
+    </main>
+  </div>
+  <script type="module">
+    import { initPage } from '/src/js/nav.js'
+    import data from '/src/data/meetmoment-praktijk.json'
+    initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: data.navLabel ?? '{{assessmentTitle}}' }] })
+    const titleEl = document.querySelector('[data-praktijk-title]')
+    if (titleEl) titleEl.textContent = data.title
+    const descEl = document.querySelector('[data-praktijk-description]')
+    if (descEl) descEl.innerHTML = data.description
+    const contentEl = document.querySelector('[data-praktijk-content]')
+    if (contentEl) contentEl.innerHTML = data.html
+  </script>
+</body>
+
+</html>

package/templates/pages/meetmoment-theorie.html

@@ -0,0 +1,29 @@
+<!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">
+        <h1 class="text-3xl font-semibold tracking-tight text-zinc-900">{{assessmentTitle}}</h1>
+        <p class="mt-2 text-zinc-600">{{assessmentDescription}}</p>
+        <div data-quiz
+             class="mt-8"></div>
+      </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/meetmoment-theorie.json'
+    initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: '{{assessmentTitle}}' }] })
+    initQuiz(quizData)
+  </script>
+</body>
+
+</html>

package/templates/pages/{toets.html → meetmoment.html}

@@ -10,14 +10,14 @@
   <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>
+        <span class="week-label">Week {{weekPadded}} — Meetmoment Quiz</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="font-medium text-zinc-900">Meetmoment afgerond?</p>
             <p class="mt-1 text-sm text-zinc-500">Werk de inleveropdracht uit.</p>
           </div>
           <a href="week{{week}}-inleveropdracht.html"
@@ -29,8 +29,15 @@
   <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' }] })
+    import quizData from '/src/data/meetmoment-quiz-week{{week}}.json'
+
+    initPage({
+      breadcrumbs: [
+        { label: 'Home', href: '/index.html' },
+        { label: 'Week {{week}}', href: '/pages/week{{week}}-theorie.html' },
+        { label: 'Meetmoment Quiz' }
+      ]
+    })
     initQuiz(quizData)
   </script>
 </body>

package/templates/pages/oefening.html

@@ -143,6 +143,35 @@
     </main>
   </div>
 
+  <div data-theory-panel class="theory-panel panel-hidden">
+    <div class="theory-panel-header">
+      <div data-theory-tabs class="theory-panel-tabs"></div>
+      <button data-theory-panel-close
+              type="button"
+              class="theory-panel-close"
+              aria-label="Sluit theorievenster">
+        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
+      </button>
+    </div>
+    <div class="theory-panel-body">
+      <div data-theory-loader class="theory-panel-loader">
+        <div class="theory-panel-spinner"></div>
+      </div>
+      <iframe data-theory-iframe
+              class="theory-panel-iframe"
+              title="Theorie"></iframe>
+    </div>
+  </div>
+
+  <button data-theory-toggle
+          type="button"
+          class="theory-panel-toggle hidden"
+          aria-label="Toon theorie"
+          aria-expanded="false">
+    <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>
+    Theorie
+  </button>
+
   <script type="module">
     import { initPage } from '/src/js/nav.js'
     import { initExercisePage } from '/src/js/exercises/load-exercise.js'

package/templates/pages/oefeningen.html

@@ -1,44 +1,52 @@
 <!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 {{week}}</span>
-          <h1 class="text-3xl font-semibold tracking-tight text-zinc-900">Oefeningen</h1>
-          <p class="mt-2 text-zinc-600" data-hub-subtitle>{{weekTitle}} — 8 oefeningen.</p>
-          <div class="card mt-8">
-            <div class="mb-4 flex items-end justify-between">
-              <div>
-                <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">Voortgang</p>
-                <p class="mt-1 text-sm text-zinc-500"><span data-hub-progress-text>0 / 8</span> afgerond</p>
-              </div>
-            </div>
-            <div class="progress-track">
-              <div data-hub-progress-bar class="progress-fill" style="width:0%"></div>
-            </div>
-          </div>
-          <div data-exercise-list class="mt-8 space-y-4"></div>
-          <div class="card mt-10 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+
+<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 {{week}}</span>
+        <h1 class="text-3xl font-semibold tracking-tight text-zinc-900">Oefeningen</h1>
+        <p class="mt-2 text-zinc-600"
+           data-hub-subtitle>{{weekTitle}} — 8 oefeningen.</p>
+        <div class="card mt-8">
+          <div class="mb-4 flex items-end justify-between">
             <div>
-              <p class="font-medium text-zinc-900">Klaar met de oefeningen?</p>
-              <p class="mt-1 text-sm text-zinc-500">Test je kennis met de tussentoets.</p>
+              <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">Voortgang</p>
+              <p class="mt-1 text-sm text-zinc-500"><span data-hub-progress-text>0 / 8</span> afgerond</p>
             </div>
-            <a href="week{{week}}-toets.html" class="btn-primary shrink-0">Naar de toets</a>
           </div>
+          <div class="progress-track">
+            <div data-hub-progress-bar
+                 class="progress-fill"
+                 style="width:0%"></div>
+          </div>
+        </div>
+        <div data-exercise-list
+             class="mt-8 space-y-4"></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">Klaar met de oefeningen?</p>
+            <p class="mt-1 text-sm text-zinc-500">Test je kennis met de meetmoment.</p>
+          </div>
+          <a href="week{{week}}-meetmoment.html"
+             class="btn-primary shrink-0">Naar het meetmoment</a>
         </div>
-      </main>
-    </div>
-    <script type="module">
-      import { initPage } from '/src/js/nav.js'
-      import { initExerciseHub } from '/src/js/exercises/hub.js'
-      import weekData from '/src/data/exercises/week{{week}}.json'
-      initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: 'Week {{week}}' }, { label: 'Oefeningen' }] })
-      initExerciseHub(weekData, {{week}})
-    </script>
-  </body>
-</html>
+      </div>
+    </main>
+  </div>
+  <script type="module">
+    import { initPage } from '/src/js/nav.js'
+    import { initExerciseHub } from '/src/js/exercises/hub.js'
+    import weekData from '/src/data/exercises/week{{week}}.json'
+    initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: 'Week {{week}}' }, { label: 'Oefeningen' }] })
+    initExerciseHub(weekData, {{ week }})
+  </script>
+</body>
+
+</html>

package/templates/pages/theorie.html

@@ -15,7 +15,12 @@
     <script type="module">
       import { initPage } from '/src/js/nav.js'
       import { initTheory } from '/src/js/theory.js'
-      initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: 'Week {{week}}', href: '/pages/week{{week}}-theorie.html' }, { label: 'Theorie' }] })
+      const embedded = new URLSearchParams(location.search).has('embedded')
+      if (!embedded) {
+        initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: 'Week {{week}}', href: '/pages/week{{week}}-theorie.html' }, { label: 'Theorie' }] })
+      } else {
+        document.body.setAttribute('data-embedded', '')
+      }
       initTheory({{week}})
     </script>
   </body>

package/templates/pages/toets-praktijk.html

@@ -1,25 +0,0 @@
-<!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">
-          <h1 class="text-3xl font-semibold tracking-tight text-zinc-900">Eindtoets praktijk</h1>
-          <p class="mt-2 text-zinc-600">Praktijkvragen over de module. Minimaal 70% om te slagen.</p>
-          <div data-quiz class="mt-8"></div>
-        </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/toets-praktijk.json'
-      initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: 'Eindtoets praktijk' }] })
-      initQuiz(quizData)
-    </script>
-  </body>
-</html>

package/templates/pages/toets-theorie.html

@@ -1,25 +0,0 @@
-<!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">
-          <h1 class="text-3xl font-semibold tracking-tight text-zinc-900">Eindtoets theorie</h1>
-          <p class="mt-2 text-zinc-600">Meerkeuzevragen over de module. Minimaal 70% om te slagen.</p>
-          <div data-quiz class="mt-8"></div>
-        </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/toets-theorie.json'
-      initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: 'Eindtoets theorie' }] })
-      initQuiz(quizData)
-    </script>
-  </body>
-</html>