{"id":6,"date":"2026-09-13T10:51:23","date_gmt":"2026-09-13T10:51:23","guid":{"rendered":"https:\/\/ozir.eu\/?page_id=6"},"modified":"2026-09-13T10:54:39","modified_gmt":"2026-09-13T10:54:39","slug":"6-2","status":"publish","type":"page","link":"https:\/\/ozir.eu\/index.php\/6-2\/","title":{"rendered":"Prehistorie Spelletjes"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"nl\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>\ud83e\uddb4Groep 7 van Yaseen Ozir<\/title>\n<style>\n*{box-sizing:border-box;margin:0;padding:0}\nbody{font-family:'Comic Sans MS',cursive,sans-serif;background:linear-gradient(135deg,#f5deb3,#deb887);min-height:100vh;padding:20px}\n.wrap{max-width:1000px;margin:0 auto;background:#fffaf0;border-radius:20px;padding:30px;box-shadow:0 10px 30px rgba(0,0,0,.2)}\nh1{color:#8b4513;text-align:center;margin-bottom:5px;font-size:32px}\n.sub{text-align:center;color:#666;margin-bottom:25px}\n.tabs{display:flex;justify-content:center;gap:8px;margin-bottom:25px;flex-wrap:wrap}\n.tab{padding:12px 18px;background:#f0e68c;border:none;border-radius:25px;cursor:pointer;font-weight:bold;font-size:14px;transition:.3s}\n.tab:hover{background:#daa520;transform:translateY(-2px)}\n.tab.on{background:#8b4513;color:#fff}\n.game{display:none;animation:fade .4s}\n.game.on{display:block}\n@keyframes fade{from{opacity:0}to{opacity:1}}\n\n\/* Memory *\/\n.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:600px;margin:15px auto}\n.card{aspect-ratio:1;perspective:1000px;cursor:pointer}\n.card-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:.6s}\n.card.flipped .card-in{transform:rotateY(180deg)}\n.front,.back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:10px;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;font-size:13px}\n.front{background:#8b4513;color:#fff;font-size:30px}\n.back{background:#fffaf0;transform:rotateY(180deg);border:2px solid #8b4513}\n.card.ok .back{background:#90ee90;border-color:green}\n\n\/* Quiz *\/\n.qbox{text-align:center;margin-bottom:15px}\n.qbox .emoji{font-size:80px;margin:15px 0}\n.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:600px;margin:0 auto}\n.opt{padding:15px;background:#f0e68c;border:2px solid transparent;border-radius:10px;cursor:pointer;font-size:15px;transition:.3s}\n.opt:hover{background:#daa520;transform:scale(1.03)}\n.opt.good{background:#90ee90;border-color:green}\n.opt.bad{background:#ffb6c1;border-color:red}\n.fb{text-align:center;font-size:22px;margin:15px 0;min-height:30px;font-weight:bold}\n.score{text-align:center;font-size:18px;margin:15px 0;color:#8b4513}\n.btn{display:block;margin:15px auto;padding:12px 28px;background:#8b4513;color:#fff;border:none;border-radius:25px;cursor:pointer;font-size:16px;font-family:inherit}\n.btn:hover{background:#a0522d}\n\n\/* Drag & Drop *\/\n.dragbar{text-align:center;margin:15px 0;padding:15px;background:#fffaf0;border-radius:10px;min-height:60px}\n.drag{padding:10px 15px;margin:4px;background:#f0e68c;border-radius:8px;cursor:grab;display:inline-block;font-size:14px;border:2px solid #daa520}\n.drag.dragging{opacity:.4}\n.zones{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:15px}\n.zone{min-height:180px;background:#fffaf0;border:3px dashed #8b4513;border-radius:10px;padding:12px}\n.zone h3{text-align:center;color:#8b4513;margin-bottom:10px;font-size:16px}\n.zone.over{background:#f0e68c}\n\n\/* Timeline *\/\n.tl-items{display:flex;flex-direction:column;gap:8px;max-width:450px;margin:15px auto}\n.tl-item{padding:15px;background:#f0e68c;border-radius:8px;cursor:pointer;border:2px solid #daa520;font-size:15px}\n.tl-item.sel{background:#daa520}\n.tl-item.correct{background:#90ee90;border-color:green}\n.tl-item.wrong{background:#ffb6c1;border-color:red}\n\n@media(max-width:600px){.opts,.zones{grid-template-columns:1fr}.grid{grid-template-columns:repeat(3,1fr)}}\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\">\n<h1>\ud83e\uddb4 Prehistorie Spelletjes<\/h1>\n<p class=\"sub\">Interactief oefenen \u2013 Tijd van Jagers en Boeren<\/p>\n\n<div class=\"tabs\">\n<button class=\"tab on\" data-g=\"quiz\">\ud83d\udcdd Quiz<\/button>\n<button class=\"tab\" data-g=\"memory\">\ud83e\udde0 Memory<\/button>\n<button class=\"tab\" data-g=\"drag\">\u270b Sleep &#038; Plak<\/button>\n<button class=\"tab\" data-g=\"tl\">\u23f0 Tijdlijn<\/button>\n<\/div>\n\n<!-- ============== QUIZ ============== -->\n<div id=\"quiz\" class=\"game on\">\n<h2 style=\"text-align:center;color:#8b4513;margin-bottom:10px\">Woorden-Quiz<\/h2>\n<div class=\"qbox\">\n<div class=\"emoji\" id=\"qEmoji\">\ud83e\udd8c<\/div>\n<p id=\"qText\" style=\"font-size:18px\"><\/p>\n<\/div>\n<div class=\"opts\" id=\"opts\"><\/div>\n<div class=\"fb\" id=\"qFb\"><\/div>\n<div class=\"score\">Score: <span id=\"qS\">0<\/span> \/ <span id=\"qT\">0<\/span><\/div>\n<button class=\"btn\" id=\"qNext\" onclick=\"nextQ()\">Volgende vraag \u2192<\/button>\n<\/div>\n\n<!-- ============== MEMORY ============== -->\n<div id=\"memory\" class=\"game\">\n<h2 style=\"text-align:center;color:#8b4513\">\ud83e\udde0 Memory<\/h2>\n<p style=\"text-align:center\">Klik twee kaarten \u2013 vind het woord bij de betekenis!<\/p>\n<div class=\"grid\" id=\"memGrid\"><\/div>\n<div class=\"score\">Paren: <span id=\"mS\">0<\/span> \/ 6<\/div>\n<button class=\"btn\" onclick=\"initMem()\">Opnieuw spelen \ud83d\udd04<\/button>\n<\/div>\n\n<!-- ============== DRAG & DROP ============== -->\n<div id=\"drag\" class=\"game\">\n<h2 style=\"text-align:center;color:#8b4513\">\u270b Sleep naar de juiste groep<\/h2>\n<div class=\"dragbar\" id=\"dragBar\">\n<div class=\"drag\" draggable=\"true\" data-g=\"jagers\">\ud83c\udff9 Rendierjager<\/div>\n<div class=\"drag\" draggable=\"true\" data-g=\"boeren\">\ud83c\udf3e Landbouw<\/div>\n<div class=\"drag\" draggable=\"true\" data-g=\"jagers\">\ud83c\udff9 Bosjager<\/div>\n<div class=\"drag\" draggable=\"true\" data-g=\"boeren\">\ud83d\udc04 Veeteelt<\/div>\n<div class=\"drag\" draggable=\"true\" data-g=\"jagers\">\ud83d\udeb6 Nomade<\/div>\n<div class=\"drag\" draggable=\"true\" data-g=\"boeren\">\ud83e\udea8 Hunebed<\/div>\n<\/div>\n<div class=\"zones\">\n<div class=\"zone\" data-z=\"jagers\"><h3>\ud83c\udff9 Tijd van Jagers<\/h3><\/div>\n<div class=\"zone\" data-z=\"boeren\"><h3>\ud83c\udf3e Tijd van Boeren<\/h3><\/div>\n<\/div>\n<div class=\"fb\" id=\"dFb\"><\/div>\n<\/div>\n\n<!-- ============== TIMELINE ============== -->\n<div id=\"tl\" class=\"game\">\n<h2 style=\"text-align:center;color:#8b4513\">\u23f0 Tijdlijn<\/h2>\n<p style=\"text-align:center\">Klik de gebeurtenissen in volgorde van <strong>oud \u2192 nieuw<\/strong><\/p>\n<div class=\"tl-items\" id=\"tlItems\"><\/div>\n<div class=\"fb\" id=\"tlFb\"><\/div>\n<button class=\"btn\" onclick=\"initTL()\">Opnieuw \ud83d\udd04<\/button>\n<\/div>\n\n<\/div>\n\n<script>\n\/* ===== TABS ===== *\/\ndocument.querySelectorAll('.tab').forEach(b=>b.onclick=()=>{\ndocument.querySelectorAll('.tab').forEach(x=>x.classList.remove('on'));\ndocument.querySelectorAll('.game').forEach(x=>x.classList.remove('on'));\nb.classList.add('on');\ndocument.getElementById(b.dataset.g).classList.add('on');\n});\n\n\/* ===== QUIZ ===== *\/\nconst Qs=[\n{e:\"\ud83e\udd8c\",q:\"Wat jaagt een rendierjager?\",o:[\"Vissen\",\"Rendieren\",\"Boeren\",\"Schapen\"],a:1},\n{e:\"\ud83e\udea8\",q:\"Wat is een hunebed?\",o:[\"Een hut\",\"Een stenen graf\",\"Een visval\",\"Een pijl\"],a:1},\n{e:\"\ud83c\udf3e\",q:\"Wat is l\u00f6ss?\",o:[\"Een vissoort\",\"Vruchtbare grond in Limburg\",\"Een jachtwapen\",\"Een pot\"],a:1},\n{e:\"\ud83d\udc04\",q:\"Wat is veeteelt?\",o:[\"Planten verbouwen\",\"Dieren houden\",\"Vissen vangen\",\"Graven\"],a:1},\n{e:\"\ud83d\udd04\",q:\"Wat is ruilhandel?\",o:[\"Betalen met munten\",\"Spullen ruilen\",\"Schrijven\",\"Jagen\"],a:1},\n{e:\"\ud83c\udfa8\",q:\"Wat is een grotschildering?\",o:[\"Een pot\",\"Een tekening op een rots\",\"Een werktuig\",\"Een graf\"],a:1},\n{e:\"\ud83d\udc68\u200d\ud83c\udf3e\",q:\"Wat doet een pottenbakker?\",o:[\"Jagen\",\"Potten maken\",\"Vissen\",\"Graven\"],a:1},\n{e:\"\ud83d\udd73\ufe0f\",q:\"Wat is een fuik?\",o:[\"Een hut\",\"Een visval\",\"Een pijl\",\"Een boog\"],a:1},\n{e:\"\u26fa\",q:\"Wat is een nomade?\",o:[\"Iemand met een vast huis\",\"Iemand die rondtrekt\",\"Een boer\",\"Een jager\"],a:1},\n{e:\"\ud83c\udffa\",q:\"Wat is een trechterbeker?\",o:[\"Een mantel\",\"Een pot met trechterhals\",\"Een werktuig\",\"Een pijl\"],a:1}\n];\nlet qi=0,qs=0,qt=0;\nfunction loadQ(){\nif(qi>=Qs.length){document.getElementById('qText').innerHTML=\"\ud83c\udf89 Klaar! Je score: \"+qs+\"\/\"+qt;document.getElementById('qEmoji').textContent=\"\ud83c\udfc6\";document.getElementById('opts').innerHTML=\"\";document.getElementById('qNext').style.display='none';return}\nqt++;\nconst x=Qs[qi];\ndocument.getElementById('qEmoji').textContent=x.e;\ndocument.getElementById('qText').textContent=x.q;\nconst o=document.getElementById('opts');o.innerHTML=\"\";\ndocument.getElementById('qFb').textContent=\"\";\nx.o.forEach((t,i)=>{\nconst d=document.createElement('div');d.className='opt';d.textContent=t;\nd.onclick=()=>{\ndocument.querySelectorAll('.opt').forEach(y=>y.style.pointerEvents='none');\nif(i===x.a){d.classList.add('good');qs++;document.getElementById('qFb').textContent=\"\u2705 Goed!\"}\nelse{d.classList.add('bad');document.querySelectorAll('.opt')[x.a].classList.add('good');document.getElementById('qFb').textContent=\"\u274c Helaas, het juiste antwoord is groen.\"}\ndocument.getElementById('qS').textContent=qs;document.getElementById('qT').textContent=qt;\n};\no.appendChild(d);\n});\n}\nfunction nextQ(){qi++;loadQ();}\nloadQ();\n\n\/* ===== MEMORY ===== *\/\nconst Mem=[\n{w:\"Nomade\",d:\"Trekt rond, geen vast huis\"},\n{w:\"Hunebed\",d:\"Stenen graf\"},\n{w:\"L\u00f6ss\",d:\"Vruchtbare Limburgse grond\"},\n{w:\"Veeteelt\",d:\"Dieren houden\"},\n{w:\"Fuik\",d:\"Visval\"},\n{w:\"Ruilhandel\",d:\"Spullen ruilen, geen geld\"}\n];\nlet memOpen=[],memDone=0;\nfunction initMem(){\nmemDone=0;document.getElementById('mS').textContent=0;\nconst g=document.getElementById('memGrid');g.innerHTML=\"\";\nlet cards=[...Mem.map(m=>({t:m.w,p:true})),...Mem.map(m=>({t:m.d,p:false}))];\ncards.sort(()=>Math.random()-.5);\ncards.forEach((c,i)=>{\nconst el=document.createElement('div');el.className='card';\nel.innerHTML=`<div class=\"card-in\"><div class=\"front\">?<\/div><div class=\"back\">${c.t}<\/div><\/div>`;\nel.onclick=()=>{\nif(memOpen.length===2||el.classList.contains('flipped'))return;\nel.classList.add('flipped');memOpen.push(el);\nif(memOpen.length===2){\nconst a=memOpen[0].querySelector('.back').textContent;\nconst b=memOpen[1].querySelector('.back').textContent;\nconst pair=Mem.find(m=>m.w===a&&m.d===b||m.w===b&&m.d===a);\nsetTimeout(()=>{\nif(pair){memOpen.forEach(x=>{x.classList.add('ok')});memDone++;document.getElementById('mS').textContent=memDone}\nmemOpen=[];\n},600);\n}};\ng.appendChild(el);\n});\n}\ninitMem();\n\n\/* ===== DRAG & DROP ===== *\/\nlet draggedEl=null;\ndocument.querySelectorAll('.drag').forEach(d=>{\nd.ondragstart=e=>{draggedEl=d;d.classList.add('dragging')};\nd.ondragend=()=>d.classList.remove('dragging');\n});\ndocument.querySelectorAll('.zone').forEach(z=>{\nz.ondragover=e=>{e.preventDefault();z.classList.add('over')};\nz.ondragleave=()=>z.classList.remove('over');\nz.ondrop=e=>{\ne.preventDefault();z.classList.remove('over');\nif(!draggedEl)return;\nconst ok=draggedEl.dataset.g===z.dataset.z;\nz.appendChild(draggedEl);\nif(ok){draggedEl.style.background='#90ee90';draggedEl.style.borderColor='green'}\nelse{draggedEl.style.background='#ffb6c1';draggedEl.style.borderColor='red'}\ndraggedEl=null;\ncheckDrag();\n};\n});\nfunction checkDrag(){\nconst left=document.querySelectorAll('#dragBar .drag').length;\nif(left===0){\nconst wrong=document.querySelectorAll('.zone .drag[style*=\"ffb6c1\"]').length;\ndocument.getElementById('dFb').textContent=wrong===0?\"\ud83c\udf89 Alles goed!\":\"\u274c Er zijn fouten \u2013 probeer opnieuw\";\n}}\n\n\/* ===== TIMELINE ===== *\/\nconst TL=[\n{t:\"Steentijd (jagers)\",y:12000},\n{t:\"Steentijd (boeren)\",y:5000},\n{t:\"Bronstijd\",y:3500},\n{t:\"IJzertijd\",y:2800}\n];\nlet tlSel=[],tlIdx=0;\nfunction initTL(){\ntlSel=[];tlIdx=0;\ndocument.getElementById('tlFb').textContent=\"\";\nconst list=[...TL].sort(()=>Math.random()-.5);\nconst box=document.getElementById('tlItems');box.innerHTML=\"\";\nlist.forEach(it=>{\nconst d=document.createElement('div');d.className='tl-item';d.textContent=it.t;\nd.onclick=()=>{\nif(d.classList.contains('correct')||d.classList.contains('wrong'))return;\nd.classList.add('sel');\ntlSel.push(d);\nif(tlSel.length===2){\nconst a=tlSel[0],b=tlSel[1];\nconst ya=TL.find(x=>x.t===a.textContent).y;\nconst yb=TL.find(x=>x.t===b.textContent).y;\nif(ya<yb){a.classList.add('correct');b.classList.add('correct')}\nelse{a.classList.add('wrong');b.classList.add('wrong');\nsetTimeout(()=>{a.classList.remove('wrong','sel');b.classList.remove('wrong','sel')},800)}\ntlSel=[];\nif(document.querySelectorAll('.tl-item.correct').length===TL.length)\ndocument.getElementById('tlFb').textContent=\"\ud83c\udf89 Tijdlijn compleet!\";\n}};\nbox.appendChild(d);\n});\n}\ninitTL();\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\ud83e\uddb4Groep 7 van Yaseen Ozir \ud83e\uddb4 Prehistorie Spelletjes Interactief oefenen \u2013 Tijd van Jagers en Boeren \ud83d\udcdd Quiz \ud83e\udde0 Memory \u270b Sleep &#038; Plak \u23f0 Tijdlijn Woorden-Quiz \ud83e\udd8c Score: 0 \/ 0 Volgende vraag \u2192 \ud83e\udde0 Memory Klik twee kaarten \u2013 vind het woord bij de betekenis! Paren: 0 \/ 6 Opnieuw spelen \ud83d\udd04 \u270b [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ozir.eu\/index.php\/wp-json\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ozir.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ozir.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ozir.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ozir.eu\/index.php\/wp-json\/wp\/v2\/comments?post=6"}],"version-history":[{"count":2,"href":"https:\/\/ozir.eu\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":9,"href":"https:\/\/ozir.eu\/index.php\/wp-json\/wp\/v2\/pages\/6\/revisions\/9"}],"wp:attachment":[{"href":"https:\/\/ozir.eu\/index.php\/wp-json\/wp\/v2\/media?parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}