Beeldaspecten Quiz: The Game<\/title>\n <style>\n :root {\n --primary: #6366f1;\n --secondary: #a855f7;\n --accent: #f59e0b;\n --success: #22c55e;\n --danger: #ef4444;\n --bg: #0f172a;\n --card-bg: #1e293b;\n --text: #f8fafc;\n }\n\n body {\n font-family: 'Poppins', sans-serif;\n background: var(--bg);\n color: var(--text);\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n .game-container {\n width: 95%;\n max-width: 600px;\n perspective: 1000px;\n }\n\n .card {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 24px;\n box-shadow: 0 20px 50px rgba(0,0,0,0.5);\n border: 2px solid rgba(255,255,255,0.1);\n text-align: center;\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n\n \/* Stats Bar *\/\n .stats-bar {\n display: flex;\n justify-content: space-between;\n background: rgba(0,0,0,0.3);\n padding: 10px 20px;\n border-radius: 50px;\n margin-bottom: 20px;\n border: 1px solid var(--primary);\n }\n\n .stat { display: flex; align-items: center; gap: 8px; font-weight: bold; }\n .coin-icon { color: var(--accent); font-size: 1.2rem; }\n\n \/* Progress Bar *\/\n .progress-container {\n width: 100%;\n height: 10px;\n background: #334155;\n border-radius: 10px;\n margin: 20px 0;\n overflow: hidden;\n }\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--primary), var(--secondary));\n width: 0%;\n transition: width 0.5s ease;\n }\n\n \/* Buttons & Shop *\/\n .btn {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n border: none;\n padding: 15px 30px;\n border-radius: 12px;\n font-weight: bold;\n cursor: pointer;\n margin: 10px;\n transition: transform 0.2s, box-shadow 0.2s;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(99, 102, 241, 0.4); }\n .btn:active { transform: translateY(0); }\n \n .btn-shop { background: var(--accent); color: #000; }\n\n \/* Quiz Styling *\/\n .option {\n background: #334155;\n padding: 15px;\n margin: 10px 0;\n border-radius: 12px;\n cursor: pointer;\n border: 2px solid transparent;\n transition: all 0.2s;\n display: block;\n text-align: left;\n }\n .option:hover { background: #475569; border-color: var(--primary); }\n .option.correct { background: var(--success) !important; animation: celebrate 0.5s; }\n .option.wrong { background: var(--danger) !important; animation: shake 0.4s; }\n\n \/* Power-ups *\/\n .powerups {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-top: 20px;\n }\n .power-btn {\n background: #1e293b;\n border: 1px solid var(--accent);\n color: var(--accent);\n padding: 8px 15px;\n border-radius: 8px;\n font-size: 0.8rem;\n cursor: pointer;\n }\n .power-btn:disabled { opacity: 0.3; cursor: not-allowed; }\n\n \/* Animations *\/\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-10px); }\n 75% { transform: translateX(10px); }\n }\n @keyframes celebrate {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n }\n\n .hidden { display: none; }\n .feedback-text { margin-top: 15px; font-style: italic; color: #cbd5e1; font-size: 0.9rem; }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"game-container\">\n <div id=\"game-stats\" class=\"stats-bar hidden\">\n <div class=\"stat\">\u2b50 <span id=\"current-score\">0<\/span><\/div>\n <div class=\"stat\"><span class=\"coin-icon\">\ud83d\udcb0<\/span> <span id=\"coins\">0<\/span><\/div>\n <div class=\"stat\">\ud83d\udd25 <span id=\"streak\">0<\/span><\/div>\n <\/div>\n\n <div id=\"home-page\" class=\"card\">\n <h1 style=\"font-size: 2.5rem; margin-bottom: 10px;\">\ud83c\udfa8 ART QUEST<\/h1>\n <p>Verdien munten, koop power-ups en word een meester in Beeldaspecten!<\/p>\n <div class=\"btn-container\">\n <button class=\"btn\" onclick=\"startGame('small')\">Short Run (5-10)<\/button>\n <button class=\"btn\" onclick=\"startGame('large')\">Marathon (Alle)<\/button>\n <br>\n <button class=\"btn btn-shop\" onclick=\"openAdmin()\">Admin Paneel<\/button>\n <\/div>\n <\/div>\n\n <div id=\"quiz-page\" class=\"card hidden\">\n <div class=\"progress-container\"><div id=\"progress-bar\" class=\"progress-fill\"><\/div><\/div>\n <h3 id=\"question-text\">Vraag komt hier…<\/h3>\n <div id=\"options-container\"><\/div>\n \n <div id=\"feedback-box\" class=\"feedback-text hidden\"><\/div>\n\n <div class=\"powerups\">\n <button id=\"btn-skip\" class=\"power-btn\" onclick=\"useSkip()\">\u23ed Skip Vraag (50 \ud83d\udcb0)<\/button>\n <button id=\"btn-hint\" class=\"power-btn\" onclick=\"useHint()\">\ud83d\udca1 Hint (30 \ud83d\udcb0)<\/button>\n <\/div>\n \n <button id=\"next-btn\" class=\"btn hidden\" onclick=\"nextQuestion()\">Volgende Vraag \u2794<\/button>\n <\/div>\n\n <div id=\"result-page\" class=\"card hidden\">\n <h2 id=\"result-title\">Einde Run!<\/h2>\n <div style=\"font-size: 3rem; margin: 20px 0;\">\ud83c\udfc6<\/div>\n <p id=\"final-stats\"><\/p>\n <button class=\"btn\" onclick=\"location.reload()\">Opnieuw Spelen<\/button>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Database uit document [cite: 1-46]\n const database = [\n [\"Wat is de zon?\", [\"Natuurlijke lichtbron\", \"Kunstmatige lichtbron\", \"Slagschaduw\"], 0, \"De zon is een lichtbron die van nature voorkomt[cite: 2].\"],\n [\"Wat is een lamp?\", [\"Natuurlijke lichtbron\", \"Kunstmatige lichtbron\", \"Eigen schaduw\"], 1, \"Een lamp is door mensen gemaakt[cite: 3].\"],\n [\"Wat is schaduw op het voorwerp zelf?\", [\"Slagschaduw\", \"Eigen schaduw\", \"Afsnijding\"], 1, \"Eigen schaduw is op het object zelf te zien aan de kant die niet direct belicht wordt[cite: 5].\"],\n [\"Schaduw die een object op de grond werpt is...\", [\"Eigen schaduw\", \"Slagschaduw\", \"Kernschaduw\"], 1, \"Slagschaduw is de schaduw die een object op de omgeving werpt[cite: 6].\"],\n [\"Wat zijn Rood, Geel en Blauw?\", [\"Secundaire kleuren\", \"Primaire kleuren\", \"Tertiaire kleuren\"], 1, \"Primaire kleuren zijn de basiskleuren die niet gemengd kunnen worden[cite: 8].\"],\n [\"Oranje, Groen en Paars zijn...\", [\"Primaire kleuren\", \"Secundaire kleuren\", \"Onverzadigd\"], 1, \"Secundaire kleuren ontstaan door twee primaire kleuren te mengen[cite: 9].\"],\n [\"Kleuren gemengd met veel wit heten...\", [\"Verzadigd\", \"Monochroom\", \"Pastelkleuren\"], 2, \"Pastelkleuren zijn met veel wit verhelderd en zijn zachter[cite: 13, 14].\"],\n [\"Wat betekent monochroom?\", [\"Meerdere kleuren\", \"E\u00e9n kleur (met tinten)\", \"Geen kleur\"], 1, \"Monochroom gebruikt \u00e9\u00e9n kleur, eventueel met lichtere en donkerdere tinten[cite: 17].\"],\n [\"Rood en Groen naast elkaar is een...\", [\"Kwaliteitscontrast\", \"Complementair contrast\", \"Warm-koud contrast\"], 1, \"Complementair contrast ontstaat bij kleuren die tegenover elkaar liggen in de cirkel[cite: 20, 22].\"],\n [\"Blauwen zijn 'ver weg', roden zijn 'dichtbij'. Dit is...\", [\"Licht-donker contrast\", \"Warm-koud contrast\", \"Zwart-wit\"], 1, \"Warm-koud contrast speelt in op de temperatuurbeleving van kleuren[cite: 24, 25, 26].\"],\n [\"Verschil tussen verzadigd en dof heet...\", [\"Kwaliteitscontrast\", \"Licht-donker\", \"Kleurfamilie\"], 0, \"Kwaliteitscontrast gaat over het verschil in verzadiging of helderheid[cite: 31, 32].\"],\n [\"Vormen zoals bladeren en wolken zijn...\", [\"Geometrisch\", \"Organisch\", \"2-dimensionaal\"], 1, \"Organische vormen zijn natuurlijk, vloeiend en grillig[cite: 35].\"],\n [\"Vierkanten en cirkels zijn...\", [\"Geometrische vormen\", \"Organische vormen\", \"3D-vormen\"], 0, \"Geometrische vormen zijn wiskundige, scherpe of rechte vormen[cite: 36].\"],\n [\"Een tekening op papier is...\", [\"3-dimensionaal\", \"2-dimensionaal\", \"Ruimtelijk\"], 1, \"2D vormen hebben alleen breedte en hoogte zonder diepte[cite: 40].\"],\n [\"Een sculptuur of beeld is...\", [\"2-dimensionaal\", \"3-dimensionaal\", \"Vlak\"], 1, \"3D vormen hebben breedte, hoogte en diepte[cite: 41].\"],\n [\"Twee kanten die elkaars spiegelbeeld zijn...\", [\"Asymmetrisch\", \"Symmetrisch\", \"Overlapping\"], 1, \"Symmetrisch is aan beide kanten gelijk[cite: 42].\"],\n [\"Als vormen voor elkaar staan is er...\", [\"Afsnijding\", \"Overlapping\", \"Contrast\"], 1, \"Overlapping ontstaat als figuren elkaar gedeeltelijk afdekken[cite: 44].\"],\n [\"Als een deel buiten het kader valt heet dat...\", [\"Afsnijding\", \"Overlapping\", \"2D\"], 0, \"Afsnijding suggereert dat het tafereel buiten het schilderij doorloopt[cite: 45, 46].\"]\n ];\n\n let gameState = {\n questions: [],\n currentIndex: 0,\n score: 0,\n coins: 10,\n streak: 0,\n canAnswer: true\n };\n\n function startGame(mode) {\n let pool = [...database];\n pool.sort(() => Math.random() - 0.5);\n \n if(mode === 'small') {\n gameState.questions = pool.slice(0, Math.floor(Math.random() * 5) + 5);\n } else {\n gameState.questions = pool;\n }\n\n gameState.currentIndex = 0;\n gameState.score = 0;\n gameState.streak = 0;\n \n document.getElementById('home-page').classList.add('hidden');\n document.getElementById('game-stats').classList.remove('hidden');\n document.getElementById('quiz-page').classList.remove('hidden');\n updateStats();\n showQuestion();\n }\n\n function showQuestion() {\n gameState.canAnswer = true;\n const q = gameState.questions[gameState.currentIndex];\n document.getElementById('question-text').innerText = q[0];\n document.getElementById('feedback-box').classList.add('hidden');\n document.getElementById('next-btn').classList.add('hidden');\n \n const container = document.getElementById('options-container');\n container.innerHTML = '';\n \n q[1].forEach((opt, i) => {\n const div = document.createElement('div');\n div.className = 'option';\n div.innerText = opt;\n div.onclick = () => checkAnswer(i, div);\n container.appendChild(div);\n });\n\n const progress = ((gameState.currentIndex) \/ gameState.questions.length) * 100;\n document.getElementById('progress-bar').style.width = progress + \"%\";\n updateButtons();\n }\n\n function checkAnswer(idx, element) {\n if(!gameState.canAnswer) return;\n gameState.canAnswer = false;\n \n const q = gameState.questions[gameState.currentIndex];\n const feedback = document.getElementById('feedback-box');\n feedback.innerText = q[3];\n feedback.classList.remove('hidden');\n\n if(idx === q[2]) {\n element.classList.add('correct');\n gameState.score += 10;\n gameState.coins += 5;\n gameState.streak++;\n if(gameState.streak >= 3) gameState.coins += 5; \/\/ Streak bonus\n } else {\n element.classList.add('wrong');\n gameState.streak = 0;\n \/\/ Toon het juiste antwoord\n document.querySelectorAll('.option')[q[2]].classList.add('correct');\n }\n\n updateStats();\n document.getElementById('next-btn').classList.remove('hidden');\n }\n\n function nextQuestion() {\n gameState.currentIndex++;\n if(gameState.currentIndex < gameState.questions.length) {\n showQuestion();\n } else {\n showResults();\n }\n }\n\n function updateStats() {\n document.getElementById('current-score').innerText = gameState.score;\n document.getElementById('coins').innerText = gameState.coins;\n document.getElementById('streak').innerText = gameState.streak;\n }\n\n function updateButtons() {\n document.getElementById('btn-skip').disabled = gameState.coins < 50;\n document.getElementById('btn-hint').disabled = gameState.coins < 30;\n }\n\n function useSkip() {\n if(gameState.coins >= 50) {\n gameState.coins -= 50;\n updateStats();\n nextQuestion();\n }\n }\n\n function useHint() {\n if(gameState.coins >= 30 && gameState.canAnswer) {\n gameState.coins -= 30;\n const q = gameState.questions[gameState.currentIndex];\n const options = document.querySelectorAll('.option');\n \/\/ Verwijder 1 fout antwoord\n for(let i=0; i < options.length; i++) {\n if(i !== q[2]) {\n options[i].style.opacity = \"0.3\";\n options[i].onclick = null;\n break;\n }\n }\n updateStats();\n updateButtons();\n }\n }\n\n function showResults() {\n document.getElementById('quiz-page').classList.add('hidden');\n document.getElementById('result-page').classList.remove('hidden');\n document.getElementById('final-stats').innerText = `Eindscore: ${gameState.score} punten!`;\n }\n\n function openAdmin() {\n const ww = prompt(\"Wachtwoord?\");\n if(ww === \"Wachtwoord\") {\n alert(\"Je bent nu Admin! (In deze versie kun je vragen toevoegen in de code)\");\n }\n }\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Beeldaspecten Quiz: The Game \u2b50 0 \ud83d\udcb0 0 \ud83d\udd25 0 \ud83c\udfa8 ART QUEST Verdien munten, koop power-ups en word een meester in Beeldaspecten! Short Run (5-10) Marathon (Alle) Admin Paneel Vraag komt hier… \u23ed Skip Vraag (50 \ud83d\udcb0) \ud83d\udca1 Hint (30 \ud83d\udcb0) Volgende Vraag \u2794 Einde Run! \ud83c\udfc6 Opnieuw Spelen<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-74","page","type-page","status-publish","hentry"],"post_meta_fields":{"_edit_lock":["1772799509:2"]},"_links":{"self":[{"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/pages\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":5,"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/pages\/74\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/pages\/74\/revisions\/87"}],"wp:attachment":[{"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/media?parent=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":74,"date":"2026-03-06T09:36:47","date_gmt":"2026-03-06T09:36:47","guid":{"rendered":"https:\/\/ultrawaves.nl\/home\/?page_id=74"},"modified":"2026-03-06T12:18:31","modified_gmt":"2026-03-06T12:18:31","slug":"74-2","status":"publish","type":"page","link":"https:\/\/ultrawaves.nl\/home\/74-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n \n \n Beeldaspecten Quiz: The Game<\/title>\n <style>\n :root {\n --primary: #6366f1;\n --secondary: #a855f7;\n --accent: #f59e0b;\n --success: #22c55e;\n --danger: #ef4444;\n --bg: #0f172a;\n --card-bg: #1e293b;\n --text: #f8fafc;\n }\n\n body {\n font-family: 'Poppins', sans-serif;\n background: var(--bg);\n color: var(--text);\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n .game-container {\n width: 95%;\n max-width: 600px;\n perspective: 1000px;\n }\n\n .card {\n background: var(--card-bg);\n padding: 2rem;\n border-radius: 24px;\n box-shadow: 0 20px 50px rgba(0,0,0,0.5);\n border: 2px solid rgba(255,255,255,0.1);\n text-align: center;\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n\n \/* Stats Bar *\/\n .stats-bar {\n display: flex;\n justify-content: space-between;\n background: rgba(0,0,0,0.3);\n padding: 10px 20px;\n border-radius: 50px;\n margin-bottom: 20px;\n border: 1px solid var(--primary);\n }\n\n .stat { display: flex; align-items: center; gap: 8px; font-weight: bold; }\n .coin-icon { color: var(--accent); font-size: 1.2rem; }\n\n \/* Progress Bar *\/\n .progress-container {\n width: 100%;\n height: 10px;\n background: #334155;\n border-radius: 10px;\n margin: 20px 0;\n overflow: hidden;\n }\n .progress-fill {\n height: 100%;\n background: linear-gradient(90deg, var(--primary), var(--secondary));\n width: 0%;\n transition: width 0.5s ease;\n }\n\n \/* Buttons & Shop *\/\n .btn {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n color: white;\n border: none;\n padding: 15px 30px;\n border-radius: 12px;\n font-weight: bold;\n cursor: pointer;\n margin: 10px;\n transition: transform 0.2s, box-shadow 0.2s;\n text-transform: uppercase;\n letter-spacing: 1px;\n }\n .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(99, 102, 241, 0.4); }\n .btn:active { transform: translateY(0); }\n \n .btn-shop { background: var(--accent); color: #000; }\n\n \/* Quiz Styling *\/\n .option {\n background: #334155;\n padding: 15px;\n margin: 10px 0;\n border-radius: 12px;\n cursor: pointer;\n border: 2px solid transparent;\n transition: all 0.2s;\n display: block;\n text-align: left;\n }\n .option:hover { background: #475569; border-color: var(--primary); }\n .option.correct { background: var(--success) !important; animation: celebrate 0.5s; }\n .option.wrong { background: var(--danger) !important; animation: shake 0.4s; }\n\n \/* Power-ups *\/\n .powerups {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-top: 20px;\n }\n .power-btn {\n background: #1e293b;\n border: 1px solid var(--accent);\n color: var(--accent);\n padding: 8px 15px;\n border-radius: 8px;\n font-size: 0.8rem;\n cursor: pointer;\n }\n .power-btn:disabled { opacity: 0.3; cursor: not-allowed; }\n\n \/* Animations *\/\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-10px); }\n 75% { transform: translateX(10px); }\n }\n @keyframes celebrate {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.05); }\n 100% { transform: scale(1); }\n }\n\n .hidden { display: none; }\n .feedback-text { margin-top: 15px; font-style: italic; color: #cbd5e1; font-size: 0.9rem; }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"game-container\">\n <div id=\"game-stats\" class=\"stats-bar hidden\">\n <div class=\"stat\">\u2b50 <span id=\"current-score\">0<\/span><\/div>\n <div class=\"stat\"><span class=\"coin-icon\">\ud83d\udcb0<\/span> <span id=\"coins\">0<\/span><\/div>\n <div class=\"stat\">\ud83d\udd25 <span id=\"streak\">0<\/span><\/div>\n <\/div>\n\n <div id=\"home-page\" class=\"card\">\n <h1 style=\"font-size: 2.5rem; margin-bottom: 10px;\">\ud83c\udfa8 ART QUEST<\/h1>\n <p>Verdien munten, koop power-ups en word een meester in Beeldaspecten!<\/p>\n <div class=\"btn-container\">\n <button class=\"btn\" onclick=\"startGame('small')\">Short Run (5-10)<\/button>\n <button class=\"btn\" onclick=\"startGame('large')\">Marathon (Alle)<\/button>\n <br>\n <button class=\"btn btn-shop\" onclick=\"openAdmin()\">Admin Paneel<\/button>\n <\/div>\n <\/div>\n\n <div id=\"quiz-page\" class=\"card hidden\">\n <div class=\"progress-container\"><div id=\"progress-bar\" class=\"progress-fill\"><\/div><\/div>\n <h3 id=\"question-text\">Vraag komt hier…<\/h3>\n <div id=\"options-container\"><\/div>\n \n <div id=\"feedback-box\" class=\"feedback-text hidden\"><\/div>\n\n <div class=\"powerups\">\n <button id=\"btn-skip\" class=\"power-btn\" onclick=\"useSkip()\">\u23ed Skip Vraag (50 \ud83d\udcb0)<\/button>\n <button id=\"btn-hint\" class=\"power-btn\" onclick=\"useHint()\">\ud83d\udca1 Hint (30 \ud83d\udcb0)<\/button>\n <\/div>\n \n <button id=\"next-btn\" class=\"btn hidden\" onclick=\"nextQuestion()\">Volgende Vraag \u2794<\/button>\n <\/div>\n\n <div id=\"result-page\" class=\"card hidden\">\n <h2 id=\"result-title\">Einde Run!<\/h2>\n <div style=\"font-size: 3rem; margin: 20px 0;\">\ud83c\udfc6<\/div>\n <p id=\"final-stats\"><\/p>\n <button class=\"btn\" onclick=\"location.reload()\">Opnieuw Spelen<\/button>\n <\/div>\n<\/div>\n\n<script>\n \/\/ Database uit document [cite: 1-46]\n const database = [\n [\"Wat is de zon?\", [\"Natuurlijke lichtbron\", \"Kunstmatige lichtbron\", \"Slagschaduw\"], 0, \"De zon is een lichtbron die van nature voorkomt[cite: 2].\"],\n [\"Wat is een lamp?\", [\"Natuurlijke lichtbron\", \"Kunstmatige lichtbron\", \"Eigen schaduw\"], 1, \"Een lamp is door mensen gemaakt[cite: 3].\"],\n [\"Wat is schaduw op het voorwerp zelf?\", [\"Slagschaduw\", \"Eigen schaduw\", \"Afsnijding\"], 1, \"Eigen schaduw is op het object zelf te zien aan de kant die niet direct belicht wordt[cite: 5].\"],\n [\"Schaduw die een object op de grond werpt is...\", [\"Eigen schaduw\", \"Slagschaduw\", \"Kernschaduw\"], 1, \"Slagschaduw is de schaduw die een object op de omgeving werpt[cite: 6].\"],\n [\"Wat zijn Rood, Geel en Blauw?\", [\"Secundaire kleuren\", \"Primaire kleuren\", \"Tertiaire kleuren\"], 1, \"Primaire kleuren zijn de basiskleuren die niet gemengd kunnen worden[cite: 8].\"],\n [\"Oranje, Groen en Paars zijn...\", [\"Primaire kleuren\", \"Secundaire kleuren\", \"Onverzadigd\"], 1, \"Secundaire kleuren ontstaan door twee primaire kleuren te mengen[cite: 9].\"],\n [\"Kleuren gemengd met veel wit heten...\", [\"Verzadigd\", \"Monochroom\", \"Pastelkleuren\"], 2, \"Pastelkleuren zijn met veel wit verhelderd en zijn zachter[cite: 13, 14].\"],\n [\"Wat betekent monochroom?\", [\"Meerdere kleuren\", \"E\u00e9n kleur (met tinten)\", \"Geen kleur\"], 1, \"Monochroom gebruikt \u00e9\u00e9n kleur, eventueel met lichtere en donkerdere tinten[cite: 17].\"],\n [\"Rood en Groen naast elkaar is een...\", [\"Kwaliteitscontrast\", \"Complementair contrast\", \"Warm-koud contrast\"], 1, \"Complementair contrast ontstaat bij kleuren die tegenover elkaar liggen in de cirkel[cite: 20, 22].\"],\n [\"Blauwen zijn 'ver weg', roden zijn 'dichtbij'. Dit is...\", [\"Licht-donker contrast\", \"Warm-koud contrast\", \"Zwart-wit\"], 1, \"Warm-koud contrast speelt in op de temperatuurbeleving van kleuren[cite: 24, 25, 26].\"],\n [\"Verschil tussen verzadigd en dof heet...\", [\"Kwaliteitscontrast\", \"Licht-donker\", \"Kleurfamilie\"], 0, \"Kwaliteitscontrast gaat over het verschil in verzadiging of helderheid[cite: 31, 32].\"],\n [\"Vormen zoals bladeren en wolken zijn...\", [\"Geometrisch\", \"Organisch\", \"2-dimensionaal\"], 1, \"Organische vormen zijn natuurlijk, vloeiend en grillig[cite: 35].\"],\n [\"Vierkanten en cirkels zijn...\", [\"Geometrische vormen\", \"Organische vormen\", \"3D-vormen\"], 0, \"Geometrische vormen zijn wiskundige, scherpe of rechte vormen[cite: 36].\"],\n [\"Een tekening op papier is...\", [\"3-dimensionaal\", \"2-dimensionaal\", \"Ruimtelijk\"], 1, \"2D vormen hebben alleen breedte en hoogte zonder diepte[cite: 40].\"],\n [\"Een sculptuur of beeld is...\", [\"2-dimensionaal\", \"3-dimensionaal\", \"Vlak\"], 1, \"3D vormen hebben breedte, hoogte en diepte[cite: 41].\"],\n [\"Twee kanten die elkaars spiegelbeeld zijn...\", [\"Asymmetrisch\", \"Symmetrisch\", \"Overlapping\"], 1, \"Symmetrisch is aan beide kanten gelijk[cite: 42].\"],\n [\"Als vormen voor elkaar staan is er...\", [\"Afsnijding\", \"Overlapping\", \"Contrast\"], 1, \"Overlapping ontstaat als figuren elkaar gedeeltelijk afdekken[cite: 44].\"],\n [\"Als een deel buiten het kader valt heet dat...\", [\"Afsnijding\", \"Overlapping\", \"2D\"], 0, \"Afsnijding suggereert dat het tafereel buiten het schilderij doorloopt[cite: 45, 46].\"]\n ];\n\n let gameState = {\n questions: [],\n currentIndex: 0,\n score: 0,\n coins: 10,\n streak: 0,\n canAnswer: true\n };\n\n function startGame(mode) {\n let pool = [...database];\n pool.sort(() => Math.random() - 0.5);\n \n if(mode === 'small') {\n gameState.questions = pool.slice(0, Math.floor(Math.random() * 5) + 5);\n } else {\n gameState.questions = pool;\n }\n\n gameState.currentIndex = 0;\n gameState.score = 0;\n gameState.streak = 0;\n \n document.getElementById('home-page').classList.add('hidden');\n document.getElementById('game-stats').classList.remove('hidden');\n document.getElementById('quiz-page').classList.remove('hidden');\n updateStats();\n showQuestion();\n }\n\n function showQuestion() {\n gameState.canAnswer = true;\n const q = gameState.questions[gameState.currentIndex];\n document.getElementById('question-text').innerText = q[0];\n document.getElementById('feedback-box').classList.add('hidden');\n document.getElementById('next-btn').classList.add('hidden');\n \n const container = document.getElementById('options-container');\n container.innerHTML = '';\n \n q[1].forEach((opt, i) => {\n const div = document.createElement('div');\n div.className = 'option';\n div.innerText = opt;\n div.onclick = () => checkAnswer(i, div);\n container.appendChild(div);\n });\n\n const progress = ((gameState.currentIndex) \/ gameState.questions.length) * 100;\n document.getElementById('progress-bar').style.width = progress + \"%\";\n updateButtons();\n }\n\n function checkAnswer(idx, element) {\n if(!gameState.canAnswer) return;\n gameState.canAnswer = false;\n \n const q = gameState.questions[gameState.currentIndex];\n const feedback = document.getElementById('feedback-box');\n feedback.innerText = q[3];\n feedback.classList.remove('hidden');\n\n if(idx === q[2]) {\n element.classList.add('correct');\n gameState.score += 10;\n gameState.coins += 5;\n gameState.streak++;\n if(gameState.streak >= 3) gameState.coins += 5; \/\/ Streak bonus\n } else {\n element.classList.add('wrong');\n gameState.streak = 0;\n \/\/ Toon het juiste antwoord\n document.querySelectorAll('.option')[q[2]].classList.add('correct');\n }\n\n updateStats();\n document.getElementById('next-btn').classList.remove('hidden');\n }\n\n function nextQuestion() {\n gameState.currentIndex++;\n if(gameState.currentIndex < gameState.questions.length) {\n showQuestion();\n } else {\n showResults();\n }\n }\n\n function updateStats() {\n document.getElementById('current-score').innerText = gameState.score;\n document.getElementById('coins').innerText = gameState.coins;\n document.getElementById('streak').innerText = gameState.streak;\n }\n\n function updateButtons() {\n document.getElementById('btn-skip').disabled = gameState.coins < 50;\n document.getElementById('btn-hint').disabled = gameState.coins < 30;\n }\n\n function useSkip() {\n if(gameState.coins >= 50) {\n gameState.coins -= 50;\n updateStats();\n nextQuestion();\n }\n }\n\n function useHint() {\n if(gameState.coins >= 30 && gameState.canAnswer) {\n gameState.coins -= 30;\n const q = gameState.questions[gameState.currentIndex];\n const options = document.querySelectorAll('.option');\n \/\/ Verwijder 1 fout antwoord\n for(let i=0; i < options.length; i++) {\n if(i !== q[2]) {\n options[i].style.opacity = \"0.3\";\n options[i].onclick = null;\n break;\n }\n }\n updateStats();\n updateButtons();\n }\n }\n\n function showResults() {\n document.getElementById('quiz-page').classList.add('hidden');\n document.getElementById('result-page').classList.remove('hidden');\n document.getElementById('final-stats').innerText = `Eindscore: ${gameState.score} punten!`;\n }\n\n function openAdmin() {\n const ww = prompt(\"Wachtwoord?\");\n if(ww === \"Wachtwoord\") {\n alert(\"Je bent nu Admin! (In deze versie kun je vragen toevoegen in de code)\");\n }\n }\n<\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Beeldaspecten Quiz: The Game \u2b50 0 \ud83d\udcb0 0 \ud83d\udd25 0 \ud83c\udfa8 ART QUEST Verdien munten, koop power-ups en word een meester in Beeldaspecten! Short Run (5-10) Marathon (Alle) Admin Paneel Vraag komt hier… \u23ed Skip Vraag (50 \ud83d\udcb0) \ud83d\udca1 Hint (30 \ud83d\udcb0) Volgende Vraag \u2794 Einde Run! \ud83c\udfc6 Opnieuw Spelen<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-74","page","type-page","status-publish","hentry"],"post_meta_fields":{"_edit_lock":["1772799509:2"]},"_links":{"self":[{"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/pages\/74","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/comments?post=74"}],"version-history":[{"count":5,"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/pages\/74\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/pages\/74\/revisions\/87"}],"wp:attachment":[{"href":"https:\/\/ultrawaves.nl\/home\/wp-json\/wp\/v2\/media?parent=74"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}