{"id":683,"date":"2026-02-08T05:45:17","date_gmt":"2026-02-08T05:45:17","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?page_id=683"},"modified":"2026-08-29T04:54:21","modified_gmt":"2026-08-29T04:54:21","slug":"oefenen-met-medeklinkers","status":"publish","type":"page","link":"https:\/\/withifi.muhubonurture.nl\/?page_id=683","title":{"rendered":"Oefenen Met Medeklinkers"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"683\" class=\"elementor elementor-683\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3c75675 e-con-full e-flex e-con e-parent\" data-id=\"3c75675\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3907722 elementor-widget elementor-widget-html\" data-id=\"3907722\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================\r\n     WITH IFI \u2014 MEDEKLINKERS 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.mk-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.mk-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.mk-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.mk-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.mk-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.mk-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.mk-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.mk-route-level{\r\n  position:relative;\r\n\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.mk-route-level:nth-child(1){\r\n  background:linear-gradient(135deg,#FFF4E3,#FFF9EF);\r\n}\r\n\r\n.mk-route-level:nth-child(2){\r\n  background:linear-gradient(135deg,#EAF7F1,#F7FFFB);\r\n}\r\n\r\n.mk-route-level:nth-child(3){\r\n  background:linear-gradient(135deg,#FFEAF1,#FFF7FA);\r\n}\r\n\r\n.mk-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.mk-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.mk-route-level.done{\r\n  opacity:.72;\r\n}\r\n\r\n.mk-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.mk-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.mk-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   MEDEKLINKER SUPPORT\r\n   ALLEEN LEVEL 1\r\n========================================= *\/\r\n\r\n.mk-support{\r\n  max-width:920px;\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.mk-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.mk-strip{\r\n  display:flex;\r\n\r\n  flex-wrap:wrap;\r\n\r\n  justify-content:center;\r\n\r\n  gap:.55rem;\r\n}\r\n\r\n.mk-letter-pill{\r\n  width:45px;\r\n  height:45px;\r\n\r\n  display:flex;\r\n\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  border-radius:15px;\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 7px 18px rgba(90,70,55,.06);\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\r\n\/* =========================================\r\n   OEFENKAART\r\n========================================= *\/\r\n\r\n.mk-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.mk-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.mk-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.mk-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.mk-level-pill,\r\n.mk-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.mk-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.mk-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.mk-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.mk-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.mk-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.mk-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.mk-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.mk-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.mk-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.mk-answer:hover{\r\n  transform:translateY(-2px);\r\n\r\n  background:#FFF0DE;\r\n}\r\n\r\n.mk-answer.correct{\r\n  background:#DDF5E4 !important;\r\n\r\n  color:#315D43 !important;\r\n}\r\n\r\n.mk-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.mk-input-wrap{\r\n  max-width:430px;\r\n\r\n  margin:0 auto;\r\n}\r\n\r\n.mk-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.mk-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.mk-input.correct{\r\n  background:#F0FAF3;\r\n\r\n  border-color:#C4E4CF;\r\n}\r\n\r\n.mk-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.mk-check-btn,\r\n.mk-next-btn,\r\n.mk-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.mk-check-btn:hover,\r\n.mk-next-btn:hover,\r\n.mk-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.mk-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.mk-feedback.good{\r\n  color:#47735A;\r\n}\r\n\r\n.mk-feedback.retry{\r\n  color:#8A6555;\r\n}\r\n\r\n.mk-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.mk-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.mk-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.mk-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.mk-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.mk-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.mk-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.mk-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.mk-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.mk-finish{\r\n  display:none;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.mk-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.mk-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.mk-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.mk-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  .mk-oefen-layout{\r\n    grid-template-columns:minmax(0,1fr) 175px;\r\n\r\n    gap:1.2rem;\r\n  }\r\n\r\n  .mk-ifi-side-avatar{\r\n    width:155px;\r\n  }\r\n\r\n  .mk-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  .mk-page{\r\n    padding:4rem 5vw;\r\n  }\r\n\r\n  .mk-hero{\r\n    padding:2.3rem 1.7rem;\r\n  }\r\n\r\n  .mk-level-route{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .mk-oefen-box{\r\n    padding:1.5rem 1.15rem;\r\n  }\r\n\r\n  .mk-oefen-layout{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .mk-oefen-top{\r\n    justify-content:center;\r\n\r\n    flex-wrap:wrap;\r\n  }\r\n\r\n  .mk-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  .mk-ifi-side-avatar{\r\n    width:95px;\r\n\r\n    flex-shrink:0;\r\n  }\r\n\r\n  .mk-ifi-side-bubble{\r\n    text-align:left;\r\n  }\r\n\r\n  .mk-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  .mk-ifi-side{\r\n    flex-direction:column;\r\n\r\n    text-align:center;\r\n  }\r\n\r\n  .mk-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=\"mk-wrap\">\r\n\r\n\r\n    <!-- =====================================\r\n         HERO\r\n    ====================================== -->\r\n\r\n    <div class=\"mk-hero\">\r\n\r\n      <div class=\"mk-label\">\r\n        \ud83d\udcd6 Woordenwereld\r\n      <\/div>\r\n\r\n      <h1 class=\"mk-title\">\r\n        Medeklinkers ontdekken.\r\n      <\/h1>\r\n\r\n      <p class=\"mk-intro\">\r\n        Medeklinkers zijn alle letters die geen\r\n        <strong>a, e, i, o of u<\/strong> zijn.\r\n        Eerst leer je ze herkennen.\r\n        Daarna ga je ze 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=\"mk-level-route\">\r\n\r\n      <div\r\n        class=\"mk-route-level active\"\r\n        id=\"mkRoute1\">\r\n\r\n        <div class=\"mk-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 medeklinkers zijn.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"mk-route-level\"\r\n        id=\"mkRoute2\">\r\n\r\n        <div class=\"mk-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          Medeklinkers zoeken en tellen in woorden.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"mk-route-level\"\r\n        id=\"mkRoute3\">\r\n\r\n        <div class=\"mk-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 letters aanvullen en medeklinkers 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=\"mk-support\"\r\n      id=\"mkSupport\">\r\n\r\n      <div class=\"mk-support-title\">\r\n        Een paar medeklinkers die je vaak tegenkomt\r\n      <\/div>\r\n\r\n      <div class=\"mk-strip\">\r\n\r\n        <div class=\"mk-letter-pill\">b<\/div>\r\n        <div class=\"mk-letter-pill\">d<\/div>\r\n        <div class=\"mk-letter-pill\">f<\/div>\r\n        <div class=\"mk-letter-pill\">g<\/div>\r\n        <div class=\"mk-letter-pill\">h<\/div>\r\n        <div class=\"mk-letter-pill\">j<\/div>\r\n        <div class=\"mk-letter-pill\">k<\/div>\r\n        <div class=\"mk-letter-pill\">l<\/div>\r\n        <div class=\"mk-letter-pill\">m<\/div>\r\n        <div class=\"mk-letter-pill\">n<\/div>\r\n        <div class=\"mk-letter-pill\">p<\/div>\r\n        <div class=\"mk-letter-pill\">r<\/div>\r\n        <div class=\"mk-letter-pill\">s<\/div>\r\n        <div class=\"mk-letter-pill\">t<\/div>\r\n        <div class=\"mk-letter-pill\">v<\/div>\r\n        <div class=\"mk-letter-pill\">w<\/div>\r\n        <div class=\"mk-letter-pill\">z<\/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=\"mk-oefen-box\">\r\n\r\n      <div class=\"mk-oefen-layout\">\r\n\r\n\r\n        <!-- =================================\r\n             LINKERKANT \u2014 OEFENING\r\n        ================================== -->\r\n\r\n        <div class=\"mk-oefen-main\">\r\n\r\n\r\n          <!-- NORMALE OEFENING -->\r\n\r\n          <div id=\"mkExerciseContent\">\r\n\r\n            <div class=\"mk-oefen-top\">\r\n\r\n              <div\r\n                class=\"mk-level-pill\"\r\n                id=\"mkLevelPill\">\r\n\r\n                \ud83c\udf31 Level 1 \u00b7 Herkennen\r\n\r\n              <\/div>\r\n\r\n              <div\r\n                class=\"mk-vraag-pill\"\r\n                id=\"mkQuestionCounter\">\r\n\r\n                Vraag 1\r\n\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"mk-progress-wrap\">\r\n\r\n              <div\r\n                class=\"mk-progress-bar\"\r\n                id=\"mkProgressBar\">\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"mk-vraag-type\"\r\n              id=\"mkQuestionType\">\r\n\r\n              Herkennen\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"mk-vraag-title\"\r\n              id=\"mkQuestionTitle\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"mk-helper\"\r\n              id=\"mkHelper\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"mk-stimulus\"\r\n              id=\"mkStimulus\">\r\n            <\/div>\r\n\r\n\r\n            <div id=\"mkAnswerArea\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"mk-feedback\"\r\n              id=\"mkFeedback\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"mk-next-wrap\"\r\n              id=\"mkNextWrap\">\r\n\r\n              <button\r\n                type=\"button\"\r\n                class=\"mk-next-btn\"\r\n                id=\"mkNextBtn\">\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=\"mk-level-transition\"\r\n            id=\"mkTransition\">\r\n\r\n            <h3 id=\"mkTransitionTitle\">\r\n            <\/h3>\r\n\r\n            <p id=\"mkTransitionText\">\r\n            <\/p>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"mk-next-btn\"\r\n              id=\"mkStartNextLevel\">\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=\"mk-finish\"\r\n            id=\"mkFinish\">\r\n\r\n            <img decoding=\"async\"\r\n              class=\"mk-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=\"mkResultText\">\r\n            <\/p>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"mk-restart-btn\"\r\n              id=\"mkRestartBtn\">\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=\"mk-ifi-side\">\r\n\r\n          <img decoding=\"async\"\r\n            id=\"mkIfiAvatar\"\r\n            class=\"mk-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=\"mk-ifi-side-bubble\">\r\n\r\n            <div class=\"mk-ifi-name\">\r\n              IFI helpt je \ud83c\udf3f\r\n            <\/div>\r\n\r\n            <p\r\n              class=\"mk-ifi-message\"\r\n              id=\"mkIfiMessage\">\r\n\r\n              Kijk rustig naar de opdracht.\r\n              We doen het stap voor stap.\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=\"mk-note\">\r\n\r\n      Kleine reminder \ud83c\udf38<br>\r\n\r\n      Je hoeft medeklinkers niet allemaal tegelijk te kennen.\r\n      Door rustig te kijken naar woorden ga je ze steeds sneller herkennen.\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 MK_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 mkLevels = [\r\n\r\n\r\n      \/* =======================================\r\n         LEVEL 1\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              \"Medeklinker of niet?\",\r\n\r\n            question:\r\n              \"Is deze letter een medeklinker?\",\r\n\r\n            helper:\r\n              \"Kijk rustig naar de letter.\",\r\n\r\n            stimulus:\r\n              \"M\",\r\n\r\n            answers:[\r\n              \"Medeklinker\",\r\n              \"Geen medeklinker\"\r\n            ],\r\n\r\n            correct:\r\n              \"Medeklinker\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Medeklinker of niet?\",\r\n\r\n            question:\r\n              \"Is deze letter een medeklinker?\",\r\n\r\n            helper:\r\n              \"Denk aan de klinkers a, e, i, o en u.\",\r\n\r\n            stimulus:\r\n              \"E\",\r\n\r\n            answers:[\r\n              \"Medeklinker\",\r\n              \"Geen medeklinker\"\r\n            ],\r\n\r\n            correct:\r\n              \"Geen medeklinker\"\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 medeklinker\",\r\n\r\n            question:\r\n              \"Welke letter is een medeklinker?\",\r\n\r\n            helper:\r\n              \"Er staat \u00e9\u00e9n medeklinker tussen.\",\r\n\r\n            stimulus:\"\",\r\n\r\n            answers:[\r\n              \"a\",\r\n              \"e\",\r\n              \"t\",\r\n              \"o\"\r\n            ],\r\n\r\n            correct:\"t\"\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 medeklinker hoor je aan het begin van \u2018vis\u2019?\",\r\n\r\n            helper:\r\n              \"Zeg rustig: v-is.\",\r\n\r\n            stimulus:\r\n              \"vis\",\r\n\r\n            answers:[\r\n              \"v\",\r\n              \"i\",\r\n              \"s\"\r\n            ],\r\n\r\n            correct:\"v\"\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 medeklinker\",\r\n\r\n            question:\r\n              \"Welke letter is een medeklinker?\",\r\n\r\n            helper:\r\n              \"Kijk goed naar de vier letters.\",\r\n\r\n            stimulus:\"\",\r\n\r\n            answers:[\r\n              \"u\",\r\n              \"o\",\r\n              \"b\",\r\n              \"a\"\r\n            ],\r\n\r\n            correct:\"b\"\r\n\r\n          }\r\n\r\n        ]\r\n\r\n      },\r\n\r\n\r\n      \/* =======================================\r\n         LEVEL 2\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              \"Zoek de medeklinkers\",\r\n\r\n            question:\r\n              \"Typ alleen de medeklinkers.\",\r\n\r\n            helper:\r\n              \"Je hoeft de klinkers niet te typen.\",\r\n\r\n            stimulus:\r\n              \"boom\",\r\n\r\n            correct:\r\n              \"bm\"\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 medeklinkers zie je?\",\r\n\r\n            helper:\r\n              \"Kijk letter voor letter.\",\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:\"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 medeklinker hoor je aan het einde?\",\r\n\r\n            helper:\r\n              \"Zeg het woord rustig.\",\r\n\r\n            stimulus:\r\n              \"vis\",\r\n\r\n            answers:[\r\n              \"v\",\r\n              \"i\",\r\n              \"s\"\r\n            ],\r\n\r\n            correct:\"s\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"text\",\r\n\r\n            label:\r\n              \"Zoek de medeklinkers\",\r\n\r\n            question:\r\n              \"Typ alleen de medeklinkers.\",\r\n\r\n            helper:\r\n              \"Laat de klinkers weg.\",\r\n\r\n            stimulus:\r\n              \"appel\",\r\n\r\n            correct:\r\n              \"ppl\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Kies de groep\",\r\n\r\n            question:\r\n              \"Welke letters zijn medeklinkers?\",\r\n\r\n            helper:\r\n              \"Kijk welke letters geen a, e, i, o of u zijn.\",\r\n\r\n            stimulus:\r\n              \"fiets\",\r\n\r\n            answers:[\r\n\r\n              \"f, t en s\",\r\n\r\n              \"i en e\",\r\n\r\n              \"f en i\"\r\n\r\n            ],\r\n\r\n            correct:\r\n              \"f, t en s\"\r\n\r\n          }\r\n\r\n        ]\r\n\r\n      },\r\n\r\n\r\n      \/* =======================================\r\n         LEVEL 3\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:\"choice\",\r\n\r\n            label:\r\n              \"Vul de letter aan\",\r\n\r\n            question:\r\n              \"Welke medeklinker ontbreekt?\",\r\n\r\n            helper:\r\n              \"Welk woord wordt hier bedoeld?\",\r\n\r\n            stimulus:\r\n              \"_ at\",\r\n\r\n            answers:[\r\n              \"k\",\r\n              \"a\",\r\n              \"o\"\r\n            ],\r\n\r\n            correct:\"k\"\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 medeklinkers.\",\r\n\r\n            helper:\r\n              \"Probeer het nu helemaal zelf.\",\r\n\r\n            stimulus:\r\n              \"stoel\",\r\n\r\n            correct:\r\n              \"stl\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Vul aan\",\r\n\r\n            question:\r\n              \"Welke medeklinker ontbreekt?\",\r\n\r\n            helper:\r\n              \"Lees het woord rustig.\",\r\n\r\n            stimulus:\r\n              \"boo _\",\r\n\r\n            answers:[\r\n              \"m\",\r\n              \"o\",\r\n              \"a\"\r\n            ],\r\n\r\n            correct:\"m\"\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 medeklinkers.\",\r\n\r\n            helper:\r\n              \"Kijk letter voor letter.\",\r\n\r\n            stimulus:\r\n              \"banaan\",\r\n\r\n            correct:\r\n              \"bnn\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Luister naar het begin\",\r\n\r\n            question:\r\n              \"Welke medeklinker hoor je eerst?\",\r\n\r\n            helper:\r\n              \"Zeg het woord langzaam.\",\r\n\r\n            stimulus:\r\n              \"school\",\r\n\r\n            answers:[\r\n              \"s\",\r\n              \"o\",\r\n              \"c\"\r\n            ],\r\n\r\n            correct:\"s\"\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 mkLevelIndex=0;\r\n\r\n    let mkQuestionIndex=0;\r\n\r\n    let mkCorrect=0;\r\n\r\n    let mkAnswered=false;\r\n\r\n\r\n    const mkTotal=\r\n      mkLevels.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 mkLevelPill=\r\n      document.getElementById(\r\n        \"mkLevelPill\"\r\n      );\r\n\r\n\r\n    const mkQuestionCounter=\r\n      document.getElementById(\r\n        \"mkQuestionCounter\"\r\n      );\r\n\r\n\r\n    const mkProgressBar=\r\n      document.getElementById(\r\n        \"mkProgressBar\"\r\n      );\r\n\r\n\r\n    const mkQuestionType=\r\n      document.getElementById(\r\n        \"mkQuestionType\"\r\n      );\r\n\r\n\r\n    const mkQuestionTitle=\r\n      document.getElementById(\r\n        \"mkQuestionTitle\"\r\n      );\r\n\r\n\r\n    const mkHelper=\r\n      document.getElementById(\r\n        \"mkHelper\"\r\n      );\r\n\r\n\r\n    const mkStimulus=\r\n      document.getElementById(\r\n        \"mkStimulus\"\r\n      );\r\n\r\n\r\n    const mkAnswerArea=\r\n      document.getElementById(\r\n        \"mkAnswerArea\"\r\n      );\r\n\r\n\r\n    const mkFeedback=\r\n      document.getElementById(\r\n        \"mkFeedback\"\r\n      );\r\n\r\n\r\n    const mkNextWrap=\r\n      document.getElementById(\r\n        \"mkNextWrap\"\r\n      );\r\n\r\n\r\n    const mkNextBtn=\r\n      document.getElementById(\r\n        \"mkNextBtn\"\r\n      );\r\n\r\n\r\n    const mkSupport=\r\n      document.getElementById(\r\n        \"mkSupport\"\r\n      );\r\n\r\n\r\n    const mkIfiAvatar=\r\n      document.getElementById(\r\n        \"mkIfiAvatar\"\r\n      );\r\n\r\n\r\n    const mkIfiMessage=\r\n      document.getElementById(\r\n        \"mkIfiMessage\"\r\n      );\r\n\r\n\r\n    const mkExerciseContent=\r\n      document.getElementById(\r\n        \"mkExerciseContent\"\r\n      );\r\n\r\n\r\n    const mkTransition=\r\n      document.getElementById(\r\n        \"mkTransition\"\r\n      );\r\n\r\n\r\n    const mkTransitionTitle=\r\n      document.getElementById(\r\n        \"mkTransitionTitle\"\r\n      );\r\n\r\n\r\n    const mkTransitionText=\r\n      document.getElementById(\r\n        \"mkTransitionText\"\r\n      );\r\n\r\n\r\n    const mkStartNextLevel=\r\n      document.getElementById(\r\n        \"mkStartNextLevel\"\r\n      );\r\n\r\n\r\n    const mkFinish=\r\n      document.getElementById(\r\n        \"mkFinish\"\r\n      );\r\n\r\n\r\n    const mkResultText=\r\n      document.getElementById(\r\n        \"mkResultText\"\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       HELPERS\r\n    ========================================= *\/\r\n\r\n    function mkNormalize(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 mkShuffle(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    mkLevels.forEach(\r\n      function(level){\r\n\r\n        level.questions=\r\n          mkShuffle(\r\n            level.questions\r\n          );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    function mkCompletedCount(){\r\n\r\n      let amount=0;\r\n\r\n\r\n      for(\r\n        let i=0;\r\n        i<mkLevelIndex;\r\n        i++\r\n      ){\r\n\r\n        amount+=\r\n          mkLevels[i]\r\n            .questions\r\n            .length;\r\n\r\n      }\r\n\r\n\r\n      return amount+\r\n        mkQuestionIndex;\r\n\r\n    }\r\n\r\n\r\n    function mkUpdateRoute(){\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            \"mkRoute\"+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          mkLevelIndex\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          mkLevelIndex\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 mkSetIfi(\r\n      role,\r\n      message\r\n    ){\r\n\r\n      mkIfiAvatar.style.opacity=\r\n        \"0\";\r\n\r\n\r\n      mkIfiAvatar.style.transform=\r\n        \"translateY(6px)\";\r\n\r\n\r\n      setTimeout(\r\n        function(){\r\n\r\n          mkIfiAvatar.src=\r\n            MK_IFI[role];\r\n\r\n\r\n          mkIfiMessage.textContent=\r\n            message;\r\n\r\n\r\n          mkIfiAvatar.style.opacity=\r\n            \"1\";\r\n\r\n\r\n          mkIfiAvatar.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 mkEmit(\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 mkRender(){\r\n\r\n      mkAnswered=false;\r\n\r\n\r\n      const level=\r\n        mkLevels[\r\n          mkLevelIndex\r\n        ];\r\n\r\n\r\n      const question=\r\n        level.questions[\r\n          mkQuestionIndex\r\n        ];\r\n\r\n\r\n      mkExerciseContent.style.display=\r\n        \"block\";\r\n\r\n\r\n      mkTransition.style.display=\r\n        \"none\";\r\n\r\n\r\n      mkFinish.style.display=\r\n        \"none\";\r\n\r\n\r\n      mkLevelPill.textContent=\r\n        level.title;\r\n\r\n\r\n      const overall=\r\n        mkCompletedCount()+1;\r\n\r\n\r\n      mkQuestionCounter.textContent=\r\n        \"Vraag \"+\r\n        overall+\r\n        \" van \"+\r\n        mkTotal;\r\n\r\n\r\n      mkProgressBar.style.width=\r\n        Math.round(\r\n          (\r\n            mkCompletedCount() \/\r\n            mkTotal\r\n          ) * 100\r\n        )+\"%\";\r\n\r\n\r\n      mkQuestionType.textContent=\r\n        question.label;\r\n\r\n\r\n      mkQuestionTitle.textContent=\r\n        question.question;\r\n\r\n\r\n      mkHelper.textContent=\r\n        question.helper || \"\";\r\n\r\n\r\n      mkStimulus.textContent=\r\n        question.stimulus || \"\";\r\n\r\n\r\n      mkStimulus.className=\r\n        \"mk-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      mkFeedback.textContent=\r\n        \"\";\r\n\r\n\r\n      mkFeedback.className=\r\n        \"mk-feedback\";\r\n\r\n\r\n      mkNextWrap.style.display=\r\n        \"none\";\r\n\r\n\r\n      mkAnswerArea.innerHTML=\r\n        \"\";\r\n\r\n\r\n      \/* =====================================\r\n         SUPPORT ALLEEN LEVEL 1\r\n      ====================================== *\/\r\n\r\n      mkSupport.style.display=\r\n        mkLevelIndex===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        mkLevelIndex===0\r\n      ){\r\n\r\n        mkSetIfi(\r\n\r\n          \"uitleg\",\r\n\r\n          \"Kijk rustig naar de opdracht. Een medeklinker is een letter die geen a, e, i, o of u is.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else if(\r\n        mkLevelIndex===1\r\n      ){\r\n\r\n        mkSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          \"Nu verdwijnen de voorbeeldletters. Kijk rustig naar het woord en zoek zelf.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        mkSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          \"Je bent bij Level 3. Probeer eerst zelf te bedenken welke medeklinker je hoort of ziet.\"\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          \"mk-antwoorden\";\r\n\r\n\r\n        mkShuffle(\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              \"mk-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                mkSubmit(\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        mkAnswerArea.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          \"mk-input-wrap\";\r\n\r\n\r\n        wrap.innerHTML=`\r\n\r\n          <input\r\n            type=\"text\"\r\n            class=\"mk-input\"\r\n            id=\"mkTextInput\"\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=\"mk-check-btn\"\r\n            id=\"mkCheckText\">\r\n\r\n            Nakijken \ud83c\udf3f\r\n\r\n          <\/button>\r\n\r\n        `;\r\n\r\n\r\n        mkAnswerArea.appendChild(\r\n          wrap\r\n        );\r\n\r\n\r\n        const input=\r\n          document.getElementById(\r\n            \"mkTextInput\"\r\n          );\r\n\r\n\r\n        document\r\n          .getElementById(\r\n            \"mkCheckText\"\r\n          )\r\n          .addEventListener(\r\n\r\n            \"click\",\r\n\r\n            function(){\r\n\r\n              mkSubmit(\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              mkSubmit(\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 mkSubmit(\r\n      value,\r\n      node\r\n    ){\r\n\r\n      if(\r\n        mkAnswered\r\n      ){\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      mkAnswered=true;\r\n\r\n\r\n      const question=\r\n        mkLevels[\r\n          mkLevelIndex\r\n        ]\r\n        .questions[\r\n          mkQuestionIndex\r\n        ];\r\n\r\n\r\n      const correct=\r\n        mkNormalize(value) ===\r\n        mkNormalize(\r\n          question.correct\r\n        );\r\n\r\n\r\n      if(\r\n        correct\r\n      ){\r\n\r\n        mkCorrect++;\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          \"Ja, precies.\",\r\n\r\n          \"Dat klopt.\",\r\n\r\n          \"Goed gekeken.\"\r\n\r\n        ];\r\n\r\n\r\n        mkFeedback.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        mkFeedback.className=\r\n          \"mk-feedback good\";\r\n\r\n\r\n        const ifiSuccess=[\r\n\r\n          \"Mooi gezien. Ga maar rustig verder.\",\r\n\r\n          \"Ja, dat klopt.\",\r\n\r\n          \"Goed gekeken. Je begint het patroon te herkennen.\",\r\n\r\n          \"Precies. Deze heb je gevonden.\"\r\n\r\n        ];\r\n\r\n\r\n        mkSetIfi(\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        mkFeedback.textContent=\r\n          \"Kijk nog eens rustig. Het goede antwoord is: \"+\r\n          question.correct+\r\n          \".\";\r\n\r\n\r\n        mkFeedback.className=\r\n          \"mk-feedback retry\";\r\n\r\n\r\n        mkSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          mkLevelIndex===0\r\n\r\n          ? \"Denk aan de vijf klinkers: a, e, i, o en u. Is deze letter \u00e9\u00e9n daarvan?\"\r\n\r\n          : \"Dat geeft niet. Kijk opnieuw naar het woord en luister rustig naar de letters.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n\r\n      mkAnswerArea\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      mkNextWrap.style.display=\r\n        \"block\";\r\n\r\n\r\n      mkEmit(\r\n\r\n        \"withifi:medeklinker-answer\",\r\n\r\n        {\r\n\r\n          level:\r\n            mkLevelIndex+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 mkNext(){\r\n\r\n      const level=\r\n        mkLevels[\r\n          mkLevelIndex\r\n        ];\r\n\r\n\r\n      mkQuestionIndex++;\r\n\r\n\r\n      if(\r\n        mkQuestionIndex <\r\n        level.questions.length\r\n      ){\r\n\r\n        mkRender();\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      if(\r\n        mkLevelIndex <\r\n        mkLevels.length-1\r\n      ){\r\n\r\n        mkShowTransition();\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      mkComplete();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       LEVEL OVERGANG\r\n    ========================================= *\/\r\n\r\n    function mkShowTransition(){\r\n\r\n      mkExerciseContent.style.display=\r\n        \"none\";\r\n\r\n\r\n      mkTransition.style.display=\r\n        \"block\";\r\n\r\n\r\n      if(\r\n        mkLevelIndex===0\r\n      ){\r\n\r\n        mkTransitionTitle.textContent=\r\n          \"\ud83c\udf3f Klaar voor Level 2\";\r\n\r\n\r\n        mkTransitionText.textContent=\r\n          \"Je hebt medeklinkers herkend. Nu verdwijnen de voorbeeldletters en ga je ze zelf zoeken in woorden.\";\r\n\r\n\r\n        mkSetIfi(\r\n\r\n          \"uitleg\",\r\n\r\n          \"Nu gaan we het een klein beetje moeilijker maken. Kijk rustig naar ieder woord.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        mkTransitionTitle.textContent=\r\n          \"\ud83c\udf33 Klaar voor Level 3\";\r\n\r\n\r\n        mkTransitionText.textContent=\r\n          \"Je kunt medeklinkers al herkennen en zoeken. Nu ga je zelf letters aanvullen en woorden onderzoeken.\";\r\n\r\n\r\n        mkSetIfi(\r\n\r\n          \"goed\",\r\n\r\n          \"Ik zie dat je er klaar voor bent. Nog \u00e9\u00e9n level, stap voor stap.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    function mkNextLevel(){\r\n\r\n      mkLevelIndex++;\r\n\r\n      mkQuestionIndex=0;\r\n\r\n\r\n      mkUpdateRoute();\r\n\r\n      mkRender();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       KLAAR\r\n    ========================================= *\/\r\n\r\n    function mkComplete(){\r\n\r\n      mkExerciseContent.style.display=\r\n        \"none\";\r\n\r\n\r\n      mkTransition.style.display=\r\n        \"none\";\r\n\r\n\r\n      mkFinish.style.display=\r\n        \"block\";\r\n\r\n\r\n      mkProgressBar.style.width=\r\n        \"100%\";\r\n\r\n\r\n      const percentage=\r\n        Math.round(\r\n          (\r\n            mkCorrect \/\r\n            mkTotal\r\n          ) * 100\r\n        );\r\n\r\n\r\n      mkResultText.innerHTML=\r\n\r\n        \"Je hebt alle drie de levels doorlopen.<br>\" +\r\n\r\n        \"Je had <strong>\" +\r\n        mkCorrect +\r\n        \" van de \" +\r\n        mkTotal +\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 aanvullen.\";\r\n\r\n\r\n      mkSetIfi(\r\n\r\n        \"goed\",\r\n\r\n        \"Goed gedaan. Je hebt vandaag medeklinkers herkend, gezocht en zelf toegepast.\"\r\n\r\n      );\r\n\r\n\r\n      mkEmit(\r\n\r\n        \"withifi:medeklinker-complete\",\r\n\r\n        {\r\n\r\n          topic:\r\n            \"Medeklinkers\",\r\n\r\n          levelsCompleted:\r\n            3,\r\n\r\n          correct:\r\n            mkCorrect,\r\n\r\n          total:\r\n            mkTotal,\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 mkRestart(){\r\n\r\n      mkLevelIndex=0;\r\n\r\n      mkQuestionIndex=0;\r\n\r\n      mkCorrect=0;\r\n\r\n      mkAnswered=false;\r\n\r\n\r\n      mkLevels.forEach(\r\n        function(level){\r\n\r\n          level.questions=\r\n            mkShuffle(\r\n              level.questions\r\n            );\r\n\r\n        }\r\n      );\r\n\r\n\r\n      mkUpdateRoute();\r\n\r\n\r\n      mkSetIfi(\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      mkRender();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       BUTTON EVENTS\r\n    ========================================= *\/\r\n\r\n    mkNextBtn.addEventListener(\r\n\r\n      \"click\",\r\n\r\n      mkNext\r\n\r\n    );\r\n\r\n\r\n    mkStartNextLevel.addEventListener(\r\n\r\n      \"click\",\r\n\r\n      mkNextLevel\r\n\r\n    );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"mkRestartBtn\"\r\n      )\r\n      .addEventListener(\r\n\r\n        \"click\",\r\n\r\n        mkRestart\r\n\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       START\r\n    ========================================= *\/\r\n\r\n    mkUpdateRoute();\r\n\r\n    mkRender();\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>\ud83d\udcd6 Woordenwereld Medeklinkers ontdekken. Medeklinkers zijn alle letters die geen a, e, i, o of u zijn. Eerst leer je ze herkennen. Daarna ga je ze zoeken in woorden. Uiteindelijk ontdek je steeds meer helemaal zelf. \ud83c\udf31 Level 1 \u00b7 Herkennen Kijken welke letters medeklinkers zijn. \ud83c\udf3f Level 2 \u00b7 Zoeken Medeklinkers zoeken en tellen [&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-683","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/683","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=683"}],"version-history":[{"count":64,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/683\/revisions"}],"predecessor-version":[{"id":4371,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/683\/revisions\/4371"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}