@curio-sd/e-module-builder 0.1.0

package/src/js/nav.js

@@ -0,0 +1,165 @@
+import { mountLayout } from './layout.js'
+import manifest from '../data/manifest.json'
+import { sitePath } from './site-path.js'
+
+function buildNavItems() {
+  const items = [{ href: manifest.nav.home.href, label: manifest.nav.home.label }]
+
+  for (const week of manifest.nav.weeks) {
+    items.push({
+      label: week.label,
+      title: week.title,
+      children: week.children,
+    })
+  }
+
+  for (const page of manifest.nav.examPages) {
+    items.push(page)
+  }
+
+  return items
+}
+
+const NAV_ITEMS = buildNavItems()
+
+function isActive(href) {
+  const path = window.location.pathname.replace(/\/$/, '')
+  const target = href.replace(/\/$/, '')
+  if (target.endsWith('index.html') || target === '/index.html') {
+    return path.endsWith('/') || path.endsWith('/index.html') || path === ''
+  }
+  return path.endsWith(target) || path.includes(target)
+}
+
+function renderNavLink(item, nested = false) {
+  const active = isActive(item.href)
+  const base = nested
+    ? 'block px-3 py-2 text-[13px] transition'
+    : 'block px-3 py-2.5 text-[13px] font-medium transition'
+  const classes = active
+    ? `${base} text-white`
+    : `${base} text-zinc-300 hover:text-white`
+
+  const external = item.external ? ' target="_blank" rel="noopener noreferrer"' : ''
+  return `<a href="${sitePath(item.href)}" class="${classes}"${external}>${item.label}</a>`
+}
+
+function renderCrashCourseLink() {
+  const url = manifest.module.youtube
+  if (!url) return ''
+
+  return `
+    <a
+      href="${url}"
+      class="nav-cta"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <svg class="h-4 w-4 shrink-0 text-zinc-300" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 0 12a31 31 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.1c1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 24 12a31 31 0 0 0-.5-5.8zM9.75 15.02V8.98L15.5 12l-5.75 3.02z"/>
+      </svg>
+      Crash Course
+    </a>
+  `
+}
+
+function renderNavGroup(group) {
+  const childLinks = group.children.map((c) => renderNavLink(c, true)).join('')
+  const title = group.title
+    ? `<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>
+      ${childLinks}
+    </div>
+  `
+}
+
+export function getManifest() {
+  return manifest
+}
+
+export function initNav() {
+  const navEl = document.querySelector('[data-module-nav]')
+  if (!navEl) return
+
+  const mod = manifest.module
+  const parts = []
+  for (const item of NAV_ITEMS) {
+    if (item.label === 'Week 1' && mod.youtube) {
+      parts.push(renderCrashCourseLink())
+    }
+    parts.push(item.children ? renderNavGroup(item) : renderNavLink(item))
+  }
+  const links = parts.join('')
+
+  navEl.innerHTML = `
+    <div class="flex min-h-0 flex-1 flex-col">
+      <div class="shrink-0 border-b border-zinc-800 px-5 py-5">
+        <a href="${sitePath('/index.html')}" class="flex flex-col items-center text-center">
+          <img src="${sitePath('/logo.svg')}" alt="${mod.logoAlt}" class="sidebar-logo" width="155" height="91" />
+          <p class="mt-2.5 text-[11px] uppercase tracking-[0.15em] text-zinc-400">${mod.name} — ${mod.subtitle}</p>
+        </a>
+      </div>
+      <div class="sidebar-scroll space-y-1">${links}</div>
+    </div>
+  `
+}
+
+export function initMobileNav() {
+  const toggle = document.querySelector('[data-nav-toggle]')
+  const sidebar = document.querySelector('[data-sidebar]')
+  const overlay = document.querySelector('[data-nav-overlay]')
+
+  if (!toggle || !sidebar) return
+
+  const isMobile = () => !window.matchMedia('(min-width: 768px)').matches
+
+  const close = () => {
+    if (!isMobile()) return
+    sidebar.classList.add('-translate-x-full')
+    overlay?.classList.add('hidden')
+    document.body.classList.remove('overflow-hidden')
+  }
+
+  const open = () => {
+    sidebar.classList.remove('-translate-x-full')
+    overlay?.classList.remove('hidden')
+    document.body.classList.add('overflow-hidden')
+  }
+
+  toggle.addEventListener('click', () => {
+    if (sidebar.classList.contains('-translate-x-full')) open()
+    else close()
+  })
+
+  overlay?.addEventListener('click', close)
+  sidebar.querySelectorAll('a').forEach((a) => a.addEventListener('click', close))
+}
+
+export function renderBreadcrumbs(crumbs) {
+  const el = document.querySelector('[data-breadcrumbs]')
+  if (!el || !crumbs?.length) return
+
+  el.innerHTML = crumbs
+    .map((c, i) => {
+      const isLast = i === crumbs.length - 1
+      const content = c.href && !isLast
+        ? `<a href="${sitePath(c.href)}" class="text-zinc-500 transition hover:text-zinc-900">${c.label}</a>`
+        : `<span class="text-zinc-900">${c.label}</span>`
+      const sep = i < crumbs.length - 1 ? '<span class="text-zinc-300">/</span>' : ''
+      return `${content}${sep}`
+    })
+    .join(' ')
+}
+
+export function initPage({ breadcrumbs } = {}) {
+  mountLayout()
+  initNav()
+  initMobileNav()
+  renderBreadcrumbs(breadcrumbs)
+}

