{"id":680,"date":"2026-02-08T05:45:00","date_gmt":"2026-02-08T05:45:00","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?page_id=680"},"modified":"2026-06-20T03:39:11","modified_gmt":"2026-06-20T03:39:11","slug":"oefenen-met-klinkers","status":"publish","type":"page","link":"https:\/\/withifi.muhubonurture.nl\/?page_id=680","title":{"rendered":"Oefenen Met Klinkers"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"680\" class=\"elementor elementor-680\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7394d5b e-con-full e-flex e-con e-parent\" data-id=\"7394d5b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-48a9c39 elementor-widget elementor-widget-html\" data-id=\"48a9c39\" 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.klinker-page{\r\n  min-height:100vh;\r\n  padding:6rem 7vw;\r\n  color:#3A2B24;\r\n  background:\r\n    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.85) 0%, transparent 30%),\r\n    radial-gradient(circle at 82% 28%, rgba(255,220,230,0.45) 0%, transparent 32%),\r\n    linear-gradient(135deg,#FFF7F8 0%,#FFF3EA 45%,#F9FBF8 100%);\r\n}\r\n\r\n.klinker-wrap{\r\n  max-width:1100px;\r\n  margin:auto;\r\n}\r\n\r\n.klinker-label{\r\n  display:inline-block;\r\n  padding:12px 22px;\r\n  border-radius:999px;\r\n  background:rgba(255,255,255,0.72);\r\n  color:#8B6B55;\r\n  font-weight:900;\r\n  margin-bottom:1.5rem;\r\n}\r\n\r\n.klinker-title{\r\n  font-size:clamp(46px,6vw,76px);\r\n  margin:0 0 1rem;\r\n  line-height:1.1;\r\n}\r\n\r\n.klinker-intro{\r\n  font-size:20px;\r\n  line-height:1.8;\r\n  color:#7A6455;\r\n  font-weight:700;\r\n  max-width:760px;\r\n}\r\n\r\n.klinker-rij{\r\n  display:flex;\r\n  gap:1rem;\r\n  flex-wrap:wrap;\r\n  margin:2rem 0 3rem;\r\n}\r\n\r\n.klinker-pill{\r\n  width:58px;\r\n  height:58px;\r\n  border-radius:18px;\r\n  background:white;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  font-size:1.5rem;\r\n  font-weight:900;\r\n  box-shadow:0 8px 22px rgba(90,70,55,0.08);\r\n}\r\n\r\n.oefen-box{\r\n  padding:3rem;\r\n  border-radius:38px;\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  text-align:center;\r\n}\r\n\r\n.oefen-top{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  gap:1rem;\r\n  flex-wrap:wrap;\r\n  margin-bottom:1.6rem;\r\n}\r\n\r\n.level-pill,\r\n.vraag-pill{\r\n  padding:12px 18px;\r\n  border-radius:999px;\r\n  background:rgba(255,255,255,0.8);\r\n  color:#8B6B55;\r\n  font-weight:900;\r\n}\r\n\r\n.progress-wrap{\r\n  width:100%;\r\n  height:10px;\r\n  border-radius:999px;\r\n  background:rgba(255,255,255,0.75);\r\n  overflow:hidden;\r\n  margin-bottom:2rem;\r\n}\r\n\r\n.progress-bar{\r\n  height:100%;\r\n  width:0%;\r\n  background:#F5C7DD;\r\n  border-radius:999px;\r\n  transition:.3s ease;\r\n}\r\n\r\n.vraag-titel{\r\n  font-size:1.6rem;\r\n  font-weight:900;\r\n  margin-bottom:1.5rem;\r\n}\r\n\r\n.helper{\r\n  color:#7A6455;\r\n  font-weight:800;\r\n  margin-bottom:2rem;\r\n}\r\n\r\n.letter{\r\n  font-size:5rem;\r\n  font-weight:900;\r\n  margin-bottom:2rem;\r\n}\r\n\r\n.antwoorden{\r\n  display:flex;\r\n  justify-content:center;\r\n  gap:1rem;\r\n  flex-wrap:wrap;\r\n}\r\n\r\n.antwoord-btn,\r\n.volgende-btn,\r\n.opnieuw-btn{\r\n  border:none;\r\n  padding:1rem 1.7rem;\r\n  border-radius:999px;\r\n  background:white;\r\n  color:#3A2B24 !important;\r\n  font-size:1rem;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n  box-shadow:0 8px 22px rgba(90,70,55,0.08);\r\n  transition:.25s ease;\r\n}\r\n\r\n.antwoord-btn:hover,\r\n.volgende-btn:hover,\r\n.opnieuw-btn:hover{\r\n  transform:translateY(-2px);\r\n  background:#FFF0DE;\r\n}\r\n\r\n.antwoord-btn.goed{\r\n  background:#DDF5E4 !important;\r\n}\r\n\r\n.antwoord-btn.fout{\r\n  background:#FFE3E3 !important;\r\n}\r\n\r\n.feedback{\r\n  margin-top:2rem;\r\n  color:#7A6455;\r\n  font-weight:900;\r\n  line-height:1.8;\r\n  min-height:40px;\r\n}\r\n\r\n.volgende-wrap{\r\n  margin-top:2rem;\r\n  display:none;\r\n}\r\n\r\n.volgende-btn{\r\n  background:#F5C7DD;\r\n}\r\n\r\n.klaar-box{\r\n  display:none;\r\n  margin-top:2rem;\r\n  padding:2rem;\r\n  border-radius:30px;\r\n  background:rgba(255,255,255,0.72);\r\n  color:#7A6455;\r\n  font-weight:800;\r\n  line-height:1.8;\r\n}\r\n\r\n@media(max-width:700px){\r\n  .klinker-page{\r\n    padding:4rem 5vw;\r\n  }\r\n\r\n  .oefen-box{\r\n    padding:2rem;\r\n  }\r\n\r\n  .letter{\r\n    font-size:4rem;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"klinker-page\">\r\n\r\n<div class=\"klinker-wrap\">\r\n\r\n<div class=\"klinker-label\">\ud83c\udf38 Letters oefenen<\/div>\r\n\r\n<h1 class=\"klinker-title\">Klinkers herkennen.<\/h1>\r\n\r\n<p class=\"klinker-intro\">\r\nKlinkers zijn letters die je goed kunt horen als je ze zegt.<br>\r\nWe oefenen rustig, stap voor stap.\r\n<\/p>\r\n\r\n<div class=\"klinker-rij\">\r\n  <div class=\"klinker-pill\">a<\/div>\r\n  <div class=\"klinker-pill\">e<\/div>\r\n  <div class=\"klinker-pill\">i<\/div>\r\n  <div class=\"klinker-pill\">o<\/div>\r\n  <div class=\"klinker-pill\">u<\/div>\r\n<\/div>\r\n\r\n<div class=\"oefen-box\">\r\n\r\n  <div class=\"oefen-top\">\r\n    <div class=\"level-pill\">\ud83c\udf31 Level 1: Herkennen<\/div>\r\n    <div class=\"vraag-pill\" id=\"vraagTeller\">Vraag 1 van 12<\/div>\r\n  <\/div>\r\n\r\n  <div class=\"progress-wrap\">\r\n    <div class=\"progress-bar\" id=\"progressBar\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"vraag-titel\">Is deze letter een klinker?<\/div>\r\n\r\n  <div class=\"helper\">Kijk rustig naar de letter.<\/div>\r\n\r\n  <div class=\"letter\" id=\"letterVak\"><\/div>\r\n\r\n  <div class=\"antwoorden\">\r\n    <button class=\"antwoord-btn\" id=\"btnKlinker\">Klinker<\/button>\r\n    <button class=\"antwoord-btn\" id=\"btnGeen\">Geen klinker<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"feedback\" id=\"feedback\"><\/div>\r\n\r\n  <div class=\"volgende-wrap\" id=\"volgendeWrap\">\r\n    <button class=\"volgende-btn\" id=\"volgendeBtn\">Volgende vraag \ud83c\udf3f<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"klaar-box\" id=\"klaarBox\">\r\n    \ud83c\udf38 Goed geoefend.<br>\r\n    Je hebt rustig gekeken naar klinkers en andere letters.<br><br>\r\n    <button class=\"opnieuw-btn\" id=\"opnieuwBtn\">Nog een keer oefenen \ud83c\udf3f<\/button>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function(){\r\n\r\nconst vragen = [\r\n  {letter:'e', klinker:true},\r\n  {letter:'b', klinker:false},\r\n  {letter:'a', klinker:true},\r\n  {letter:'m', klinker:false},\r\n  {letter:'i', klinker:true},\r\n  {letter:'s', klinker:false},\r\n  {letter:'o', klinker:true},\r\n  {letter:'t', klinker:false},\r\n  {letter:'u', klinker:true},\r\n  {letter:'k', klinker:false},\r\n  {letter:'r', klinker:false},\r\n  {letter:'a', klinker:true}\r\n];\r\n\r\nlet index = 0;\r\nlet locked = false;\r\n\r\nconst letterVak = document.getElementById('letterVak');\r\nconst vraagTeller = document.getElementById('vraagTeller');\r\nconst progressBar = document.getElementById('progressBar');\r\nconst feedback = document.getElementById('feedback');\r\n\r\nconst btnKlinker = document.getElementById('btnKlinker');\r\nconst btnGeen = document.getElementById('btnGeen');\r\n\r\nconst volgendeWrap = document.getElementById('volgendeWrap');\r\nconst volgendeBtn = document.getElementById('volgendeBtn');\r\n\r\nconst klaarBox = document.getElementById('klaarBox');\r\nconst opnieuwBtn = document.getElementById('opnieuwBtn');\r\n\r\nfunction laadVraag(){\r\n  locked = false;\r\n\r\n  btnKlinker.classList.remove('goed','fout');\r\n  btnGeen.classList.remove('goed','fout');\r\n\r\n  btnKlinker.disabled = false;\r\n  btnGeen.disabled = false;\r\n\r\n  feedback.innerHTML = '';\r\n  volgendeWrap.style.display = 'none';\r\n  klaarBox.style.display = 'none';\r\n\r\n  const item = vragen[index];\r\n\r\n  letterVak.textContent = item.letter;\r\n\r\n  vraagTeller.textContent =\r\n  `Vraag ${index + 1} van ${vragen.length}`;\r\n\r\n  progressBar.style.width =\r\n  `${(index \/ vragen.length) * 100}%`;\r\n}\r\n\r\nfunction controleer(keuze){\r\n  if(locked) return;\r\n\r\n  locked = true;\r\n\r\n  const item = vragen[index];\r\n  const goed = keuze === item.klinker;\r\n\r\n  btnKlinker.disabled = true;\r\n  btnGeen.disabled = true;\r\n\r\n  if(goed){\r\n    if(keuze){\r\n      btnKlinker.classList.add('goed');\r\n    }else{\r\n      btnGeen.classList.add('goed');\r\n    }\r\n\r\n    feedback.innerHTML = 'Goed zo \ud83c\udf3f dat klopt.';\r\n  }else{\r\n    if(keuze){\r\n      btnKlinker.classList.add('fout');\r\n      btnGeen.classList.add('goed');\r\n    }else{\r\n      btnGeen.classList.add('fout');\r\n      btnKlinker.classList.add('goed');\r\n    }\r\n\r\n    feedback.innerHTML = 'Rustig gekeken \ud83c\udf38 het goede antwoord is nu groen.';\r\n  }\r\n\r\n  volgendeWrap.style.display = 'block';\r\n}\r\n\r\nbtnKlinker.addEventListener('click', function(){\r\n  controleer(true);\r\n});\r\n\r\nbtnGeen.addEventListener('click', function(){\r\n  controleer(false);\r\n});\r\n\r\nvolgendeBtn.addEventListener('click', function(){\r\n  index++;\r\n\r\n  if(index >= vragen.length){\r\n    progressBar.style.width = '100%';\r\n    feedback.innerHTML = '';\r\n    volgendeWrap.style.display = 'none';\r\n    klaarBox.style.display = 'block';\r\n\r\n    btnKlinker.disabled = true;\r\n    btnGeen.disabled = true;\r\n  }else{\r\n    laadVraag();\r\n  }\r\n});\r\n\r\nopnieuwBtn.addEventListener('click', function(){\r\n  index = 0;\r\n  laadVraag();\r\n});\r\n\r\nlaadVraag();\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 Letters oefenen Klinkers herkennen. Klinkers zijn letters die je goed kunt horen als je ze zegt. We oefenen rustig, stap voor stap. a e i o u \ud83c\udf31 Level 1: Herkennen Vraag 1 van 12 Is deze letter een klinker? Kijk rustig naar de letter. Klinker Geen klinker Volgende vraag \ud83c\udf3f \ud83c\udf38 Goed geoefend. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-680","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"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=680"}],"version-history":[{"count":46,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/680\/revisions"}],"predecessor-version":[{"id":3784,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/680\/revisions\/3784"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}