{"id":686,"date":"2026-02-08T05:45:43","date_gmt":"2026-02-08T05:45:43","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?page_id=686"},"modified":"2026-08-29T04:56:47","modified_gmt":"2026-08-29T04:56:47","slug":"oefenen-met-lettergrepen","status":"publish","type":"page","link":"https:\/\/withifi.muhubonurture.nl\/?page_id=686","title":{"rendered":"Oefenen met Lettergrepen"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"686\" class=\"elementor elementor-686\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-690ea77 e-con-full e-flex e-con e-parent\" data-id=\"690ea77\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ed37818 elementor-widget elementor-widget-html\" data-id=\"ed37818\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================\r\n     WITH IFI \u2014 LETTERGREPEN 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.lg-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.lg-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.lg-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.lg-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.lg-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.lg-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.lg-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.lg-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.lg-route-level:nth-child(1){\r\n  background:linear-gradient(135deg,#FFF4E3,#FFF9EF);\r\n}\r\n\r\n.lg-route-level:nth-child(2){\r\n  background:linear-gradient(135deg,#EAF7F1,#F7FFFB);\r\n}\r\n\r\n.lg-route-level:nth-child(3){\r\n  background:linear-gradient(135deg,#FFEAF1,#FFF7FA);\r\n}\r\n\r\n.lg-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.lg-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.lg-route-level.done{\r\n  opacity:.72;\r\n}\r\n\r\n.lg-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.lg-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.lg-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 ALLEEN LEVEL 1\r\n========================================= *\/\r\n\r\n.lg-support{\r\n  max-width:820px;\r\n  margin:0 auto 2.3rem;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.lg-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.lg-support-row{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  justify-content:center;\r\n  gap:.8rem;\r\n}\r\n\r\n.lg-support-pill{\r\n  padding:.85rem 1.1rem;\r\n\r\n  border-radius:18px;\r\n\r\n  background:rgba(255,255,255,.88);\r\n\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  box-shadow:0 8px 20px rgba(90,70,55,.07);\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:1rem;\r\n  font-weight:900;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   OEFENKAART\r\n========================================= *\/\r\n\r\n.lg-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.lg-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.lg-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.lg-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.lg-level-pill,\r\n.lg-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.lg-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.lg-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.lg-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.lg-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.lg-helper{\r\n  margin-bottom: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.lg-stimulus{\r\n  margin:1.2rem auto 1.4rem;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:clamp(2.5rem,6vw,4.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\r\n\/* =========================================\r\n   VISUEEL KLAPPEN\r\n========================================= *\/\r\n\r\n.lg-claps{\r\n  display:flex;\r\n\r\n  justify-content:center;\r\n\r\n  gap:.7rem;\r\n\r\n  margin:.5rem auto 1.6rem;\r\n\r\n  min-height:42px;\r\n}\r\n\r\n.lg-clap-dot{\r\n  width:34px;\r\n  height:34px;\r\n\r\n  display:flex;\r\n\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  border-radius:50%;\r\n\r\n  background:#FFF0DE;\r\n\r\n  box-shadow:0 6px 14px rgba(90,70,55,.07);\r\n\r\n  font-size:1rem;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   ANTWOORDEN\r\n========================================= *\/\r\n\r\n.lg-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.lg-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.lg-answer:hover{\r\n  transform:translateY(-2px);\r\n\r\n  background:#FFF0DE;\r\n}\r\n\r\n.lg-answer.correct{\r\n  background:#DDF5E4 !important;\r\n\r\n  color:#315D43 !important;\r\n}\r\n\r\n.lg-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.lg-input-wrap{\r\n  max-width:470px;\r\n\r\n  margin:0 auto;\r\n}\r\n\r\n.lg-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.25rem;\r\n\r\n  font-weight:900;\r\n\r\n  transition:.2s ease;\r\n}\r\n\r\n.lg-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.lg-input.correct{\r\n  background:#F0FAF3;\r\n\r\n  border-color:#C4E4CF;\r\n}\r\n\r\n.lg-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.lg-check-btn,\r\n.lg-next-btn,\r\n.lg-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.lg-check-btn:hover,\r\n.lg-next-btn:hover,\r\n.lg-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.lg-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.lg-feedback.good{\r\n  color:#47735A;\r\n}\r\n\r\n.lg-feedback.retry{\r\n  color:#8A6555;\r\n}\r\n\r\n.lg-next-wrap{\r\n  display:none;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   IFI RECHTS\r\n========================================= *\/\r\n\r\n.lg-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.lg-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.lg-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.lg-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.lg-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.lg-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.lg-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.lg-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.lg-finish{\r\n  display:none;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.lg-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.lg-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.lg-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.lg-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  .lg-oefen-layout{\r\n    grid-template-columns:minmax(0,1fr) 175px;\r\n\r\n    gap:1.2rem;\r\n  }\r\n\r\n  .lg-ifi-side-avatar{\r\n    width:155px;\r\n  }\r\n\r\n  .lg-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  .lg-page{\r\n    padding:4rem 5vw;\r\n  }\r\n\r\n  .lg-hero{\r\n    padding:2.3rem 1.7rem;\r\n  }\r\n\r\n  .lg-level-route{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .lg-oefen-box{\r\n    padding:1.5rem 1.15rem;\r\n  }\r\n\r\n  .lg-oefen-layout{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .lg-oefen-top{\r\n    justify-content:center;\r\n\r\n    flex-wrap:wrap;\r\n  }\r\n\r\n  .lg-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  .lg-ifi-side-avatar{\r\n    width:95px;\r\n\r\n    flex-shrink:0;\r\n  }\r\n\r\n  .lg-ifi-side-bubble{\r\n    text-align:left;\r\n  }\r\n\r\n  .lg-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  .lg-ifi-side{\r\n    flex-direction:column;\r\n\r\n    text-align:center;\r\n  }\r\n\r\n  .lg-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=\"lg-wrap\">\r\n\r\n\r\n    <!-- =====================================\r\n         HERO\r\n    ====================================== -->\r\n\r\n    <div class=\"lg-hero\">\r\n\r\n      <div class=\"lg-label\">\r\n        \ud83d\udc4f Woordenwereld\r\n      <\/div>\r\n\r\n      <h1 class=\"lg-title\">\r\n        Lettergrepen ontdekken.\r\n      <\/h1>\r\n\r\n      <p class=\"lg-intro\">\r\n        Woorden bestaan uit kleine stukjes die je kunt horen.\r\n        Die stukjes noemen we <strong>lettergrepen<\/strong>.\r\n        Eerst luisteren en klappen we mee.\r\n        Daarna ga je zelf woorden verdelen en weer samenbouwen.\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=\"lg-level-route\">\r\n\r\n      <div\r\n        class=\"lg-route-level active\"\r\n        id=\"lgRoute1\">\r\n\r\n        <div class=\"lg-route-icon\">\r\n          \ud83c\udf31\r\n        <\/div>\r\n\r\n        <h3>\r\n          Level 1 \u00b7 Horen & klappen\r\n        <\/h3>\r\n\r\n        <p>\r\n          Luisteren hoeveel stukjes je hoort.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"lg-route-level\"\r\n        id=\"lgRoute2\">\r\n\r\n        <div class=\"lg-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          Ontdekken waar een woord in stukjes valt.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"lg-route-level\"\r\n        id=\"lgRoute3\">\r\n\r\n        <div class=\"lg-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 splitsen, typen en woorden bouwen.\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=\"lg-support\"\r\n      id=\"lgSupport\">\r\n\r\n      <div class=\"lg-support-title\">\r\n        Zo kun je lettergrepen horen\r\n      <\/div>\r\n\r\n      <div class=\"lg-support-row\">\r\n\r\n        <div class=\"lg-support-pill\">\r\n          \ud83d\udde3\ufe0f Zeg het woord langzaam\r\n        <\/div>\r\n\r\n        <div class=\"lg-support-pill\">\r\n          \ud83d\udc4f Klap mee\r\n        <\/div>\r\n\r\n        <div class=\"lg-support-pill\">\r\n          \ud83d\udc42 Luister naar de stukjes\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=\"lg-oefen-box\">\r\n\r\n      <div class=\"lg-oefen-layout\">\r\n\r\n\r\n        <!-- =================================\r\n             LINKERKANT \u2014 OEFENING\r\n        ================================== -->\r\n\r\n        <div class=\"lg-oefen-main\">\r\n\r\n\r\n          <!-- NORMALE OEFENING -->\r\n\r\n          <div id=\"lgExerciseContent\">\r\n\r\n            <div class=\"lg-oefen-top\">\r\n\r\n              <div\r\n                class=\"lg-level-pill\"\r\n                id=\"lgLevelPill\">\r\n\r\n                \ud83c\udf31 Level 1 \u00b7 Horen & klappen\r\n\r\n              <\/div>\r\n\r\n              <div\r\n                class=\"lg-vraag-pill\"\r\n                id=\"lgQuestionCounter\">\r\n\r\n                Vraag 1\r\n\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"lg-progress-wrap\">\r\n\r\n              <div\r\n                class=\"lg-progress-bar\"\r\n                id=\"lgProgressBar\">\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"lg-vraag-type\"\r\n              id=\"lgQuestionType\">\r\n\r\n              Luisteren\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"lg-vraag-title\"\r\n              id=\"lgQuestionTitle\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"lg-helper\"\r\n              id=\"lgHelper\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"lg-stimulus\"\r\n              id=\"lgStimulus\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"lg-claps\"\r\n              id=\"lgClaps\">\r\n            <\/div>\r\n\r\n\r\n            <div id=\"lgAnswerArea\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"lg-feedback\"\r\n              id=\"lgFeedback\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"lg-next-wrap\"\r\n              id=\"lgNextWrap\">\r\n\r\n              <button\r\n                type=\"button\"\r\n                class=\"lg-next-btn\"\r\n                id=\"lgNextBtn\">\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=\"lg-level-transition\"\r\n            id=\"lgTransition\">\r\n\r\n            <h3 id=\"lgTransitionTitle\">\r\n            <\/h3>\r\n\r\n            <p id=\"lgTransitionText\">\r\n            <\/p>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"lg-next-btn\"\r\n              id=\"lgStartNextLevel\">\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=\"lg-finish\"\r\n            id=\"lgFinish\">\r\n\r\n            <img decoding=\"async\"\r\n              class=\"lg-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=\"lgResultText\">\r\n            <\/p>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"lg-restart-btn\"\r\n              id=\"lgRestartBtn\">\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=\"lg-ifi-side\">\r\n\r\n          <img decoding=\"async\"\r\n            id=\"lgIfiAvatar\"\r\n            class=\"lg-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=\"lg-ifi-side-bubble\">\r\n\r\n            <div class=\"lg-ifi-name\">\r\n              IFI helpt je \ud83c\udf3f\r\n            <\/div>\r\n\r\n            <p\r\n              class=\"lg-ifi-message\"\r\n              id=\"lgIfiMessage\">\r\n\r\n              Zeg het woord rustig hardop.\r\n              Klap mee als dat helpt.\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=\"lg-note\">\r\n\r\n      Kleine reminder \ud83c\udf38<br>\r\n\r\n      Je hoeft een woord niet meteen goed te verdelen.\r\n      Langzaam zeggen, luisteren en opnieuw proberen helpt je steeds beter horen.\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 LG_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 lgLevels = [\r\n\r\n\r\n      \/* =======================================\r\n         LEVEL 1 \u2014 HOREN & KLAPPEN\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 & klappen\",\r\n\r\n        questions:[\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Hoeveel stukjes?\",\r\n\r\n            question:\r\n              \"Hoeveel lettergrepen hoor je?\",\r\n\r\n            helper:\r\n              \"Zeg het woord langzaam. Klap gerust mee.\",\r\n\r\n            stimulus:\r\n              \"tafel\",\r\n\r\n            answers:[\r\n              \"1\",\r\n              \"2\",\r\n              \"3\"\r\n            ],\r\n\r\n            correct:\r\n              \"2\",\r\n\r\n            claps:2\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Hoeveel stukjes?\",\r\n\r\n            question:\r\n              \"Hoeveel lettergrepen hoor je?\",\r\n\r\n            helper:\r\n              \"Zeg: ba-naan.\",\r\n\r\n            stimulus:\r\n              \"banaan\",\r\n\r\n            answers:[\r\n              \"1\",\r\n              \"2\",\r\n              \"3\"\r\n            ],\r\n\r\n            correct:\r\n              \"2\",\r\n\r\n            claps:2\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Hoeveel stukjes?\",\r\n\r\n            question:\r\n              \"Hoeveel keer kun je klappen?\",\r\n\r\n            helper:\r\n              \"Zeg het woord rustig: vis.\",\r\n\r\n            stimulus:\r\n              \"vis\",\r\n\r\n            answers:[\r\n              \"1\",\r\n              \"2\",\r\n              \"3\"\r\n            ],\r\n\r\n            correct:\r\n              \"1\",\r\n\r\n            claps:1\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              \"Hoeveel stukjes hoor je?\",\r\n\r\n            helper:\r\n              \"Zeg: o-li-fant.\",\r\n\r\n            stimulus:\r\n              \"olifant\",\r\n\r\n            answers:[\r\n              \"2\",\r\n              \"3\",\r\n              \"4\"\r\n            ],\r\n\r\n            correct:\r\n              \"3\",\r\n\r\n            claps:3\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Meeklappen\",\r\n\r\n            question:\r\n              \"Hoeveel lettergrepen heeft dit woord?\",\r\n\r\n            helper:\r\n              \"Zeg het langzaam: scho-len.\",\r\n\r\n            stimulus:\r\n              \"scholen\",\r\n\r\n            answers:[\r\n              \"1\",\r\n              \"2\",\r\n              \"3\"\r\n            ],\r\n\r\n            correct:\r\n              \"2\",\r\n\r\n            claps:2\r\n\r\n          }\r\n\r\n        ]\r\n\r\n      },\r\n\r\n\r\n      \/* =======================================\r\n         LEVEL 2 \u2014 ZOEKEN\r\n      ======================================= *\/\r\n\r\n      {\r\n\r\n        level:2,\r\n\r\n        title:\r\n          \"\ud83c\udf3f Level 2 \u00b7 Zoeken\",\r\n\r\n        questions:[\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Waar splits je?\",\r\n\r\n            question:\r\n              \"Welke verdeling klopt?\",\r\n\r\n            helper:\r\n              \"Zeg het woord rustig hardop.\",\r\n\r\n            stimulus:\r\n              \"tafel\",\r\n\r\n            answers:[\r\n              \"ta-fel\",\r\n              \"taf-el\",\r\n              \"t-afel\"\r\n            ],\r\n\r\n            correct:\r\n              \"ta-fel\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Waar splits je?\",\r\n\r\n            question:\r\n              \"Welke verdeling klopt?\",\r\n\r\n            helper:\r\n              \"Luister naar de twee stukjes.\",\r\n\r\n            stimulus:\r\n              \"banaan\",\r\n\r\n            answers:[\r\n              \"ba-naan\",\r\n              \"ban-aan\",\r\n              \"b-anaan\"\r\n            ],\r\n\r\n            correct:\r\n              \"ba-naan\"\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 lettergrepen zitten in dit woord?\",\r\n\r\n            helper:\r\n              \"Zeg het woord rustig.\",\r\n\r\n            stimulus:\r\n              \"regenboog\",\r\n\r\n            answers:[\r\n              \"2\",\r\n              \"3\",\r\n              \"4\"\r\n            ],\r\n\r\n            correct:\r\n              \"3\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Luister en kies\",\r\n\r\n            question:\r\n              \"Welke verdeling hoor je?\",\r\n\r\n            helper:\r\n              \"Zeg: win-ter.\",\r\n\r\n            stimulus:\r\n              \"winter\",\r\n\r\n            answers:[\r\n              \"win-ter\",\r\n              \"wint-er\",\r\n              \"wi-nter\"\r\n            ],\r\n\r\n            correct:\r\n              \"win-ter\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Welke hoort erbij?\",\r\n\r\n            question:\r\n              \"Welke verdeling is goed?\",\r\n\r\n            helper:\r\n              \"Zeg het woord langzaam.\",\r\n\r\n            stimulus:\r\n              \"vogel\",\r\n\r\n            answers:[\r\n              \"vo-gel\",\r\n              \"vog-el\",\r\n              \"v-ogel\"\r\n            ],\r\n\r\n            correct:\r\n              \"vo-gel\"\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              \"Zelf splitsen\",\r\n\r\n            question:\r\n              \"Typ het woord in lettergrepen.\",\r\n\r\n            helper:\r\n              \"Gebruik een streepje tussen de stukjes.\",\r\n\r\n            stimulus:\r\n              \"tafel\",\r\n\r\n            correct:\r\n              \"ta-fel\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"text\",\r\n\r\n            label:\r\n              \"Zelf splitsen\",\r\n\r\n            question:\r\n              \"Typ het woord in lettergrepen.\",\r\n\r\n            helper:\r\n              \"Zeg het eerst rustig hardop.\",\r\n\r\n            stimulus:\r\n              \"banaan\",\r\n\r\n            correct:\r\n              \"ba-naan\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Woorden bouwen\",\r\n\r\n            question:\r\n              \"Welk woord maken deze stukjes samen?\",\r\n\r\n            helper:\r\n              \"Zet de lettergrepen weer aan elkaar.\",\r\n\r\n            stimulus:\r\n              \"o \u00b7 li \u00b7 fant\",\r\n\r\n            answers:[\r\n              \"olifant\",\r\n              \"olifanten\",\r\n              \"olifan\"\r\n            ],\r\n\r\n            correct:\r\n              \"olifant\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"text\",\r\n\r\n            label:\r\n              \"Zelf splitsen\",\r\n\r\n            question:\r\n              \"Typ het woord in lettergrepen.\",\r\n\r\n            helper:\r\n              \"Luister waar het woord vanzelf even stopt.\",\r\n\r\n            stimulus:\r\n              \"regenboog\",\r\n\r\n            correct:\r\n              \"re-gen-boog\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Bouw het woord\",\r\n\r\n            question:\r\n              \"Welk woord hoort bij deze stukjes?\",\r\n\r\n            helper:\r\n              \"Lees de stukjes na elkaar.\",\r\n\r\n            stimulus:\r\n              \"win \u00b7 ter\",\r\n\r\n            answers:[\r\n              \"winter\",\r\n              \"winder\",\r\n              \"winner\"\r\n            ],\r\n\r\n            correct:\r\n              \"winter\"\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 lgLevelIndex=0;\r\n\r\n    let lgQuestionIndex=0;\r\n\r\n    let lgCorrect=0;\r\n\r\n    let lgAnswered=false;\r\n\r\n\r\n    const lgTotal=\r\n      lgLevels.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 lgLevelPill=\r\n      document.getElementById(\r\n        \"lgLevelPill\"\r\n      );\r\n\r\n\r\n    const lgQuestionCounter=\r\n      document.getElementById(\r\n        \"lgQuestionCounter\"\r\n      );\r\n\r\n\r\n    const lgProgressBar=\r\n      document.getElementById(\r\n        \"lgProgressBar\"\r\n      );\r\n\r\n\r\n    const lgQuestionType=\r\n      document.getElementById(\r\n        \"lgQuestionType\"\r\n      );\r\n\r\n\r\n    const lgQuestionTitle=\r\n      document.getElementById(\r\n        \"lgQuestionTitle\"\r\n      );\r\n\r\n\r\n    const lgHelper=\r\n      document.getElementById(\r\n        \"lgHelper\"\r\n      );\r\n\r\n\r\n    const lgStimulus=\r\n      document.getElementById(\r\n        \"lgStimulus\"\r\n      );\r\n\r\n\r\n    const lgClaps=\r\n      document.getElementById(\r\n        \"lgClaps\"\r\n      );\r\n\r\n\r\n    const lgAnswerArea=\r\n      document.getElementById(\r\n        \"lgAnswerArea\"\r\n      );\r\n\r\n\r\n    const lgFeedback=\r\n      document.getElementById(\r\n        \"lgFeedback\"\r\n      );\r\n\r\n\r\n    const lgNextWrap=\r\n      document.getElementById(\r\n        \"lgNextWrap\"\r\n      );\r\n\r\n\r\n    const lgNextBtn=\r\n      document.getElementById(\r\n        \"lgNextBtn\"\r\n      );\r\n\r\n\r\n    const lgSupport=\r\n      document.getElementById(\r\n        \"lgSupport\"\r\n      );\r\n\r\n\r\n    const lgIfiAvatar=\r\n      document.getElementById(\r\n        \"lgIfiAvatar\"\r\n      );\r\n\r\n\r\n    const lgIfiMessage=\r\n      document.getElementById(\r\n        \"lgIfiMessage\"\r\n      );\r\n\r\n\r\n    const lgExerciseContent=\r\n      document.getElementById(\r\n        \"lgExerciseContent\"\r\n      );\r\n\r\n\r\n    const lgTransition=\r\n      document.getElementById(\r\n        \"lgTransition\"\r\n      );\r\n\r\n\r\n    const lgTransitionTitle=\r\n      document.getElementById(\r\n        \"lgTransitionTitle\"\r\n      );\r\n\r\n\r\n    const lgTransitionText=\r\n      document.getElementById(\r\n        \"lgTransitionText\"\r\n      );\r\n\r\n\r\n    const lgStartNextLevel=\r\n      document.getElementById(\r\n        \"lgStartNextLevel\"\r\n      );\r\n\r\n\r\n    const lgFinish=\r\n      document.getElementById(\r\n        \"lgFinish\"\r\n      );\r\n\r\n\r\n    const lgResultText=\r\n      document.getElementById(\r\n        \"lgResultText\"\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       HELPERS\r\n    ========================================= *\/\r\n\r\n    function lgNormalize(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 lgShuffle(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    lgLevels.forEach(\r\n      function(level){\r\n\r\n        level.questions=\r\n          lgShuffle(\r\n            level.questions\r\n          );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    function lgCompletedCount(){\r\n\r\n      let amount=0;\r\n\r\n\r\n      for(\r\n        let i=0;\r\n        i<lgLevelIndex;\r\n        i++\r\n      ){\r\n\r\n        amount+=\r\n          lgLevels[i]\r\n            .questions\r\n            .length;\r\n\r\n      }\r\n\r\n\r\n      return amount+\r\n        lgQuestionIndex;\r\n\r\n    }\r\n\r\n\r\n    function lgUpdateRoute(){\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            \"lgRoute\"+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          lgLevelIndex\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          lgLevelIndex\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 lgSetIfi(\r\n      role,\r\n      message\r\n    ){\r\n\r\n      lgIfiAvatar.style.opacity=\r\n        \"0\";\r\n\r\n\r\n      lgIfiAvatar.style.transform=\r\n        \"translateY(6px)\";\r\n\r\n\r\n      setTimeout(\r\n        function(){\r\n\r\n          lgIfiAvatar.src=\r\n            LG_IFI[role];\r\n\r\n\r\n          lgIfiMessage.textContent=\r\n            message;\r\n\r\n\r\n          lgIfiAvatar.style.opacity=\r\n            \"1\";\r\n\r\n\r\n          lgIfiAvatar.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 lgEmit(\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 lgRender(){\r\n\r\n      lgAnswered=false;\r\n\r\n\r\n      const level=\r\n        lgLevels[\r\n          lgLevelIndex\r\n        ];\r\n\r\n\r\n      const question=\r\n        level.questions[\r\n          lgQuestionIndex\r\n        ];\r\n\r\n\r\n      lgExerciseContent.style.display=\r\n        \"block\";\r\n\r\n\r\n      lgTransition.style.display=\r\n        \"none\";\r\n\r\n\r\n      lgFinish.style.display=\r\n        \"none\";\r\n\r\n\r\n      lgLevelPill.textContent=\r\n        level.title;\r\n\r\n\r\n      const overall=\r\n        lgCompletedCount()+1;\r\n\r\n\r\n      lgQuestionCounter.textContent=\r\n        \"Vraag \"+\r\n        overall+\r\n        \" van \"+\r\n        lgTotal;\r\n\r\n\r\n      lgProgressBar.style.width=\r\n        Math.round(\r\n          (\r\n            lgCompletedCount() \/\r\n            lgTotal\r\n          ) * 100\r\n        )+\"%\";\r\n\r\n\r\n      lgQuestionType.textContent=\r\n        question.label;\r\n\r\n\r\n      lgQuestionTitle.textContent=\r\n        question.question;\r\n\r\n\r\n      lgHelper.textContent=\r\n        question.helper || \"\";\r\n\r\n\r\n      lgStimulus.textContent=\r\n        question.stimulus || \"\";\r\n\r\n\r\n      lgFeedback.textContent=\r\n        \"\";\r\n\r\n\r\n      lgFeedback.className=\r\n        \"lg-feedback\";\r\n\r\n\r\n      lgNextWrap.style.display=\r\n        \"none\";\r\n\r\n\r\n      lgAnswerArea.innerHTML=\r\n        \"\";\r\n\r\n\r\n      lgClaps.innerHTML=\r\n        \"\";\r\n\r\n\r\n      \/* SUPPORT *\/\r\n\r\n      lgSupport.style.display=\r\n        lgLevelIndex===0\r\n\r\n        ? \"block\"\r\n\r\n        : \"none\";\r\n\r\n\r\n      \/* KLAPPEN ALLEEN WAAR NODIG *\/\r\n\r\n      if(\r\n        question.claps\r\n      ){\r\n\r\n        for(\r\n          let i=0;\r\n          i<question.claps;\r\n          i++\r\n        ){\r\n\r\n          const clap=\r\n            document.createElement(\r\n              \"div\"\r\n            );\r\n\r\n\r\n          clap.className=\r\n            \"lg-clap-dot\";\r\n\r\n\r\n          clap.textContent=\r\n            \"\ud83d\udc4f\";\r\n\r\n\r\n          lgClaps.appendChild(\r\n            clap\r\n          );\r\n\r\n        }\r\n\r\n      }\r\n\r\n\r\n      \/* IFI PER LEVEL *\/\r\n\r\n      if(\r\n        lgLevelIndex===0\r\n      ){\r\n\r\n        lgSetIfi(\r\n\r\n          \"uitleg\",\r\n\r\n          \"Zeg het woord langzaam. Elke keer dat je een nieuw stukje hoort, kun je \u00e9\u00e9n keer klappen.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else if(\r\n        lgLevelIndex===1\r\n      ){\r\n\r\n        lgSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          \"Nu laat ik de klapjes niet meer zien. Luister zelf waar het woord in stukjes valt.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        lgSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          \"Je bent bij Level 3. Zeg het woord eerst rustig en probeer daarna zelf te splitsen of bouwen.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n\r\n      \/* CHOICE *\/\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          \"lg-antwoorden\";\r\n\r\n\r\n        lgShuffle(\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              \"lg-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                lgSubmit(\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        lgAnswerArea.appendChild(\r\n          wrap\r\n        );\r\n\r\n      }\r\n\r\n\r\n      \/* TEXT *\/\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          \"lg-input-wrap\";\r\n\r\n\r\n        wrap.innerHTML=`\r\n\r\n          <input\r\n            type=\"text\"\r\n            class=\"lg-input\"\r\n            id=\"lgTextInput\"\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=\"lg-check-btn\"\r\n            id=\"lgCheckText\">\r\n\r\n            Nakijken \ud83c\udf3f\r\n\r\n          <\/button>\r\n\r\n        `;\r\n\r\n\r\n        lgAnswerArea.appendChild(\r\n          wrap\r\n        );\r\n\r\n\r\n        const input=\r\n          document.getElementById(\r\n            \"lgTextInput\"\r\n          );\r\n\r\n\r\n        document\r\n          .getElementById(\r\n            \"lgCheckText\"\r\n          )\r\n          .addEventListener(\r\n\r\n            \"click\",\r\n\r\n            function(){\r\n\r\n              lgSubmit(\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              lgSubmit(\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       SUBMIT\r\n    ========================================= *\/\r\n\r\n    function lgSubmit(\r\n      value,\r\n      node\r\n    ){\r\n\r\n      if(\r\n        lgAnswered\r\n      ){\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      lgAnswered=true;\r\n\r\n\r\n      const question=\r\n        lgLevels[\r\n          lgLevelIndex\r\n        ]\r\n        .questions[\r\n          lgQuestionIndex\r\n        ];\r\n\r\n\r\n      const correct=\r\n        lgNormalize(value) ===\r\n        lgNormalize(\r\n          question.correct\r\n        );\r\n\r\n\r\n      if(\r\n        correct\r\n      ){\r\n\r\n        lgCorrect++;\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        lgFeedback.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        lgFeedback.className=\r\n          \"lg-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, dat klopt. Je hoorde de stukjes goed.\",\r\n\r\n          \"Goed geluisterd.\",\r\n\r\n          \"Precies. Je begint steeds beter te horen waar een woord splitst.\"\r\n\r\n        ];\r\n\r\n\r\n        lgSetIfi(\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        lgFeedback.textContent=\r\n          \"Kijk en luister nog eens rustig. Het goede antwoord is: \"+\r\n          question.correct+\r\n          \".\";\r\n\r\n\r\n        lgFeedback.className=\r\n          \"lg-feedback retry\";\r\n\r\n\r\n        lgSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          lgLevelIndex===0\r\n\r\n          ? \"Dat geeft niet. Zeg het woord nog eens langzaam en klap mee met ieder stukje.\"\r\n\r\n          : \"Probeer het woord nog eens hardop te zeggen. Waar hoor je vanzelf een nieuw stukje beginnen?\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n\r\n      lgAnswerArea\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      lgNextWrap.style.display=\r\n        \"block\";\r\n\r\n\r\n      lgEmit(\r\n\r\n        \"withifi:lettergreep-answer\",\r\n\r\n        {\r\n\r\n          level:\r\n            lgLevelIndex+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 lgNext(){\r\n\r\n      const level=\r\n        lgLevels[\r\n          lgLevelIndex\r\n        ];\r\n\r\n\r\n      lgQuestionIndex++;\r\n\r\n\r\n      if(\r\n        lgQuestionIndex <\r\n        level.questions.length\r\n      ){\r\n\r\n        lgRender();\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      if(\r\n        lgLevelIndex <\r\n        lgLevels.length-1\r\n      ){\r\n\r\n        lgShowTransition();\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      lgComplete();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       LEVEL OVERGANG\r\n    ========================================= *\/\r\n\r\n    function lgShowTransition(){\r\n\r\n      lgExerciseContent.style.display=\r\n        \"none\";\r\n\r\n\r\n      lgTransition.style.display=\r\n        \"block\";\r\n\r\n\r\n      if(\r\n        lgLevelIndex===0\r\n      ){\r\n\r\n        lgTransitionTitle.textContent=\r\n          \"\ud83c\udf3f Klaar voor Level 2\";\r\n\r\n\r\n        lgTransitionText.textContent=\r\n          \"Je hebt geoefend met luisteren en klappen. Nu verdwijnen de klapjes en ga je zelf zoeken waar woorden in stukjes vallen.\";\r\n\r\n\r\n        lgSetIfi(\r\n\r\n          \"uitleg\",\r\n\r\n          \"Nu gaan we het iets moeilijker maken. Zeg ieder woord rustig hardop en luister waar het verandert.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        lgTransitionTitle.textContent=\r\n          \"\ud83c\udf33 Klaar voor Level 3\";\r\n\r\n\r\n        lgTransitionText.textContent=\r\n          \"Je kunt lettergrepen al horen en herkennen. Nu ga je zelf woorden splitsen en weer opbouwen.\";\r\n\r\n\r\n        lgSetIfi(\r\n\r\n          \"goed\",\r\n\r\n          \"Ik zie dat je er klaar voor bent. Nog \u00e9\u00e9n level. Nu mag jij steeds meer zelf doen.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    function lgNextLevel(){\r\n\r\n      lgLevelIndex++;\r\n\r\n      lgQuestionIndex=0;\r\n\r\n\r\n      lgUpdateRoute();\r\n\r\n      lgRender();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       KLAAR\r\n    ========================================= *\/\r\n\r\n    function lgComplete(){\r\n\r\n      lgExerciseContent.style.display=\r\n        \"none\";\r\n\r\n\r\n      lgTransition.style.display=\r\n        \"none\";\r\n\r\n\r\n      lgFinish.style.display=\r\n        \"block\";\r\n\r\n\r\n      lgProgressBar.style.width=\r\n        \"100%\";\r\n\r\n\r\n      const percentage=\r\n        Math.round(\r\n          (\r\n            lgCorrect \/\r\n            lgTotal\r\n          ) * 100\r\n        );\r\n\r\n\r\n      lgResultText.innerHTML=\r\n\r\n        \"Je hebt alle drie de levels doorlopen.<br>\" +\r\n\r\n        \"Je had <strong>\" +\r\n        lgCorrect +\r\n        \" van de \" +\r\n        lgTotal +\r\n        \"<\/strong> opdrachten goed (\" +\r\n        percentage +\r\n        \"%).<br><br>\" +\r\n\r\n        \"Je hebt geoefend met luisteren, klappen, splitsen en woorden weer samenbouwen.\";\r\n\r\n\r\n      lgSetIfi(\r\n\r\n        \"goed\",\r\n\r\n        \"Goed gedaan. Je hebt vandaag echt geleerd hoe je woorden in lettergrepen kunt horen en verdelen.\"\r\n\r\n      );\r\n\r\n\r\n      lgEmit(\r\n\r\n        \"withifi:lettergreep-complete\",\r\n\r\n        {\r\n\r\n          topic:\r\n            \"Lettergrepen\",\r\n\r\n          levelsCompleted:\r\n            3,\r\n\r\n          correct:\r\n            lgCorrect,\r\n\r\n          total:\r\n            lgTotal,\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 lgRestart(){\r\n\r\n      lgLevelIndex=0;\r\n\r\n      lgQuestionIndex=0;\r\n\r\n      lgCorrect=0;\r\n\r\n      lgAnswered=false;\r\n\r\n\r\n      lgLevels.forEach(\r\n        function(level){\r\n\r\n          level.questions=\r\n            lgShuffle(\r\n              level.questions\r\n            );\r\n\r\n        }\r\n      );\r\n\r\n\r\n      lgUpdateRoute();\r\n\r\n\r\n      lgSetIfi(\r\n\r\n        \"uitleg\",\r\n\r\n        \"We beginnen gewoon opnieuw. Zeg de woorden rustig hardop en luister mee.\"\r\n\r\n      );\r\n\r\n\r\n      lgRender();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       BUTTON EVENTS\r\n    ========================================= *\/\r\n\r\n    lgNextBtn.addEventListener(\r\n\r\n      \"click\",\r\n\r\n      lgNext\r\n\r\n    );\r\n\r\n\r\n    lgStartNextLevel.addEventListener(\r\n\r\n      \"click\",\r\n\r\n      lgNextLevel\r\n\r\n    );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"lgRestartBtn\"\r\n      )\r\n      .addEventListener(\r\n\r\n        \"click\",\r\n\r\n        lgRestart\r\n\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       START\r\n    ========================================= *\/\r\n\r\n    lgUpdateRoute();\r\n\r\n    lgRender();\r\n\r\n  }\r\n);\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4d0ef89 e-flex e-con-boxed e-con e-parent\" data-id=\"4d0ef89\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\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\udc4f Woordenwereld Lettergrepen ontdekken. Woorden bestaan uit kleine stukjes die je kunt horen. Die stukjes noemen we lettergrepen. Eerst luisteren en klappen we mee. Daarna ga je zelf woorden verdelen en weer samenbouwen. \ud83c\udf31 Level 1 \u00b7 Horen &#038; klappen Luisteren hoeveel stukjes je hoort. \ud83c\udf3f Level 2 \u00b7 Zoeken Ontdekken waar een woord in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-686","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/686","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=686"}],"version-history":[{"count":58,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/686\/revisions"}],"predecessor-version":[{"id":4374,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/686\/revisions\/4374"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}