package/src/js/quiz.js

@@ -0,0 +1,111 @@
+import { getQuizScore, setQuizScore, removeQuizScore } from './storage.js'
+
+function renderPreview(preview) {
+  if (!preview) return ''
+  return `
+    <div class="my-4 overflow-hidden border border-zinc-100 bg-zinc-50 p-4">
+      <style>${preview.css}</style>
+      ${preview.html}
+    </div>
+  `
+}
+
+export function initQuiz(quizData, containerSelector = '[data-quiz]') {
+  const container = document.querySelector(containerSelector)
+  if (!container) return
+
+  const previous = getQuizScore(quizData.title)
+  if (previous) {
+    showResults(container, quizData, previous, true)
+    return
+  }
+
+  container.innerHTML = `
+    <form data-quiz-form class="space-y-6">
+      ${quizData.questions
+      .map(
+        (q, qi) => `
+        <fieldset class="card" data-question="${q.id}">
+          <legend class="mb-4 text-base font-medium text-zinc-900">
+            <span class="mr-3 font-mono text-sm text-zinc-400">${String(qi + 1).padStart(2, '0')}</span>
+            ${q.question}
+          </legend>
+          ${renderPreview(q.preview)}
+          <div class="space-y-2">
+            ${q.options
+            .map(
+              (opt, oi) => `
+              <label class="flex cursor-pointer items-center gap-3 border border-zinc-200 p-3 transition hover:bg-zinc-50 has-checked:border-zinc-900 has-checked:bg-zinc-50">
+                <input type="radio" name="${q.id}" value="${oi}" class="h-4 w-4 border-zinc-300 text-zinc-900 focus:ring-zinc-900" required />
+                <span class="text-sm text-zinc-700">${opt}</span>
+              </label>
+            `
+            )
+            .join('')}
+          </div>
+          <p data-explanation="${q.id}" class="mt-3 hidden text-sm"></p>
+        </fieldset>
+      `
+      )
+      .join('')}
+      <button type="submit" class="btn-primary">Indienen</button>
+    </form>
+  `
+
+  container.querySelector('[data-quiz-form]').addEventListener('submit', (e) => {
+    e.preventDefault()
+    const form = e.target
+    const answers = {}
+
+    quizData.questions.forEach((q) => {
+      const selected = form.querySelector(`input[name="${q.id}"]:checked`)
+      answers[q.id] = selected ? parseInt(selected.value, 10) : -1
+    })
+
+    const correct = quizData.questions.filter((q) => answers[q.id] === q.correct).length
+    const total = quizData.questions.length
+    const percent = Math.round((correct / total) * 100)
+    const passed = percent >= quizData.passScore
+
+    const result = { correct, total, percent, passed, answers, date: new Date().toISOString() }
+    setQuizScore(quizData.title, result)
+
+    quizData.questions.forEach((q) => {
+      const isCorrect = answers[q.id] === q.correct
+      const el = container.querySelector(`[data-explanation="${q.id}"]`)
+      el.classList.remove('hidden')
+      el.classList.add(isCorrect ? 'text-zinc-700' : 'text-zinc-500')
+      el.textContent = isCorrect ? `✓ Correct. ${q.explanation}` : `✗ Fout. ${q.explanation}`
+    })
+
+    showResults(container, quizData, result, false, form)
+  })
+}
+
+function showResults(container, quizData, result, fromStorage, form = null) {
+  const passed = result.passed
+  const resultHtml = `
+    <div class="card mb-6 ${passed ? 'bg-zinc-50' : ''}">
+      <h2 class="text-xl font-medium text-zinc-900">
+        ${passed ? 'Geslaagd' : 'Nog niet geslaagd'}
+      </h2>
+      <p class="mt-2 text-zinc-600">
+        Score: ${result.correct} / ${result.total} (${result.percent}%)
+        — minimaal ${quizData.passScore}% nodig
+      </p>
+      ${fromStorage ? '<p class="mt-2 text-sm text-zinc-500">Eerder resultaat (opgeslagen in browser). <button type="button" data-reset-quiz class="text-link">Opnieuw maken</button></p>' : ''}
+    </div>
+  `
+
+  if (fromStorage) {
+    container.innerHTML = resultHtml
+    container.querySelector('[data-reset-quiz]')?.addEventListener('click', () => {
+      removeQuizScore(quizData.title)
+      location.reload()
+    })
+    return
+  }
+
+  form.querySelector('button[type="submit"]').disabled = true
+  form.insertAdjacentHTML('beforebegin', resultHtml)
+}

