@curio-sd/e-module-builder 0.1.0

package/src/css/main.css

@@ -0,0 +1,283 @@
+@import "tailwindcss";
+@import "highlight.js/styles/github-dark.css";
+
+/* Scan generated pages and copied JS — paths are relative to src/css/ in PROJECT_DIR */
+@source "../../index.html";
+@source "../../pages/**/*.html";
+@source "../js/**/*.js";
+
+@theme {
+  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.06);
+  --shadow-editor: 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply text-zinc-800;
+  }
+}
+
+@layer components {
+  .app-shell {
+    @apply min-h-screen bg-[#f4f4f5];
+  }
+
+  .sidebar-panel {
+    @apply fixed inset-y-0 left-0 z-50 flex w-60 -translate-x-full flex-col overflow-hidden bg-zinc-950 transition-transform duration-300 ease-out md:translate-x-0;
+  }
+
+  .sidebar-panel [data-module-nav] {
+    @apply flex min-h-0 flex-1 flex-col;
+  }
+
+  .sidebar-logo {
+    @apply h-auto w-38.75 max-w-full;
+  }
+
+  .sidebar-scroll {
+    @apply min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-4;
+    scrollbar-width: thin;
+    scrollbar-color: theme('colors.zinc.700') transparent;
+  }
+
+  .sidebar-scroll::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .sidebar-scroll::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .sidebar-scroll::-webkit-scrollbar-thumb {
+    @apply rounded-full bg-zinc-700;
+  }
+
+  .sidebar-scroll::-webkit-scrollbar-thumb:hover {
+    @apply bg-zinc-600;
+  }
+
+  .topbar {
+    @apply sticky top-0 z-30 border-b border-zinc-200/80 bg-[#f4f4f5]/90 backdrop-blur-md;
+  }
+
+  .btn-primary {
+    @apply inline-flex items-center justify-center bg-zinc-900 px-5 py-2.5 text-sm font-medium text-white transition hover:bg-zinc-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-900 focus-visible:ring-offset-2;
+  }
+
+  .btn-secondary {
+    @apply inline-flex items-center justify-center border border-zinc-300 bg-white px-5 py-2.5 text-sm font-medium text-zinc-700 transition hover:border-zinc-400 hover:bg-zinc-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2;
+  }
+
+  .card {
+    @apply bg-white p-6 shadow-card;
+  }
+
+  .card-interactive {
+    @apply bg-white p-6 shadow-card transition duration-200 hover:shadow-card-hover;
+  }
+
+  .card-muted {
+    @apply bg-zinc-50 p-6;
+  }
+
+  .week-label {
+    @apply mb-3 block text-[11px] font-semibold uppercase tracking-[0.2em] text-zinc-400;
+  }
+
+  .text-link {
+    @apply text-sm font-medium text-zinc-900 underline decoration-zinc-300 underline-offset-4 transition hover:decoration-zinc-900;
+  }
+
+  .progress-track {
+    @apply h-px overflow-hidden bg-zinc-200;
+  }
+
+  .progress-fill {
+    @apply h-full bg-zinc-900 transition-all duration-500;
+  }
+
+  .code-block {
+    @apply overflow-x-auto bg-zinc-950 p-5 font-mono text-[13px] leading-relaxed text-zinc-300;
+  }
+
+  .callout {
+    @apply mt-4 bg-zinc-50 p-4 text-sm leading-relaxed text-zinc-600;
+  }
+
+  .compare-cell {
+    @apply bg-zinc-50 p-5;
+  }
+
+  .editor-panel {
+    @apply overflow-hidden bg-zinc-950 shadow-editor;
+  }
+
+  .preview-panel {
+    @apply overflow-hidden bg-white shadow-card;
+  }
+
+  .panel-header {
+    @apply border-b border-zinc-800 px-4 py-2.5 text-[11px] font-medium uppercase tracking-wider text-zinc-500;
+  }
+
+  .panel-header-light {
+    @apply border-b border-zinc-100 px-4 py-2.5 text-[11px] font-medium uppercase tracking-wider text-zinc-400;
+  }
+
+  .feedback-box {
+    @apply border border-zinc-200 bg-white p-4 text-sm;
+  }
+
+  .badge {
+    @apply inline-block text-[11px] font-medium uppercase tracking-wider text-zinc-500;
+  }
+
+  .badge-done {
+    @apply text-[11px] font-medium uppercase tracking-wider text-zinc-600;
+  }
+
+  .monaco-container {
+    @apply h-80 min-h-80 w-full overflow-hidden;
+  }
+
+  .nav-overlay {
+    @apply fixed inset-0 z-40 hidden bg-black/40 backdrop-blur-sm md:hidden;
+  }
+
+  .nav-cta {
+    @apply mx-3 mb-2 mt-1 flex items-center gap-2 border border-zinc-600 bg-zinc-900 px-3 py-2.5 text-[13px] font-medium text-zinc-100 transition hover:border-zinc-500 hover:bg-zinc-800 hover:text-white;
+  }
+
+  /* ── Theory prose typography ─────────────────────────────────────────────── */
+
+  .prose-theory {
+    @apply space-y-6 text-zinc-700;
+  }
+
+  .prose-theory h2 {
+    @apply mt-8 text-xl font-semibold text-zinc-900 first:mt-0;
+  }
+
+  .prose-theory h3 {
+    @apply mt-4 text-base font-semibold text-zinc-900;
+  }
+
+  .prose-theory p {
+    @apply leading-relaxed;
+  }
+
+  .prose-theory ul {
+    @apply list-inside list-disc space-y-1.5 pl-1;
+  }
+
+  .prose-theory ol {
+    @apply list-inside list-decimal space-y-1.5 pl-1;
+  }
+
+  .prose-theory li {
+    @apply leading-relaxed;
+  }
+
+  .prose-theory a {
+    @apply font-medium text-zinc-900 underline decoration-zinc-300 underline-offset-4 transition hover:decoration-zinc-900;
+  }
+
+  .prose-theory code {
+    @apply rounded bg-zinc-100 px-1.5 py-0.5 font-mono text-sm text-zinc-800;
+  }
+
+  .prose-theory pre {
+    @apply overflow-x-auto bg-zinc-950 p-5 font-mono text-[13px] leading-relaxed text-zinc-300;
+  }
+
+  .prose-theory pre code {
+    @apply bg-transparent p-0 text-inherit;
+  }
+
+  .prose-theory blockquote {
+    @apply border-l-4 border-zinc-300 pl-4 italic text-zinc-500;
+  }
+
+  .prose-theory table {
+    @apply w-full text-left text-sm;
+  }
+
+  .prose-theory thead tr {
+    @apply border-b border-zinc-200 text-zinc-500;
+  }
+
+  .prose-theory tbody tr {
+    @apply border-b border-zinc-100 last:border-0;
+  }
+
+  .prose-theory th,
+  .prose-theory td {
+    @apply py-2 pr-4;
+  }
+
+  /* ── Custom components ───────────────────────────────────────────────────── */
+
+  x-card {
+    @apply block bg-white p-6 shadow-card;
+  }
+
+  x-card>h2 {
+    @apply text-lg font-medium text-zinc-900;
+  }
+
+  x-callout {
+    @apply block bg-zinc-50 p-4 text-sm leading-relaxed text-zinc-600;
+  }
+
+  x-callout[type="tip"] {
+    @apply border-l-4 border-l-emerald-500 bg-emerald-50 text-emerald-800;
+  }
+
+  x-callout[type="warning"] {
+    @apply border-l-4 border-l-amber-500 bg-amber-50 text-amber-800;
+  }
+
+  x-compare {
+    @apply grid gap-4 sm:grid-cols-2;
+  }
+
+  x-compare-item {
+    @apply block bg-zinc-50 p-5;
+  }
+
+  x-compare-item>h3 {
+    @apply font-medium text-zinc-900;
+  }
+
+  x-nav {
+    @apply mt-10 flex flex-col gap-4 bg-white p-6 shadow-card sm:flex-row sm:items-center sm:justify-end;
+  }
+
+  x-nav[label] {
+    @apply sm:justify-between;
+  }
+
+  x-nav>.x-nav-label {
+    @apply font-medium text-zinc-900;
+  }
+
+  x-nav>p {
+    @apply flex shrink-0 flex-wrap gap-3;
+  }
+
+  x-nav a {
+    @apply inline-flex shrink-0 items-center justify-center border border-zinc-300 bg-white px-5 py-2.5 text-sm font-medium text-zinc-700 transition hover:border-zinc-400 hover:bg-zinc-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 !no-underline;
+  }
+
+  x-nav>p>a:last-child {
+    @apply border-transparent bg-zinc-900 text-white hover:border-transparent hover:bg-zinc-800 focus-visible:ring-zinc-900;
+  }
+}

package/src/js/checklist.js

@@ -0,0 +1,99 @@
+import checklistData from '../data/checklist.json'
+import { getChecklistState, setChecklistItem } from './storage.js'
+
+export function initChecklist() {
+  const container = document.querySelector('[data-checklist]')
+  if (!container) return
+
+  const state = getChecklistState()
+
+  container.innerHTML = checklistData.groups
+    .map((group) => {
+      const items = group.items
+        .map((item) => {
+          const checked = !!state[item.id]
+          return `
+            <label class="flex cursor-pointer items-start gap-3 border-b border-zinc-100 py-3 transition last:border-0 hover:bg-zinc-50/50">
+              <input
+                type="checkbox"
+                data-check-id="${item.id}"
+                class="mt-0.5 h-4 w-4 border-zinc-300 text-zinc-900 focus:ring-zinc-900"
+                ${checked ? 'checked' : ''}
+              />
+              <span class="text-sm leading-relaxed ${checked ? 'text-zinc-400 line-through' : 'text-zinc-700'}">${item.text}</span>
+            </label>
+          `
+        })
+        .join('')
+
+      return `
+        <section class="card">
+          <h2 class="mb-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">${group.title}</h2>
+          <div class="mt-4">${items}</div>
+        </section>
+      `
+    })
+    .join('')
+
+  container.querySelectorAll('input[type="checkbox"]').forEach((input) => {
+    input.addEventListener('change', () => {
+      setChecklistItem(input.dataset.checkId, input.checked)
+      const label = input.closest('label').querySelector('span')
+      if (input.checked) {
+        label.classList.add('text-zinc-400', 'line-through')
+        label.classList.remove('text-zinc-700')
+      } else {
+        label.classList.remove('text-zinc-400', 'line-through')
+        label.classList.add('text-zinc-700')
+      }
+      updateProgress()
+    })
+  })
+
+  updateProgress()
+}
+
+function updateProgress() {
+  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++
+    }
+  }
+  const percent = total ? Math.round((checked / total) * 100) : 0
+  const bar = document.querySelector('[data-checklist-progress]')
+  const label = document.querySelector('[data-checklist-progress-label]')
+  if (bar) bar.style.width = `${percent}%`
+  if (label) label.textContent = `${checked} / ${total}`
+}
+
+export function initChecklistExport() {
+  const btn = document.querySelector('[data-export-checklist]')
+  if (!btn) return
+
+  btn.addEventListener('click', async () => {
+    const state = getChecklistState()
+    const lines = ['CSS Grid — Skills Checklist', '========================', '']
+
+    for (const group of checklistData.groups) {
+      lines.push(group.title)
+      for (const item of group.items) {
+        const mark = state[item.id] ? '[x]' : '[ ]'
+        lines.push(`  ${mark} ${item.text.replace(/`/g, '')}`)
+      }
+      lines.push('')
+    }
+
+    const text = lines.join('\n')
+    try {
+      await navigator.clipboard.writeText(text)
+      btn.textContent = 'Gekopieerd'
+      setTimeout(() => { btn.textContent = 'Exporteer naar klembord' }, 2000)
+    } catch {
+      btn.textContent = 'Kopiëren mislukt'
+    }
+  })
+}

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

@@ -0,0 +1,184 @@
+import { createCssEditor, setEditorValue, getEditorValue } from '../monaco-setup.js'
+import { runChecks, validateAreas } from './validators.js'
+import { renderExerciseMeta, markExerciseSolved, getSolvedExercises } from './exercise-shared.js'
+
+export { renderExerciseMeta, markExerciseSolved, getSolvedExercises }
+
+function buildPreviewDoc(previewHtml, css) {
+  if (previewHtml.includes('</style>')) {
+    return previewHtml.replace('</style>', `\n${css}\n</style>`)
+  }
+  return `<!DOCTYPE html><html><head><style>${css}</style></head><body>${previewHtml}</body></html>`
+}
+
+function showFeedback(el, html, type = 'info') {
+  if (!el) return
+  el.classList.remove('hidden')
+  el.innerHTML = html
+}
+
+export function initCssPlayground(exercise, { onSolved } = {}) {
+  const container = document.querySelector('[data-editor]')
+  const iframe = document.querySelector('[data-preview]')
+  const feedback = document.querySelector('[data-feedback]')
+  if (!container || !iframe) return
+
+  const editor = createCssEditor(container, exercise.starterCss, (css) => {
+    iframe.srcdoc = buildPreviewDoc(exercise.previewHtml, css)
+  })
+
+  iframe.srcdoc = buildPreviewDoc(exercise.previewHtml, exercise.starterCss)
+
+  document.querySelector('[data-hint]')?.addEventListener('click', () => {
+    showFeedback(feedback, `<p class="text-zinc-600">${exercise.hint.replace(/\n/g, '<br>')}</p>`)
+  })
+
+  document.querySelector('[data-solution]')?.addEventListener('click', () => {
+    setEditorValue(editor, exercise.solution)
+    iframe.srcdoc = buildPreviewDoc(exercise.previewHtml, exercise.solution)
+    showFeedback(feedback, '<p class="text-zinc-600">Oplossing geladen. Bestudeer de code en probeer het daarna zelf.</p>')
+  })
+
+  document.querySelector('[data-check]')?.addEventListener('click', () => {
+    const css = getEditorValue(editor)
+    const results = runChecks(css, exercise.checks)
+    const failed = results.filter((r) => !r.ok)
+
+    if (failed.length === 0) {
+      showFeedback(feedback, '<p class="font-medium text-zinc-900">Goed gedaan — oefening voltooid.</p>')
+      onSolved?.(exercise.id)
+    } else {
+      showFeedback(
+        feedback,
+        `<p class="font-medium text-zinc-900">Nog niet compleet:</p><ul class="mt-2 list-inside list-disc text-sm text-zinc-500">${failed.map((f) => `<li>${f.msg}</li>`).join('')}</ul>`
+      )
+    }
+  })
+
+  return editor
+}
+
+export function initAreasExercise(exercise, { onSolved } = {}) {
+  const containerInput = document.querySelector('[data-areas-container]')
+  const preview = document.querySelector('[data-areas-preview]')
+  const feedback = document.querySelector('[data-feedback]')
+  const selects = document.querySelectorAll('[data-area-item]')
+
+  if (!containerInput || !preview) return
+
+  const updatePreview = () => {
+    const areas = containerInput.value.trim()
+    const itemStyles = Array.from(selects)
+      .map((s) => `.${s.dataset.areaItem} { grid-area: ${s.value}; }`)
+      .join('\n')
+
+    preview.innerHTML = `
+      <style>
+        .news-grid {
+          display: grid;
+          grid-template-columns: ${exercise.gridColumns || '1fr 1fr 1fr'};
+          grid-template-areas: ${areas || '"a b c"'};
+          gap: 6px;
+          min-height: 180px;
+        }
+        ${exercise.previewStyles || ''}
+        ${itemStyles}
+      </style>
+      ${exercise.previewHtml}
+    `
+  }
+
+  containerInput.addEventListener('input', updatePreview)
+  selects.forEach((s) => s.addEventListener('change', updatePreview))
+  updatePreview()
+
+  document.querySelector('[data-hint]')?.addEventListener('click', () => {
+    showFeedback(feedback, `<p class="text-zinc-600">${exercise.hint}</p>`)
+  })
+
+  document.querySelector('[data-check]')?.addEventListener('click', () => {
+    const errors = validateAreas(containerInput.value, selects, exercise.expected)
+    if (errors.length === 0) {
+      showFeedback(feedback, '<p class="font-medium text-zinc-900">Perfect — oefening voltooid.</p>')
+      onSolved?.(exercise.id)
+    } else {
+      showFeedback(
+        feedback,
+        `<p class="font-medium text-zinc-900">Nog niet goed:</p><ul class="mt-2 list-inside list-disc text-sm text-zinc-500">${errors.map((e) => `<li>${e}</li>`).join('')}</ul>`
+      )
+    }
+  })
+}
+
+export function initResponsiveExercise(exercise, { onSolved } = {}) {
+  const container = document.querySelector('[data-editor]')
+  const iframe = document.querySelector('[data-preview]')
+  const feedback = document.querySelector('[data-feedback]')
+  const viewportLabel = document.querySelector('[data-viewport-label]')
+  if (!container || !iframe) return
+
+  let currentViewport = 'desktop'
+  const viewports = exercise.viewports || { desktop: 960, tablet: 700, mobile: 360 }
+
+  const editor = createCssEditor(container, exercise.starterCss, (css) => {
+    iframe.srcdoc = buildPreviewDoc(exercise.previewHtml, css)
+  })
+
+  const applyViewport = () => {
+    iframe.style.width = `${viewports[currentViewport]}px`
+    iframe.style.maxWidth = '100%'
+    if (viewportLabel) viewportLabel.textContent = `${currentViewport} (${viewports[currentViewport]}px)`
+    iframe.srcdoc = buildPreviewDoc(exercise.previewHtml, getEditorValue(editor))
+  }
+
+  document.querySelectorAll('[data-viewport]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      currentViewport = btn.dataset.viewport
+      document.querySelectorAll('[data-viewport]').forEach((b) => {
+        b.classList.toggle('btn-primary', b.dataset.viewport === currentViewport)
+        b.classList.toggle('btn-secondary', b.dataset.viewport !== currentViewport)
+      })
+      applyViewport()
+    })
+  })
+
+  document.querySelector('[data-solution]')?.addEventListener('click', () => {
+    setEditorValue(editor, exercise.solution)
+    applyViewport()
+    showFeedback(feedback, '<p class="text-zinc-600">Oplossing geladen.</p>')
+  })
+
+  document.querySelector('[data-check]')?.addEventListener('click', () => {
+    const css = getEditorValue(editor)
+    const results = runChecks(css, exercise.checks)
+    const failed = results.filter((r) => !r.ok)
+
+    if (failed.length === 0) {
+      showFeedback(feedback, '<p class="font-medium text-zinc-900">Uitstekend — oefening voltooid.</p>')
+      onSolved?.(exercise.id)
+    } else {
+      showFeedback(
+        feedback,
+        `<p class="font-medium text-zinc-900">Nog niet compleet:</p><ul class="mt-2 list-inside list-disc text-sm text-zinc-500">${failed.map((f) => `<li>${f.msg}</li>`).join('')}</ul>`
+      )
+    }
+  })
+
+  applyViewport()
+}
+
+export function renderAreaSelects(items, options) {
+  return items
+    .map(
+      (id) => `
+    <div class="flex items-center justify-between border-b border-zinc-100 py-3 last:border-0">
+      <span class="font-medium text-zinc-700">Item ${id.toUpperCase()}</span>
+      <select data-area-item="${id}" class="border border-zinc-200 bg-white px-3 py-1.5 text-sm text-zinc-700 focus:border-zinc-900 focus:outline-none">
+        ${options.map((o) => `<option value="${o}" ${o === id ? 'selected' : ''}>${o}</option>`).join('')}
+      </select>
+    </div>
+  `
+    )
+    .join('')
+}
+

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

@@ -0,0 +1,37 @@
+const DIFFICULTY = ['', 'Beginner', 'Beginner', 'Gemiddeld', 'Gemiddeld', 'Gevorderd', 'Gevorderd', 'Expert', 'Expert']
+
+export function renderExerciseMeta(exercise) {
+  const diffEl = document.querySelector('[data-difficulty]')
+  const titleEl = document.querySelector('[data-exercise-title]')
+  const descEl = document.querySelector('[data-exercise-desc]')
+
+  if (diffEl) {
+    const level = exercise.difficulty || 1
+    const label = DIFFICULTY[level] || 'Beginner'
+    diffEl.className = 'badge'
+    diffEl.textContent = `Oefening ${String(exercise.id).padStart(2, '0')} · ${label}`
+  }
+  if (titleEl) titleEl.textContent = exercise.title
+  if (descEl) descEl.textContent = exercise.description
+}
+
+export function markExerciseSolved(week, id) {
+  const key = `grid-module:exercises:week${week}`
+  try {
+    const raw = localStorage.getItem(key)
+    const solved = raw ? JSON.parse(raw) : []
+    if (!solved.includes(id)) {
+      solved.push(id)
+      localStorage.setItem(key, JSON.stringify(solved))
+    }
+  } catch { /* ignore */ }
+}
+
+export function getSolvedExercises(week) {
+  try {
+    const raw = localStorage.getItem(`grid-module:exercises:week${week}`)
+    return raw ? JSON.parse(raw) : []
+  } catch {
+    return []
+  }
+}

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

@@ -0,0 +1,71 @@
+import { renderExerciseMeta, markExerciseSolved } from './exercise-shared.js'
+
+function showFeedback(el, html) {
+  if (!el) return
+  el.classList.remove('hidden')
+  el.innerHTML = html
+}
+
+function renderSteps(steps) {
+  if (!steps?.length) return ''
+  return `<ol class="mt-4 list-decimal space-y-2 pl-5 text-sm text-zinc-600">${steps
+    .map((step) => `<li>${step}</li>`)
+    .join('')}</ol>`
+}
+
+function renderList(items, label) {
+  if (!items?.length) return ''
+  return `
+    <div class="mt-6">
+      <p class="text-sm font-medium text-zinc-900">${label}</p>
+      <ul class="mt-2 list-disc space-y-1 pl-5 text-sm text-zinc-600">${items
+        .map((item) => `<li>${item}</li>`)
+        .join('')}</ul>
+    </div>`
+}
+
+export function initExternalExercise(exercise, weekNum, { onSolved } = {}) {
+  renderExerciseMeta(exercise)
+
+  document.querySelector('[data-exercise-interactive]')?.classList.add('hidden')
+  document.querySelector('[data-exercise-external]')?.classList.remove('hidden')
+  document.querySelector('[data-solution-label]')?.replaceChildren(document.createTextNode('Toon voorbeeld'))
+  document.querySelector('[data-check-label]')?.replaceChildren(document.createTextNode('Markeer als voltooid'))
+
+  const taskEl = document.querySelector('[data-external-task]')
+  const stepsEl = document.querySelector('[data-external-steps]')
+  const envEl = document.querySelector('[data-external-environment]')
+  const deliverablesEl = document.querySelector('[data-external-deliverables]')
+  const feedback = document.querySelector('[data-feedback]')
+
+  if (taskEl) taskEl.innerHTML = exercise.task || exercise.description || ''
+  if (stepsEl) stepsEl.innerHTML = renderSteps(exercise.steps)
+  if (envEl) envEl.textContent = exercise.environment || 'Je eigen omgeving (editor, server of tool)'
+  if (deliverablesEl) {
+    deliverablesEl.innerHTML = renderList(exercise.deliverables, 'Inleveren / tonen')
+  }
+
+  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>`
+    )
+  })
+
+  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>`
+    )
+  })
+
+  document.querySelector('[data-check]')?.addEventListener('click', () => {
+    showFeedback(
+      feedback,
+      '<p class="font-medium text-zinc-900">Opdracht afgerond in je eigen omgeving?</p><p class="mt-2 text-sm text-zinc-500">Markeer als voltooid als je klaar bent. De docent beoordeelt buiten deze site.</p>'
+    )
+    onSolved?.(exercise.id)
+    markExerciseSolved(weekNum, exercise.id)
+  })
+}