AI-Wijzer<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bungee&family=Montserrat:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n <script src=\"https:\/\/unpkg.com\/vue@3\/dist\/vue.global.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/marked\/marked.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n\n <style>\n :root {\n interpolate-size: allow-keywords;\n }\n body { \n font-family: 'Montserrat', sans-serif; \n background-color: white;\n color: black;\n }\n .title-font { font-family: 'Bungee', cursive; }\n \n \/* Custom Slider Thumb *\/\n input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 24px; width: 24px;\n border-radius: 50%; background: white;\n cursor: pointer; border: 2px solid black;\n margin-top: -8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n input[type=range]::-webkit-slider-runnable-track {\n width: 100%; height: 8px;\n cursor: pointer; border-radius: 4px;\n }\n\n \/* Smooth Accordion Logic *\/\n details[open] summary ~ * {\n animation: sweep .3s ease-in-out;\n }\n @keyframes sweep {\n 0% {opacity: 0; transform: translateY(-10px)}\n 100% {opacity: 1; transform: translateY(0)}\n }\n \n \/* Verberg de standaard details marker *\/\n summary::-webkit-details-marker { display: none; }\n summary { list-style: none; }\n\n \/* Notification Animation *\/\n .notification-enter-active, .notification-leave-active {\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n .notification-enter-from { opacity: 0; transform: translateX(100px); }\n .notification-leave-to { opacity: 0; transform: scale(0.9); opacity: 0; }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"app\">\n <transition name=\"notification\">\n <div v-if=\"ui.notificationVisible\" class=\"fixed top-5 right-5 z-[100] max-w-sm w-80 bg-white border border-gray-100 shadow-2xl rounded-xl p-4 flex items-center gap-4 pointer-events-auto\">\n <div class=\"flex-shrink-0 w-8 h-8 bg-black text-white rounded-full flex items-center justify-center\">\n <i class=\"fas fa-check text-xs\"><\/i>\n <\/div>\n <div class=\"flex-grow\">\n <p class=\"text-xs font-black uppercase tracking-widest text-black\">{{ ui.notificationTitle }}<\/p>\n <p class=\"text-[11px] text-gray-500 font-medium\">{{ ui.notificationSubtitle }}<\/p>\n <\/div>\n <button @click=\"ui.notificationVisible = false\" class=\"text-gray-300 hover:text-black transition-colors\">\n <i class=\"fas fa-times text-xs\"><\/i>\n <\/button>\n <\/div>\n <\/transition>\n\n <div class=\"min-h-screen p-4 md:p-12 max-w-4xl mx-auto\">\n \n <header class=\"flex flex-col items-center mb-12\">\n <div class=\"w-full flex justify-end mb-6\">\n <img :src=\"config.logoUrl\" alt=\"Logo\" class=\"h-12 object-contain grayscale\">\n <\/div>\n <h1 class=\"title-font text-4xl md:text-6xl mb-4 text-center leading-tight\" :style=\"{ color: config.primaryColor }\" v-html=\"renderMarkdown(config.title)\"><\/h1>\n <div class=\"text-xl opacity-70 text-center font-medium\" v-html=\"renderMarkdown(config.subtitle)\"><\/div>\n <\/header>\n\n <main class=\"space-y-6\">\n <div class=\"space-y-4\">\n <details class=\"group rounded-xl border border-gray-100 bg-white shadow-sm transition-all duration-300 hover:shadow-md\">\n <summary class=\"flex cursor-pointer items-center justify-between p-5 text-black\">\n <h3 class=\"text-lg font-semibold flex items-center\">\n <i class=\"fas fa-info-circle mr-3 opacity-50\"><\/i> Over deze tool\n <\/h3>\n <div class=\"transition-transform duration-300 group-open:rotate-180\">\n <i class=\"fas fa-chevron-down opacity-30\"><\/i>\n <\/div>\n <\/summary>\n <div class=\"px-5 pb-5 text-gray-600 leading-relaxed border-t border-gray-50 pt-4\" v-html=\"renderMarkdown(config.aboutText)\"><\/div>\n <\/details>\n\n <details class=\"group rounded-xl border border-gray-100 bg-white shadow-sm transition-all duration-300 hover:shadow-md\">\n <summary class=\"flex cursor-pointer items-center justify-between p-5 text-black\">\n <h3 class=\"text-lg font-semibold flex items-center\">\n <i class=\"fas fa-hand-back-point-up mr-3 opacity-50\"><\/i> Gebruik\n <\/h3>\n <div class=\"transition-transform duration-300 group-open:rotate-180\">\n <i class=\"fas fa-chevron-down opacity-30\"><\/i>\n <\/div>\n <\/summary>\n <div class=\"px-5 pb-5 text-gray-600 leading-relaxed border-t border-gray-50 pt-4\" v-html=\"renderMarkdown(config.usageText)\"><\/div>\n <\/details>\n <\/div>\n\n <div class=\"py-8\">\n <div class=\"flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8\">\n <span class=\"font-bold text-lg\">Selecteer AI intensiteit:<\/span>\n <label class=\"relative inline-flex items-center cursor-pointer group\">\n <input type=\"checkbox\" v-model=\"ui.advancedMode\" class=\"sr-only peer\">\n <div class=\"w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-black\"><\/div>\n <span class=\"ml-3 text-sm font-bold uppercase tracking-widest text-gray-400 peer-checked:text-black transition-colors\">Advanced<\/span>\n <\/label>\n <\/div>\n\n <div class=\"p-8 bg-white border border-gray-100 shadow-xl rounded-2xl\">\n <div v-if=\"!ui.advancedMode\">\n <input type=\"range\" min=\"1\" max=\"5\" v-model=\"state.basicLevel\" class=\"w-full h-2 rounded-lg appearance-none cursor-pointer mb-2\" :style=\"{ background: sliderGradient }\">\n <div class=\"flex justify-between text-[10px] font-bold text-gray-400 uppercase mt-2\">\n <span>Niveau 1<\/span>\n <span>Niveau 5<\/span>\n <\/div>\n <\/div>\n\n <div v-else class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div v-for=\"type in aiTypes\" :key=\"type.key\" class=\"p-6 bg-white border border-gray-100 shadow-sm rounded-2xl transition-all hover:shadow-md\">\n <label class=\"flex items-center mb-4 font-bold text-sm uppercase tracking-wide opacity-60\">\n <i :class=\"type.icon\" class=\"mr-2\"><\/i> {{ type.label }}\n <\/label>\n <input type=\"range\" min=\"1\" max=\"5\" v-model=\"state.levels[type.key]\" class=\"w-full h-2 rounded-lg appearance-none cursor-pointer\" :style=\"{ background: sliderGradient }\">\n <div class=\"text-right text-xs mt-3 font-black\">Lvl {{ state.levels[type.key] }}<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div v-if=\"combinedFeedback\" class=\"flex flex-wrap gap-2 justify-center md:justify-start mb-2 px-2\">\n <button v-for=\"preset in layoutPresets\" :key=\"preset.id\" @click=\"state.activeLayout = preset.id\" class=\"px-4 py-2 text-xs font-bold rounded-lg border transition-all uppercase tracking-wider\" :class=\"state.activeLayout === preset.id ? 'bg-black border-black text-white shadow-md' : 'bg-white border-gray-200 text-gray-500 hover:text-black hover:border-gray-400'\">\n {{ preset.label }}\n <\/button>\n <\/div>\n\n <transition name=\"fade\">\n <div v-if=\"combinedFeedback\" class=\"mt-0 p-8 rounded-2xl border border-gray-100 shadow-2xl bg-white relative overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-1 h-full\" :style=\"{ backgroundColor: config.primaryColor }\"><\/div>\n \n <div class=\"flex justify-between items-center mb-6\">\n <h3 class=\"font-black text-xs uppercase tracking-[0.2em] text-gray-400\">Gegenereerd Advies<\/h3>\n <button @click=\"copyAsImage\" title=\"Dupliceer\" class=\"text-sm text-gray-400 hover:text-black transition-colors p-1 flex items-center justify-center\">\n <i class=\"fas fa-clone\"><\/i>\n <\/button>\n <\/div>\n\n <div id=\"capture-zone\" class=\"flex flex-col md:flex-row gap-8 items-center md:items-center bg-white p-2 rounded-xl justify-center\">\n \n <div v-if=\"showQuadrant\" class=\"grid grid-cols-2 grid-rows-2 gap-2 w-full max-w-[170px] aspect-square flex-shrink-0 mx-auto md:mx-0 select-none\">\n <div :style=\"{ background: getLevelColor(currentLevels.text) }\" class=\"flex flex-col justify-between p-3 rounded-lg text-white transition-colors duration-300\">\n <div class=\"flex items-center text-[10px] font-bold uppercase tracking-wider\"><i class=\"fas fa-file-lines mr-1\"><\/i> Tekst<\/div>\n <i :class=\"getNiveauIcon(currentLevels.text)\" class=\"self-end text-xl opacity-90\"><\/i>\n <\/div>\n <div :style=\"{ background: getLevelColor(currentLevels.image) }\" class=\"flex flex-col justify-between p-3 rounded-lg text-white transition-colors duration-300\">\n <div class=\"flex items-center text-[10px] font-bold uppercase tracking-wider\"><i class=\"fas fa-image mr-1\"><\/i> Beeld<\/div>\n <i :class=\"getNiveauIcon(currentLevels.image)\" class=\"self-end text-xl opacity-90\"><\/i>\n <\/div>\n <div :style=\"{ background: getLevelColor(currentLevels.audio) }\" class=\"flex flex-col justify-between p-3 rounded-lg text-white transition-colors duration-300\">\n <div class=\"flex items-center text-[10px] font-bold uppercase tracking-wider\"><i class=\"fas fa-volume-high mr-1\"><\/i> Audio<\/div>\n <i :class=\"getNiveauIcon(currentLevels.audio)\" class=\"self-end text-xl opacity-90\"><\/i>\n <\/div>\n <div :style=\"{ background: getLevelColor(currentLevels.video) }\" class=\"flex flex-col justify-between p-3 rounded-lg text-white transition-colors duration-300\">\n <div class=\"flex items-center text-[10px] font-bold uppercase tracking-wider\"><i class=\"fas fa-video mr-1\"><\/i> Video<\/div>\n <i :class=\"getNiveauIcon(currentLevels.video)\" class=\"self-end text-xl opacity-90\"><\/i>\n <\/div>\n <\/div>\n\n <div v-if=\"showText\" class=\"prose max-w-none text-black leading-normal font-medium flex-grow text-left h-[170px] max-h-[170px] overflow-hidden flex flex-col\" :class=\"[dynamicFontSizeClass, isTextLong ? 'justify-start' : 'justify-center']\" v-html=\"combinedFeedback\"><\/div>\n\n <div v-if=\"showQR\" class=\"w-full max-w-[170px] aspect-square bg-gray-50 border border-gray-100 rounded-lg p-2 flex items-center justify-center flex-shrink-0 mx-auto md:mx-0\">\n <img :src=\"qrCodeUrl\" alt=\"QR Code\" crossorigin=\"anonymous\" class=\"w-full h-full object-contain\">\n <\/div>\n <\/div>\n\n <\/div>\n <\/transition>\n <\/main>\n\n <footer class=\"mt-24 pb-12\">\n <hr class=\"border-gray-100 mb-8\">\n <div class=\"flex flex-col md:flex-row justify-between items-center gap-6 text-sm font-medium\">\n <div class=\"text-black opacity-80 uppercase tracking-widest text-[11px]\">\n \u00a9 CC-BY-NC Pascal Tielkens\n <\/div>\n <div class=\"flex items-center gap-8\">\n <button @click=\"ui.showAdminDrawer = true\" class=\"text-black hover:opacity-100 opacity-30 transition-opacity\">\n <i class=\"fas fa-cog text-lg\"><\/i>\n <\/button>\n <div class=\"flex gap-4 opacity-30\">\n <i class=\"fab fa-creative-commons\"><\/i>\n <i class=\"fab fa-creative-commons-by\"><\/i>\n <i class=\"fab fa-creative-commons-nc\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n <\/div>\n\n <div v-if=\"ui.showAdminDrawer\" class=\"fixed inset-0 z-50 flex justify-end\">\n <div class=\"absolute inset-0 bg-black\/20 backdrop-blur-sm transition-opacity\" @click=\"closeAdmin\"><\/div>\n <div class=\"relative w-full max-w-xl bg-white h-full shadow-2xl p-8 overflow-y-auto flex flex-col\">\n <div class=\"flex justify-between items-center mb-12\">\n <h2 class=\"text-xl font-black uppercase tracking-tighter\">Settings<\/h2>\n <button @click=\"closeAdmin\" class=\"text-3xl hover:rotate-90 transition-transform\">\u00d7<\/button>\n <\/div>\n\n <div v-if=\"!ui.isAdminAuthenticated\" class=\"my-auto max-w-xs mx-auto w-full space-y-6\">\n <div class=\"text-center\">\n <i class=\"fas fa-lock text-4xl mb-4 opacity-10\"><\/i>\n <p class=\"text-sm font-bold uppercase tracking-widest opacity-40\">Admin Access<\/p>\n <\/div>\n <div class=\"relative\">\n <input :type=\"ui.showPwd ? 'text' : 'password'\" v-model=\"ui.pwdInput\" @keyup.enter=\"authenticate\" placeholder=\"Wachtwoord\" class=\"w-full p-4 border-b-2 border-gray-100 focus:border-black outline-none transition-colors text-center text-xl\">\n <button @click=\"ui.showPwd = !ui.showPwd\" class=\"absolute right-0 top-5 opacity-20\">\n <i class=\"fas\" :class=\"ui.showPwd ? 'fa-eye-slash' : 'fa-eye'\"><\/i>\n <\/button>\n <\/div>\n <button @click=\"authenticate\" class=\"w-full py-4 bg-black text-white rounded-full font-bold hover:tracking-widest transition-all uppercase text-xs\">Verify<\/button>\n <\/div>\n\n <div v-else class=\"space-y-12\">\n <section class=\"space-y-6\">\n <h3 class=\"text-xs font-black uppercase tracking-widest text-gray-400 border-b pb-2\">Content Management<\/h3>\n <div class=\"space-y-4\">\n <div>\n <label class=\"text-[10px] font-black uppercase mb-1 block opacity-40\">Main Title<\/label>\n <input v-model=\"config.title\" class=\"w-full p-3 bg-gray-50 rounded-lg outline-none ring-black font-bold\">\n <\/div>\n <div>\n <label class=\"text-[10px] font-black uppercase mb-1 block opacity-40\">Subtitle<\/label>\n <input v-model=\"config.subtitle\" class=\"w-full p-3 bg-gray-50 rounded-lg outline-none\">\n <\/div>\n <div>\n <label class=\"text-[10px] font-black uppercase mb-1 block opacity-40\">Logo URL<\/label>\n <input v-model=\"config.logoUrl\" class=\"w-full p-3 bg-gray-50 rounded-lg outline-none\">\n <\/div>\n <div>\n <label class=\"text-[10px] font-black uppercase mb-1 block opacity-40\">QR-code URL (Leeg laten voor huidige pagina)<\/label>\n <input v-model=\"config.qrUrl\" placeholder=\"https:\/\/tielkens.nl\/ai-wijzer\" class=\"w-full p-3 bg-gray-50 rounded-lg outline-none placeholder-gray-300\">\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"space-y-6\">\n <h3 class=\"text-xs font-black uppercase tracking-widest text-gray-400 border-b pb-2\">Styling<\/h3>\n <div class=\"grid grid-cols-2 gap-4\">\n <div>\n <label class=\"text-[10px] font-black uppercase mb-1 block opacity-40\">Primary Color<\/label>\n <div class=\"flex gap-2 items-center bg-gray-50 p-2 rounded-lg\">\n <input type=\"color\" v-model=\"config.primaryColor\" class=\"w-8 h-8 rounded border-none\">\n <span class=\"text-xs font-mono\">{{config.primaryColor}}<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"space-y-6\">\n <h3 class=\"text-xs font-black uppercase tracking-widest text-gray-400 border-b pb-2\">AI Niveau Teksten<\/h3>\n <div v-for=\"n in 5\" :key=\"n\">\n <label class=\"text-[10px] font-black uppercase mb-1 block opacity-40\">Niveau {{n}}<\/label>\n <textarea v-model=\"config.levels[n]\" rows=\"3\" class=\"w-full p-3 bg-gray-50 rounded-lg outline-none text-sm leading-relaxed\"><\/textarea>\n <\/div>\n <\/section>\n\n <section class=\"p-6 bg-red-50 rounded-2xl\">\n <label class=\"text-[10px] font-black uppercase mb-2 block text-red-400\">Systeem Wachtwoord<\/label>\n <input v-model=\"config.password\" class=\"w-full p-3 border border-red-100 rounded-lg outline-none focus:border-red-400\">\n <\/section>\n\n <button @click=\"exportHTML\" class=\"w-full py-6 bg-black text-white rounded-2xl font-bold uppercase tracking-widest text-sm hover:scale-[1.02] transition-transform shadow-xl\">\n <i class=\"fas fa-download mr-2\"><\/i> Save & Export File\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n const { createApp, ref, computed } = Vue;\n\n const DEFAULT_CONFIG = {\n password: 'AIWIJZER01!',\n title: '<b>AI-Wijzer<\/b>',\n subtitle: 'Navigeer verantwoord door de wereld van AI',\n logoUrl: 'https:\/\/tielkens.nl\/wp-content\/uploads\/2026\/05\/LogoTielkens.png',\n qrUrl: '',\n aboutText: 'De AI-wijzer is een hulpmiddel dat je ondersteunt bij het bepalen van de juiste inzet van Generatieve AI in het onderwijs.',\n usageText: 'Stel de sliders in op het gewenste niveau voor elk type media. De tool genereert automatisch een gecombineerd advies voor gebruik in opdrachten of lessen.',\n primaryColor: '#000000',\n secondaryColor: '#f3f4f6',\n levels: {\n 1: 'Het gebruik van GenAI-toepassingen is **niet toegestaan**. Al het ingeleverde werk moet volledig eigen werk zijn.',\n 2: 'GenAI mag uitsluitend gebruikt worden voor **brainstorming i.c.m. idee-ontwikkeling**. De uitwerking is eigen werk.',\n 3: 'GenAI mag gebruikt worden om **eigen concepten te verbeteren** of tekst te redigeren. Voeg de dialoog (prompt) toe.',\n 4: 'GenAI mag gebruikt worden voor de **productie van onderdelen**, mits kritisch ge\u00ebvalueerd i.c.m. bronvermelding.',\n 5: 'GenAI mag **volledig** worden ingezet. De nadruk ligt op prompting, regie en kritische reflectie op de output.'\n }\n };\n\n createApp({\n setup() {\n const config = ref({...DEFAULT_CONFIG});\n const ui = ref({\n showAdminDrawer: false,\n isAdminAuthenticated: false,\n pwdInput: '',\n showPwd: false,\n advancedMode: false,\n notificationVisible: false,\n notificationTitle: 'Gekopieerd!',\n notificationSubtitle: 'De afbeelding staat op je klembord.'\n });\n\n const state = ref({\n basicLevel: 1,\n levels: { text: 1, image: 1, audio: 1, video: 1 },\n activeLayout: 'default' \/\/ Houdt bij welke lay-out knop actief is\n });\n\n const aiTypes = [\n { key: 'text', label: 'Tekst', icon: 'fas fa-file-lines' },\n { key: 'image', label: 'Beeld', icon: 'fas fa-image' },\n { key: 'audio', label: 'Audio', icon: 'fas fa-volume-high' },\n { key: 'video', label: 'Video', icon: 'fas fa-video' }\n ];\n\n \/\/ De definities voor de knoppenbalk presets\n const layoutPresets = [\n { id: 'default', label: 'Standaard' },\n { id: 'text-qr', label: 'Tekst & QR' },\n { id: 'text-quadrant', label: 'Tekst & AI-kwadrant' },\n { id: 'quadrant-only', label: 'AI-Kwadrant' },\n { id: 'quadrant-qr', label: 'AI-kwadrant & QR' }\n ];\n\n \/\/ Computed functionaliteit voor het tonen\/verbergen van specifieke kolommen\n const showQuadrant = computed(() => ['default', 'text-quadrant', 'quadrant-only', 'quadrant-qr'].includes(state.value.activeLayout));\n const showText = computed(() => ['default', 'text-qr', 'text-quadrant'].includes(state.value.activeLayout));\n const showQR = computed(() => ['default', 'text-qr', 'quadrant-qr'].includes(state.value.activeLayout));\n\n const sliderGradient = computed(() => {\n return `linear-gradient(to right, #ef4444, #f97316, #eab308, #84cc16, #22c55e)`;\n });\n\n const currentLevels = computed(() => {\n if (!ui.value.advancedMode) {\n const basicMapped = state.value.basicLevel;\n return { text: basicMapped, image: basicMapped, audio: basicMapped, video: basicMapped };\n }\n return state.value.levels;\n });\n\n const qrCodeUrl = computed(() => {\n const targetUrl = config.value.qrUrl.trim() || window.location.href;\n return `https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=170x170&data=${encodeURIComponent(targetUrl)}`;\n });\n\n const combinedFeedback = computed(() => {\n if (!ui.value.advancedMode) {\n return marked.parse(config.value.levels[state.value.basicLevel]);\n }\n\n const active = Object.entries(state.value.levels);\n if (active.length === 0) return null;\n\n const grouped = {};\n active.forEach(([type, lvl]) => {\n if (!grouped[lvl]) grouped[lvl] = [];\n grouped[lvl].push(type);\n });\n\n const typeNames = { text: 'tekst', image: 'beeld', audio: 'audio', video: 'video' };\n let output = \"\";\n Object.entries(grouped).forEach(([lvl, types]) => {\n const names = types.map(t => typeNames[t]).join(' & ');\n output += `<p class=\"mb-2\">Voor <strong>${names}<\/strong>: ${config.value.levels[lvl]}<\/p>`;\n });\n\n return marked.parse(output);\n });\n\n const isTextLong = computed(() => {\n return combinedFeedback.value ? combinedFeedback.value.length > 200 : false;\n });\n\n const dynamicFontSizeClass = computed(() => {\n const textLength = combinedFeedback.value ? combinedFeedback.value.length : 0;\n \n \/\/ Als we 'Tekst & QR' of 'Tekst & AI-kwadrant' kiezen is er meer horizontale ruimte, dus mag het lettertype iets ruimer schalen\n const isExpanded = ['text-qr', 'text-quadrant'].includes(state.value.activeLayout);\n const mod = isExpanded ? 60 : 0;\n\n if (textLength > (420 + mod)) return 'text-[10px] leading-tight';\n if (textLength > (300 + mod)) return 'text-xs leading-snug'; \n if (textLength > (170 + mod)) return 'text-sm leading-normal'; \n return 'text-base md:text-lg';\n });\n\n const getLevelColor = (lvl) => {\n const colors = { 1: '#ef4444', 2: '#f97316', 3: '#eab308', 4: '#84cc16', 5: '#22c55e' };\n return colors[lvl] || '#ef4444';\n };\n\n const getNiveauIcon = (lvl) => {\n const icons = { 1: 'fas fa-ban', 2: 'fas fa-lightbulb', 3: 'fas fa-screwdriver-wrench', 4: 'fas fa-wand-magic-sparkles', 5: 'fas fa-rocket' };\n return icons[lvl] || 'fas fa-ban';\n };\n\n const copyAsImage = () => {\n const element = document.getElementById('capture-zone');\n if (!element) return;\n\n html2canvas(element, {\n useCORS: true,\n allowTaint: false,\n backgroundColor: '#ffffff',\n scale: 2 \n }).then(canvas => {\n canvas.toBlob(blob => {\n if (!blob) return;\n \n if (navigator.clipboard && navigator.clipboard.write) {\n const item = new ClipboardItem({ \"image\/png\": blob });\n navigator.clipboard.write([item]).then(() => {\n ui.value.notificationTitle = \"Gekopieerd!\";\n ui.value.notificationSubtitle = \"De gekozen lay-out staat als PNG op je klembord.\";\n ui.value.notificationVisible = true;\n setTimeout(() => ui.value.notificationVisible = false, 3000);\n }).catch(err => {\n triggerDownloadFallback(blob);\n });\n } else {\n triggerDownloadFallback(blob);\n }\n }, 'image\/png');\n });\n };\n\n const triggerDownloadFallback = (blob) => {\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `AI-Wijzer-${state.value.activeLayout}.png`;\n a.click();\n \n ui.value.notificationTitle = \"Gedownload!\";\n ui.value.notificationSubtitle = \"Klembord geblokkeerd, PNG opgeslagen als bestand.\";\n ui.value.notificationVisible = true;\n setTimeout(() => ui.value.notificationVisible = false, 3000);\n };\n\n const authenticate = () => {\n if (ui.value.pwdInput === config.value.password) {\n ui.value.isAdminAuthenticated = true;\n } else {\n alert('Onjuist wachtwoord');\n ui.value.showAdminDrawer = false;\n }\n };\n\n const closeAdmin = () => {\n ui.value.showAdminDrawer = false;\n ui.value.pwdInput = '';\n ui.value.isAdminAuthenticated = false;\n };\n\n const renderMarkdown = (text) => text ? marked.parse(text) : '';\n\n const exportHTML = () => {\n let html = document.documentElement.outerHTML;\n const configString = JSON.stringify(config.value, null, 4);\n html = html.replace(\/const DEFAULT_CONFIG = \\{[\\s\\S]*?\\};\/, `const DEFAULT_CONFIG = ${configString};`);\n const blob = new Blob([html], { type: 'text\/html' });\n const a = document.createElement('a');\n a.href = URL.createObjectURL(blob);\n a.download = 'AI-Wijzer-Pascal.html';\n a.click();\n };\n\n return {\n config, ui, state, aiTypes, layoutPresets, sliderGradient, combinedFeedback, currentLevels, qrCodeUrl, dynamicFontSizeClass, isTextLong,\n showQuadrant, showText, showQR,\n authenticate, closeAdmin, renderMarkdown, exportHTML, copyAsImage,\n getLevelColor, getNiveauIcon\n }\n }\n }).mount('#app');\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>De opkomst van generatieve AI vraagt om een duidelijke positionering binnen ons onderwijs. Wij geloven in het opleiden van AI-geletterde studenten, maar bewaken tegelijkertijd de authenticiteit van het leerproces en de toetsing. Deze AI-wijzer biedt een eenduidig en transparant framework voor zowel studenten als docenten. Gebaseerd op de AI Assessment Scale (AIAS) deelt deze wijzer … <a title=\"AI-WIJZER: Richtlijnen voor AI gebruik in het curriculum\" class=\"read-more\" href=\"https:\/\/tielkens.nl\/?p=105\" aria-label=\"Lees meer over AI-WIJZER: Richtlijnen voor AI gebruik in het curriculum\">Lees verder<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,6],"tags":[],"class_list":["post-105","post","type-post","status-publish","format-standard","hentry","category-ai","category-leren-met-ict"],"_links":{"self":[{"href":"https:\/\/tielkens.nl\/index.php?rest_route=\/wp\/v2\/posts\/105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tielkens.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tielkens.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tielkens.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tielkens.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=105"}],"version-history":[{"count":2,"href":"https:\/\/tielkens.nl\/index.php?rest_route=\/wp\/v2\/posts\/105\/revisions"}],"predecessor-version":[{"id":110,"href":"https:\/\/tielkens.nl\/index.php?rest_route=\/wp\/v2\/posts\/105\/revisions\/110"}],"wp:attachment":[{"href":"https:\/\/tielkens.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tielkens.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tielkens.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":105,"date":"2026-05-28T07:15:25","date_gmt":"2026-05-28T07:15:25","guid":{"rendered":"https:\/\/tielkens.nl\/?p=105"},"modified":"2026-05-28T07:24:39","modified_gmt":"2026-05-28T07:24:39","slug":"ai-wijzer","status":"publish","type":"post","link":"https:\/\/tielkens.nl\/?p=105","title":{"rendered":"AI-WIJZER: Richtlijnen voor AI gebruik in het curriculum"},"content":{"rendered":"\n