package/src/js/site-path.js

@@ -0,0 +1,18 @@
+/**
+ * Resolve root-absolute paths (/pages/…) to URLs that work in dev, preview, and static dist.
+ */
+export function sitePath(href) {
+  if (!href || href.startsWith('http://') || href.startsWith('https://') || href.startsWith('#')) {
+    return href
+  }
+
+  const path = href.startsWith('/') ? href.slice(1) : href
+  const loc = decodeURIComponent(window.location.pathname).replace(/\\/g, '/')
+  const inPages = /\/pages\/[^/]+\.html$/i.test(loc)
+
+  if (!inPages) return path
+
+  if (path === 'index.html') return '../index.html'
+  if (path.startsWith('pages/')) return path.slice('pages/'.length)
+  return `../${path}`
+}

package/src/js/storage.js

@@ -0,0 +1,51 @@
+const PREFIX = 'grid-module:'
+
+export function getItem(key, fallback = null) {
+  try {
+    const raw = localStorage.getItem(PREFIX + key)
+    return raw ? JSON.parse(raw) : fallback
+  } catch {
+    return fallback
+  }
+}
+
+export function setItem(key, value) {
+  localStorage.setItem(PREFIX + key, JSON.stringify(value))
+}
+
+export function getChecklistState() {
+  return getItem('checklist', {})
+}
+
+export function setChecklistItem(id, checked) {
+  const state = getChecklistState()
+  state[id] = checked
+  setItem('checklist', state)
+}
+
+export function getQuizScore(quizId) {
+  return getItem(`quiz:${quizId}`, null)
+}
+
+export function setQuizScore(quizId, score) {
+  setItem(`quiz:${quizId}`, score)
+}
+
+export function removeQuizScore(quizId) {
+  localStorage.removeItem(PREFIX + `quiz:${quizId}`)
+}
+
+export function getChecklistProgress(checklistData) {
+  const state = getChecklistState()
+  let total = 0
+  let checked = 0
+
+  for (const group of checklistData.groups) {
+    for (const item of group.items) {
+      total++
+      if (state[item.id]) checked++
+    }
+  }
+
+  return { total, checked, percent: total ? Math.round((checked / total) * 100) : 0 }
+}

package/src/js/theory.js

@@ -0,0 +1,41 @@
+import './components.js'
+
+function esc(s) {
+  return String(s)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}
+
+export async function initTheory(week) {
+  const container = document.querySelector(`[data-theory][data-week="${week}"]`)
+  if (!container) return
+
+  let data
+  try {
+    data = await import(`../data/theory-week${week}.json`).then((m) => m.default)
+  } 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
+  }
+
+  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
+  }
+
+  container.innerHTML = `
+    <span class="week-label">Week ${data.week}</span>
+    <h1 class="text-3xl font-semibold tracking-tight text-zinc-900">${esc(data.title)}</h1>
+    <p class="mt-2 text-lg text-zinc-600">Leerdoel: ${data.goal}</p>
+    <div class="prose-theory mt-8">
+      ${data.html}
+    </div>
+  `
+}

package/src/js/thuiswerk.js

