{"id":800,"date":"2026-02-10T03:21:48","date_gmt":"2026-02-10T03:21:48","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?page_id=800"},"modified":"2026-08-29T04:40:48","modified_gmt":"2026-08-29T04:40:48","slug":"oefenen-met-lange-korte-klanken","status":"publish","type":"page","link":"https:\/\/withifi.muhubonurture.nl\/?page_id=800","title":{"rendered":"Oefenen Met Lange &amp; Korte Klanken"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"800\" class=\"elementor elementor-800\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-38bba90 e-con-full e-flex e-con e-parent\" data-id=\"38bba90\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-01325fa elementor-widget elementor-widget-html\" data-id=\"01325fa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================\r\n     WITH IFI \u2014 KLANKEN 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.kk-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.kk-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.kk-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.kk-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.kk-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.kk-intro{\r\n  max-width:790px;\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.kk-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.kk-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.kk-route-level:nth-child(1){\r\n  background:linear-gradient(135deg,#FFF4E3,#FFF9EF);\r\n}\r\n\r\n.kk-route-level:nth-child(2){\r\n  background:linear-gradient(135deg,#EAF7F1,#F7FFFB);\r\n}\r\n\r\n.kk-route-level:nth-child(3){\r\n  background:linear-gradient(135deg,#FFEAF1,#FFF7FA);\r\n}\r\n\r\n.kk-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.kk-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.kk-route-level.done{\r\n  opacity:.72;\r\n}\r\n\r\n.kk-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.kk-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.kk-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   SUPPORT \u2014 LEVEL 1\r\n========================================= *\/\r\n\r\n.kk-support{\r\n  max-width:900px;\r\n  margin:0 auto 2.3rem;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.kk-support-title{\r\n  margin-bottom:1rem;\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:.95rem;\r\n  font-weight:850;\r\n}\r\n\r\n.kk-support-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(2,1fr);\r\n\r\n  gap:1rem;\r\n}\r\n\r\n.kk-support-card{\r\n  padding:1.2rem 1.4rem;\r\n\r\n  border-radius:24px;\r\n\r\n  background:rgba(255,255,255,.82);\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  box-shadow:0 8px 20px rgba(90,70,55,.06);\r\n}\r\n\r\n.kk-support-card.short{\r\n  background:linear-gradient(135deg,#FFF4E8,#FFF9F3);\r\n}\r\n\r\n.kk-support-card.long{\r\n  background:linear-gradient(135deg,#EAF7F1,#F8FFFB);\r\n}\r\n\r\n.kk-support-card strong{\r\n  display:block;\r\n\r\n  margin-bottom:.35rem;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:1.05rem;\r\n  font-weight:950;\r\n}\r\n\r\n.kk-support-card span{\r\n  color:#7A6455;\r\n\r\n  font-size:.95rem;\r\n  line-height:1.6;\r\n  font-weight:700;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   OEFENKAART\r\n========================================= *\/\r\n\r\n.kk-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.kk-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.kk-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.kk-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.kk-level-pill,\r\n.kk-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.kk-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.kk-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.kk-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.kk-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.kk-helper{\r\n  max-width:650px;\r\n\r\n  margin:0 auto 1.6rem;\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.kk-stimulus{\r\n  margin:1.2rem auto 2rem;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:clamp(2.6rem,6vw,4.7rem);\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.kk-stimulus.pair{\r\n  font-size:clamp(2rem,5vw,3.5rem);\r\n}\r\n\r\n\r\n\/* =========================================\r\n   KLANK VISUAL\r\n========================================= *\/\r\n\r\n.kk-sound-hint{\r\n  display:none;\r\n\r\n  max-width:470px;\r\n\r\n  margin:-.6rem auto 1.6rem;\r\n\r\n  padding:.9rem 1.1rem;\r\n\r\n  border-radius:20px;\r\n\r\n  background:rgba(255,248,239,.82);\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:.95rem;\r\n\r\n  line-height:1.6;\r\n\r\n  font-weight:750;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   ANTWOORDEN\r\n========================================= *\/\r\n\r\n.kk-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.kk-answer{\r\n  min-width:145px;\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.kk-answer:hover{\r\n  transform:translateY(-2px);\r\n\r\n  background:#FFF0DE;\r\n}\r\n\r\n.kk-answer.correct{\r\n  background:#DDF5E4 !important;\r\n\r\n  color:#315D43 !important;\r\n}\r\n\r\n.kk-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   INPUT\r\n========================================= *\/\r\n\r\n.kk-input-wrap{\r\n  max-width:430px;\r\n\r\n  margin:0 auto;\r\n}\r\n\r\n.kk-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.3rem;\r\n\r\n  font-weight:900;\r\n\r\n  transition:.2s ease;\r\n}\r\n\r\n.kk-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.kk-input.correct{\r\n  background:#F0FAF3;\r\n\r\n  border-color:#C4E4CF;\r\n}\r\n\r\n.kk-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.kk-check-btn,\r\n.kk-next-btn,\r\n.kk-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.kk-check-btn:hover,\r\n.kk-next-btn:hover,\r\n.kk-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.kk-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.kk-feedback.good{\r\n  color:#47735A;\r\n}\r\n\r\n.kk-feedback.retry{\r\n  color:#8A6555;\r\n}\r\n\r\n.kk-next-wrap{\r\n  display:none;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   IFI RECHTS\r\n========================================= *\/\r\n\r\n.kk-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.kk-ifi-side-avatar{\r\n  display:block;\r\n\r\n  width:205px;\r\n\r\n  max-width:100%;\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.kk-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.kk-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  font-weight:900;\r\n}\r\n\r\n.kk-ifi-message{\r\n  margin:0;\r\n\r\n  color:#5F4B3F;\r\n\r\n  font-size:.95rem;\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.kk-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.kk-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.kk-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.kk-finish{\r\n  display:none;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.kk-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.kk-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.kk-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  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.kk-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  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  .kk-oefen-layout{\r\n    grid-template-columns:minmax(0,1fr) 175px;\r\n\r\n    gap:1.2rem;\r\n  }\r\n\r\n  .kk-ifi-side-avatar{\r\n    width:155px;\r\n  }\r\n\r\n  .kk-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  .kk-page{\r\n    padding:4rem 5vw;\r\n  }\r\n\r\n  .kk-hero{\r\n    padding:2.3rem 1.7rem;\r\n  }\r\n\r\n  .kk-level-route{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .kk-support-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .kk-oefen-box{\r\n    padding:1.5rem 1.15rem;\r\n  }\r\n\r\n  .kk-oefen-layout{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .kk-oefen-top{\r\n    justify-content:center;\r\n\r\n    flex-wrap:wrap;\r\n  }\r\n\r\n  .kk-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  .kk-ifi-side-avatar{\r\n    width:95px;\r\n\r\n    flex-shrink:0;\r\n  }\r\n\r\n  .kk-ifi-side-bubble{\r\n    text-align:left;\r\n  }\r\n\r\n  .kk-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  .kk-ifi-side{\r\n    flex-direction:column;\r\n\r\n    text-align:center;\r\n  }\r\n\r\n  .kk-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=\"kk-wrap\">\r\n\r\n\r\n    <!-- =====================================\r\n         HERO\r\n    ====================================== -->\r\n\r\n    <div class=\"kk-hero\">\r\n\r\n      <div class=\"kk-label\">\r\n        \ud83d\udc42 Woordenwereld\r\n      <\/div>\r\n\r\n      <h1 class=\"kk-title\">\r\n        Klanken ontdekken.\r\n      <\/h1>\r\n\r\n      <p class=\"kk-intro\">\r\n        In woorden kunnen klinkers\r\n        <strong>kort<\/strong> of <strong>lang<\/strong> klinken.\r\n        Luister bijvoorbeeld naar\r\n        <strong>man<\/strong> en <strong>maan<\/strong>.\r\n        Eerst leren we het verschil horen.\r\n        Daarna ga je vergelijken en uiteindelijk zelf herkennen welke klank je hoort.\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=\"kk-level-route\">\r\n\r\n      <div\r\n        class=\"kk-route-level active\"\r\n        id=\"kkRoute1\">\r\n\r\n        <div class=\"kk-route-icon\">\r\n          \ud83c\udf31\r\n        <\/div>\r\n\r\n        <h3>\r\n          Level 1 \u00b7 Horen\r\n        <\/h3>\r\n\r\n        <p>\r\n          Luisteren of een klinker kort of lang klinkt.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"kk-route-level\"\r\n        id=\"kkRoute2\">\r\n\r\n        <div class=\"kk-route-icon\">\r\n          \ud83c\udf3f\r\n        <\/div>\r\n\r\n        <h3>\r\n          Level 2 \u00b7 Vergelijken\r\n        <\/h3>\r\n\r\n        <p>\r\n          Woorden en klinkerklanken naast elkaar leggen.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"kk-route-level\"\r\n        id=\"kkRoute3\">\r\n\r\n        <div class=\"kk-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 herkennen, kiezen en de klank typen.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================\r\n         SUPPORT \u2014 LEVEL 1\r\n    ====================================== -->\r\n\r\n    <div\r\n      class=\"kk-support\"\r\n      id=\"kkSupport\">\r\n\r\n      <div class=\"kk-support-title\">\r\n        Luister naar het verschil\r\n      <\/div>\r\n\r\n      <div class=\"kk-support-grid\">\r\n\r\n        <div class=\"kk-support-card short\">\r\n\r\n          <strong>\r\n            \ud83d\udc42 Korte klank\r\n          <\/strong>\r\n\r\n          <span>\r\n            man \u00b7 pen \u00b7 vis \u00b7 bos \u00b7 bus\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n\r\n        <div class=\"kk-support-card long\">\r\n\r\n          <strong>\r\n            \ud83c\udfb5 Lange klank\r\n          <\/strong>\r\n\r\n          <span>\r\n            maan \u00b7 been \u00b7 vier \u00b7 boot \u00b7 vuur\r\n          <\/span>\r\n\r\n        <\/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=\"kk-oefen-box\">\r\n\r\n      <div class=\"kk-oefen-layout\">\r\n\r\n\r\n        <!-- =================================\r\n             LINKERKANT \u2014 OEFENING\r\n        ================================== -->\r\n\r\n        <div class=\"kk-oefen-main\">\r\n\r\n\r\n          <!-- NORMALE OEFENING -->\r\n\r\n          <div id=\"kkExerciseContent\">\r\n\r\n\r\n            <div class=\"kk-oefen-top\">\r\n\r\n              <div\r\n                class=\"kk-level-pill\"\r\n                id=\"kkLevelPill\">\r\n\r\n                \ud83c\udf31 Level 1 \u00b7 Horen\r\n\r\n              <\/div>\r\n\r\n\r\n              <div\r\n                class=\"kk-vraag-pill\"\r\n                id=\"kkQuestionCounter\">\r\n\r\n                Vraag 1\r\n\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"kk-progress-wrap\">\r\n\r\n              <div\r\n                class=\"kk-progress-bar\"\r\n                id=\"kkProgressBar\">\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"kk-vraag-type\"\r\n              id=\"kkQuestionType\">\r\n\r\n              Luisteren\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"kk-vraag-title\"\r\n              id=\"kkQuestionTitle\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"kk-helper\"\r\n              id=\"kkHelper\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"kk-stimulus\"\r\n              id=\"kkStimulus\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"kk-sound-hint\"\r\n              id=\"kkSoundHint\">\r\n            <\/div>\r\n\r\n\r\n            <div id=\"kkAnswerArea\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"kk-feedback\"\r\n              id=\"kkFeedback\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"kk-next-wrap\"\r\n              id=\"kkNextWrap\">\r\n\r\n              <button\r\n                type=\"button\"\r\n                class=\"kk-next-btn\"\r\n                id=\"kkNextBtn\">\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=\"kk-level-transition\"\r\n            id=\"kkTransition\">\r\n\r\n            <h3 id=\"kkTransitionTitle\">\r\n            <\/h3>\r\n\r\n            <p id=\"kkTransitionText\">\r\n            <\/p>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"kk-next-btn\"\r\n              id=\"kkStartNextLevel\">\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=\"kk-finish\"\r\n            id=\"kkFinish\">\r\n\r\n            <img decoding=\"async\"\r\n              class=\"kk-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=\"kkResultText\">\r\n            <\/p>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"kk-restart-btn\"\r\n              id=\"kkRestartBtn\">\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=\"kk-ifi-side\">\r\n\r\n          <img decoding=\"async\"\r\n            id=\"kkIfiAvatar\"\r\n            class=\"kk-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=\"kk-ifi-side-bubble\">\r\n\r\n            <div class=\"kk-ifi-name\">\r\n              IFI helpt je \ud83c\udf3f\r\n            <\/div>\r\n\r\n            <p\r\n              class=\"kk-ifi-message\"\r\n              id=\"kkIfiMessage\">\r\n\r\n              Zeg het woord rustig hardop.\r\n              Luister vooral naar de klinker.\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=\"kk-note\">\r\n\r\n      Kleine reminder \ud83c\udf38<br>\r\n\r\n      Je hoeft het verschil niet meteen te horen.\r\n      Zeg het woord langzaam hardop en luister vooral naar de klinker.\r\n      Door vergelijken wordt het steeds duidelijker.\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 KK_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 kkLevels = [\r\n\r\n\r\n      \/* =======================================\r\n         LEVEL 1 \u2014 HOREN\r\n      ======================================= *\/\r\n\r\n      {\r\n\r\n        level:1,\r\n\r\n        title:\r\n          \"\ud83c\udf31 Level 1 \u00b7 Horen\",\r\n\r\n        questions:[\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Kort of lang?\",\r\n\r\n            question:\r\n              \"Welke klinkerklank hoor je?\",\r\n\r\n            helper:\r\n              \"Zeg het woord rustig: maan.\",\r\n\r\n            stimulus:\r\n              \"maan\",\r\n\r\n            answers:[\r\n              \"Korte klank\",\r\n              \"Lange klank\"\r\n            ],\r\n\r\n            correct:\r\n              \"Lange klank\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Kort of lang?\",\r\n\r\n            question:\r\n              \"Welke klinkerklank hoor je?\",\r\n\r\n            helper:\r\n              \"Zeg het woord rustig: man.\",\r\n\r\n            stimulus:\r\n              \"man\",\r\n\r\n            answers:[\r\n              \"Korte klank\",\r\n              \"Lange klank\"\r\n            ],\r\n\r\n            correct:\r\n              \"Korte klank\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Luister goed\",\r\n\r\n            question:\r\n              \"Is de klinker kort of lang?\",\r\n\r\n            helper:\r\n              \"Zeg: boot.\",\r\n\r\n            stimulus:\r\n              \"boot\",\r\n\r\n            answers:[\r\n              \"Kort\",\r\n              \"Lang\"\r\n            ],\r\n\r\n            correct:\r\n              \"Lang\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Luister goed\",\r\n\r\n            question:\r\n              \"Is de klinker kort of lang?\",\r\n\r\n            helper:\r\n              \"Zeg: bos.\",\r\n\r\n            stimulus:\r\n              \"bos\",\r\n\r\n            answers:[\r\n              \"Kort\",\r\n              \"Lang\"\r\n            ],\r\n\r\n            correct:\r\n              \"Kort\"\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 soort klinkerklank hoor je?\",\r\n\r\n            helper:\r\n              \"Zeg het woord langzaam: vuur.\",\r\n\r\n            stimulus:\r\n              \"vuur\",\r\n\r\n            answers:[\r\n              \"Korte klank\",\r\n              \"Lange klank\"\r\n            ],\r\n\r\n            correct:\r\n              \"Lange klank\"\r\n\r\n          }\r\n\r\n        ]\r\n\r\n      },\r\n\r\n\r\n      \/* =======================================\r\n         LEVEL 2 \u2014 VERGELIJKEN\r\n      ======================================= *\/\r\n\r\n      {\r\n\r\n        level:2,\r\n\r\n        title:\r\n          \"\ud83c\udf3f Level 2 \u00b7 Vergelijken\",\r\n\r\n        questions:[\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Vergelijk de woorden\",\r\n\r\n            question:\r\n              \"In welk woord hoor je de lange a-klank?\",\r\n\r\n            helper:\r\n              \"Zeg beide woorden: man \u2014 maan.\",\r\n\r\n            stimulus:\r\n              \"man \u00b7 maan\",\r\n\r\n            stimulusClass:\r\n              \"pair\",\r\n\r\n            answers:[\r\n              \"man\",\r\n              \"maan\"\r\n            ],\r\n\r\n            correct:\r\n              \"maan\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Vergelijk de woorden\",\r\n\r\n            question:\r\n              \"In welk woord hoor je de korte o-klank?\",\r\n\r\n            helper:\r\n              \"Zeg beide woorden rustig.\",\r\n\r\n            stimulus:\r\n              \"bos \u00b7 boot\",\r\n\r\n            stimulusClass:\r\n              \"pair\",\r\n\r\n            answers:[\r\n              \"bos\",\r\n              \"boot\"\r\n            ],\r\n\r\n            correct:\r\n              \"bos\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Welke klank?\",\r\n\r\n            question:\r\n              \"Welke lange klank hoor je in dit woord?\",\r\n\r\n            helper:\r\n              \"Kijk \u00e9n luister naar het midden van het woord.\",\r\n\r\n            stimulus:\r\n              \"been\",\r\n\r\n            answers:[\r\n              \"aa\",\r\n              \"ee\",\r\n              \"oo\"\r\n            ],\r\n\r\n            correct:\r\n              \"ee\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Welke klank?\",\r\n\r\n            question:\r\n              \"Welke korte klank hoor je in dit woord?\",\r\n\r\n            helper:\r\n              \"Zeg het woord rustig.\",\r\n\r\n            stimulus:\r\n              \"bus\",\r\n\r\n            answers:[\r\n              \"a\",\r\n              \"u\",\r\n              \"o\"\r\n            ],\r\n\r\n            correct:\r\n              \"u\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Vergelijken\",\r\n\r\n            question:\r\n              \"Welk woord heeft een lange klinkerklank?\",\r\n\r\n            helper:\r\n              \"Luister naar beide woorden.\",\r\n\r\n            stimulus:\r\n              \"pen \u00b7 been\",\r\n\r\n            stimulusClass:\r\n              \"pair\",\r\n\r\n            answers:[\r\n              \"pen\",\r\n              \"been\"\r\n            ],\r\n\r\n            correct:\r\n              \"been\"\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              \"Typ de klank\",\r\n\r\n            question:\r\n              \"Welke klinkerklank zie en hoor je?\",\r\n\r\n            helper:\r\n              \"Typ alleen de klinker of klinkers.\",\r\n\r\n            stimulus:\r\n              \"maan\",\r\n\r\n            correct:\r\n              \"aa\"\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 klank\",\r\n\r\n            question:\r\n              \"Welke klinkerklank zie en hoor je?\",\r\n\r\n            helper:\r\n              \"Typ alleen de klinker.\",\r\n\r\n            stimulus:\r\n              \"vis\",\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              \"Zelf herkennen\",\r\n\r\n            question:\r\n              \"Is dit een korte of lange klinkerklank?\",\r\n\r\n            helper:\r\n              \"Probeer eerst zelf te luisteren.\",\r\n\r\n            stimulus:\r\n              \"been\",\r\n\r\n            answers:[\r\n              \"Korte klank\",\r\n              \"Lange klank\"\r\n            ],\r\n\r\n            correct:\r\n              \"Lange klank\"\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 klank\",\r\n\r\n            question:\r\n              \"Welke klinkerklank hoort bij dit woord?\",\r\n\r\n            helper:\r\n              \"Typ alleen de klinker of klinkers.\",\r\n\r\n            stimulus:\r\n              \"bos\",\r\n\r\n            correct:\r\n              \"o\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Zelf vergelijken\",\r\n\r\n            question:\r\n              \"Welk woord heeft de korte klinkerklank?\",\r\n\r\n            helper:\r\n              \"Zeg beide woorden rustig hardop.\",\r\n\r\n            stimulus:\r\n              \"bus \u00b7 buur\",\r\n\r\n            stimulusClass:\r\n              \"pair\",\r\n\r\n            answers:[\r\n              \"bus\",\r\n              \"buur\"\r\n            ],\r\n\r\n            correct:\r\n              \"bus\"\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 kkLevelIndex=0;\r\n\r\n    let kkQuestionIndex=0;\r\n\r\n    let kkCorrect=0;\r\n\r\n    let kkAnswered=false;\r\n\r\n\r\n    const kkTotal=\r\n      kkLevels.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 kkLevelPill=\r\n      document.getElementById(\r\n        \"kkLevelPill\"\r\n      );\r\n\r\n\r\n    const kkQuestionCounter=\r\n      document.getElementById(\r\n        \"kkQuestionCounter\"\r\n      );\r\n\r\n\r\n    const kkProgressBar=\r\n      document.getElementById(\r\n        \"kkProgressBar\"\r\n      );\r\n\r\n\r\n    const kkQuestionType=\r\n      document.getElementById(\r\n        \"kkQuestionType\"\r\n      );\r\n\r\n\r\n    const kkQuestionTitle=\r\n      document.getElementById(\r\n        \"kkQuestionTitle\"\r\n      );\r\n\r\n\r\n    const kkHelper=\r\n      document.getElementById(\r\n        \"kkHelper\"\r\n      );\r\n\r\n\r\n    const kkStimulus=\r\n      document.getElementById(\r\n        \"kkStimulus\"\r\n      );\r\n\r\n\r\n    const kkSoundHint=\r\n      document.getElementById(\r\n        \"kkSoundHint\"\r\n      );\r\n\r\n\r\n    const kkAnswerArea=\r\n      document.getElementById(\r\n        \"kkAnswerArea\"\r\n      );\r\n\r\n\r\n    const kkFeedback=\r\n      document.getElementById(\r\n        \"kkFeedback\"\r\n      );\r\n\r\n\r\n    const kkNextWrap=\r\n      document.getElementById(\r\n        \"kkNextWrap\"\r\n      );\r\n\r\n\r\n    const kkNextBtn=\r\n      document.getElementById(\r\n        \"kkNextBtn\"\r\n      );\r\n\r\n\r\n    const kkSupport=\r\n      document.getElementById(\r\n        \"kkSupport\"\r\n      );\r\n\r\n\r\n    const kkIfiAvatar=\r\n      document.getElementById(\r\n        \"kkIfiAvatar\"\r\n      );\r\n\r\n\r\n    const kkIfiMessage=\r\n      document.getElementById(\r\n        \"kkIfiMessage\"\r\n      );\r\n\r\n\r\n    const kkExerciseContent=\r\n      document.getElementById(\r\n        \"kkExerciseContent\"\r\n      );\r\n\r\n\r\n    const kkTransition=\r\n      document.getElementById(\r\n        \"kkTransition\"\r\n      );\r\n\r\n\r\n    const kkTransitionTitle=\r\n      document.getElementById(\r\n        \"kkTransitionTitle\"\r\n      );\r\n\r\n\r\n    const kkTransitionText=\r\n      document.getElementById(\r\n        \"kkTransitionText\"\r\n      );\r\n\r\n\r\n    const kkStartNextLevel=\r\n      document.getElementById(\r\n        \"kkStartNextLevel\"\r\n      );\r\n\r\n\r\n    const kkFinish=\r\n      document.getElementById(\r\n        \"kkFinish\"\r\n      );\r\n\r\n\r\n    const kkResultText=\r\n      document.getElementById(\r\n        \"kkResultText\"\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       HELPERS\r\n    ========================================= *\/\r\n\r\n    function kkNormalize(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 kkShuffle(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    kkLevels.forEach(\r\n      function(level){\r\n\r\n        level.questions=\r\n          kkShuffle(\r\n            level.questions\r\n          );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    function kkCompletedCount(){\r\n\r\n      let amount=0;\r\n\r\n\r\n      for(\r\n        let i=0;\r\n        i<kkLevelIndex;\r\n        i++\r\n      ){\r\n\r\n        amount+=\r\n          kkLevels[i]\r\n            .questions\r\n            .length;\r\n\r\n      }\r\n\r\n\r\n      return amount+\r\n        kkQuestionIndex;\r\n\r\n    }\r\n\r\n\r\n    function kkUpdateRoute(){\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            \"kkRoute\"+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          kkLevelIndex\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          kkLevelIndex\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\r\n    ========================================= *\/\r\n\r\n    function kkSetIfi(\r\n      role,\r\n      message\r\n    ){\r\n\r\n      kkIfiAvatar.style.opacity=\r\n        \"0\";\r\n\r\n\r\n      kkIfiAvatar.style.transform=\r\n        \"translateY(6px)\";\r\n\r\n\r\n      setTimeout(\r\n        function(){\r\n\r\n          kkIfiAvatar.src=\r\n            KK_IFI[role];\r\n\r\n\r\n          kkIfiMessage.textContent=\r\n            message;\r\n\r\n\r\n          kkIfiAvatar.style.opacity=\r\n            \"1\";\r\n\r\n\r\n          kkIfiAvatar.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 kkEmit(\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\r\n    ========================================= *\/\r\n\r\n    function kkRender(){\r\n\r\n      kkAnswered=false;\r\n\r\n\r\n      const level=\r\n        kkLevels[\r\n          kkLevelIndex\r\n        ];\r\n\r\n\r\n      const question=\r\n        level.questions[\r\n          kkQuestionIndex\r\n        ];\r\n\r\n\r\n      kkExerciseContent.style.display=\r\n        \"block\";\r\n\r\n\r\n      kkTransition.style.display=\r\n        \"none\";\r\n\r\n\r\n      kkFinish.style.display=\r\n        \"none\";\r\n\r\n\r\n      kkLevelPill.textContent=\r\n        level.title;\r\n\r\n\r\n      const overall=\r\n        kkCompletedCount()+1;\r\n\r\n\r\n      kkQuestionCounter.textContent=\r\n        \"Vraag \"+\r\n        overall+\r\n        \" van \"+\r\n        kkTotal;\r\n\r\n\r\n      kkProgressBar.style.width=\r\n        Math.round(\r\n          (\r\n            kkCompletedCount() \/\r\n            kkTotal\r\n          ) * 100\r\n        )+\"%\";\r\n\r\n\r\n      kkQuestionType.textContent=\r\n        question.label;\r\n\r\n\r\n      kkQuestionTitle.textContent=\r\n        question.question;\r\n\r\n\r\n      kkHelper.textContent=\r\n        question.helper || \"\";\r\n\r\n\r\n      kkStimulus.textContent=\r\n        question.stimulus || \"\";\r\n\r\n\r\n      kkStimulus.className=\r\n        \"kk-stimulus\" +\r\n        (\r\n          question.stimulusClass\r\n            ? \" \"+question.stimulusClass\r\n            : \"\"\r\n        );\r\n\r\n\r\n      kkSoundHint.style.display=\r\n        \"none\";\r\n\r\n\r\n      kkSoundHint.textContent=\r\n        \"\";\r\n\r\n\r\n      kkFeedback.textContent=\r\n        \"\";\r\n\r\n\r\n      kkFeedback.className=\r\n        \"kk-feedback\";\r\n\r\n\r\n      kkNextWrap.style.display=\r\n        \"none\";\r\n\r\n\r\n      kkAnswerArea.innerHTML=\r\n        \"\";\r\n\r\n\r\n      \/* =====================================\r\n         SUPPORT ALLEEN LEVEL 1\r\n      ====================================== *\/\r\n\r\n      kkSupport.style.display=\r\n        kkLevelIndex===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        kkLevelIndex===0\r\n      ){\r\n\r\n        kkSetIfi(\r\n\r\n          \"uitleg\",\r\n\r\n          \"Zeg het woord rustig hardop. Luister vooral naar de klinker: stopt de klank snel of kun je hem langer laten klinken?\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else if(\r\n        kkLevelIndex===1\r\n      ){\r\n\r\n        kkSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          \"Nu ga je woorden vergelijken. Zeg ze allebei rustig en luister wat er verandert.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        kkSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          \"Je bent bij Level 3. Probeer eerst zelf te horen welke klinkerklank in het woord zit.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n\r\n      \/* =====================================\r\n         CHOICE\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          \"kk-antwoorden\";\r\n\r\n\r\n        kkShuffle(\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              \"kk-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                kkSubmit(\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        kkAnswerArea.appendChild(\r\n          wrap\r\n        );\r\n\r\n      }\r\n\r\n\r\n      \/* =====================================\r\n         TEXT\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          \"kk-input-wrap\";\r\n\r\n\r\n        wrap.innerHTML=`\r\n\r\n          <input\r\n            type=\"text\"\r\n            class=\"kk-input\"\r\n            id=\"kkTextInput\"\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=\"kk-check-btn\"\r\n            id=\"kkCheckText\">\r\n\r\n            Nakijken \ud83c\udf3f\r\n\r\n          <\/button>\r\n\r\n        `;\r\n\r\n\r\n        kkAnswerArea.appendChild(\r\n          wrap\r\n        );\r\n\r\n\r\n        const input=\r\n          document.getElementById(\r\n            \"kkTextInput\"\r\n          );\r\n\r\n\r\n        document\r\n          .getElementById(\r\n            \"kkCheckText\"\r\n          )\r\n          .addEventListener(\r\n\r\n            \"click\",\r\n\r\n            function(){\r\n\r\n              kkSubmit(\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              kkSubmit(\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 kkSubmit(\r\n      value,\r\n      node\r\n    ){\r\n\r\n      if(\r\n        kkAnswered\r\n      ){\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      kkAnswered=true;\r\n\r\n\r\n      const question=\r\n        kkLevels[\r\n          kkLevelIndex\r\n        ]\r\n        .questions[\r\n          kkQuestionIndex\r\n        ];\r\n\r\n\r\n      const correct=\r\n        kkNormalize(value) ===\r\n        kkNormalize(\r\n          question.correct\r\n        );\r\n\r\n\r\n      if(\r\n        correct\r\n      ){\r\n\r\n        kkCorrect++;\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 gehoord.\",\r\n\r\n          \"Ja, precies.\",\r\n\r\n          \"Dat klopt.\",\r\n\r\n          \"Goed geluisterd.\"\r\n\r\n        ];\r\n\r\n\r\n        kkFeedback.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        kkFeedback.className=\r\n          \"kk-feedback good\";\r\n\r\n\r\n        const ifiSuccess=[\r\n\r\n          \"Mooi gehoord. Ga maar rustig verder.\",\r\n\r\n          \"Ja, precies. Je hoorde de klank goed.\",\r\n\r\n          \"Dat klopt. Goed geluisterd.\",\r\n\r\n          \"Precies. Je begint het verschil steeds beter te horen.\"\r\n\r\n        ];\r\n\r\n\r\n        kkSetIfi(\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        kkFeedback.textContent=\r\n          \"Luister nog eens rustig. Het goede antwoord is: \"+\r\n          question.correct+\r\n          \".\";\r\n\r\n\r\n        kkFeedback.className=\r\n          \"kk-feedback retry\";\r\n\r\n\r\n        kkSoundHint.style.display=\r\n          \"block\";\r\n\r\n\r\n        if(\r\n          kkLevelIndex===0\r\n        ){\r\n\r\n          kkSoundHint.textContent=\r\n            \"Tip: zeg het woord langzaam. Kun je de klinker langer laten doorgaan, of stopt hij snel?\";\r\n\r\n        }\r\n\r\n        else if(\r\n          kkLevelIndex===1\r\n        ){\r\n\r\n          kkSoundHint.textContent=\r\n            \"Tip: zeg de woorden om de beurt. Let alleen op het klinkergedeelte.\";\r\n\r\n        }\r\n\r\n        else{\r\n\r\n          kkSoundHint.textContent=\r\n            \"Tip: kijk naar het midden van het woord en zeg het daarna nog \u00e9\u00e9n keer hardop.\";\r\n\r\n        }\r\n\r\n\r\n        kkSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          kkLevelIndex===0\r\n\r\n          ? \"Dat geeft niet. Zeg het woord nog eens langzaam en luister alleen naar de klinker.\"\r\n\r\n          : \"Probeer opnieuw te luisteren. Welke klank hoor je in het midden van het woord?\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n\r\n      kkAnswerArea\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      kkNextWrap.style.display=\r\n        \"block\";\r\n\r\n\r\n      kkEmit(\r\n\r\n        \"withifi:klank-answer\",\r\n\r\n        {\r\n\r\n          level:\r\n            kkLevelIndex+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       NEXT\r\n    ========================================= *\/\r\n\r\n    function kkNext(){\r\n\r\n      const level=\r\n        kkLevels[\r\n          kkLevelIndex\r\n        ];\r\n\r\n\r\n      kkQuestionIndex++;\r\n\r\n\r\n      if(\r\n        kkQuestionIndex <\r\n        level.questions.length\r\n      ){\r\n\r\n        kkRender();\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      if(\r\n        kkLevelIndex <\r\n        kkLevels.length-1\r\n      ){\r\n\r\n        kkShowTransition();\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      kkComplete();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       LEVEL OVERGANG\r\n    ========================================= *\/\r\n\r\n    function kkShowTransition(){\r\n\r\n      kkExerciseContent.style.display=\r\n        \"none\";\r\n\r\n\r\n      kkTransition.style.display=\r\n        \"block\";\r\n\r\n\r\n      if(\r\n        kkLevelIndex===0\r\n      ){\r\n\r\n        kkTransitionTitle.textContent=\r\n          \"\ud83c\udf3f Klaar voor Level 2\";\r\n\r\n\r\n        kkTransitionText.textContent=\r\n          \"Je hebt geoefend met korte en lange klinkerklanken. Nu ga je woorden naast elkaar zetten en beter luisteren naar het verschil.\";\r\n\r\n\r\n        kkSetIfi(\r\n\r\n          \"uitleg\",\r\n\r\n          \"Nu gaan we vergelijken. Twee woorden kunnen bijna hetzelfde klinken, maar toch een andere klinkerklank hebben.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        kkTransitionTitle.textContent=\r\n          \"\ud83c\udf33 Klaar voor Level 3\";\r\n\r\n\r\n        kkTransitionText.textContent=\r\n          \"Je kunt korte en lange klanken al herkennen en vergelijken. Nu mag je zelf steeds meer ontdekken.\";\r\n\r\n\r\n        kkSetIfi(\r\n\r\n          \"goed\",\r\n\r\n          \"Ik zie dat je er klaar voor bent. Nu ga jij zelf de klanken herkennen.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    function kkNextLevel(){\r\n\r\n      kkLevelIndex++;\r\n\r\n      kkQuestionIndex=0;\r\n\r\n\r\n      kkUpdateRoute();\r\n\r\n      kkRender();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       KLAAR\r\n    ========================================= *\/\r\n\r\n    function kkComplete(){\r\n\r\n      kkExerciseContent.style.display=\r\n        \"none\";\r\n\r\n\r\n      kkTransition.style.display=\r\n        \"none\";\r\n\r\n\r\n      kkFinish.style.display=\r\n        \"block\";\r\n\r\n\r\n      kkProgressBar.style.width=\r\n        \"100%\";\r\n\r\n\r\n      const percentage=\r\n        Math.round(\r\n          (\r\n            kkCorrect \/\r\n            kkTotal\r\n          ) * 100\r\n        );\r\n\r\n\r\n      kkResultText.innerHTML=\r\n\r\n        \"Je hebt alle drie de levels doorlopen.<br>\" +\r\n\r\n        \"Je had <strong>\" +\r\n        kkCorrect +\r\n        \" van de \" +\r\n        kkTotal +\r\n        \"<\/strong> opdrachten goed (\" +\r\n        percentage +\r\n        \"%).<br><br>\" +\r\n\r\n        \"Je hebt geoefend met korte en lange klinkerklanken herkennen, vergelijken en zelf benoemen.\";\r\n\r\n\r\n      kkSetIfi(\r\n\r\n        \"goed\",\r\n\r\n        \"Goed gedaan. Je hebt vandaag heel precies naar klanken geluisterd.\"\r\n\r\n      );\r\n\r\n\r\n      kkEmit(\r\n\r\n        \"withifi:klank-complete\",\r\n\r\n        {\r\n\r\n          topic:\r\n            \"Klanken\",\r\n\r\n          levelsCompleted:\r\n            3,\r\n\r\n          correct:\r\n            kkCorrect,\r\n\r\n          total:\r\n            kkTotal,\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 kkRestart(){\r\n\r\n      kkLevelIndex=0;\r\n\r\n      kkQuestionIndex=0;\r\n\r\n      kkCorrect=0;\r\n\r\n      kkAnswered=false;\r\n\r\n\r\n      kkLevels.forEach(\r\n        function(level){\r\n\r\n          level.questions=\r\n            kkShuffle(\r\n              level.questions\r\n            );\r\n\r\n        }\r\n      );\r\n\r\n\r\n      kkUpdateRoute();\r\n\r\n\r\n      kkSetIfi(\r\n\r\n        \"uitleg\",\r\n\r\n        \"We beginnen gewoon opnieuw. Zeg ieder woord rustig hardop en luister naar de klinker.\"\r\n\r\n      );\r\n\r\n\r\n      kkRender();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       EVENTS\r\n    ========================================= *\/\r\n\r\n    kkNextBtn.addEventListener(\r\n      \"click\",\r\n      kkNext\r\n    );\r\n\r\n\r\n    kkStartNextLevel.addEventListener(\r\n      \"click\",\r\n      kkNextLevel\r\n    );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"kkRestartBtn\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        kkRestart\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       START\r\n    ========================================= *\/\r\n\r\n    kkUpdateRoute();\r\n\r\n    kkRender();\r\n\r\n  }\r\n);\r\n<\/script>\r\n\r\n<!-- With Ifi centrale Sprint 2-runtime: Custom Code 4038 -->\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>\ud83d\udc42 Woordenwereld Klanken ontdekken. In woorden kunnen klinkers kort of lang klinken. Luister bijvoorbeeld naar man en maan. Eerst leren we het verschil horen. Daarna ga je vergelijken en uiteindelijk zelf herkennen welke klank je hoort. \ud83c\udf31 Level 1 \u00b7 Horen Luisteren of een klinker kort of lang klinkt. \ud83c\udf3f Level 2 \u00b7 Vergelijken Woorden [&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-800","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/800","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=800"}],"version-history":[{"count":49,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/800\/revisions"}],"predecessor-version":[{"id":4362,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/800\/revisions\/4362"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}