@curio-sd/e-module-builder 0.3.1 → 0.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +57 -15
- package/bin/cli.js +2 -0
- package/build-pdf.mjs +452 -0
- package/build.mjs +168 -75
- package/package.json +3 -1
- package/src/css/main.css +124 -50
- package/src/js/checklist.js +1 -1
- package/src/js/exercises/exercise-runner.js +4 -1
- package/src/js/exercises/exercise-shared.js +1 -1
- package/src/js/exercises/external-exercise.js +3 -4
- package/src/js/exercises/hub.js +5 -1
- package/src/js/exercises/load-exercise.js +5 -142
- package/src/js/exercises/theory-panel.js +95 -0
- package/src/js/home.js +1 -1
- package/src/js/nav.js +63 -8
- package/src/js/theory.js +0 -2
- package/templates/index.html +17 -9
- package/templates/pages/inleveropdracht.html +32 -0
- package/templates/pages/meetmoment-praktijk.html +35 -0
- package/templates/pages/meetmoment-theorie.html +29 -0
- package/templates/pages/{toets.html → meetmoment.html} +11 -4
- package/templates/pages/oefening.html +29 -0
- package/templates/pages/oefeningen.html +46 -38
- package/templates/pages/theorie.html +6 -1
- package/vite.config.js +3 -1
- package/templates/pages/toets-praktijk.html +0 -25
- package/templates/pages/toets-theorie.html +0 -25
|
@@ -19,14 +19,46 @@
|
|
|
19
19
|
</div>
|
|
20
20
|
</main>
|
|
21
21
|
</div>
|
|
22
|
+
|
|
23
|
+
<div data-theory-panel class="theory-panel panel-hidden">
|
|
24
|
+
<div class="theory-panel-header">
|
|
25
|
+
<div data-theory-tabs class="theory-panel-tabs"></div>
|
|
26
|
+
<button data-theory-panel-close
|
|
27
|
+
type="button"
|
|
28
|
+
class="theory-panel-close"
|
|
29
|
+
aria-label="Sluit theorievenster">
|
|
30
|
+
<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>
|
|
31
|
+
</button>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="theory-panel-body">
|
|
34
|
+
<div data-theory-loader class="theory-panel-loader">
|
|
35
|
+
<div class="theory-panel-spinner"></div>
|
|
36
|
+
</div>
|
|
37
|
+
<iframe data-theory-iframe
|
|
38
|
+
class="theory-panel-iframe"
|
|
39
|
+
title="Theorie"></iframe>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
|
|
43
|
+
<button data-theory-toggle
|
|
44
|
+
type="button"
|
|
45
|
+
class="theory-panel-toggle hidden"
|
|
46
|
+
aria-label="Toon theorie"
|
|
47
|
+
aria-expanded="false">
|
|
48
|
+
<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>
|
|
49
|
+
Theorie
|
|
50
|
+
</button>
|
|
51
|
+
|
|
22
52
|
<script type="module">
|
|
23
53
|
import { initPage } from '/src/js/nav.js'
|
|
24
54
|
import { initInleveropdracht } from '/src/js/inleveropdracht.js'
|
|
55
|
+
import { initTheoryPanel } from '/src/js/exercises/theory-panel.js'
|
|
25
56
|
import inleveropdrachtData from '/src/data/inleveropdracht-week{{week}}.json'
|
|
26
57
|
initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: 'Week {{week}}', href: '/pages/week{{week}}-theorie.html' }, { label: 'Inleveropdracht' }] })
|
|
27
58
|
const titleEl = document.querySelector('[data-inleveropdracht-title]')
|
|
28
59
|
if (titleEl) titleEl.textContent = inleveropdrachtData.title
|
|
29
60
|
initInleveropdracht(inleveropdrachtData)
|
|
61
|
+
initTheoryPanel(inleveropdrachtData.linked_theory)
|
|
30
62
|
</script>
|
|
31
63
|
</body>
|
|
32
64
|
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="nl">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<!-- include:head -->
|
|
6
|
+
<title>{{pageTitle}}</title>
|
|
7
|
+
</head>
|
|
8
|
+
|
|
9
|
+
<body class="font-sans antialiased">
|
|
10
|
+
<div data-page-content>
|
|
11
|
+
<main class="px-4 py-10 md:px-10">
|
|
12
|
+
<div class="mx-auto max-w-3xl">
|
|
13
|
+
<h1 class="text-3xl font-semibold tracking-tight text-zinc-900"
|
|
14
|
+
data-praktijk-title></h1>
|
|
15
|
+
<p class="mt-2 text-zinc-600"
|
|
16
|
+
data-praktijk-description></p>
|
|
17
|
+
<div data-praktijk-content
|
|
18
|
+
class="prose mt-8"></div>
|
|
19
|
+
</div>
|
|
20
|
+
</main>
|
|
21
|
+
</div>
|
|
22
|
+
<script type="module">
|
|
23
|
+
import { initPage } from '/src/js/nav.js'
|
|
24
|
+
import data from '/src/data/meetmoment-praktijk.json'
|
|
25
|
+
initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: data.navLabel ?? '{{assessmentTitle}}' }] })
|
|
26
|
+
const titleEl = document.querySelector('[data-praktijk-title]')
|
|
27
|
+
if (titleEl) titleEl.textContent = data.title
|
|
28
|
+
const descEl = document.querySelector('[data-praktijk-description]')
|
|
29
|
+
if (descEl) descEl.innerHTML = data.description
|
|
30
|
+
const contentEl = document.querySelector('[data-praktijk-content]')
|
|
31
|
+
if (contentEl) contentEl.innerHTML = data.html
|
|
32
|
+
</script>
|
|
33
|
+
</body>
|
|
34
|
+
|
|
35
|
+
</html>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="nl">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<!-- include:head -->
|
|
6
|
+
<title>{{pageTitle}}</title>
|
|
7
|
+
</head>
|
|
8
|
+
|
|
9
|
+
<body class="font-sans antialiased">
|
|
10
|
+
<div data-page-content>
|
|
11
|
+
<main class="px-4 py-10 md:px-10">
|
|
12
|
+
<div class="mx-auto max-w-3xl">
|
|
13
|
+
<h1 class="text-3xl font-semibold tracking-tight text-zinc-900">{{assessmentTitle}}</h1>
|
|
14
|
+
<p class="mt-2 text-zinc-600">{{assessmentDescription}}</p>
|
|
15
|
+
<div data-quiz
|
|
16
|
+
class="mt-8"></div>
|
|
17
|
+
</div>
|
|
18
|
+
</main>
|
|
19
|
+
</div>
|
|
20
|
+
<script type="module">
|
|
21
|
+
import { initPage } from '/src/js/nav.js'
|
|
22
|
+
import { initQuiz } from '/src/js/quiz.js'
|
|
23
|
+
import quizData from '/src/data/meetmoment-theorie.json'
|
|
24
|
+
initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: '{{assessmentTitle}}' }] })
|
|
25
|
+
initQuiz(quizData)
|
|
26
|
+
</script>
|
|
27
|
+
</body>
|
|
28
|
+
|
|
29
|
+
</html>
|
|
@@ -10,14 +10,14 @@
|
|
|
10
10
|
<div data-page-content>
|
|
11
11
|
<main class="px-4 py-10 md:px-10">
|
|
12
12
|
<div class="mx-auto max-w-3xl">
|
|
13
|
-
<span class="week-label">Week {{weekPadded}} —
|
|
13
|
+
<span class="week-label">Week {{weekPadded}} — Meetmoment Quiz</span>
|
|
14
14
|
<h1 class="text-3xl font-semibold tracking-tight text-zinc-900">{{weekTitle}}</h1>
|
|
15
15
|
<p class="mt-2 text-zinc-600">Test je kennis van week {{week}}. Minimaal 70% om te slagen.</p>
|
|
16
16
|
<div data-quiz
|
|
17
17
|
class="mt-8"></div>
|
|
18
18
|
<div class="card mt-10 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
19
19
|
<div>
|
|
20
|
-
<p class="font-medium text-zinc-900">
|
|
20
|
+
<p class="font-medium text-zinc-900">Meetmoment afgerond?</p>
|
|
21
21
|
<p class="mt-1 text-sm text-zinc-500">Werk de inleveropdracht uit.</p>
|
|
22
22
|
</div>
|
|
23
23
|
<a href="week{{week}}-inleveropdracht.html"
|
|
@@ -29,8 +29,15 @@
|
|
|
29
29
|
<script type="module">
|
|
30
30
|
import { initPage } from '/src/js/nav.js'
|
|
31
31
|
import { initQuiz } from '/src/js/quiz.js'
|
|
32
|
-
import quizData from '/src/data/
|
|
33
|
-
|
|
32
|
+
import quizData from '/src/data/meetmoment-quiz-week{{week}}.json'
|
|
33
|
+
|
|
34
|
+
initPage({
|
|
35
|
+
breadcrumbs: [
|
|
36
|
+
{ label: 'Home', href: '/index.html' },
|
|
37
|
+
{ label: 'Week {{week}}', href: '/pages/week{{week}}-theorie.html' },
|
|
38
|
+
{ label: 'Meetmoment Quiz' }
|
|
39
|
+
]
|
|
40
|
+
})
|
|
34
41
|
initQuiz(quizData)
|
|
35
42
|
</script>
|
|
36
43
|
</body>
|
|
@@ -143,6 +143,35 @@
|
|
|
143
143
|
</main>
|
|
144
144
|
</div>
|
|
145
145
|
|
|
146
|
+
<div data-theory-panel class="theory-panel panel-hidden">
|
|
147
|
+
<div class="theory-panel-header">
|
|
148
|
+
<div data-theory-tabs class="theory-panel-tabs"></div>
|
|
149
|
+
<button data-theory-panel-close
|
|
150
|
+
type="button"
|
|
151
|
+
class="theory-panel-close"
|
|
152
|
+
aria-label="Sluit theorievenster">
|
|
153
|
+
<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>
|
|
154
|
+
</button>
|
|
155
|
+
</div>
|
|
156
|
+
<div class="theory-panel-body">
|
|
157
|
+
<div data-theory-loader class="theory-panel-loader">
|
|
158
|
+
<div class="theory-panel-spinner"></div>
|
|
159
|
+
</div>
|
|
160
|
+
<iframe data-theory-iframe
|
|
161
|
+
class="theory-panel-iframe"
|
|
162
|
+
title="Theorie"></iframe>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<button data-theory-toggle
|
|
167
|
+
type="button"
|
|
168
|
+
class="theory-panel-toggle hidden"
|
|
169
|
+
aria-label="Toon theorie"
|
|
170
|
+
aria-expanded="false">
|
|
171
|
+
<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>
|
|
172
|
+
Theorie
|
|
173
|
+
</button>
|
|
174
|
+
|
|
146
175
|
<script type="module">
|
|
147
176
|
import { initPage } from '/src/js/nav.js'
|
|
148
177
|
import { initExercisePage } from '/src/js/exercises/load-exercise.js'
|
|
@@ -1,44 +1,52 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
2
|
<html lang="nl">
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
</
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
</div>
|
|
20
|
-
</div>
|
|
21
|
-
<div class="progress-track">
|
|
22
|
-
<div data-hub-progress-bar class="progress-fill" style="width:0%"></div>
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
25
|
-
<div data-exercise-list class="mt-8 space-y-4"></div>
|
|
26
|
-
<div class="card mt-10 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<!-- include:head -->
|
|
6
|
+
<title>{{pageTitle}}</title>
|
|
7
|
+
</head>
|
|
8
|
+
|
|
9
|
+
<body class="font-sans antialiased">
|
|
10
|
+
<div data-page-content>
|
|
11
|
+
<main class="px-4 py-10 md:px-10">
|
|
12
|
+
<div class="mx-auto max-w-3xl">
|
|
13
|
+
<span class="week-label">Week {{week}}</span>
|
|
14
|
+
<h1 class="text-3xl font-semibold tracking-tight text-zinc-900">Oefeningen</h1>
|
|
15
|
+
<p class="mt-2 text-zinc-600"
|
|
16
|
+
data-hub-subtitle>{{weekTitle}} — 8 oefeningen.</p>
|
|
17
|
+
<div class="card mt-8">
|
|
18
|
+
<div class="mb-4 flex items-end justify-between">
|
|
27
19
|
<div>
|
|
28
|
-
<p class="font-
|
|
29
|
-
<p class="mt-1 text-sm text-zinc-500">
|
|
20
|
+
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">Voortgang</p>
|
|
21
|
+
<p class="mt-1 text-sm text-zinc-500"><span data-hub-progress-text>0 / 8</span> afgerond</p>
|
|
30
22
|
</div>
|
|
31
|
-
<a href="week{{week}}-toets.html" class="btn-primary shrink-0">Naar de toets</a>
|
|
32
23
|
</div>
|
|
24
|
+
<div class="progress-track">
|
|
25
|
+
<div data-hub-progress-bar
|
|
26
|
+
class="progress-fill"
|
|
27
|
+
style="width:0%"></div>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
<div data-exercise-list
|
|
31
|
+
class="mt-8 space-y-4"></div>
|
|
32
|
+
<div class="card mt-10 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
33
|
+
<div>
|
|
34
|
+
<p class="font-medium text-zinc-900">Klaar met de oefeningen?</p>
|
|
35
|
+
<p class="mt-1 text-sm text-zinc-500">Test je kennis met de meetmoment.</p>
|
|
36
|
+
</div>
|
|
37
|
+
<a href="week{{week}}-meetmoment.html"
|
|
38
|
+
class="btn-primary shrink-0">Naar het meetmoment</a>
|
|
33
39
|
</div>
|
|
34
|
-
</
|
|
35
|
-
</
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
</
|
|
44
|
-
</
|
|
40
|
+
</div>
|
|
41
|
+
</main>
|
|
42
|
+
</div>
|
|
43
|
+
<script type="module">
|
|
44
|
+
import { initPage } from '/src/js/nav.js'
|
|
45
|
+
import { initExerciseHub } from '/src/js/exercises/hub.js'
|
|
46
|
+
import weekData from '/src/data/exercises/week{{week}}.json'
|
|
47
|
+
initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: 'Week {{week}}' }, { label: 'Oefeningen' }] })
|
|
48
|
+
initExerciseHub(weekData, {{ week }})
|
|
49
|
+
</script>
|
|
50
|
+
</body>
|
|
51
|
+
|
|
52
|
+
</html>
|
|
@@ -15,7 +15,12 @@
|
|
|
15
15
|
<script type="module">
|
|
16
16
|
import { initPage } from '/src/js/nav.js'
|
|
17
17
|
import { initTheory } from '/src/js/theory.js'
|
|
18
|
-
|
|
18
|
+
const embedded = new URLSearchParams(location.search).has('embedded')
|
|
19
|
+
if (!embedded) {
|
|
20
|
+
initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: 'Week {{week}}', href: '/pages/week{{week}}-theorie.html' }, { label: 'Theorie' }] })
|
|
21
|
+
} else {
|
|
22
|
+
document.body.setAttribute('data-embedded', '')
|
|
23
|
+
}
|
|
19
24
|
initTheory({{week}})
|
|
20
25
|
</script>
|
|
21
26
|
</body>
|
package/vite.config.js
CHANGED
|
@@ -9,7 +9,9 @@ export function createConfig({ projectDir, pkgDir }) {
|
|
|
9
9
|
return defineConfig({
|
|
10
10
|
root: projectDir,
|
|
11
11
|
base: './',
|
|
12
|
-
publicDir: path.join(
|
|
12
|
+
publicDir: existsSync(path.join(projectDir, 'public'))
|
|
13
|
+
? path.join(projectDir, 'public')
|
|
14
|
+
: path.join(pkgDir, 'public'),
|
|
13
15
|
plugins: [
|
|
14
16
|
htmlIncludes({ partialsDir: path.join(pkgDir, 'src', 'partials') }),
|
|
15
17
|
tailwindcss(),
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="nl">
|
|
3
|
-
<head>
|
|
4
|
-
<!-- include:head -->
|
|
5
|
-
<title>{{pageTitle}}</title>
|
|
6
|
-
</head>
|
|
7
|
-
<body class="font-sans antialiased">
|
|
8
|
-
<div data-page-content>
|
|
9
|
-
<main class="px-4 py-10 md:px-10">
|
|
10
|
-
<div class="mx-auto max-w-3xl">
|
|
11
|
-
<h1 class="text-3xl font-semibold tracking-tight text-zinc-900">Eindtoets praktijk</h1>
|
|
12
|
-
<p class="mt-2 text-zinc-600">Praktijkvragen over de module. Minimaal 70% om te slagen.</p>
|
|
13
|
-
<div data-quiz class="mt-8"></div>
|
|
14
|
-
</div>
|
|
15
|
-
</main>
|
|
16
|
-
</div>
|
|
17
|
-
<script type="module">
|
|
18
|
-
import { initPage } from '/src/js/nav.js'
|
|
19
|
-
import { initQuiz } from '/src/js/quiz.js'
|
|
20
|
-
import quizData from '/src/data/toets-praktijk.json'
|
|
21
|
-
initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: 'Eindtoets praktijk' }] })
|
|
22
|
-
initQuiz(quizData)
|
|
23
|
-
</script>
|
|
24
|
-
</body>
|
|
25
|
-
</html>
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="nl">
|
|
3
|
-
<head>
|
|
4
|
-
<!-- include:head -->
|
|
5
|
-
<title>{{pageTitle}}</title>
|
|
6
|
-
</head>
|
|
7
|
-
<body class="font-sans antialiased">
|
|
8
|
-
<div data-page-content>
|
|
9
|
-
<main class="px-4 py-10 md:px-10">
|
|
10
|
-
<div class="mx-auto max-w-3xl">
|
|
11
|
-
<h1 class="text-3xl font-semibold tracking-tight text-zinc-900">Eindtoets theorie</h1>
|
|
12
|
-
<p class="mt-2 text-zinc-600">Meerkeuzevragen over de module. Minimaal 70% om te slagen.</p>
|
|
13
|
-
<div data-quiz class="mt-8"></div>
|
|
14
|
-
</div>
|
|
15
|
-
</main>
|
|
16
|
-
</div>
|
|
17
|
-
<script type="module">
|
|
18
|
-
import { initPage } from '/src/js/nav.js'
|
|
19
|
-
import { initQuiz } from '/src/js/quiz.js'
|
|
20
|
-
import quizData from '/src/data/toets-theorie.json'
|
|
21
|
-
initPage({ breadcrumbs: [{ label: 'Home', href: '/index.html' }, { label: 'Eindtoets theorie' }] })
|
|
22
|
-
initQuiz(quizData)
|
|
23
|
-
</script>
|
|
24
|
-
</body>
|
|
25
|
-
</html>
|