@@ -0,0 +1,161 @@
+import { getItem, setItem } from './storage.js'
+
+function storageKey(week) {
+  return `thuiswerk:week${week}`
+}
+
+export function initThuiswerk(data) {
+  const container = document.querySelector('[data-thuiswerk]')
+  if (!container) return
+
+  const state = getItem(storageKey(data.week), { criteria: {}, notes: '', submitted: false })
+
+  const criteriaHtml = data.criteria
+    .map((c) => {
+      const checked = !!state.criteria[c.id]
+      const optional = c.optional ? ' <span class="text-zinc-400">(bonus)</span>' : ''
+      return `
+        <label class="flex cursor-pointer items-start gap-3 border-b border-zinc-100 py-3 last:border-0">
+          <input
+            type="checkbox"
+            data-criterion-id="${c.id}"
+            class="mt-0.5 h-4 w-4 border-zinc-300 text-zinc-900 focus:ring-zinc-900"
+            ${checked ? 'checked' : ''}
+          />
+          <span class="flex-1 text-sm text-zinc-700">
+            ${c.text}${optional}
+            <span class="ml-2 font-mono text-xs text-zinc-400">${c.points}p</span>
+          </span>
+        </label>
+      `
+    })
+    .join('')
+
+  const deliverablesHtml = data.deliverables
+    .map((d) => `<li class="text-sm text-zinc-600">${d}</li>`)
+    .join('')
+
+  const tipsHtml = data.tips.map((t) => `<li class="text-sm text-zinc-600">${t}</li>`).join('')
+
+  container.innerHTML = `
+    <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 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>
+    </section>
+
+    <section class="card mb-6">
+      <div class="mb-4 flex items-end justify-between">
+        <div>
+          <p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">Beoordelingscriteria</p>
+          <p class="mt-1 text-sm text-zinc-500">Maximaal ${data.maxPoints} punten — gebruik als checklist vóór je inlevert</p>
+        </div>
+        <span data-criteria-score class="font-mono text-sm text-zinc-900">0 / ${data.maxPoints}</span>
+      </div>
+      <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-thuiswerk-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>
+    </section>
+
+    <div class="flex flex-wrap gap-3">
+      <button type="button" data-export-thuiswerk 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>
+  `
+
+  const saveState = (updates) => {
+    const current = getItem(storageKey(data.week), { criteria: {}, notes: '', submitted: false })
+    setItem(storageKey(data.week), { ...current, ...updates })
+  }
+
+  const updateScore = () => {
+    const checked = container.querySelectorAll('[data-criterion-id]:checked')
+    let points = 0
+    checked.forEach((input) => {
+      const c = data.criteria.find((x) => x.id === input.dataset.criterionId)
+      if (c) points += c.points
+    })
+    const el = container.querySelector('[data-criteria-score]')
+    if (el) el.textContent = `${points} / ${data.maxPoints}`
+  }
+
+  container.querySelectorAll('[data-criterion-id]').forEach((input) => {
+    input.addEventListener('change', () => {
+      const criteria = {}
+      container.querySelectorAll('[data-criterion-id]').forEach((cb) => {
+        criteria[cb.dataset.criterionId] = cb.checked
+      })
+      saveState({ criteria })
+      updateScore()
+    })
+  })
+
+  const notesEl = container.querySelector('[data-thuiswerk-notes]')
+  notesEl?.addEventListener('input', () => {
+    saveState({ notes: notesEl.value })
+  })
+
+  container.querySelector('[data-export-thuiswerk]')?.addEventListener('click', async () => {
+    const criteria = getItem(storageKey(data.week), {}).criteria || {}
+    const notes = notesEl?.value || ''
+    const lines = [
+      data.subtitle,
+      data.title,
+      '='.repeat(40),
+      '',
+      `Klant: ${data.client}`,
+      '',
+      'Criteria:',
+    ]
+    for (const c of data.criteria) {
+      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-thuiswerk]')
+      btn.textContent = 'Gekopieerd!'
+      setTimeout(() => { btn.textContent = 'Exporteer checklist' }, 2000)
+    } catch { /* ignore */ }
+  })
+
+  container.querySelector('[data-mark-submitted]')?.addEventListener('click', () => {
+    const current = getItem(storageKey(data.week), { submitted: false })
+    const submitted = !current.submitted
+    saveState({ submitted })
+    const btn = container.querySelector('[data-mark-submitted]')
+    const hint = container.querySelector('[data-submitted-hint]')
+    btn.textContent = submitted ? 'Ingeleverd ✓' : 'Markeer als ingeleverd'
+    hint?.classList.toggle('hidden', !submitted)
+  })
+
+  updateScore()
+}

package/src/partials/head.html

@@ -0,0 +1,6 @@
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />