{"id":2712,"date":"2026-05-20T17:22:36","date_gmt":"2026-05-20T17:22:36","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?p=2712"},"modified":"2026-06-16T16:13:02","modified_gmt":"2026-06-16T16:13:02","slug":"woordspelletjes","status":"publish","type":"post","link":"https:\/\/withifi.muhubonurture.nl\/?p=2712","title":{"rendered":"Woordspelletjes"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2712\" class=\"elementor elementor-2712\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dfe9d08 e-con-full e-flex e-con e-parent\" data-id=\"dfe9d08\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a83a26 elementor-widget elementor-widget-html\" data-id=\"4a83a26\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\nbody{\r\n  margin:0;\r\n  font-family:'Inter',sans-serif;\r\n}\r\n\r\n.woordspel-page{\r\n  min-height:100vh;\r\n  padding:7rem 7vw 4rem;\r\n  color:#3A2B24;\r\n\r\n  background:\r\n    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.78) 0%, transparent 30%),\r\n    radial-gradient(circle at 82% 28%, rgba(255,225,234,0.38) 0%, transparent 32%),\r\n    radial-gradient(circle at 50% 82%, rgba(255,244,228,0.42) 0%, transparent 36%),\r\n    linear-gradient(135deg,#FFF7F8 0%,#FFF0EA 45%,#FFF8ED 100%);\r\n}\r\n\r\n.hero-box{\r\n  max-width:980px;\r\n  margin:0 auto 3.5rem;\r\n  padding:3.4rem;\r\n  border-radius:42px;\r\n  background:rgba(255,255,255,0.62);\r\n  border:1px solid rgba(255,255,255,0.96);\r\n  box-shadow:0 16px 42px rgba(90,70,55,0.08);\r\n  backdrop-filter:blur(16px);\r\n  -webkit-backdrop-filter:blur(16px);\r\n  text-align:center;\r\n}\r\n\r\n.label{\r\n  display:inline-block;\r\n  margin-bottom:22px;\r\n  padding:11px 20px;\r\n  border-radius:999px;\r\n  background:rgba(255,255,255,0.72);\r\n  border:1px solid rgba(255,255,255,0.95);\r\n  color:#8B6B55;\r\n  font-size:15px;\r\n  font-weight:900;\r\n}\r\n\r\n.hero-box h1{\r\n  font-size:clamp(44px,6vw,74px);\r\n  line-height:1;\r\n  margin:0 0 24px;\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n}\r\n\r\n.hero-box p{\r\n  font-size:19px;\r\n  line-height:1.9;\r\n  color:#7A6455;\r\n  font-weight:650;\r\n  max-width:760px;\r\n  margin:0 auto;\r\n}\r\n\r\n.games-box{\r\n  max-width:1120px;\r\n  margin:0 auto 4rem;\r\n}\r\n\r\n.games-box::before{\r\n  content:\"\ud83c\udfae Kies een woordspelletje\";\r\n  display:block;\r\n  font-size:clamp(32px,4vw,48px);\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n  margin:0 0 .7rem;\r\n}\r\n\r\n.games-box::after{\r\n  content:\"Kies \u00e9\u00e9n spel. Je hoeft niet alles tegelijk te doen. Rustig spelen is ook leren.\";\r\n  display:block;\r\n  font-size:18px;\r\n  line-height:1.8;\r\n  color:#7A6455;\r\n  font-weight:650;\r\n  max-width:820px;\r\n  margin:0 0 1.7rem;\r\n}\r\n\r\n.games-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n  gap:1.4rem;\r\n}\r\n\r\n.game-card{\r\n  min-height:190px;\r\n  padding:1.8rem;\r\n  border-radius:34px;\r\n  background:rgba(255,255,255,0.58);\r\n  border:1px solid rgba(255,255,255,0.94);\r\n  box-shadow:0 10px 28px rgba(90,70,55,0.06);\r\n  cursor:pointer;\r\n  transition:.25s ease;\r\n  color:#3A2B24;\r\n  position:relative;\r\n  overflow:hidden;\r\n}\r\n\r\n.game-card::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  right:-42px;\r\n  top:-42px;\r\n  width:128px;\r\n  height:128px;\r\n  border-radius:50%;\r\n  background:rgba(255,255,255,0.52);\r\n}\r\n\r\n.game-card:hover{\r\n  transform:translateY(-6px) scale(1.01);\r\n  background:rgba(255,255,255,0.78);\r\n  box-shadow:0 18px 38px rgba(90,70,55,0.12);\r\n}\r\n\r\n.game-card:nth-child(1){background:rgba(255,246,230,0.74);}\r\n.game-card:nth-child(2){background:rgba(255,232,238,0.72);}\r\n.game-card:nth-child(3){background:rgba(238,247,243,0.72);}\r\n.game-card:nth-child(4){background:rgba(255,250,232,0.74);}\r\n.game-card:nth-child(5){background:rgba(235,245,255,0.74);}\r\n\r\n.game-icon{\r\n  width:58px;\r\n  height:58px;\r\n  border-radius:22px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  background:rgba(255,255,255,0.72);\r\n  box-shadow:0 8px 20px rgba(90,70,55,0.08);\r\n  margin-bottom:1.2rem;\r\n  font-size:1.7rem;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n.game-card h2{\r\n  margin:0 0 .8rem;\r\n  font-size:1.22rem;\r\n  font-weight:900;\r\n  color:#3A2B24;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n.game-card p{\r\n  margin:0;\r\n  font-size:1rem;\r\n  line-height:1.8;\r\n  color:#7A6455;\r\n  font-weight:650;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n.play-area{\r\n  display:none;\r\n  max-width:1120px;\r\n  margin:0 auto 4rem;\r\n  padding:2.6rem;\r\n  border-radius:40px;\r\n  background:rgba(255,255,255,.82);\r\n  border:1px solid rgba(255,255,255,.96);\r\n  box-shadow:0 18px 44px rgba(90,70,55,.09);\r\n}\r\n\r\n.play-area.active{\r\n  display:block;\r\n  animation:fadeIn .4s ease;\r\n}\r\n\r\n@keyframes fadeIn{\r\n  from{opacity:0;transform:translateY(12px);}\r\n  to{opacity:1;transform:translateY(0);}\r\n}\r\n\r\n.game-header{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:center;\r\n  gap:1rem;\r\n  margin-bottom:2rem;\r\n}\r\n\r\n.game-header h2{\r\n  margin:0;\r\n  font-size:clamp(32px,4vw,50px);\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n}\r\n\r\n#gameIntro{\r\n  color:#7A6455;\r\n  font-size:18px;\r\n  line-height:1.8;\r\n  font-weight:650;\r\n  margin-bottom:2rem;\r\n}\r\n\r\n.back-btn,\r\n.choice-btn,\r\n.check-btn,\r\n.new-btn{\r\n  border:3px solid #7CB8E4 !important;\r\n  padding:1rem 1.4rem;\r\n  border-radius:999px;\r\n  background:#fff !important;\r\n  color:#3A2B24 !important;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n  transition:.25s ease;\r\n  font-family:'Inter',sans-serif;\r\n  box-shadow:0 9px 20px rgba(90,70,55,.08);\r\n}\r\n\r\n.back-btn:hover,\r\n.choice-btn:hover,\r\n.check-btn:hover,\r\n.new-btn:hover{\r\n  transform:translateY(-3px);\r\n  background:#DDEFFF !important;\r\n}\r\n\r\n.question-card{\r\n  padding:2rem;\r\n  border-radius:34px;\r\n  background:#EEF7FE;\r\n  border:1px solid rgba(255,255,255,0.92);\r\n  margin-bottom:1.5rem;\r\n  text-align:center;\r\n}\r\n\r\n.question{\r\n  font-size:clamp(28px,4vw,46px);\r\n  font-weight:900;\r\n  line-height:1.45;\r\n  margin-bottom:1rem;\r\n  color:#3A2B24;\r\n}\r\n\r\n.help{\r\n  font-size:1.05rem;\r\n  line-height:1.8;\r\n  color:#7A6455;\r\n  margin-bottom:1.5rem;\r\n  font-weight:650;\r\n}\r\n\r\n.choices{\r\n  display:grid;\r\n  grid-template-columns:repeat(2,1fr);\r\n  gap:1rem;\r\n}\r\n\r\n.choice-btn{\r\n  min-height:72px;\r\n  font-size:1.05rem;\r\n}\r\n\r\n.choice-btn.good{\r\n  background:#DDF5E4 !important;\r\n  border-color:#4E9B68 !important;\r\n  color:#2F6A46 !important;\r\n}\r\n\r\n.choice-btn.wrong{\r\n  background:#FFE3E3 !important;\r\n  border-color:#D98585 !important;\r\n  color:#9A4B4B !important;\r\n}\r\n\r\n.choice-btn:disabled{\r\n  cursor:default;\r\n}\r\n\r\n.feedback{\r\n  display:none;\r\n  margin-top:1.2rem;\r\n  padding:1rem;\r\n  border-radius:20px;\r\n  background:rgba(255,255,255,0.72);\r\n  color:#7A6455;\r\n  font-weight:800;\r\n  line-height:1.7;\r\n}\r\n\r\n.progress-wrap{\r\n  margin-bottom:2rem;\r\n}\r\n\r\n.progress-text{\r\n  margin-bottom:.7rem;\r\n  font-weight:900;\r\n  color:#7A6455;\r\n}\r\n\r\n.progress-bar{\r\n  height:18px;\r\n  border-radius:999px;\r\n  overflow:hidden;\r\n  background:rgba(255,255,255,0.7);\r\n}\r\n\r\n.progress-fill{\r\n  width:0%;\r\n  height:100%;\r\n  background:#FFEAF2;\r\n  border-radius:999px;\r\n  transition:.3s ease;\r\n}\r\n\r\n.finish-box{\r\n  display:none;\r\n  margin-top:2rem;\r\n  padding:2rem;\r\n  border-radius:30px;\r\n  background:#DDF5E4;\r\n  color:#2F6A46;\r\n  font-weight:900;\r\n  line-height:1.8;\r\n  text-align:center;\r\n}\r\n\r\n.zoeker-layout{\r\n  display:grid;\r\n  grid-template-columns:260px 1fr;\r\n  gap:1.5rem;\r\n  align-items:start;\r\n}\r\n\r\n.zoekwoorden-rij{\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:.55rem;\r\n}\r\n\r\n.zoekwoord-pill{\r\n  padding:.55rem .8rem;\r\n  border-radius:999px;\r\n  background:#fff;\r\n  color:#3A2B24;\r\n  font-size:.9rem;\r\n  font-weight:900;\r\n  border:2px solid rgba(124,184,228,0.35);\r\n}\r\n\r\n.zoekwoord-pill.gevonden{\r\n  background:#DDF5E4;\r\n  color:#2F6A46;\r\n  text-decoration:line-through;\r\n}\r\n\r\n.word-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(10,1fr);\r\n  gap:.28rem;\r\n  max-width:520px;\r\n}\r\n\r\n.word-cell{\r\n  aspect-ratio:1;\r\n  min-height:34px;\r\n  border-radius:10px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  background:rgba(255,255,255,0.82);\r\n  font-size:clamp(.8rem,1.7vw,1.05rem);\r\n  font-weight:900;\r\n  color:#3A2B24;\r\n  cursor:pointer;\r\n  transition:.2s ease;\r\n}\r\n\r\n.word-cell:hover{\r\n  background:#FFEAF2;\r\n}\r\n\r\n.word-cell.selected{\r\n  background:#FFEAF2;\r\n}\r\n\r\n.word-cell.found{\r\n  background:#DDF5E4;\r\n  color:#2F6A46;\r\n}\r\n\r\n.input-row{\r\n  display:flex;\r\n  gap:1rem;\r\n  flex-wrap:wrap;\r\n  justify-content:center;\r\n}\r\n\r\n.answer-input{\r\n  flex:1;\r\n  min-width:220px;\r\n  padding:1rem 1.2rem;\r\n  border-radius:20px;\r\n  border:3px solid #7CB8E4;\r\n  font-size:1.05rem;\r\n  font-family:'Inter',sans-serif;\r\n  color:#3A2B24;\r\n  outline:none;\r\n}\r\n\r\n.woordspel-note{\r\n  max-width:780px;\r\n  margin:4rem auto 0;\r\n  padding:2rem;\r\n  border-radius:30px;\r\n\r\n  background:\r\n    radial-gradient(circle at 12% 18%, rgba(255,255,255,.85) 0%, transparent 34%),\r\n    radial-gradient(circle at 88% 22%, rgba(255,234,242,.58) 0%, transparent 34%),\r\n    linear-gradient(135deg,#FFF8EF 0%,#F3FBF8 48%,#EEF7FE 100%);\r\n\r\n  border:1px solid rgba(255,255,255,0.94);\r\n  box-shadow:\r\n    0 16px 38px rgba(90,70,55,.08),\r\n    inset 0 1px 0 rgba(255,255,255,.75);\r\n\r\n  color:#5F4B3F;\r\n  font-size:18px;\r\n  line-height:1.9;\r\n  font-weight:650;\r\n  text-align:center;\r\n}\r\n\r\n@media(max-width:900px){\r\n  .woordspel-page{\r\n    padding:5rem 6vw 3rem;\r\n  }\r\n\r\n  .hero-box,\r\n  .play-area{\r\n    padding:2rem;\r\n  }\r\n\r\n  .games-grid,\r\n  .choices{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .zoeker-layout{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .zoekwoorden-rij{\r\n    flex-direction:row;\r\n    flex-wrap:wrap;\r\n  }\r\n\r\n  .word-grid{\r\n    grid-template-columns:repeat(10,1fr);\r\n    max-width:100%;\r\n  }\r\n\r\n  .word-cell{\r\n    min-height:28px;\r\n    border-radius:8px;\r\n  }\r\n\r\n  .game-header{\r\n    flex-direction:column;\r\n    align-items:flex-start;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"woordspel-page\">\r\n\r\n<div class=\"hero-box\">\r\n  <div class=\"label\">\ud83c\udf38 Woordspelletjes<\/div>\r\n\r\n  <h1>Spelen met woorden.<\/h1>\r\n\r\n  <p>\r\n    Hier mag je rustig ontdekken, zoeken, kijken, luisteren en proberen.\r\n    Geen haast. Gewoon stap voor stap spelen met taal \ud83c\udf3f\r\n  <\/p>\r\n<\/div>\r\n\r\n<div class=\"games-box\" id=\"gamesMenu\">\r\n\r\n  <div class=\"games-grid\">\r\n\r\n    <div class=\"game-card\" onclick=\"startGame('zoeker')\">\r\n      <div class=\"game-icon\">\ud83d\udd0e<\/div>\r\n      <h2>Woordzoeker<\/h2>\r\n      <p>\r\n        Zoek 15 woorden tussen de letters.\r\n        Elke keer krijg je weer andere woorden.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"game-card\" onclick=\"startGame('klinkers')\">\r\n      <div class=\"game-icon\">\ud83d\udd24<\/div>\r\n      <h2>Klinker kiezen<\/h2>\r\n      <p>\r\n        Welke klinker hoort in het woord?\r\n        Kijk en luister rustig mee.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"game-card\" onclick=\"startGame('bouwen')\">\r\n      <div class=\"game-icon\">\ud83e\udde9<\/div>\r\n      <h2>Woord bouwen<\/h2>\r\n      <p>\r\n        Maak woorden met losse letters.\r\n        Stap voor stap.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"game-card\" onclick=\"startGame('sorteren')\">\r\n      <div class=\"game-icon\">\ud83d\udce6<\/div>\r\n      <h2>Sorteer de woorden<\/h2>\r\n      <p>\r\n        Welke woorden horen bij elkaar?\r\n        Kies rustig.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"game-card\" onclick=\"startGame('klanken')\">\r\n      <div class=\"game-icon\">\ud83c\udfa7<\/div>\r\n      <h2>Lange & korte klanken<\/h2>\r\n      <p>\r\n        Wat hoor je?\r\n        Welke klank klopt?\r\n      <\/p>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"play-area\" id=\"playArea\">\r\n\r\n  <div class=\"game-header\">\r\n    <h2 id=\"gameTitle\">Spel<\/h2>\r\n\r\n    <button class=\"back-btn\" onclick=\"backToMenu()\">\r\n      Terug naar spelletjes\r\n    <\/button>\r\n  <\/div>\r\n\r\n  <p id=\"gameIntro\"><\/p>\r\n\r\n  <div class=\"progress-wrap\">\r\n    <div class=\"progress-text\" id=\"progressText\">\r\n      Vraag 1 van 12\r\n    <\/div>\r\n\r\n    <div class=\"progress-bar\">\r\n      <div class=\"progress-fill\" id=\"progressFill\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div id=\"gameContent\"><\/div>\r\n\r\n  <div class=\"finish-box\" id=\"finishBox\">\r\n    \ud83c\udf38 Prachtig gedaan.\r\n    Je hebt rustig geoefend.\r\n\r\n    <br><br>\r\n\r\n    <button class=\"new-btn\" onclick=\"restartGame()\">\r\n      Nog een ronde \ud83c\udf3f\r\n    <\/button>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"woordspel-note\">\r\n  Kleine reminder \ud83c\udf38<br>\r\n  Spelen met woorden hoeft niet perfect.\r\n  Kijken, proberen en opnieuw ontdekken is ook leren.\r\n<\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\nlet currentGame = '';\r\nlet currentQuestions = [];\r\nlet currentIndex = 0;\r\nlet answered = false;\r\n\r\nlet gekozenLetters = '';\r\nlet gevondenWoorden = [];\r\nlet geselecteerdeCellen = [];\r\n\r\nfunction random(min,max){\r\n  return Math.floor(Math.random()*(max-min+1))+min;\r\n}\r\n\r\nfunction shuffle(array){\r\n  return array\r\n  .map(value=>({value,sort:Math.random()}))\r\n  .sort((a,b)=>a.sort-b.sort)\r\n  .map(({value})=>value);\r\n}\r\n\r\nfunction veiligTekst(tekst){\r\n  return String(tekst)\r\n  .replace(\/&\/g,'&amp;')\r\n  .replace(\/<\/g,'&lt;')\r\n  .replace(\/>\/g,'&gt;')\r\n  .replace(\/\"\/g,'&quot;');\r\n}\r\n\r\nfunction bewaarWoordzoekerSet(woorden){\r\n  let geschiedenis = JSON.parse(localStorage.getItem('woordzoekerGeschiedenis15') || '[]');\r\n\r\n  geschiedenis.push(woorden.join('-'));\r\n\r\n  if(geschiedenis.length > 20){\r\n    geschiedenis = geschiedenis.slice(geschiedenis.length - 20);\r\n  }\r\n\r\n  localStorage.setItem('woordzoekerGeschiedenis15',JSON.stringify(geschiedenis));\r\n}\r\n\r\nfunction isWoordzoekerSetAlGeweest(woorden){\r\n  let geschiedenis = JSON.parse(localStorage.getItem('woordzoekerGeschiedenis15') || '[]');\r\n  return geschiedenis.includes(woorden.join('-'));\r\n}\r\n\r\nfunction startGame(game){\r\n  currentGame = game;\r\n  currentIndex = 0;\r\n  answered = false;\r\n  gekozenLetters = '';\r\n  gevondenWoorden = [];\r\n  geselecteerdeCellen = [];\r\n\r\n  document.getElementById('gamesMenu').style.display='none';\r\n  document.getElementById('playArea').classList.add('active');\r\n  document.getElementById('finishBox').style.display='none';\r\n\r\n  if(game === 'zoeker'){\r\n    document.getElementById('gameTitle').innerText='\ud83d\udd0e Woordzoeker';\r\n    document.getElementById('gameIntro').innerText='Zoek rustig alle 15 woorden uit het rijtje.';\r\n    currentQuestions = maakWoordzoeker();\r\n  }\r\n\r\n  if(game === 'klinkers'){\r\n    document.getElementById('gameTitle').innerText='\ud83d\udd24 Klinker kiezen';\r\n    document.getElementById('gameIntro').innerText='Welke klinker hoort in het woord?';\r\n    currentQuestions = maakKlinkerVragen();\r\n  }\r\n\r\n  if(game === 'bouwen'){\r\n    document.getElementById('gameTitle').innerText='\ud83e\udde9 Woord bouwen';\r\n    document.getElementById('gameIntro').innerText='Maak woorden met losse letters.';\r\n    currentQuestions = maakBouwVragen();\r\n  }\r\n\r\n  if(game === 'sorteren'){\r\n    document.getElementById('gameTitle').innerText='\ud83d\udce6 Sorteer de woorden';\r\n    document.getElementById('gameIntro').innerText='Welke woorden horen bij elkaar?';\r\n    currentQuestions = maakSorteerVragen();\r\n  }\r\n\r\n  if(game === 'klanken'){\r\n    document.getElementById('gameTitle').innerText='\ud83c\udfa7 Lange & korte klanken';\r\n    document.getElementById('gameIntro').innerText='Welke klank hoor je?';\r\n    currentQuestions = maakKlankVragen();\r\n  }\r\n\r\n  toonVraag();\r\n}\r\n\r\nfunction restartGame(){\r\n  startGame(currentGame);\r\n}\r\n\r\nfunction backToMenu(){\r\n  document.getElementById('playArea').classList.remove('active');\r\n  document.getElementById('gamesMenu').style.display='block';\r\n\r\n  window.scrollTo({\r\n    top:document.getElementById('gamesMenu').offsetTop - 40,\r\n    behavior:'smooth'\r\n  });\r\n}\r\n\r\nfunction toonVraag(){\r\n  answered = false;\r\n\r\n  const vraag = currentQuestions[currentIndex];\r\n\r\n  document.getElementById('progressText').innerText =\r\n  'Vraag ' + (currentIndex+1) + ' van ' + currentQuestions.length;\r\n\r\n  document.getElementById('progressFill').style.width =\r\n  ((currentIndex)\/currentQuestions.length*100)+'%';\r\n\r\n  let html = '';\r\n\r\n  if(vraag.type === 'choice'){\r\n    let knoppen='';\r\n\r\n    vraag.opties.forEach(optie=>{\r\n      knoppen += `\r\n      <button\r\n      class=\"choice-btn\"\r\n      onclick=\"checkChoice(this,'${veiligTekst(optie)}','${veiligTekst(vraag.antwoord)}')\">\r\n      ${veiligTekst(optie)}\r\n      <\/button>\r\n      `;\r\n    });\r\n\r\n    html = `\r\n    <div class=\"question-card\">\r\n      <div class=\"question\">${vraag.vraag}<\/div>\r\n      <div class=\"help\">${vraag.hulp}<\/div>\r\n      <div class=\"choices\">${knoppen}<\/div>\r\n      <div class=\"feedback\" id=\"feedback\"><\/div>\r\n    <\/div>\r\n    `;\r\n  }\r\n\r\n  if(vraag.type === 'input'){\r\n    html = `\r\n    <div class=\"question-card\">\r\n      <div class=\"question\">${vraag.vraag}<\/div>\r\n      <div class=\"help\">${vraag.hulp}<\/div>\r\n\r\n      <div class=\"input-row\">\r\n        <input class=\"answer-input\" id=\"answerInput\" placeholder=\"Typ je antwoord hier...\">\r\n\r\n        <button\r\n        class=\"check-btn\"\r\n        onclick=\"checkInput('${veiligTekst(vraag.antwoord)}')\">\r\n        Nakijken\r\n        <\/button>\r\n      <\/div>\r\n\r\n      <div class=\"feedback\" id=\"feedback\"><\/div>\r\n    <\/div>\r\n    `;\r\n  }\r\n\r\n  if(vraag.type === 'zoeker'){\r\n    gekozenLetters = '';\r\n    gevondenWoorden = [];\r\n    geselecteerdeCellen = [];\r\n\r\n    document.getElementById('progressText').innerText = '0 van 15 woorden gevonden';\r\n    document.getElementById('progressFill').style.width = '0%';\r\n\r\n    let woordenRij = vraag.woorden.map(woord=>{\r\n      return `<span class=\"zoekwoord-pill\" data-woord=\"${woord}\">${woord}<\/span>`;\r\n    }).join('');\r\n\r\n    html = `\r\n    <div class=\"question-card\">\r\n\r\n      <div class=\"question\">\r\n        \ud83d\udd0e Zoek deze 15 woorden\r\n      <\/div>\r\n\r\n      <div class=\"help\">\r\n        Klik rustig op de letters. De woorden staan van links naar rechts of van boven naar beneden \ud83c\udf3f\r\n      <\/div>\r\n\r\n      <div class=\"zoeker-layout\">\r\n\r\n        <div class=\"zoekwoorden-rij\">\r\n          ${woordenRij}\r\n        <\/div>\r\n\r\n        <div class=\"word-grid\">\r\n          ${vraag.grid}\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"feedback\" id=\"feedback\"><\/div>\r\n\r\n    <\/div>\r\n    `;\r\n  }\r\n\r\n  document.getElementById('gameContent').innerHTML = html;\r\n}\r\n\r\nfunction checkChoice(btn,keuze,antwoord){\r\n  if(answered){\r\n    return;\r\n  }\r\n\r\n  answered = true;\r\n\r\n  const buttons = document.querySelectorAll('.choice-btn');\r\n  const feedback = document.getElementById('feedback');\r\n\r\n  buttons.forEach(b=>{\r\n    b.disabled = true;\r\n  });\r\n\r\n  feedback.style.display='block';\r\n\r\n  if(keuze === antwoord){\r\n    btn.classList.add('good');\r\n    feedback.innerHTML='\ud83c\udf38 Goed gezien. Dat klopt helemaal.';\r\n  }else{\r\n    btn.classList.add('wrong');\r\n\r\n    buttons.forEach(b=>{\r\n      if(b.textContent.trim() === antwoord){\r\n        b.classList.add('good');\r\n      }\r\n    });\r\n\r\n    feedback.innerHTML='\ud83c\udf3f Kijk rustig mee. Het goede antwoord is <strong>' + antwoord + '<\/strong>.';\r\n  }\r\n\r\n  nextQuestion();\r\n}\r\n\r\nfunction checkInput(antwoord){\r\n  if(answered){\r\n    return;\r\n  }\r\n\r\n  answered = true;\r\n\r\n  const input = document.getElementById('answerInput');\r\n  const feedback = document.getElementById('feedback');\r\n\r\n  feedback.style.display='block';\r\n\r\n  if(input.value.trim().toLowerCase() === antwoord.toLowerCase()){\r\n    feedback.style.background='#DDF5E4';\r\n    feedback.style.color='#2F6A46';\r\n    feedback.innerHTML='\ud83c\udf38 Heel mooi gedaan.';\r\n  }else{\r\n    feedback.style.background='#FFE3E3';\r\n    feedback.style.color='#9A4B4B';\r\n    feedback.innerHTML='\ud83c\udf3f Het antwoord is <strong>' + antwoord + '<\/strong>.';\r\n  }\r\n\r\n  nextQuestion();\r\n}\r\n\r\nfunction nextQuestion(){\r\n  setTimeout(()=>{\r\n    currentIndex++;\r\n\r\n    if(currentIndex >= currentQuestions.length){\r\n      document.getElementById('progressFill').style.width='100%';\r\n      document.getElementById('gameContent').innerHTML='';\r\n      document.getElementById('finishBox').style.display='block';\r\n      return;\r\n    }\r\n\r\n    toonVraag();\r\n  },1200);\r\n}\r\n\r\n\/* SPELLEN *\/\r\n\r\nfunction maakKlinkerVragen(){\r\n  const woorden = [\r\n    ['b_k','oe'],['m_n','aa'],['v_s','is'],['p_n','ee'],\r\n    ['z_n','oo'],['b_s','oo'],['l_mp','a'],['d_k','oe'],\r\n    ['m_r','uu'],['h_s','ui'],['r_k','a'],['k_t','a']\r\n  ];\r\n\r\n  return shuffle(woorden).slice(0,12).map(w=>({\r\n    type:'choice',\r\n    vraag:'\ud83d\udd24 Welke klinker hoort in dit woord?<br><br><strong>' + w[0] + '<\/strong>',\r\n    hulp:'Kijk rustig naar het woord.',\r\n    antwoord:w[1],\r\n    opties:shuffle([w[1],'a','e','o']).slice(0,4)\r\n  }));\r\n}\r\n\r\nfunction maakBouwVragen(){\r\n  const woorden = [\r\n    'maan','boek','boom','vis','peer','stoel',\r\n    'jas','roos','neus','pen','kat','boot'\r\n  ];\r\n\r\n  return shuffle(woorden).slice(0,12).map(w=>({\r\n    type:'input',\r\n    vraag:'\ud83e\udde9 Bouw dit woord',\r\n    hulp:'Gebruik de letters:<br><br><strong>' + shuffle(w.split('')).join(' ') + '<\/strong>',\r\n    antwoord:w\r\n  }));\r\n}\r\n\r\nfunction maakSorteerVragen(){\r\n  const vragen = [\r\n    {vraag:'\ud83d\udce6 Welk woord is een dier?',antwoord:'hond',opties:['springen','hond','blauw','lopen']},\r\n    {vraag:'\ud83d\udce6 Welk woord is een werkwoord?',antwoord:'rennen',opties:['boom','rennen','stoel','kat']},\r\n    {vraag:'\ud83d\udce6 Welk woord is een ding?',antwoord:'tafel',opties:['tafel','zingen','lief','rennen']},\r\n    {vraag:'\ud83d\udce6 Welk woord is een kleur?',antwoord:'groen',opties:['vis','groen','springen','boek']}\r\n  ];\r\n\r\n  return shuffle(vragen).concat(shuffle(vragen)).concat(shuffle(vragen));\r\n}\r\n\r\nfunction maakKlankVragen(){\r\n  const vragen = [\r\n    {vraag:'\ud83c\udfa7 Welke heeft een lange klank?',antwoord:'maan',opties:['maan','man','kat','pen']},\r\n    {vraag:'\ud83c\udfa7 Welke heeft een korte klank?',antwoord:'vis',opties:['boom','maan','vis','stoel']},\r\n    {vraag:'\ud83c\udfa7 Welke klinkt lang?',antwoord:'boot',opties:['boot','bot','pen','kat']},\r\n    {vraag:'\ud83c\udfa7 Welke klinkt kort?',antwoord:'bos',opties:['maan','roos','bos','peer']}\r\n  ];\r\n\r\n  return shuffle(vragen).concat(shuffle(vragen)).concat(shuffle(vragen));\r\n}\r\n\r\nfunction maakWoordzoeker(){\r\n  const alleWoorden = [\r\n    'MAAN','BOOM','BOEK','VIS','PEN','KAT','ROOS','JAS','NEUS','PEER',\r\n    'SOK','DEUR','RAAM','TAS','HOND','POES','MUIS','ZON','BAL','BED',\r\n    'KAST','KAAS','BROOD','BLOEM','FIETS','LEPEL','TAFEL','SCHOOL',\r\n    'STOEL','BOOT','APPEL','WATER','MELK','SOEP','RIJST','SLAAP',\r\n    'HAND','VOET','OOG','OOR','MOND','KAM','ZEIL','HUIS','TUIN'\r\n  ];\r\n\r\n  let gekozen = [];\r\n  let poging = 0;\r\n\r\n  do{\r\n    gekozen = shuffle(alleWoorden).slice(0,15);\r\n    poging++;\r\n  }while(isWoordzoekerSetAlGeweest(gekozen) && poging < 40);\r\n\r\n  bewaarWoordzoekerSet(gekozen);\r\n\r\n  const size = 10;\r\n  const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\r\n  let grid = Array(size * size).fill('');\r\n\r\n  function magPlaatsen(woord,row,col,richting){\r\n    if(richting === 'h' && col + woord.length > size){\r\n      return false;\r\n    }\r\n\r\n    if(richting === 'v' && row + woord.length > size){\r\n      return false;\r\n    }\r\n\r\n    for(let i=0;i<woord.length;i++){\r\n      let r = richting === 'h' ? row : row + i;\r\n      let c = richting === 'h' ? col + i : col;\r\n      let index = r * size + c;\r\n\r\n      if(grid[index] !== '' && grid[index] !== woord[i]){\r\n        return false;\r\n      }\r\n    }\r\n\r\n    return true;\r\n  }\r\n\r\n  function plaatsWoord(woord){\r\n    let richtingen = shuffle(['h','v']);\r\n\r\n    for(let poging=0;poging<120;poging++){\r\n      let richting = richtingen[poging % richtingen.length];\r\n      let row = random(0,size-1);\r\n      let col = random(0,size-1);\r\n\r\n      if(magPlaatsen(woord,row,col,richting)){\r\n        for(let i=0;i<woord.length;i++){\r\n          let r = richting === 'h' ? row : row + i;\r\n          let c = richting === 'h' ? col + i : col;\r\n          let index = r * size + c;\r\n\r\n          grid[index] = woord[i];\r\n        }\r\n\r\n        return true;\r\n      }\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  gekozen.forEach(woord=>{\r\n    plaatsWoord(woord);\r\n  });\r\n\r\n  for(let i=0;i<grid.length;i++){\r\n    if(grid[i] === ''){\r\n      grid[i] = letters[random(0,letters.length-1)];\r\n    }\r\n  }\r\n\r\n  let gridHtml = grid.map(letter=>`\r\n    <div class=\"word-cell\" onclick=\"klikLetter(this,'${letter}')\">\r\n      ${letter}\r\n    <\/div>\r\n  `).join('');\r\n\r\n  return [{\r\n    type:'zoeker',\r\n    woorden:gekozen,\r\n    grid:gridHtml\r\n  }];\r\n}\r\n\r\nfunction klikLetter(el,letter){\r\n  const vraag = currentQuestions[currentIndex];\r\n  const feedback = document.getElementById('feedback');\r\n\r\n  if(el.classList.contains('found')){\r\n    return;\r\n  }\r\n\r\n  el.classList.add('selected');\r\n  gekozenLetters += letter;\r\n  geselecteerdeCellen.push(el);\r\n\r\n  if(vraag.woorden.includes(gekozenLetters)){\r\n    gevondenWoorden.push(gekozenLetters);\r\n\r\n    geselecteerdeCellen.forEach(c=>{\r\n      c.classList.remove('selected');\r\n      c.classList.add('found');\r\n    });\r\n\r\n    document.querySelectorAll('.zoekwoord-pill').forEach(pill=>{\r\n      if(pill.getAttribute('data-woord') === gekozenLetters){\r\n        pill.classList.add('gevonden');\r\n      }\r\n    });\r\n\r\n    feedback.style.display='block';\r\n    feedback.style.background='#DDF5E4';\r\n    feedback.style.color='#2F6A46';\r\n    feedback.innerHTML='\ud83c\udf38 Goed gevonden: <strong>' + gekozenLetters + '<\/strong>';\r\n\r\n    gekozenLetters = '';\r\n    geselecteerdeCellen = [];\r\n\r\n    document.getElementById('progressText').innerText =\r\n    gevondenWoorden.length + ' van ' + vraag.woorden.length + ' woorden gevonden';\r\n\r\n    document.getElementById('progressFill').style.width =\r\n    (gevondenWoorden.length \/ vraag.woorden.length * 100) + '%';\r\n\r\n    if(gevondenWoorden.length === vraag.woorden.length){\r\n      setTimeout(()=>{\r\n        nextQuestion();\r\n      },1200);\r\n    }\r\n\r\n    return;\r\n  }\r\n\r\n  let pastNog = vraag.woorden.some(woord=>{\r\n    return woord.startsWith(gekozenLetters) && !gevondenWoorden.includes(woord);\r\n  });\r\n\r\n  if(!pastNog){\r\n    feedback.style.display='block';\r\n    feedback.style.background='rgba(255,255,255,0.72)';\r\n    feedback.style.color='#7A6455';\r\n    feedback.innerHTML='\ud83c\udf3f Kijk rustig opnieuw.';\r\n\r\n    gekozenLetters = '';\r\n\r\n    geselecteerdeCellen.forEach(c=>{\r\n      if(!c.classList.contains('found')){\r\n        c.classList.remove('selected');\r\n      }\r\n    });\r\n\r\n    geselecteerdeCellen = [];\r\n  }\r\n}\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf38 Woordspelletjes Spelen met woorden. Hier mag je rustig ontdekken, zoeken, kijken, luisteren en proberen. Geen haast. Gewoon stap voor stap spelen met taal \ud83c\udf3f \ud83d\udd0e Woordzoeker Zoek 15 woorden tussen de letters. Elke keer krijg je weer andere woorden. \ud83d\udd24 Klinker kiezen Welke klinker hoort in het woord? Kijk en luister rustig mee. \ud83e\udde9 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2712","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2712","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2712"}],"version-history":[{"count":16,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2712\/revisions"}],"predecessor-version":[{"id":3556,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2712\/revisions\/3556"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2712"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2712"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2712"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}