De opkomst van generatieve AI vraagt om een duidelijke positionering binnen ons onderwijs. Wij geloven in het opleiden van AI-geletterde studenten, maar bewaken tegelijkertijd de authenticiteit van het leerproces en de toetsing.<\/p>\n\n\n\n

Deze AI-wijzer biedt een eenduidig en transparant framework voor zowel studenten als docenten. Gebaseerd op de AI Assessment Scale (AIAS)<\/em> deelt deze wijzer AI-ondersteuning op in duidelijke gradaties\u2014vari\u00ebrend van ‘No AI’<\/em> tot ‘Full AI’<\/em>. Door dit framework consistent toe te passen, cre\u00ebren we een eerlijke leeromgeving waarin AI functioneert als een krachtige pedagogische tool en de kaders van academische integriteit gewaarborgd blijven.<\/p>\n\n\n\n\n\n\n \n \n AI-Wijzer<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Bungee&family=Montserrat:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n <script src=\"https:\/\/unpkg.com\/vue@3\/dist\/vue.global.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/marked\/marked.min.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\n\n <style>\n :root {\n interpolate-size: allow-keywords;\n }\n body { \n font-family: 'Montserrat', sans-serif; \n background-color: white;\n color: black;\n }\n .title-font { font-family: 'Bungee', cursive; }\n \n \/* Custom Slider Thumb *\/\n input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 24px; width: 24px;\n border-radius: 50%; background: white;\n cursor: pointer; border: 2px solid black;\n margin-top: -8px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n }\n input[type=range]::-webkit-slider-runnable-track {\n width: 100%; height: 8px;\n cursor: pointer; border-radius: 4px;\n }\n\n \/* Smooth Accordion Logic *\/\n details[open] summary ~ * {\n animation: sweep .3s ease-in-out;\n }\n @keyframes sweep {\n 0% {opacity: 0; transform: translateY(-10px)}\n 100% {opacity: 1; transform: translateY(0)}\n }\n \n \/* Verberg de standaard details marker *\/\n summary::-webkit-details-marker { display: none; }\n summary { list-style: none; }\n\n \/* Notification Animation *\/\n .notification-enter-active, .notification-leave-active {\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n .notification-enter-from { opacity: 0; transform: translateX(100px); }\n .notification-leave-to { opacity: 0; transform: scale(0.9); opacity: 0; }\n <\/style>\n<\/head>\n<body>\n\n<div id=\"app\">\n <transition name=\"notification\">\n <div v-if=\"ui.notificationVisible\" class=\"fixed top-5 right-5 z-[100] max-w-sm w-80 bg-white border border-gray-100 shadow-2xl rounded-xl p-4 flex items-center gap-4 pointer-events-auto\">\n <div class=\"flex-shrink-0 w-8 h-8 bg-black text-white rounded-full flex items-center justify-center\">\n <i class=\"fas fa-check text-xs\"><\/i>\n <\/div>\n <div class=\"flex-grow\">\n <p class=\"text-xs font-black uppercase tracking-widest text-black\">{{ ui.notificationTitle }}<\/p>\n <p class=\"text-[11px] text-gray-500 font-medium\">{{ ui.notificationSubtitle }}<\/p>\n <\/div>\n <button @click=\"ui.notificationVisible = false\" class=\"text-gray-300 hover:text-black transition-colors\">\n <i class=\"fas fa-times text-xs\"><\/i>\n <\/button>\n <\/div>\n <\/transition>\n\n <div class=\"min-h-screen p-4 md:p-12 max-w-4xl mx-auto\">\n \n <header class=\"flex flex-col items-center mb-12\">\n <div class=\"w-full flex justify-end mb-6\">\n <img :src=\"config.logoUrl\" alt=\"Logo\" class=\"h-12 object-contain grayscale\">\n <\/div>\n <h1 class=\"title-font text-4xl md:text-6xl mb-4 text-center leading-tight\" :style=\"{ color: config.primaryColor }\" v-html=\"renderMarkdown(config.title)\"><\/h1>\n <div class=\"text-xl opacity-70 text-center font-medium\" v-html=\"renderMarkdown(config.subtitle)\"><\/div>\n <\/header>\n\n <main class=\"space-y-6\">\n <div class=\"space-y-4\">\n <details class=\"group rounded-xl border border-gray-100 bg-white shadow-sm transition-all duration-300 hover:shadow-md\">\n <summary class=\"flex cursor-pointer items-center justify-between p-5 text-black\">\n <h3 class=\"text-lg font-semibold flex items-center\">\n <i class=\"fas fa-info-circle mr-3 opacity-50\"><\/i> Over deze tool\n <\/h3>\n <div class=\"transition-transform duration-300 group-open:rotate-180\">\n <i class=\"fas fa-chevron-down opacity-30\"><\/i>\n <\/div>\n <\/summary>\n <div class=\"px-5 pb-5 text-gray-600 leading-relaxed border-t border-gray-50 pt-4\" v-html=\"renderMarkdown(config.aboutText)\"><\/div>\n <\/details>\n\n <details class=\"group rounded-xl border border-gray-100 bg-white shadow-sm transition-all duration-300 hover:shadow-md\">\n <summary class=\"flex cursor-pointer items-center justify-between p-5 text-black\">\n <h3 class=\"text-lg font-semibold flex items-center\">\n <i class=\"fas fa-hand-back-point-up mr-3 opacity-50\"><\/i> Gebruik\n <\/h3>\n <div class=\"transition-transform duration-300 group-open:rotate-180\">\n <i class=\"fas fa-chevron-down opacity-30\"><\/i>\n <\/div>\n <\/summary>\n <div class=\"px-5 pb-5 text-gray-600 leading-relaxed border-t border-gray-50 pt-4\" v-html=\"renderMarkdown(config.usageText)\"><\/div>\n <\/details>\n <\/div>\n\n <div class=\"py-8\">\n <div class=\"flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8\">\n <span class=\"font-bold text-lg\">Selecteer AI intensiteit:<\/span>\n <label class=\"relative inline-flex items-center cursor-pointer group\">\n <input type=\"checkbox\" v-model=\"ui.advancedMode\" class=\"sr-only peer\">\n <div class=\"w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-black\"><\/div>\n <span class=\"ml-3 text-sm font-bold uppercase tracking-widest text-gray-400 peer-checked:text-black transition-colors\">Advanced<\/span>\n <\/label>\n <\/div>\n\n <div class=\"p-8 bg-white border border-gray-100 shadow-xl rounded-2xl\">\n <div v-if=\"!ui.advancedMode\">\n <input type=\"range\" min=\"1\" max=\"5\" v-model=\"state.basicLevel\" class=\"w-full h-2 rounded-lg appearance-none cursor-pointer mb-2\" :style=\"{ background: sliderGradient }\">\n <div class=\"flex justify-between text-[10px] font-bold text-gray-400 uppercase mt-2\">\n <span>Niveau 1<\/span>\n <span>Niveau 5<\/span>\n <\/div>\n <\/div>\n\n <div v-else class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <div v-for=\"type in aiTypes\" :key=\"type.key\" class=\"p-6 bg-white border border-gray-100 shadow-sm rounded-2xl transition-all hover:shadow-md\">\n <label class=\"flex items-center mb-4 font-bold text-sm uppercase tracking-wide opacity-60\">\n <i :class=\"type.icon\" class=\"mr-2\"><\/i> {{ type.label }}\n <\/label>\n <input type=\"range\" min=\"1\" max=\"5\" v-model=\"state.levels[type.key]\" class=\"w-full h-2 rounded-lg appearance-none cursor-pointer\" :style=\"{ background: sliderGradient }\">\n <div class=\"text-right text-xs mt-3 font-black\">Lvl {{ state.levels[type.key] }}<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div v-if=\"combinedFeedback\" class=\"flex flex-wrap gap-2 justify-center md:justify-start mb-2 px-2\">\n <button v-for=\"preset in layoutPresets\" :key=\"preset.id\" @click=\"state.activeLayout = preset.id\" class=\"px-4 py-2 text-xs font-bold rounded-lg border transition-all uppercase tracking-wider\" :class=\"state.activeLayout === preset.id ? 'bg-black border-black text-white shadow-md' : 'bg-white border-gray-200 text-gray-500 hover:text-black hover:border-gray-400'\">\n {{ preset.label }}\n <\/button>\n <\/div>\n\n <transition name=\"fade\">\n <div v-if=\"combinedFeedback\" class=\"mt-0 p-8 rounded-2xl border border-gray-100 shadow-2xl bg-white relative overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-1 h-full\" :style=\"{ backgroundColor: config.primaryColor }\"><\/div>\n \n <div class=\"flex justify-between items-center mb-6\">\n <h3 class=\"font-black text-xs uppercase tracking-[0.2em] text-gray-400\">Gegenereerd Advies<\/h3>\n <button @click=\"copyAsImage\" title=\"Dupliceer\" class=\"text-sm text-gray-400 hover:text-black transition-colors p-1 flex items-center justify-center\">\n <i class=\"fas fa-clone\"><\/i>\n <\/button>\n <\/div>\n\n <div id=\"capture-zone\" class=\"flex flex-col md:flex-row gap-8 items-center md:items-center bg-white p-2 rounded-xl justify-center\">\n \n <div v-if=\"showQuadrant\" class=\"grid grid-cols-2 grid-rows-2 gap-2 w-full max-w-[170px] aspect-square flex-shrink-0 mx-auto md:mx-0 select-none\">\n <div :style=\"{ background: getLevelColor(currentLevels.text) }\" class=\"flex flex-col justify-between p-3 rounded-lg text-white transition-colors duration-300\">\n <div class=\"flex items-center text-[10px] font-bold uppercase tracking-wider\"><i class=\"fas fa-file-lines mr-1\"><\/i> Tekst<\/div>\n <i :class=\"getNiveauIcon(currentLevels.text)\" class=\"self-end text-xl opacity-90\"><\/i>\n <\/div>\n <div :style=\"{ background: getLevelColor(currentLevels.image) }\" class=\"flex flex-col justify-between p-3 rounded-lg text-white transition-colors duration-300\">\n <div class=\"flex items-center text-[10px] font-bold uppercase tracking-wider\"><i class=\"fas fa-image mr-1\"><\/i> Beeld<\/div>\n <i :class=\"getNiveauIcon(currentLevels.image)\" class=\"self-end text-xl opacity-90\"><\/i>\n <\/div>\n <div :style=\"{ background: getLevelColor(currentLevels.audio) }\" class=\"flex flex-col justify-between p-3 rounded-lg text-white transition-colors duration-300\">\n <div class=\"flex items-center text-[10px] font-bold uppercase tracking-wider\"><i class=\"fas fa-volume-high mr-1\"><\/i> Audio<\/div>\n <i :class=\"getNiveauIcon(currentLevels.audio)\" class=\"self-end text-xl opacity-90\"><\/i>\n <\/div>\n <div :style=\"{ background: getLevelColor(currentLevels.video) }\" class=\"flex flex-col justify-between p-3 rounded-lg text-white transition-colors duration-300\">\n <div class=\"flex items-center text-[10px] font-bold uppercase tracking-wider\"><i class=\"fas fa-video mr-1\"><\/i> Video<\/div>\n <i :class=\"getNiveauIcon(currentLevels.video)\" class=\"self-end text-xl opacity-90\"><\/i>\n <\/div>\n <\/div>\n\n <div v-if=\"showText\" class=\"prose max-w-none text-black leading-normal font-medium flex-grow text-left h-[170px] max-h-[170px] overflow-hidden flex flex-col\" :class=\"[dynamicFontSizeClass, isTextLong ? 'justify-start' : 'justify-center']\" v-html=\"combinedFeedback\"><\/div>\n\n <div v-if=\"showQR\" class=\"w-full max-w-[170px] aspect-square bg-gray-50 border border-gray-100 rounded-lg p-2 flex items-center justify-center flex-shrink-0 mx-auto md:mx-0\">\n <img :src=\"qrCodeUrl\" alt=\"QR Code\" crossorigin=\"anonymous\" class=\"w-full h-full object-contain\">\n <\/div>\n <\/div>\n\n <\/div>\n <\/transition>\n <\/main>\n\n <footer class=\"mt-24 pb-12\">\n <hr class=\"border-gray-100 mb-8\">\n <div class=\"flex flex-col md:flex-row justify-between items-center gap-6 text-sm font-medium\">\n <div class=\"text-black opacity-80 uppercase tracking-widest text-[11px]\">\n \u00a9 CC-BY-NC Pascal Tielkens\n <\/div>\n <div class=\"flex items-center gap-8\">\n <button @click=\"ui.showAdminDrawer = true\" class=\"text-black hover:opacity-100 opacity-30 transition-opacity\">\n <i class=\"fas fa-cog text-lg\"><\/i>\n <\/button>\n <div class=\"flex gap-4 opacity-30\">\n <i class=\"fab fa-creative-commons\"><\/i>\n <i class=\"fab fa-creative-commons-by\"><\/i>\n <i class=\"fab fa-creative-commons-nc\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n <\/footer>\n <\/div>\n\n <div v-if=\"ui.showAdminDrawer\" class=\"fixed inset-0 z-50 flex justify-end\">\n <div class=\"absolute inset-0 bg-black\/20 backdrop-blur-sm transition-opacity\" @click=\"closeAdmin\"><\/div>\n <div class=\"relative w-full max-w-xl bg-white h-full shadow-2xl p-8 overflow-y-auto flex flex-col\">\n <div class=\"flex justify-between items-center mb-12\">\n <h2 class=\"text-xl font-black uppercase tracking-tighter\">Settings<\/h2>\n <button @click=\"closeAdmin\" class=\"text-3xl hover:rotate-90 transition-transform\">\u00d7<\/button>\n <\/div>\n\n <div v-if=\"!ui.isAdminAuthenticated\" class=\"my-auto max-w-xs mx-auto w-full space-y-6\">\n <div class=\"text-center\">\n <i class=\"fas fa-lock text-4xl mb-4 opacity-10\"><\/i>\n <p class=\"text-sm font-bold uppercase tracking-widest opacity-40\">Admin Access<\/p>\n <\/div>\n <div class=\"relative\">\n <input :type=\"ui.showPwd ? 'text' : 'password'\" v-model=\"ui.pwdInput\" @keyup.enter=\"authenticate\" placeholder=\"Wachtwoord\" class=\"w-full p-4 border-b-2 border-gray-100 focus:border-black outline-none transition-colors text-center text-xl\">\n <button @click=\"ui.showPwd = !ui.showPwd\" class=\"absolute right-0 top-5 opacity-20\">\n <i class=\"fas\" :class=\"ui.showPwd ? 'fa-eye-slash' : 'fa-eye'\"><\/i>\n <\/button>\n <\/div>\n <button @click=\"authenticate\" class=\"w-full py-4 bg-black text-white rounded-full font-bold hover:tracking-widest transition-all uppercase text-xs\">Verify<\/button>\n <\/div>\n\n <div v-else class=\"space-y-12\">\n <section class=\"space-y-6\">\n <h3 class=\"text-xs font-black uppercase tracking-widest text-gray-400 border-b pb-2\">Content Management<\/h3>\n <div class=\"space-y-4\">\n <div>\n <label class=\"text-[10px] font-black uppercase mb-1 block opacity-40\">Main Title<\/label>\n <input v-model=\"config.title\" class=\"w-full p-3 bg-gray-50 rounded-lg outline-none ring-black font-bold\">\n <\/div>\n <div>\n <label class=\"text-[10px] font-black uppercase mb-1 block opacity-40\">Subtitle<\/label>\n <input v-model=\"config.subtitle\" class=\"w-full p-3 bg-gray-50 rounded-lg outline-none\">\n <\/div>\n <div>\n <label class=\"text-[10px] font-black uppercase mb-1 block opacity-40\">Logo URL<\/label>\n <input v-model=\"config.logoUrl\" class=\"w-full p-3 bg-gray-50 rounded-lg outline-none\">\n <\/div>\n <div>\n <label class=\"text-[10px] font-black uppercase mb-1 block opacity-40\">QR-code URL (Leeg laten voor huidige pagina)<\/label>\n <input v-model=\"config.qrUrl\" placeholder=\"https:\/\/tielkens.nl\/ai-wijzer\" class=\"w-full p-3 bg-gray-50 rounded-lg outline-none placeholder-gray-300\">\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"space-y-6\">\n <h3 class=\"text-xs font-black uppercase tracking-widest text-gray-400 border-b pb-2\">Styling<\/h3>\n <div class=\"grid grid-cols-2 gap-4\">\n <div>\n <label class=\"text-[10px] font-black uppercase mb-1 block opacity-40\">Primary Color<\/label>\n <div class=\"flex gap-2 items-center bg-gray-50 p-2 rounded-lg\">\n <input type=\"color\" v-model=\"config.primaryColor\" class=\"w-8 h-8 rounded border-none\">\n <span class=\"text-xs font-mono\">{{config.primaryColor}}<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"space-y-6\">\n <h3 class=\"text-xs font-black uppercase tracking-widest text-gray-400 border-b pb-2\">AI Niveau Teksten<\/h3>\n <div v-for=\"n in 5\" :key=\"n\">\n <label class=\"text-[10px] font-black uppercase mb-1 block opacity-40\">Niveau {{n}}<\/label>\n <textarea v-model=\"config.levels[n]\" rows=\"3\" class=\"w-full p-3 bg-gray-50 rounded-lg outline-none text-sm leading-relaxed\"><\/textarea>\n <\/div>\n <\/section>\n\n <section class=\"p-6 bg-red-50 rounded-2xl\">\n <label class=\"text-[10px] font-black uppercase mb-2 block text-red-400\">Systeem Wachtwoord<\/label>\n <input v-model=\"config.password\" class=\"w-full p-3 border border-red-100 rounded-lg outline-none focus:border-red-400\">\n <\/section>\n\n <button @click=\"exportHTML\" class=\"w-full py-6 bg-black text-white rounded-2xl font-bold uppercase tracking-widest text-sm hover:scale-[1.02] transition-transform shadow-xl\">\n <i class=\"fas fa-download mr-2\"><\/i> Save & Export File\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n const { createApp, ref, computed } = Vue;\n\n const DEFAULT_CONFIG = {\n password: 'AIWIJZER01!',\n title: '<b>AI-Wijzer<\/b>',\n subtitle: 'Navigeer verantwoord door de wereld van AI',\n logoUrl: 'https:\/\/tielkens.nl\/wp-content\/uploads\/2026\/05\/LogoTielkens.png',\n qrUrl: '',\n aboutText: 'De AI-wijzer is een hulpmiddel dat je ondersteunt bij het bepalen van de juiste inzet van Generatieve AI in het onderwijs.',\n usageText: 'Stel de sliders in op het gewenste niveau voor elk type media. De tool genereert automatisch een gecombineerd advies voor gebruik in opdrachten of lessen.',\n primaryColor: '#000000',\n secondaryColor: '#f3f4f6',\n levels: {\n 1: 'Het gebruik van GenAI-toepassingen is **niet toegestaan**. Al het ingeleverde werk moet volledig eigen werk zijn.',\n 2: 'GenAI mag uitsluitend gebruikt worden voor **brainstorming i.c.m. idee-ontwikkeling**. De uitwerking is eigen werk.',\n 3: 'GenAI mag gebruikt worden om **eigen concepten te verbeteren** of tekst te redigeren. Voeg de dialoog (prompt) toe.',\n 4: 'GenAI mag gebruikt worden voor de **productie van onderdelen**, mits kritisch ge\u00ebvalueerd i.c.m. bronvermelding.',\n 5: 'GenAI mag **volledig** worden ingezet. De nadruk ligt op prompting, regie en kritische reflectie op de output.'\n }\n };\n\n createApp({\n setup() {\n const config = ref({...DEFAULT_CONFIG});\n const ui = ref({\n showAdminDrawer: false,\n isAdminAuthenticated: false,\n pwdInput: '',\n showPwd: false,\n advancedMode: false,\n notificationVisible: false,\n notificationTitle: 'Gekopieerd!',\n notificationSubtitle: 'De afbeelding staat op je klembord.'\n });\n\n const state = ref({\n basicLevel: 1,\n levels: { text: 1, image: 1, audio: 1, video: 1 },\n activeLayout: 'default' \/\/ Houdt bij welke lay-out knop actief is\n });\n\n const aiTypes = [\n { key: 'text', label: 'Tekst', icon: 'fas fa-file-lines' },\n { key: 'image', label: 'Beeld', icon: 'fas fa-image' },\n { key: 'audio', label: 'Audio', icon: 'fas fa-volume-high' },\n { key: 'video', label: 'Video', icon: 'fas fa-video' }\n ];\n\n \/\/ De definities voor de knoppenbalk presets\n const layoutPresets = [\n { id: 'default', label: 'Standaard' },\n { id: 'text-qr', label: 'Tekst & QR' },\n { id: 'text-quadrant', label: 'Tekst & AI-kwadrant' },\n { id: 'quadrant-only', label: 'AI-Kwadrant' },\n { id: 'quadrant-qr', label: 'AI-kwadrant & QR' }\n ];\n\n \/\/ Computed functionaliteit voor het tonen\/verbergen van specifieke kolommen\n const showQuadrant = computed(() => ['default', 'text-quadrant', 'quadrant-only', 'quadrant-qr'].includes(state.value.activeLayout));\n const showText = computed(() => ['default', 'text-qr', 'text-quadrant'].includes(state.value.activeLayout));\n const showQR = computed(() => ['default', 'text-qr', 'quadrant-qr'].includes(state.value.activeLayout));\n\n const sliderGradient = computed(() => {\n return `linear-gradient(to right, #ef4444, #f97316, #eab308, #84cc16, #22c55e)`;\n });\n\n const currentLevels = computed(() => {\n if (!ui.value.advancedMode) {\n const basicMapped = state.value.basicLevel;\n return { text: basicMapped, image: basicMapped, audio: basicMapped, video: basicMapped };\n }\n return state.value.levels;\n });\n\n const qrCodeUrl = computed(() => {\n const targetUrl = config.value.qrUrl.trim() || window.location.href;\n return `https:\/\/api.qrserver.com\/v1\/create-qr-code\/?size=170x170&data=${encodeURIComponent(targetUrl)}`;\n });\n\n const combinedFeedback = computed(() => {\n if (!ui.value.advancedMode) {\n return marked.parse(config.value.levels[state.value.basicLevel]);\n }\n\n const active = Object.entries(state.value.levels);\n if (active.length === 0) return null;\n\n const grouped = {};\n active.forEach(([type, lvl]) => {\n if (!grouped[lvl]) grouped[lvl] = [];\n grouped[lvl].push(type);\n });\n\n const typeNames = { text: 'tekst', image: 'beeld', audio: 'audio', video: 'video' };\n let output = \"\";\n Object.entries(grouped).forEach(([lvl, types]) => {\n const names = types.map(t => typeNames[t]).join(' & ');\n output += `<p class=\"mb-2\">Voor <strong>${names}<\/strong>: ${config.value.levels[lvl]}<\/p>`;\n });\n\n return marked.parse(output);\n });\n\n const isTextLong = computed(() => {\n return combinedFeedback.value ? combinedFeedback.value.length > 200 : false;\n });\n\n const dynamicFontSizeClass = computed(() => {\n const textLength = combinedFeedback.value ? combinedFeedback.value.length : 0;\n \n \/\/ Als we 'Tekst & QR' of 'Tekst & AI-kwadrant' kiezen is er meer horizontale ruimte, dus mag het lettertype iets ruimer schalen\n const isExpanded = ['text-qr', 'text-quadrant'].includes(state.value.activeLayout);\n const mod = isExpanded ? 60 : 0;\n\n if (textLength > (420 + mod)) return 'text-[10px] leading-tight';\n if (textLength > (300 + mod)) return 'text-xs leading-snug'; \n if (textLength > (170 + mod)) return 'text-sm leading-normal'; \n return 'text-base md:text-lg';\n });\n\n const getLevelColor = (lvl) => {\n const colors = { 1: '#ef4444', 2: '#f97316', 3: '#eab308', 4: '#84cc16', 5: '#22c55e' };\n return colors[lvl] || '#ef4444';\n };\n\n const getNiveauIcon = (lvl) => {\n const icons = { 1: 'fas fa-ban', 2: 'fas fa-lightbulb', 3: 'fas fa-screwdriver-wrench', 4: 'fas fa-wand-magic-sparkles', 5: 'fas fa-rocket' };\n return icons[lvl] || 'fas fa-ban';\n };\n\n const copyAsImage = () => {\n const element = document.getElementById('capture-zone');\n if (!element) return;\n\n html2canvas(element, {\n useCORS: true,\n allowTaint: false,\n backgroundColor: '#ffffff',\n scale: 2 \n }).then(canvas => {\n canvas.toBlob(blob => {\n if (!blob) return;\n \n if (navigator.clipboard && navigator.clipboard.write) {\n const item = new ClipboardItem({ \"image\/png\": blob });\n navigator.clipboard.write([item]).then(() => {\n ui.value.notificationTitle = \"Gekopieerd!\";\n ui.value.notificationSubtitle = \"De gekozen lay-out staat als PNG op je klembord.\";\n ui.value.notificationVisible = true;\n setTimeout(() => ui.value.notificationVisible = false, 3000);\n }).catch(err => {\n triggerDownloadFallback(blob);\n });\n } else {\n triggerDownloadFallback(blob);\n }\n }, 'image\/png');\n });\n };\n\n const triggerDownloadFallback = (blob) => {\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `AI-Wijzer-${state.value.activeLayout}.png`;\n a.click();\n \n ui.value.notificationTitle = \"Gedownload!\";\n ui.value.notificationSubtitle = \"Klembord geblokkeerd, PNG opgeslagen als bestand.\";\n ui.value.notificationVisible = true;\n setTimeout(() => ui.value.notificationVisible = false, 3000);\n };\n\n const authenticate = () => {\n if (ui.value.pwdInput === config.value.password) {\n ui.value.isAdminAuthenticated = true;\n } else {\n alert('Onjuist wachtwoord');\n ui.value.showAdminDrawer = false;\n }\n };\n\n const closeAdmin = () => {\n ui.value.showAdminDrawer = false;\n ui.value.pwdInput = '';\n ui.value.isAdminAuthenticated = false;\n };\n\n const renderMarkdown = (text) => text ? marked.parse(text) : '';\n\n const exportHTML = () => {\n let html = document.documentElement.outerHTML;\n const configString = JSON.stringify(config.value, null, 4);\n html = html.replace(\/const DEFAULT_CONFIG = \\{[\\s\\S]*?\\};\/, `const DEFAULT_CONFIG = ${configString};`);\n const blob = new Blob([html], { type: 'text\/html' });\n const a = document.createElement('a');\n a.href = URL.createObjectURL(blob);\n a.download = 'AI-Wijzer-Pascal.html';\n a.click();\n };\n\n return {\n config, ui, state, aiTypes, layoutPresets, sliderGradient, combinedFeedback, currentLevels, qrCodeUrl, dynamicFontSizeClass, isTextLong,\n showQuadrant, showText, showQR,\n authenticate, closeAdmin, renderMarkdown, exportHTML, copyAsImage,\n getLevelColor, getNiveauIcon\n }\n }\n }).mount('#app');\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>De opkomst van generatieve AI vraagt om een duidelijke positionering binnen ons onderwijs. Wij geloven in het opleiden van AI-geletterde studenten, maar bewaken tegelijkertijd de authenticiteit van het leerproces en de toetsing. Deze AI-wijzer biedt een eenduidig en transparant framework voor zowel studenten als docenten. Gebaseerd op de AI Assessment Scale (AIAS) deelt deze wijzer … <a title=\"AI-WIJZER: Richtlijnen voor AI gebruik in het curriculum\" class=\"read-more\" href=\"https:\/\/tielkens.nl\/?p=105\" aria-label=\"Lees meer over AI-WIJZER: Richtlijnen voor AI gebruik in het curriculum\">Lees verder<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,6],"tags":[],"class_list":["post-105","post","type-post","status-publish","format-standard","hentry","category-ai","category-leren-met-ict"],"_links":{"self":[{"href":"https:\/\/tielkens.nl\/index.php?rest_route=\/wp\/v2\/posts\/105","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tielkens.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tielkens.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tielkens.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tielkens.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=105"}],"version-history":[{"count":2,"href":"https:\/\/tielkens.nl\/index.php?rest_route=\/wp\/v2\/posts\/105\/revisions"}],"predecessor-version":[{"id":110,"href":"https:\/\/tielkens.nl\/index.php?rest_route=\/wp\/v2\/posts\/105\/revisions\/110"}],"wp:attachment":[{"href":"https:\/\/tielkens.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=105"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tielkens.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=105"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tielkens.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=105"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}