{"id":664,"date":"2026-02-08T05:39:30","date_gmt":"2026-02-08T05:39:30","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?page_id=664"},"modified":"2026-08-29T04:15:54","modified_gmt":"2026-08-29T04:15:54","slug":"klinkers","status":"publish","type":"page","link":"https:\/\/withifi.muhubonurture.nl\/?page_id=664","title":{"rendered":"Klinkers"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"664\" class=\"elementor elementor-664\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f81531 e-con-full e-flex e-con e-parent\" data-id=\"3f81531\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f0cd5e3 elementor-widget elementor-widget-html\" data-id=\"f0cd5e3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================\r\n     WITH IFI \u2014 KLINKERS OEFENEN\r\n     3 LEVELS + IFI ALS BEGELEIDER\r\n========================================= -->\r\n\r\n<style>\r\nbody{\r\n  margin:0;\r\n  font-family:'Inter',sans-serif;\r\n}\r\n\r\n.kl-page{\r\n  min-height:100vh;\r\n  padding:6rem 6vw 5rem;\r\n  color:#3A2B24;\r\n\r\n  background:\r\n    radial-gradient(circle at 16% 18%, rgba(255,255,255,.88) 0%, transparent 31%),\r\n    radial-gradient(circle at 86% 22%, rgba(255,231,239,.46) 0%, transparent 31%),\r\n    radial-gradient(circle at 50% 86%, rgba(230,244,237,.55) 0%, transparent 38%),\r\n    linear-gradient(135deg,#F9FBF8 0%,#EEF7F3 48%,#FFF8EF 100%);\r\n}\r\n\r\n.kl-wrap{\r\n  max-width:1180px;\r\n  margin:0 auto;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   HERO\r\n========================================= *\/\r\n\r\n.kl-hero{\r\n  max-width:980px;\r\n  margin:0 auto 3.5rem;\r\n  padding:3.2rem;\r\n\r\n  border-radius:42px;\r\n\r\n  background:rgba(255,255,255,.64);\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  box-shadow:0 16px 42px rgba(90,70,55,.08);\r\n\r\n  backdrop-filter:blur(16px);\r\n  -webkit-backdrop-filter:blur(16px);\r\n\r\n  text-align:center;\r\n}\r\n\r\n.kl-label{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:.45rem;\r\n\r\n  padding:11px 20px;\r\n  margin-bottom:1.2rem;\r\n\r\n  border-radius:999px;\r\n\r\n  background:rgba(255,255,255,.78);\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  color:#8B6B55;\r\n\r\n  font-size:15px;\r\n  font-weight:900;\r\n}\r\n\r\n.kl-title{\r\n  margin:0 0 1.2rem;\r\n\r\n  font-size:clamp(42px,6vw,72px);\r\n  line-height:1.05;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-weight:950;\r\n}\r\n\r\n.kl-intro{\r\n  max-width:780px;\r\n  margin:0 auto;\r\n\r\n  font-size:19px;\r\n  line-height:1.9;\r\n\r\n  color:#7A6455;\r\n\r\n  font-weight:650;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   LEVEL ROUTE\r\n========================================= *\/\r\n\r\n.kl-level-route{\r\n  max-width:1000px;\r\n  margin:0 auto 3rem;\r\n\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n\r\n  gap:1.2rem;\r\n}\r\n\r\n.kl-route-level{\r\n  position:relative;\r\n  overflow:hidden;\r\n\r\n  padding:1.6rem;\r\n\r\n  border-radius:30px;\r\n\r\n  border:1px solid rgba(255,255,255,.95);\r\n\r\n  box-shadow:0 10px 28px rgba(90,70,55,.06);\r\n\r\n  transition:.25s ease;\r\n}\r\n\r\n.kl-route-level:nth-child(1){\r\n  background:linear-gradient(135deg,#FFF4E3,#FFF9EF);\r\n}\r\n\r\n.kl-route-level:nth-child(2){\r\n  background:linear-gradient(135deg,#EAF7F1,#F7FFFB);\r\n}\r\n\r\n.kl-route-level:nth-child(3){\r\n  background:linear-gradient(135deg,#FFEAF1,#FFF7FA);\r\n}\r\n\r\n.kl-route-level::after{\r\n  content:\"\";\r\n\r\n  position:absolute;\r\n\r\n  width:120px;\r\n  height:120px;\r\n\r\n  right:-42px;\r\n  top:-42px;\r\n\r\n  border-radius:50%;\r\n\r\n  background:rgba(255,255,255,.5);\r\n}\r\n\r\n.kl-route-level.active{\r\n  transform:translateY(-5px);\r\n\r\n  box-shadow:0 18px 38px rgba(90,70,55,.11);\r\n}\r\n\r\n.kl-route-level.done{\r\n  opacity:.72;\r\n}\r\n\r\n.kl-route-icon{\r\n  position:relative;\r\n  z-index:2;\r\n\r\n  width:52px;\r\n  height:52px;\r\n\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  margin-bottom:.9rem;\r\n\r\n  border-radius:18px;\r\n\r\n  background:rgba(255,255,255,.78);\r\n\r\n  font-size:1.45rem;\r\n}\r\n\r\n.kl-route-level h3{\r\n  position:relative;\r\n  z-index:2;\r\n\r\n  margin:0 0 .4rem;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:1.15rem;\r\n  font-weight:950;\r\n}\r\n\r\n.kl-route-level p{\r\n  position:relative;\r\n  z-index:2;\r\n\r\n  margin:0;\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:.96rem;\r\n  line-height:1.6;\r\n  font-weight:650;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   KLINKER SUPPORT\r\n   ALLEEN LEVEL 1\r\n========================================= *\/\r\n\r\n.kl-support{\r\n  max-width:760px;\r\n\r\n  margin:0 auto 2.3rem;\r\n\r\n  text-align:center;\r\n\r\n  transition:.3s ease;\r\n}\r\n\r\n.kl-support-title{\r\n  margin-bottom:.9rem;\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:.95rem;\r\n  font-weight:850;\r\n}\r\n\r\n.kl-strip{\r\n  display:flex;\r\n\r\n  flex-wrap:wrap;\r\n\r\n  justify-content:center;\r\n\r\n  gap:.8rem;\r\n}\r\n\r\n.kl-letter-pill{\r\n  width:58px;\r\n  height:58px;\r\n\r\n  display:flex;\r\n\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  border-radius:19px;\r\n\r\n  background:rgba(255,255,255,.88);\r\n\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  box-shadow:0 8px 20px rgba(90,70,55,.07);\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:1.5rem;\r\n  font-weight:950;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   OEFENKAART\r\n========================================= *\/\r\n\r\n.kl-oefen-box{\r\n  max-width:1120px;\r\n\r\n  margin:0 auto;\r\n\r\n  padding:2.4rem;\r\n\r\n  border-radius:42px;\r\n\r\n  background:rgba(255,255,255,.68);\r\n\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  box-shadow:0 18px 46px rgba(90,70,55,.09);\r\n\r\n  backdrop-filter:blur(14px);\r\n  -webkit-backdrop-filter:blur(14px);\r\n}\r\n\r\n\r\n\/* =========================================\r\n   OEFENING + IFI\r\n========================================= *\/\r\n\r\n.kl-oefen-layout{\r\n  display:grid;\r\n\r\n  grid-template-columns:minmax(0,1fr) 235px;\r\n\r\n  gap:2.2rem;\r\n\r\n  align-items:center;\r\n}\r\n\r\n.kl-oefen-main{\r\n  min-width:0;\r\n\r\n  text-align:center;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   TOP\r\n========================================= *\/\r\n\r\n.kl-oefen-top{\r\n  display:flex;\r\n\r\n  justify-content:space-between;\r\n\r\n  align-items:center;\r\n\r\n  gap:1rem;\r\n\r\n  margin-bottom:1.4rem;\r\n}\r\n\r\n.kl-level-pill,\r\n.kl-vraag-pill{\r\n  padding:10px 16px;\r\n\r\n  border-radius:999px;\r\n\r\n  background:rgba(255,255,255,.88);\r\n\r\n  color:#8B6B55;\r\n\r\n  font-size:.9rem;\r\n  font-weight:900;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   PROGRESS\r\n========================================= *\/\r\n\r\n.kl-progress-wrap{\r\n  width:100%;\r\n  height:9px;\r\n\r\n  margin-bottom:2.5rem;\r\n\r\n  overflow:hidden;\r\n\r\n  border-radius:999px;\r\n\r\n  background:#F4EFEA;\r\n}\r\n\r\n.kl-progress-bar{\r\n  width:0%;\r\n  height:100%;\r\n\r\n  border-radius:999px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #F4CFE0 0%,\r\n      #DDEFE6 55%,\r\n      #DDEEFF 100%\r\n    );\r\n\r\n  transition:width .35s ease;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   VRAAG\r\n========================================= *\/\r\n\r\n.kl-vraag-type{\r\n  display:inline-block;\r\n\r\n  margin-bottom:.8rem;\r\n\r\n  padding:7px 13px;\r\n\r\n  border-radius:999px;\r\n\r\n  background:#FFF3E8;\r\n\r\n  color:#8B6B55;\r\n\r\n  font-size:.82rem;\r\n  font-weight:900;\r\n}\r\n\r\n.kl-vraag-title{\r\n  margin-bottom:.65rem;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:clamp(1.5rem,3vw,2rem);\r\n\r\n  font-weight:950;\r\n}\r\n\r\n.kl-helper{\r\n  margin-bottom:2rem;\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:1rem;\r\n\r\n  line-height:1.7;\r\n\r\n  font-weight:700;\r\n}\r\n\r\n.kl-stimulus{\r\n  margin:1.3rem auto 2rem;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:clamp(2.5rem,7vw,5rem);\r\n\r\n  line-height:1.15;\r\n\r\n  font-weight:950;\r\n\r\n  word-break:break-word;\r\n}\r\n\r\n.kl-stimulus.word{\r\n  font-size:clamp(2rem,5vw,3.5rem);\r\n}\r\n\r\n\r\n\/* =========================================\r\n   ANTWOORDEN\r\n========================================= *\/\r\n\r\n.kl-antwoorden{\r\n  display:flex;\r\n\r\n  justify-content:center;\r\n\r\n  flex-wrap:wrap;\r\n\r\n  gap:.9rem;\r\n}\r\n\r\n.kl-answer{\r\n  min-width:125px;\r\n\r\n  padding:1rem 1.45rem;\r\n\r\n  border:none;\r\n\r\n  border-radius:999px;\r\n\r\n  background:#FFF9F4;\r\n\r\n  color:#3A2B24 !important;\r\n\r\n  box-shadow:0 8px 20px rgba(90,70,55,.07);\r\n\r\n  font-family:inherit;\r\n\r\n  font-size:1rem;\r\n\r\n  font-weight:900;\r\n\r\n  cursor:pointer;\r\n\r\n  transition:.22s ease;\r\n}\r\n\r\n.kl-answer:hover{\r\n  transform:translateY(-2px);\r\n\r\n  background:#FFF0DE;\r\n}\r\n\r\n.kl-answer.correct{\r\n  background:#DDF5E4 !important;\r\n\r\n  color:#315D43 !important;\r\n}\r\n\r\n.kl-answer.try-again{\r\n  background:#FFF0E8 !important;\r\n\r\n  color:#8A5D4C !important;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   TYPE ANTWOORD\r\n========================================= *\/\r\n\r\n.kl-input-wrap{\r\n  max-width:430px;\r\n\r\n  margin:0 auto;\r\n}\r\n\r\n.kl-input{\r\n  width:100%;\r\n\r\n  box-sizing:border-box;\r\n\r\n  padding:1rem 1.25rem;\r\n\r\n  border:2px solid #E7DAD0;\r\n\r\n  border-radius:20px;\r\n\r\n  outline:none;\r\n\r\n  background:#FFFDFC;\r\n\r\n  color:#3A2B24;\r\n\r\n  text-align:center;\r\n\r\n  font-family:inherit;\r\n\r\n  font-size:1.35rem;\r\n\r\n  font-weight:900;\r\n\r\n  transition:.2s ease;\r\n}\r\n\r\n.kl-input:focus{\r\n  border-color:#C9DED5;\r\n\r\n  box-shadow:\r\n    0 0 0 5px rgba(207,234,214,.35);\r\n}\r\n\r\n.kl-input.correct{\r\n  background:#F0FAF3;\r\n\r\n  border-color:#C4E4CF;\r\n}\r\n\r\n.kl-input.try-again{\r\n  background:#FFF7F2;\r\n\r\n  border-color:#F1D7C9;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   BUTTONS\r\n========================================= *\/\r\n\r\n.kl-check-btn,\r\n.kl-next-btn,\r\n.kl-restart-btn{\r\n  margin-top:1.4rem;\r\n\r\n  padding:1rem 1.8rem;\r\n\r\n  border:none;\r\n\r\n  border-radius:999px;\r\n\r\n  background:#FFD6A8;\r\n\r\n  color:#3A2B24;\r\n\r\n  box-shadow:0 9px 22px rgba(90,70,55,.08);\r\n\r\n  font-family:inherit;\r\n\r\n  font-size:1rem;\r\n\r\n  font-weight:950;\r\n\r\n  cursor:pointer;\r\n\r\n  transition:.22s ease;\r\n}\r\n\r\n.kl-check-btn:hover,\r\n.kl-next-btn:hover,\r\n.kl-restart-btn:hover{\r\n  transform:translateY(-2px);\r\n\r\n  background:#FFF0DE;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   FEEDBACK\r\n========================================= *\/\r\n\r\n.kl-feedback{\r\n  min-height:34px;\r\n\r\n  margin-top:1.5rem;\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:1rem;\r\n\r\n  line-height:1.7;\r\n\r\n  font-weight:800;\r\n}\r\n\r\n.kl-feedback.good{\r\n  color:#47735A;\r\n}\r\n\r\n.kl-feedback.retry{\r\n  color:#8A6555;\r\n}\r\n\r\n.kl-next-wrap{\r\n  display:none;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   IFI RECHTS NAAST DE OEFENING\r\n========================================= *\/\r\n\r\n.kl-ifi-side{\r\n  align-self:stretch;\r\n\r\n  display:flex;\r\n\r\n  flex-direction:column;\r\n\r\n  justify-content:center;\r\n\r\n  align-items:center;\r\n\r\n  gap:1rem;\r\n\r\n  padding:.5rem 0;\r\n}\r\n\r\n.kl-ifi-side-avatar{\r\n  display:block;\r\n\r\n  width:205px;\r\n\r\n  max-width:100%;\r\n\r\n  max-height:330px;\r\n\r\n  height:auto;\r\n\r\n  object-fit:contain;\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0 14px 24px rgba(90,70,55,.10)\r\n    );\r\n\r\n  transition:\r\n    opacity .25s ease,\r\n    transform .25s ease;\r\n}\r\n\r\n.kl-ifi-side-bubble{\r\n  width:100%;\r\n\r\n  box-sizing:border-box;\r\n\r\n  padding:1rem 1.15rem;\r\n\r\n  border-radius:24px;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 18% 18%,\r\n      rgba(255,255,255,.94) 0%,\r\n      transparent 40%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      #FFF8EF 0%,\r\n      #F3FBF8 100%\r\n    );\r\n\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  box-shadow:0 10px 26px rgba(90,70,55,.07);\r\n\r\n  text-align:center;\r\n}\r\n\r\n.kl-ifi-name{\r\n  display:inline-block;\r\n\r\n  margin-bottom:.5rem;\r\n\r\n  padding:6px 11px;\r\n\r\n  border-radius:999px;\r\n\r\n  background:rgba(255,255,255,.82);\r\n\r\n  color:#8B6B55;\r\n\r\n  font-size:.82rem;\r\n\r\n  font-weight:900;\r\n}\r\n\r\n.kl-ifi-message{\r\n  margin:0;\r\n\r\n  color:#5F4B3F;\r\n\r\n  font-size:.95rem;\r\n\r\n  line-height:1.65;\r\n\r\n  font-weight:750;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   LEVEL TRANSITION\r\n========================================= *\/\r\n\r\n.kl-level-transition{\r\n  display:none;\r\n\r\n  padding:2.2rem;\r\n\r\n  border-radius:30px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #FFF8EF,\r\n      #F3FBF8\r\n    );\r\n\r\n  text-align:center;\r\n}\r\n\r\n.kl-level-transition h3{\r\n  margin:0 0 .7rem;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:1.6rem;\r\n\r\n  font-weight:950;\r\n}\r\n\r\n.kl-level-transition p{\r\n  max-width:620px;\r\n\r\n  margin:0 auto;\r\n\r\n  color:#7A6455;\r\n\r\n  line-height:1.8;\r\n\r\n  font-weight:700;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   FINISH\r\n========================================= *\/\r\n\r\n.kl-finish{\r\n  display:none;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.kl-finish-avatar{\r\n  width:180px;\r\n\r\n  max-height:250px;\r\n\r\n  object-fit:contain;\r\n\r\n  margin:0 auto 1rem;\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0 12px 22px rgba(90,70,55,.10)\r\n    );\r\n}\r\n\r\n.kl-finish h2{\r\n  margin:.5rem 0 .8rem;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:clamp(2rem,4vw,3rem);\r\n\r\n  font-weight:950;\r\n}\r\n\r\n.kl-finish p{\r\n  max-width:620px;\r\n\r\n  margin:0 auto;\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:1.05rem;\r\n\r\n  line-height:1.8;\r\n\r\n  font-weight:700;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   NOTE\r\n========================================= *\/\r\n\r\n.kl-note{\r\n  max-width:760px;\r\n\r\n  margin:3rem auto 0;\r\n\r\n  padding:1.7rem;\r\n\r\n  border-radius:28px;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 12% 18%,\r\n      rgba(255,255,255,.88),\r\n      transparent 34%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      #FFF8EF,\r\n      #F3FBF8 52%,\r\n      #EEF7FE\r\n    );\r\n\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  box-shadow:0 14px 34px rgba(90,70,55,.07);\r\n\r\n  text-align:center;\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:1rem;\r\n\r\n  line-height:1.8;\r\n\r\n  font-weight:700;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   TABLET\r\n========================================= *\/\r\n\r\n@media(max-width:950px){\r\n\r\n  .kl-oefen-layout{\r\n    grid-template-columns:minmax(0,1fr) 175px;\r\n\r\n    gap:1.2rem;\r\n  }\r\n\r\n  .kl-ifi-side-avatar{\r\n    width:155px;\r\n  }\r\n\r\n  .kl-ifi-message{\r\n    font-size:.88rem;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================\r\n   MOBILE\r\n========================================= *\/\r\n\r\n@media(max-width:700px){\r\n\r\n  .kl-page{\r\n    padding:4rem 5vw;\r\n  }\r\n\r\n  .kl-hero{\r\n    padding:2.3rem 1.7rem;\r\n  }\r\n\r\n  .kl-level-route{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .kl-oefen-box{\r\n    padding:1.5rem 1.15rem;\r\n  }\r\n\r\n  .kl-oefen-layout{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .kl-oefen-top{\r\n    justify-content:center;\r\n\r\n    flex-wrap:wrap;\r\n  }\r\n\r\n  .kl-ifi-side{\r\n    order:-1;\r\n\r\n    flex-direction:row;\r\n\r\n    align-items:center;\r\n\r\n    justify-content:center;\r\n\r\n    gap:1rem;\r\n\r\n    padding:.2rem 0 1rem;\r\n  }\r\n\r\n  .kl-ifi-side-avatar{\r\n    width:95px;\r\n\r\n    flex-shrink:0;\r\n  }\r\n\r\n  .kl-ifi-side-bubble{\r\n    text-align:left;\r\n  }\r\n\r\n  .kl-answer{\r\n    width:100%;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================\r\n   EXTRA KLEIN MOBIEL\r\n========================================= *\/\r\n\r\n@media(max-width:480px){\r\n\r\n  .kl-ifi-side{\r\n    flex-direction:column;\r\n\r\n    text-align:center;\r\n  }\r\n\r\n  .kl-ifi-side-bubble{\r\n    text-align:center;\r\n  }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<section class=\"kl-page\" data-withifi-world=\"woordenwereld\">\r\n\r\n  <div class=\"kl-wrap\">\r\n\r\n\r\n    <!-- =====================================\r\n         HERO\r\n    ====================================== -->\r\n\r\n    <div class=\"kl-hero\">\r\n\r\n      <div class=\"kl-label\">\r\n        \ud83c\udf38 Woordenwereld\r\n      <\/div>\r\n\r\n      <h1 class=\"kl-title\">\r\n        Klinkers ontdekken.\r\n      <\/h1>\r\n\r\n      <p class=\"kl-intro\">\r\n        De letters\r\n        <strong>a, e, i, o en u<\/strong>\r\n        noemen we klinkers.\r\n        Eerst leer je ze herkennen.\r\n        Daarna ga je ze zelf zoeken in woorden.\r\n        Uiteindelijk ontdek je steeds meer helemaal zelf.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================\r\n         LEVEL ROUTE\r\n    ====================================== -->\r\n\r\n    <div class=\"kl-level-route\">\r\n\r\n      <div\r\n        class=\"kl-route-level active\"\r\n        id=\"klRoute1\">\r\n\r\n        <div class=\"kl-route-icon\">\r\n          \ud83c\udf31\r\n        <\/div>\r\n\r\n        <h3>\r\n          Level 1 \u00b7 Herkennen\r\n        <\/h3>\r\n\r\n        <p>\r\n          Kijken welke letters klinkers zijn.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"kl-route-level\"\r\n        id=\"klRoute2\">\r\n\r\n        <div class=\"kl-route-icon\">\r\n          \ud83c\udf3f\r\n        <\/div>\r\n\r\n        <h3>\r\n          Level 2 \u00b7 Zoeken\r\n        <\/h3>\r\n\r\n        <p>\r\n          Klinkers zoeken en tellen in woorden.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"kl-route-level\"\r\n        id=\"klRoute3\">\r\n\r\n        <div class=\"kl-route-icon\">\r\n          \ud83c\udf33\r\n        <\/div>\r\n\r\n        <h3>\r\n          Level 3 \u00b7 Zelf doen\r\n        <\/h3>\r\n\r\n        <p>\r\n          Zelf luisteren, aanvullen en klinkers vinden.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================\r\n         SUPPORT \u2014 ALLEEN LEVEL 1\r\n    ====================================== -->\r\n\r\n    <div\r\n      class=\"kl-support\"\r\n      id=\"klSupport\">\r\n\r\n      <div class=\"kl-support-title\">\r\n        Deze vijf letters zijn klinkers\r\n      <\/div>\r\n\r\n      <div class=\"kl-strip\">\r\n\r\n        <div class=\"kl-letter-pill\">a<\/div>\r\n        <div class=\"kl-letter-pill\">e<\/div>\r\n        <div class=\"kl-letter-pill\">i<\/div>\r\n        <div class=\"kl-letter-pill\">o<\/div>\r\n        <div class=\"kl-letter-pill\">u<\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================\r\n         OEFENSECTIE\r\n    ====================================== -->\r\n\r\n    <div class=\"kl-oefen-box\">\r\n\r\n      <div class=\"kl-oefen-layout\">\r\n\r\n\r\n        <!-- =================================\r\n             LINKERKANT \u2014 OEFENING\r\n        ================================== -->\r\n\r\n        <div class=\"kl-oefen-main\">\r\n\r\n\r\n          <!-- NORMALE OEFENING -->\r\n\r\n          <div id=\"klExerciseContent\">\r\n\r\n            <div class=\"kl-oefen-top\">\r\n\r\n              <div\r\n                class=\"kl-level-pill\"\r\n                id=\"klLevelPill\">\r\n\r\n                \ud83c\udf31 Level 1 \u00b7 Herkennen\r\n\r\n              <\/div>\r\n\r\n              <div\r\n                class=\"kl-vraag-pill\"\r\n                id=\"klQuestionCounter\">\r\n\r\n                Vraag 1\r\n\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"kl-progress-wrap\">\r\n\r\n              <div\r\n                class=\"kl-progress-bar\"\r\n                id=\"klProgressBar\">\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"kl-vraag-type\"\r\n              id=\"klQuestionType\">\r\n\r\n              Herkennen\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"kl-vraag-title\"\r\n              id=\"klQuestionTitle\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"kl-helper\"\r\n              id=\"klHelper\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"kl-stimulus\"\r\n              id=\"klStimulus\">\r\n            <\/div>\r\n\r\n\r\n            <div id=\"klAnswerArea\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"kl-feedback\"\r\n              id=\"klFeedback\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"kl-next-wrap\"\r\n              id=\"klNextWrap\">\r\n\r\n              <button\r\n                type=\"button\"\r\n                class=\"kl-next-btn\"\r\n                id=\"klNextBtn\">\r\n\r\n                Rustig verder \ud83c\udf3f\r\n\r\n              <\/button>\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- =================================\r\n               LEVEL OVERGANG\r\n          ================================== -->\r\n\r\n          <div\r\n            class=\"kl-level-transition\"\r\n            id=\"klTransition\">\r\n\r\n            <h3 id=\"klTransitionTitle\">\r\n            <\/h3>\r\n\r\n            <p id=\"klTransitionText\">\r\n            <\/p>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"kl-next-btn\"\r\n              id=\"klStartNextLevel\">\r\n\r\n              Verder \ud83c\udf3f\r\n\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- =================================\r\n               EINDE\r\n          ================================== -->\r\n\r\n          <div\r\n            class=\"kl-finish\"\r\n            id=\"klFinish\">\r\n\r\n            <img decoding=\"async\"\r\n              class=\"kl-finish-avatar\"\r\n              src=\"https:\/\/withifi.muhubonurture.nl\/wp-content\/uploads\/2026\/06\/Goed-Gedaan.png\"\r\n              alt=\"Ifi zegt goed gedaan\">\r\n\r\n            <h2>\r\n              Goed geoefend \ud83c\udf38\r\n            <\/h2>\r\n\r\n            <p id=\"klResultText\">\r\n            <\/p>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"kl-restart-btn\"\r\n              id=\"klRestartBtn\">\r\n\r\n              Nog een keer oefenen \ud83c\udf3f\r\n\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================\r\n             RECHTERKANT \u2014 IFI\r\n        ================================== -->\r\n\r\n        <aside class=\"kl-ifi-side\">\r\n\r\n          <img decoding=\"async\"\r\n            id=\"klIfiAvatar\"\r\n            class=\"kl-ifi-side-avatar\"\r\n            src=\"https:\/\/withifi.muhubonurture.nl\/wp-content\/uploads\/2026\/06\/uitleg.png\"\r\n            alt=\"Ifi helpt bij de oefening\">\r\n\r\n          <div class=\"kl-ifi-side-bubble\">\r\n\r\n            <div class=\"kl-ifi-name\">\r\n              IFI helpt je \ud83c\udf3f\r\n            <\/div>\r\n\r\n            <p\r\n              class=\"kl-ifi-message\"\r\n              id=\"klIfiMessage\">\r\n\r\n              Kijk rustig naar de opdracht.\r\n              De klinkers bovenaan mogen je nog helpen.\r\n\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n        <\/aside>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================\r\n         REMINDER\r\n    ====================================== -->\r\n\r\n    <div class=\"kl-note\">\r\n\r\n      Kleine reminder \ud83c\udf38<br>\r\n\r\n      Je hoeft niet snel te zijn.\r\n      Kijken, luisteren, proberen en opnieuw proberen hoort allemaal bij leren.\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\ndocument.addEventListener(\r\n  \"DOMContentLoaded\",\r\n  function(){\r\n\r\n    \"use strict\";\r\n\r\n\r\n    \/* =========================================\r\n       IFI AVATARS\r\n    ========================================= *\/\r\n\r\n    const KL_IFI = {\r\n\r\n      uitleg:\r\n        \"https:\/\/withifi.muhubonurture.nl\/wp-content\/uploads\/2026\/06\/uitleg.png\",\r\n\r\n      denken:\r\n        \"https:\/\/withifi.muhubonurture.nl\/wp-content\/uploads\/2026\/06\/Samen-Nadenken.png\",\r\n\r\n      goed:\r\n        \"https:\/\/withifi.muhubonurture.nl\/wp-content\/uploads\/2026\/06\/Goed-Gedaan.png\"\r\n\r\n    };\r\n\r\n\r\n    \/* =========================================\r\n       LEVELS\r\n    ========================================= *\/\r\n\r\n    const klLevels = [\r\n\r\n\r\n      \/* =======================================\r\n         LEVEL 1 \u2014 HERKENNEN\r\n      ======================================= *\/\r\n\r\n      {\r\n\r\n        level:1,\r\n\r\n        title:\r\n          \"\ud83c\udf31 Level 1 \u00b7 Herkennen\",\r\n\r\n        questions:[\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Klinker of niet?\",\r\n\r\n            question:\r\n              \"Is deze letter een klinker?\",\r\n\r\n            helper:\r\n              \"Kijk rustig naar de letter.\",\r\n\r\n            stimulus:\r\n              \"T\",\r\n\r\n            answers:[\r\n              \"Klinker\",\r\n              \"Geen klinker\"\r\n            ],\r\n\r\n            correct:\r\n              \"Geen klinker\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Klinker of niet?\",\r\n\r\n            question:\r\n              \"Is deze letter een klinker?\",\r\n\r\n            helper:\r\n              \"Vergelijk hem met de vijf klinkers bovenaan.\",\r\n\r\n            stimulus:\r\n              \"A\",\r\n\r\n            answers:[\r\n              \"Klinker\",\r\n              \"Geen klinker\"\r\n            ],\r\n\r\n            correct:\r\n              \"Klinker\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Zoek de klinker\",\r\n\r\n            question:\r\n              \"Welke letter is een klinker?\",\r\n\r\n            helper:\r\n              \"Er staat \u00e9\u00e9n klinker tussen.\",\r\n\r\n            stimulus:\"\",\r\n\r\n            answers:[\r\n              \"m\",\r\n              \"r\",\r\n              \"e\",\r\n              \"t\"\r\n            ],\r\n\r\n            correct:\r\n              \"e\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Welke hoor je?\",\r\n\r\n            question:\r\n              \"Welke klinker hoor je in \u2018vis\u2019?\",\r\n\r\n            helper:\r\n              \"Zeg het woord rustig: v-i-s.\",\r\n\r\n            stimulus:\r\n              \"vis\",\r\n\r\n            answers:[\r\n              \"a\",\r\n              \"i\",\r\n              \"o\"\r\n            ],\r\n\r\n            correct:\r\n              \"i\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Zoek de klinker\",\r\n\r\n            question:\r\n              \"Welke letter is een klinker?\",\r\n\r\n            helper:\r\n              \"Kijk rustig naar alle vier.\",\r\n\r\n            stimulus:\"\",\r\n\r\n            answers:[\r\n              \"b\",\r\n              \"u\",\r\n              \"k\",\r\n              \"s\"\r\n            ],\r\n\r\n            correct:\r\n              \"u\"\r\n\r\n          }\r\n\r\n        ]\r\n\r\n      },\r\n\r\n\r\n      \/* =======================================\r\n         LEVEL 2 \u2014 ZOEKEN\r\n      ======================================= *\/\r\n\r\n      {\r\n\r\n        level:2,\r\n\r\n        title:\r\n          \"\ud83c\udf3f Level 2 \u00b7 Zoeken\",\r\n\r\n        questions:[\r\n\r\n\r\n          {\r\n\r\n            type:\"text\",\r\n\r\n            label:\r\n              \"Typ de klinkers\",\r\n\r\n            question:\r\n              \"Typ alleen de klinkers.\",\r\n\r\n            helper:\r\n              \"Je hoeft het hele woord niet te typen.\",\r\n\r\n            stimulus:\r\n              \"boom\",\r\n\r\n            correct:\r\n              \"oo\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Klinkers zoeken\",\r\n\r\n            question:\r\n              \"Welke klinkers zie je in dit woord?\",\r\n\r\n            helper:\r\n              \"Kijk letter voor letter.\",\r\n\r\n            stimulus:\r\n              \"appel\",\r\n\r\n            answers:[\r\n              \"a en e\",\r\n              \"a en i\",\r\n              \"o en e\"\r\n            ],\r\n\r\n            correct:\r\n              \"a en e\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Hoeveel?\",\r\n\r\n            question:\r\n              \"Hoeveel klinkers zie je?\",\r\n\r\n            helper:\r\n              \"Tel alleen a, e, i, o en u.\",\r\n\r\n            stimulus:\r\n              \"maan\",\r\n\r\n            answers:[\r\n              \"1\",\r\n              \"2\",\r\n              \"3\"\r\n            ],\r\n\r\n            correct:\r\n              \"2\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Welke hoor je?\",\r\n\r\n            question:\r\n              \"Welke klinker hoor je in \u2018vis\u2019?\",\r\n\r\n            helper:\r\n              \"Zeg het woord zachtjes voor jezelf.\",\r\n\r\n            stimulus:\r\n              \"vis\",\r\n\r\n            answers:[\r\n              \"a\",\r\n              \"i\",\r\n              \"o\"\r\n            ],\r\n\r\n            correct:\r\n              \"i\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"text\",\r\n\r\n            label:\r\n              \"Typ de klinkers\",\r\n\r\n            question:\r\n              \"Typ alleen de klinkers.\",\r\n\r\n            helper:\r\n              \"Kijk rustig door het woord heen.\",\r\n\r\n            stimulus:\r\n              \"fiets\",\r\n\r\n            correct:\r\n              \"ie\"\r\n\r\n          }\r\n\r\n        ]\r\n\r\n      },\r\n\r\n\r\n      \/* =======================================\r\n         LEVEL 3 \u2014 ZELF DOEN\r\n      ======================================= *\/\r\n\r\n      {\r\n\r\n        level:3,\r\n\r\n        title:\r\n          \"\ud83c\udf33 Level 3 \u00b7 Zelf doen\",\r\n\r\n        questions:[\r\n\r\n\r\n          {\r\n\r\n            type:\"text\",\r\n\r\n            label:\r\n              \"Vul zelf in\",\r\n\r\n            question:\r\n              \"Welke klinkers ontbreken?\",\r\n\r\n            helper:\r\n              \"Het woord is banaan.\",\r\n\r\n            stimulus:\r\n              \"b _ n _ _ n\",\r\n\r\n            correct:\r\n              \"aaa\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"text\",\r\n\r\n            label:\r\n              \"Zelf zoeken\",\r\n\r\n            question:\r\n              \"Typ alleen de klinkers.\",\r\n\r\n            helper:\r\n              \"Nu zonder hulp bovenaan.\",\r\n\r\n            stimulus:\r\n              \"school\",\r\n\r\n            correct:\r\n              \"oo\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"text\",\r\n\r\n            label:\r\n              \"Welke hoor je?\",\r\n\r\n            question:\r\n              \"Welke klinkers hoor je?\",\r\n\r\n            helper:\r\n              \"Zeg het woord rustig.\",\r\n\r\n            stimulus:\r\n              \"stoel\",\r\n\r\n            correct:\r\n              \"oe\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Eerste klinker\",\r\n\r\n            question:\r\n              \"Welke klinker hoor je eerst?\",\r\n\r\n            helper:\r\n              \"Luister naar het begin van het woord.\",\r\n\r\n            stimulus:\r\n              \"ijs\",\r\n\r\n            answers:[\r\n              \"i\",\r\n              \"a\",\r\n              \"u\"\r\n            ],\r\n\r\n            correct:\r\n              \"i\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"text\",\r\n\r\n            label:\r\n              \"Zelf toepassen\",\r\n\r\n            question:\r\n              \"Typ alleen de klinkers.\",\r\n\r\n            helper:\r\n              \"Je kunt dit nu zelf proberen.\",\r\n\r\n            stimulus:\r\n              \"paraplu\",\r\n\r\n            correct:\r\n              \"aau\"\r\n\r\n          }\r\n\r\n        ]\r\n\r\n      }\r\n\r\n    ];\r\n\r\n\r\n    \/* =========================================\r\n       STATE\r\n    ========================================= *\/\r\n\r\n    let klLevelIndex=0;\r\n\r\n    let klQuestionIndex=0;\r\n\r\n    let klCorrect=0;\r\n\r\n    let klAnswered=false;\r\n\r\n\r\n    const klTotal=\r\n      klLevels.reduce(\r\n        function(total,level){\r\n\r\n          return total+\r\n            level.questions.length;\r\n\r\n        },\r\n        0\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       DOM\r\n    ========================================= *\/\r\n\r\n    const klLevelPill=\r\n      document.getElementById(\r\n        \"klLevelPill\"\r\n      );\r\n\r\n\r\n    const klQuestionCounter=\r\n      document.getElementById(\r\n        \"klQuestionCounter\"\r\n      );\r\n\r\n\r\n    const klProgressBar=\r\n      document.getElementById(\r\n        \"klProgressBar\"\r\n      );\r\n\r\n\r\n    const klQuestionType=\r\n      document.getElementById(\r\n        \"klQuestionType\"\r\n      );\r\n\r\n\r\n    const klQuestionTitle=\r\n      document.getElementById(\r\n        \"klQuestionTitle\"\r\n      );\r\n\r\n\r\n    const klHelper=\r\n      document.getElementById(\r\n        \"klHelper\"\r\n      );\r\n\r\n\r\n    const klStimulus=\r\n      document.getElementById(\r\n        \"klStimulus\"\r\n      );\r\n\r\n\r\n    const klAnswerArea=\r\n      document.getElementById(\r\n        \"klAnswerArea\"\r\n      );\r\n\r\n\r\n    const klFeedback=\r\n      document.getElementById(\r\n        \"klFeedback\"\r\n      );\r\n\r\n\r\n    const klNextWrap=\r\n      document.getElementById(\r\n        \"klNextWrap\"\r\n      );\r\n\r\n\r\n    const klNextBtn=\r\n      document.getElementById(\r\n        \"klNextBtn\"\r\n      );\r\n\r\n\r\n    const klSupport=\r\n      document.getElementById(\r\n        \"klSupport\"\r\n      );\r\n\r\n\r\n    const klIfiAvatar=\r\n      document.getElementById(\r\n        \"klIfiAvatar\"\r\n      );\r\n\r\n\r\n    const klIfiMessage=\r\n      document.getElementById(\r\n        \"klIfiMessage\"\r\n      );\r\n\r\n\r\n    const klExerciseContent=\r\n      document.getElementById(\r\n        \"klExerciseContent\"\r\n      );\r\n\r\n\r\n    const klTransition=\r\n      document.getElementById(\r\n        \"klTransition\"\r\n      );\r\n\r\n\r\n    const klTransitionTitle=\r\n      document.getElementById(\r\n        \"klTransitionTitle\"\r\n      );\r\n\r\n\r\n    const klTransitionText=\r\n      document.getElementById(\r\n        \"klTransitionText\"\r\n      );\r\n\r\n\r\n    const klStartNextLevel=\r\n      document.getElementById(\r\n        \"klStartNextLevel\"\r\n      );\r\n\r\n\r\n    const klFinish=\r\n      document.getElementById(\r\n        \"klFinish\"\r\n      );\r\n\r\n\r\n    const klResultText=\r\n      document.getElementById(\r\n        \"klResultText\"\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       HELPERS\r\n    ========================================= *\/\r\n\r\n    function klNormalize(value){\r\n\r\n      return String(value)\r\n        .trim()\r\n        .toLowerCase()\r\n        .replace(\/\\s+\/g,\" \");\r\n\r\n    }\r\n\r\n\r\n    function klShuffle(array){\r\n\r\n      return array\r\n        .map(\r\n          function(item){\r\n\r\n            return {\r\n\r\n              item:item,\r\n\r\n              sort:\r\n                Math.random()\r\n\r\n            };\r\n\r\n          }\r\n        )\r\n\r\n        .sort(\r\n          function(a,b){\r\n\r\n            return a.sort-b.sort;\r\n\r\n          }\r\n        )\r\n\r\n        .map(\r\n          function(entry){\r\n\r\n            return entry.item;\r\n\r\n          }\r\n        );\r\n\r\n    }\r\n\r\n\r\n    klLevels.forEach(\r\n      function(level){\r\n\r\n        level.questions=\r\n          klShuffle(\r\n            level.questions\r\n          );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    function klCompletedCount(){\r\n\r\n      let amount=0;\r\n\r\n\r\n      for(\r\n        let i=0;\r\n        i<klLevelIndex;\r\n        i++\r\n      ){\r\n\r\n        amount+=\r\n          klLevels[i]\r\n            .questions\r\n            .length;\r\n\r\n      }\r\n\r\n\r\n      return amount+\r\n        klQuestionIndex;\r\n\r\n    }\r\n\r\n\r\n    function klUpdateRoute(){\r\n\r\n      for(\r\n        let i=1;\r\n        i<=3;\r\n        i++\r\n      ){\r\n\r\n        const node=\r\n          document.getElementById(\r\n            \"klRoute\"+i\r\n          );\r\n\r\n\r\n        node.classList.remove(\r\n          \"active\",\r\n          \"done\"\r\n        );\r\n\r\n\r\n        if(\r\n          i-1 <\r\n          klLevelIndex\r\n        ){\r\n\r\n          node.classList.add(\r\n            \"done\"\r\n          );\r\n\r\n        }\r\n\r\n\r\n        if(\r\n          i-1 ===\r\n          klLevelIndex\r\n        ){\r\n\r\n          node.classList.add(\r\n            \"active\"\r\n          );\r\n\r\n        }\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       IFI WISSELEN\r\n    ========================================= *\/\r\n\r\n    function klSetIfi(\r\n      role,\r\n      message\r\n    ){\r\n\r\n      klIfiAvatar.style.opacity=\r\n        \"0\";\r\n\r\n\r\n      klIfiAvatar.style.transform=\r\n        \"translateY(6px)\";\r\n\r\n\r\n      setTimeout(\r\n        function(){\r\n\r\n          klIfiAvatar.src=\r\n            KL_IFI[role];\r\n\r\n\r\n          klIfiMessage.textContent=\r\n            message;\r\n\r\n\r\n          klIfiAvatar.style.opacity=\r\n            \"1\";\r\n\r\n\r\n          klIfiAvatar.style.transform=\r\n            \"translateY(0)\";\r\n\r\n        },\r\n        150\r\n      );\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       ADAPTIVE EVENT\r\n    ========================================= *\/\r\n\r\n    function klEmit(\r\n      name,\r\n      detail\r\n    ){\r\n\r\n      window.dispatchEvent(\r\n\r\n        new CustomEvent(\r\n          name,\r\n          {\r\n            detail:detail\r\n          }\r\n        )\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       RENDER QUESTION\r\n    ========================================= *\/\r\n\r\n    function klRender(){\r\n\r\n      klAnswered=false;\r\n\r\n\r\n      const level=\r\n        klLevels[\r\n          klLevelIndex\r\n        ];\r\n\r\n\r\n      const question=\r\n        level.questions[\r\n          klQuestionIndex\r\n        ];\r\n\r\n\r\n      klExerciseContent.style.display=\r\n        \"block\";\r\n\r\n\r\n      klTransition.style.display=\r\n        \"none\";\r\n\r\n\r\n      klFinish.style.display=\r\n        \"none\";\r\n\r\n\r\n      klLevelPill.textContent=\r\n        level.title;\r\n\r\n\r\n      const overall=\r\n        klCompletedCount()+1;\r\n\r\n\r\n      klQuestionCounter.textContent=\r\n        \"Vraag \"+\r\n        overall+\r\n        \" van \"+\r\n        klTotal;\r\n\r\n\r\n      klProgressBar.style.width=\r\n        Math.round(\r\n          (\r\n            klCompletedCount() \/\r\n            klTotal\r\n          ) * 100\r\n        )+\"%\";\r\n\r\n\r\n      klQuestionType.textContent=\r\n        question.label;\r\n\r\n\r\n      klQuestionTitle.textContent=\r\n        question.question;\r\n\r\n\r\n      klHelper.textContent=\r\n        question.helper || \"\";\r\n\r\n\r\n      klStimulus.textContent=\r\n        question.stimulus || \"\";\r\n\r\n\r\n      klStimulus.className=\r\n        \"kl-stimulus\" +\r\n        (\r\n          question.stimulus &&\r\n          question.stimulus.length>2\r\n\r\n          ? \" word\"\r\n\r\n          : \"\"\r\n        );\r\n\r\n\r\n      klFeedback.textContent=\r\n        \"\";\r\n\r\n\r\n      klFeedback.className=\r\n        \"kl-feedback\";\r\n\r\n\r\n      klNextWrap.style.display=\r\n        \"none\";\r\n\r\n\r\n      klAnswerArea.innerHTML=\r\n        \"\";\r\n\r\n\r\n      \/* =====================================\r\n         KLINKERS ALLEEN LEVEL 1\r\n      ====================================== *\/\r\n\r\n      klSupport.style.display=\r\n        klLevelIndex===0\r\n\r\n        ? \"block\"\r\n\r\n        : \"none\";\r\n\r\n\r\n      \/* =====================================\r\n         IFI PER LEVEL\r\n      ====================================== *\/\r\n\r\n      if(\r\n        klLevelIndex===0\r\n      ){\r\n\r\n        klSetIfi(\r\n\r\n          \"uitleg\",\r\n\r\n          \"Kijk rustig naar de opdracht. De klinkers bovenaan mogen je nog helpen.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else if(\r\n        klLevelIndex===1\r\n      ){\r\n\r\n        klSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          \"Nu staan de klinkers niet meer bovenaan. Denk rustig na. Je weet al meer dan net.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        klSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          \"Je bent bij Level 3. Kijk goed naar het woord en probeer eerst zelf te bedenken welke klinkers je hoort.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n\r\n      \/* =====================================\r\n         KEUZEVRAAG\r\n      ====================================== *\/\r\n\r\n      if(\r\n        question.type===\r\n        \"choice\"\r\n      ){\r\n\r\n        const wrap=\r\n          document.createElement(\r\n            \"div\"\r\n          );\r\n\r\n\r\n        wrap.className=\r\n          \"kl-antwoorden\";\r\n\r\n\r\n        klShuffle(\r\n          question.answers\r\n        )\r\n        .forEach(\r\n          function(answer){\r\n\r\n            const button=\r\n              document.createElement(\r\n                \"button\"\r\n              );\r\n\r\n\r\n            button.type=\r\n              \"button\";\r\n\r\n\r\n            button.className=\r\n              \"kl-answer\";\r\n\r\n\r\n            button.textContent=\r\n              answer;\r\n\r\n\r\n            button.addEventListener(\r\n\r\n              \"click\",\r\n\r\n              function(){\r\n\r\n                klSubmit(\r\n                  answer,\r\n                  button\r\n                );\r\n\r\n              }\r\n\r\n            );\r\n\r\n\r\n            wrap.appendChild(\r\n              button\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n\r\n        klAnswerArea.appendChild(\r\n          wrap\r\n        );\r\n\r\n      }\r\n\r\n\r\n      \/* =====================================\r\n         TYPEVRAAG\r\n      ====================================== *\/\r\n\r\n      if(\r\n        question.type===\r\n        \"text\"\r\n      ){\r\n\r\n        const wrap=\r\n          document.createElement(\r\n            \"div\"\r\n          );\r\n\r\n\r\n        wrap.className=\r\n          \"kl-input-wrap\";\r\n\r\n\r\n        wrap.innerHTML=`\r\n\r\n          <input\r\n            type=\"text\"\r\n            class=\"kl-input\"\r\n            id=\"klTextInput\"\r\n            autocomplete=\"off\"\r\n            autocapitalize=\"off\"\r\n            spellcheck=\"false\"\r\n            placeholder=\"Typ hier...\"\r\n          >\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"kl-check-btn\"\r\n            id=\"klCheckText\">\r\n\r\n            Nakijken \ud83c\udf3f\r\n\r\n          <\/button>\r\n\r\n        `;\r\n\r\n\r\n        klAnswerArea.appendChild(\r\n          wrap\r\n        );\r\n\r\n\r\n        const input=\r\n          document.getElementById(\r\n            \"klTextInput\"\r\n          );\r\n\r\n\r\n        document\r\n          .getElementById(\r\n            \"klCheckText\"\r\n          )\r\n          .addEventListener(\r\n\r\n            \"click\",\r\n\r\n            function(){\r\n\r\n              klSubmit(\r\n                input.value,\r\n                input\r\n              );\r\n\r\n            }\r\n\r\n          );\r\n\r\n\r\n        input.addEventListener(\r\n\r\n          \"keydown\",\r\n\r\n          function(event){\r\n\r\n            if(\r\n              event.key===\r\n              \"Enter\"\r\n            ){\r\n\r\n              klSubmit(\r\n                input.value,\r\n                input\r\n              );\r\n\r\n            }\r\n\r\n          }\r\n\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       ANTWOORD CONTROLEREN\r\n    ========================================= *\/\r\n\r\n    function klSubmit(\r\n      value,\r\n      node\r\n    ){\r\n\r\n      if(\r\n        klAnswered\r\n      ){\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      klAnswered=true;\r\n\r\n\r\n      const question=\r\n        klLevels[\r\n          klLevelIndex\r\n        ]\r\n        .questions[\r\n          klQuestionIndex\r\n        ];\r\n\r\n\r\n      const correct=\r\n        klNormalize(value) ===\r\n        klNormalize(\r\n          question.correct\r\n        );\r\n\r\n\r\n      if(\r\n        correct\r\n      ){\r\n\r\n        klCorrect++;\r\n\r\n\r\n        node.classList.add(\r\n          \"correct\"\r\n        );\r\n\r\n\r\n        const successTexts=[\r\n\r\n          \"Mooi gezien.\",\r\n\r\n          \"Dat klopt.\",\r\n\r\n          \"Je keek goed.\",\r\n\r\n          \"Ja, precies.\"\r\n\r\n        ];\r\n\r\n\r\n        klFeedback.textContent=\r\n          successTexts[\r\n            Math.floor(\r\n              Math.random() *\r\n              successTexts.length\r\n            )\r\n          ];\r\n\r\n\r\n        klFeedback.className=\r\n          \"kl-feedback good\";\r\n\r\n\r\n        const ifiSuccess=[\r\n\r\n          \"Mooi gezien. Ga maar rustig verder.\",\r\n\r\n          \"Dat klopt. Goed gekeken.\",\r\n\r\n          \"Je hebt hem gevonden.\",\r\n\r\n          \"Precies. Je begint het patroon te herkennen.\"\r\n\r\n        ];\r\n\r\n\r\n        klSetIfi(\r\n\r\n          \"goed\",\r\n\r\n          ifiSuccess[\r\n            Math.floor(\r\n              Math.random() *\r\n              ifiSuccess.length\r\n            )\r\n          ]\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        node.classList.add(\r\n          \"try-again\"\r\n        );\r\n\r\n\r\n        klFeedback.textContent=\r\n          \"Kijk nog eens rustig. Het goede antwoord is: \"+\r\n          question.correct+\r\n          \".\";\r\n\r\n\r\n        klFeedback.className=\r\n          \"kl-feedback retry\";\r\n\r\n\r\n        klSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          klLevelIndex===0\r\n\r\n          ? \"Kijk nog eens naar de vijf klinkers bovenaan: a, e, i, o en u.\"\r\n\r\n          : \"Dat geeft niet. Kijk opnieuw naar het woord en luister rustig naar de klanken.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n\r\n      klAnswerArea\r\n        .querySelectorAll(\r\n          \"button,input\"\r\n        )\r\n        .forEach(\r\n          function(item){\r\n\r\n            item.disabled=true;\r\n\r\n          }\r\n        );\r\n\r\n\r\n      klNextWrap.style.display=\r\n        \"block\";\r\n\r\n\r\n      klEmit(\r\n\r\n        \"withifi:klinker-answer\",\r\n\r\n        {\r\n\r\n          level:\r\n            klLevelIndex+1,\r\n\r\n          questionType:\r\n            question.type,\r\n\r\n          question:\r\n            question.question,\r\n\r\n          answer:\r\n            value,\r\n\r\n          expected:\r\n            question.correct,\r\n\r\n          isCorrect:\r\n            correct\r\n\r\n        }\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       VOLGENDE VRAAG\r\n    ========================================= *\/\r\n\r\n    function klNext(){\r\n\r\n      const level=\r\n        klLevels[\r\n          klLevelIndex\r\n        ];\r\n\r\n\r\n      klQuestionIndex++;\r\n\r\n\r\n      if(\r\n        klQuestionIndex <\r\n        level.questions.length\r\n      ){\r\n\r\n        klRender();\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      if(\r\n        klLevelIndex <\r\n        klLevels.length-1\r\n      ){\r\n\r\n        klShowTransition();\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      klComplete();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       LEVEL OVERGANG\r\n    ========================================= *\/\r\n\r\n    function klShowTransition(){\r\n\r\n      klExerciseContent.style.display=\r\n        \"none\";\r\n\r\n\r\n      klTransition.style.display=\r\n        \"block\";\r\n\r\n\r\n      if(\r\n        klLevelIndex===0\r\n      ){\r\n\r\n        klTransitionTitle.textContent=\r\n          \"\ud83c\udf3f Klaar voor Level 2\";\r\n\r\n\r\n        klTransitionText.textContent=\r\n          \"Je hebt geoefend met het herkennen van klinkers. Nu verdwijnen de voorbeeldletters en ga je ze zelf zoeken in woorden.\";\r\n\r\n\r\n        klSetIfi(\r\n\r\n          \"uitleg\",\r\n\r\n          \"Nu gaan we het een klein beetje moeilijker maken. Je hoeft nog steeds niet snel te zijn.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        klTransitionTitle.textContent=\r\n          \"\ud83c\udf33 Klaar voor Level 3\";\r\n\r\n\r\n        klTransitionText.textContent=\r\n          \"Je kunt klinkers al herkennen en zoeken. Nu mag je steeds meer zelf doen.\";\r\n\r\n\r\n        klSetIfi(\r\n\r\n          \"goed\",\r\n\r\n          \"Ik zie dat je er klaar voor bent. We doen nog \u00e9\u00e9n level samen.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    function klNextLevel(){\r\n\r\n      klLevelIndex++;\r\n\r\n      klQuestionIndex=0;\r\n\r\n\r\n      klUpdateRoute();\r\n\r\n      klRender();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       KLAAR\r\n    ========================================= *\/\r\n\r\n    function klComplete(){\r\n\r\n      klExerciseContent.style.display=\r\n        \"none\";\r\n\r\n\r\n      klTransition.style.display=\r\n        \"none\";\r\n\r\n\r\n      klFinish.style.display=\r\n        \"block\";\r\n\r\n\r\n      klProgressBar.style.width=\r\n        \"100%\";\r\n\r\n\r\n      const percentage=\r\n        Math.round(\r\n          (\r\n            klCorrect \/\r\n            klTotal\r\n          ) * 100\r\n        );\r\n\r\n\r\n      klResultText.innerHTML=\r\n\r\n        \"Je hebt alle drie de levels doorlopen.<br>\" +\r\n\r\n        \"Je had <strong>\" +\r\n        klCorrect +\r\n        \" van de \" +\r\n        klTotal +\r\n        \"<\/strong> opdrachten goed (\" +\r\n        percentage +\r\n        \"%).<br><br>\" +\r\n\r\n        \"Je hebt geoefend met herkennen, zoeken, luisteren en zelf toepassen.\";\r\n\r\n\r\n      klSetIfi(\r\n\r\n        \"goed\",\r\n\r\n        \"Goed gedaan. Je hebt vandaag klinkers herkend, gezocht en zelf toegepast.\"\r\n\r\n      );\r\n\r\n\r\n      klEmit(\r\n\r\n        \"withifi:klinker-complete\",\r\n\r\n        {\r\n\r\n          topic:\r\n            \"Klinkers\",\r\n\r\n          levelsCompleted:\r\n            3,\r\n\r\n          correct:\r\n            klCorrect,\r\n\r\n          total:\r\n            klTotal,\r\n\r\n          percentage:\r\n            percentage\r\n\r\n        }\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       OPNIEUW\r\n    ========================================= *\/\r\n\r\n    function klRestart(){\r\n\r\n      klLevelIndex=0;\r\n\r\n      klQuestionIndex=0;\r\n\r\n      klCorrect=0;\r\n\r\n      klAnswered=false;\r\n\r\n\r\n      klLevels.forEach(\r\n        function(level){\r\n\r\n          level.questions=\r\n            klShuffle(\r\n              level.questions\r\n            );\r\n\r\n        }\r\n      );\r\n\r\n\r\n      klUpdateRoute();\r\n\r\n\r\n      klSetIfi(\r\n\r\n        \"uitleg\",\r\n\r\n        \"We beginnen gewoon opnieuw. Rustig kijken is genoeg.\"\r\n\r\n      );\r\n\r\n\r\n      klRender();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       BUTTON EVENTS\r\n    ========================================= *\/\r\n\r\n    klNextBtn.addEventListener(\r\n\r\n      \"click\",\r\n\r\n      klNext\r\n\r\n    );\r\n\r\n\r\n    klStartNextLevel.addEventListener(\r\n\r\n      \"click\",\r\n\r\n      klNextLevel\r\n\r\n    );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"klRestartBtn\"\r\n      )\r\n      .addEventListener(\r\n\r\n        \"click\",\r\n\r\n        klRestart\r\n\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       START\r\n    ========================================= *\/\r\n\r\n    klUpdateRoute();\r\n\r\n    klRender();\r\n\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 Woordenwereld Klinkers ontdekken. De letters a, e, i, o en u noemen we klinkers. Eerst leer je ze herkennen. Daarna ga je ze zelf zoeken in woorden. Uiteindelijk ontdek je steeds meer helemaal zelf. \ud83c\udf31 Level 1 \u00b7 Herkennen Kijken welke letters klinkers zijn. \ud83c\udf3f Level 2 \u00b7 Zoeken Klinkers zoeken en tellen in [&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-664","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/664","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=664"}],"version-history":[{"count":52,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/664\/revisions"}],"predecessor-version":[{"id":4351,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/664\/revisions\/4351"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}