{"id":826,"date":"2026-02-10T04:17:05","date_gmt":"2026-02-10T04:17:05","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?page_id=826"},"modified":"2026-08-29T06:14:29","modified_gmt":"2026-08-29T06:14:29","slug":"oefenen-met-doe-woorden","status":"publish","type":"page","link":"https:\/\/withifi.muhubonurture.nl\/?page_id=826","title":{"rendered":"Oefenen Met Doe-Woorden"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"826\" class=\"elementor elementor-826\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-50a8f81 e-con-full e-flex e-con e-parent\" data-id=\"50a8f81\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cc270e4 elementor-widget elementor-widget-html\" data-id=\"cc270e4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================\r\n     WITH IFI \u2014 DOE-WOORDEN 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.dw-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,.42) 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.dw-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.dw-hero{\r\n  max-width:940px;\r\n  margin:0 auto 3.5rem;\r\n  padding:3.1rem;\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.dw-label{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:.45rem;\r\n\r\n  margin-bottom:1.2rem;\r\n  padding:10px 18px;\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:.9rem;\r\n  font-weight:900;\r\n}\r\n\r\n.dw-title{\r\n  margin:0 0 1.2rem;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:clamp(42px,6vw,72px);\r\n  line-height:1.05;\r\n\r\n  font-weight:950;\r\n}\r\n\r\n.dw-intro{\r\n  max-width:760px;\r\n  margin:0 auto;\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:19px;\r\n  line-height:1.85;\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.dw-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.dw-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.dw-route-level:nth-child(1){\r\n  background:linear-gradient(135deg,#FFF4E3,#FFF9EF);\r\n}\r\n\r\n.dw-route-level:nth-child(2){\r\n  background:linear-gradient(135deg,#EAF7F1,#F7FFFB);\r\n}\r\n\r\n.dw-route-level:nth-child(3){\r\n  background:linear-gradient(135deg,#FFEAF1,#FFF7FA);\r\n}\r\n\r\n.dw-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.dw-route-level.active{\r\n  transform:translateY(-5px);\r\n  box-shadow:0 18px 38px rgba(90,70,55,.11);\r\n}\r\n\r\n.dw-route-level.done{\r\n  opacity:.72;\r\n}\r\n\r\n.dw-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.dw-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.dw-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\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.dw-support{\r\n  max-width:900px;\r\n  margin:0 auto 2.3rem;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.dw-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.dw-support-row{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  justify-content:center;\r\n\r\n  gap:.8rem;\r\n}\r\n\r\n.dw-support-pill{\r\n  padding:.85rem 1.15rem;\r\n\r\n  border-radius:18px;\r\n\r\n  background:rgba(255,255,255,.86);\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,.06);\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:.96rem;\r\n  font-weight:850;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   OEFENKAART\r\n========================================= *\/\r\n\r\n.dw-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.dw-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.dw-oefen-main{\r\n  min-width:0;\r\n  text-align:center;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   TOP\r\n========================================= *\/\r\n\r\n.dw-oefen-top{\r\n  display:flex;\r\n\r\n  justify-content:space-between;\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.dw-level-pill,\r\n.dw-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.dw-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.dw-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.dw-vraag-type{\r\n  display:inline-block;\r\n\r\n  margin-bottom:.8rem;\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.dw-vraag-title{\r\n  max-width:650px;\r\n\r\n  margin:0 auto .65rem;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:clamp(1.5rem,3vw,2rem);\r\n\r\n  line-height:1.3;\r\n\r\n  font-weight:950;\r\n}\r\n\r\n.dw-helper{\r\n  max-width:650px;\r\n\r\n  margin:0 auto 1.6rem;\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:1rem;\r\n  line-height:1.7;\r\n\r\n  font-weight:700;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   ZIN\r\n========================================= *\/\r\n\r\n.dw-stimulus{\r\n  max-width:760px;\r\n\r\n  margin:1.2rem auto 2rem;\r\n\r\n  padding:1.4rem 1.6rem;\r\n\r\n  border-radius:25px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #FFF9F3 0%,\r\n      #F8FCFA 100%\r\n    );\r\n\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:clamp(1.7rem,4vw,2.8rem);\r\n\r\n  line-height:1.4;\r\n\r\n  font-weight:950;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   ANTWOORDEN\r\n========================================= *\/\r\n\r\n.dw-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.dw-answer{\r\n  min-width:145px;\r\n\r\n  padding:1rem 1.45rem;\r\n\r\n  border:none;\r\n\r\n  border-radius:999px;\r\n\r\n  background:#FFF9F4;\r\n\r\n  color:#3A2B24 !important;\r\n\r\n  box-shadow:0 8px 20px rgba(90,70,55,.07);\r\n\r\n  font-family:inherit;\r\n\r\n  font-size:1rem;\r\n  font-weight:900;\r\n\r\n  cursor:pointer;\r\n\r\n  transition:.22s ease;\r\n}\r\n\r\n.dw-answer:hover{\r\n  transform:translateY(-2px);\r\n  background:#FFF0DE;\r\n}\r\n\r\n.dw-answer.correct{\r\n  background:#DDF5E4 !important;\r\n  color:#315D43 !important;\r\n}\r\n\r\n.dw-answer.try-again{\r\n  background:#FFF0E8 !important;\r\n  color:#8A5D4C !important;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   INPUT\r\n========================================= *\/\r\n\r\n.dw-input-wrap{\r\n  max-width:440px;\r\n  margin:0 auto;\r\n}\r\n\r\n.dw-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  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  font-weight:900;\r\n\r\n  transition:.2s ease;\r\n}\r\n\r\n.dw-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.dw-input.correct{\r\n  background:#F0FAF3;\r\n  border-color:#C4E4CF;\r\n}\r\n\r\n.dw-input.try-again{\r\n  background:#FFF7F2;\r\n  border-color:#F1D7C9;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   BUTTONS\r\n========================================= *\/\r\n\r\n.dw-check-btn,\r\n.dw-next-btn,\r\n.dw-restart-btn{\r\n  margin-top:1.4rem;\r\n\r\n  padding:1rem 1.8rem;\r\n\r\n  border:none;\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  font-weight:950;\r\n\r\n  cursor:pointer;\r\n\r\n  transition:.22s ease;\r\n}\r\n\r\n.dw-check-btn:hover,\r\n.dw-next-btn:hover,\r\n.dw-restart-btn:hover{\r\n  transform:translateY(-2px);\r\n  background:#FFF0DE;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   FEEDBACK\r\n========================================= *\/\r\n\r\n.dw-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  line-height:1.7;\r\n\r\n  font-weight:800;\r\n}\r\n\r\n.dw-feedback.good{\r\n  color:#47735A;\r\n}\r\n\r\n.dw-feedback.retry{\r\n  color:#8A6555;\r\n}\r\n\r\n.dw-next-wrap{\r\n  display:none;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   IFI RECHTS\r\n========================================= *\/\r\n\r\n.dw-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  align-items:center;\r\n\r\n  gap:1rem;\r\n\r\n  padding:.5rem 0;\r\n}\r\n\r\n.dw-ifi-side-avatar{\r\n  display:block;\r\n\r\n  width:205px;\r\n\r\n  max-width:100%;\r\n  max-height:330px;\r\n\r\n  height:auto;\r\n\r\n  object-fit:contain;\r\n\r\n  filter:\r\n    drop-shadow(\r\n      0 14px 24px rgba(90,70,55,.10)\r\n    );\r\n\r\n  transition:\r\n    opacity .25s ease,\r\n    transform .25s ease;\r\n}\r\n\r\n.dw-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.dw-ifi-name{\r\n  display:inline-block;\r\n\r\n  margin-bottom:.5rem;\r\n\r\n  padding:6px 11px;\r\n\r\n  border-radius:999px;\r\n\r\n  background:rgba(255,255,255,.82);\r\n\r\n  color:#8B6B55;\r\n\r\n  font-size:.82rem;\r\n  font-weight:900;\r\n}\r\n\r\n.dw-ifi-message{\r\n  margin:0;\r\n\r\n  color:#5F4B3F;\r\n\r\n  font-size:.95rem;\r\n  line-height:1.65;\r\n\r\n  font-weight:750;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   LEVEL TRANSITION\r\n========================================= *\/\r\n\r\n.dw-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.dw-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  font-weight:950;\r\n}\r\n\r\n.dw-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.dw-finish{\r\n  display:none;\r\n  text-align:center;\r\n}\r\n\r\n.dw-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.dw-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.dw-finish p{\r\n  max-width:620px;\r\n\r\n  margin:0 auto;\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:1.05rem;\r\n  line-height:1.8;\r\n\r\n  font-weight:700;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   NOTE\r\n========================================= *\/\r\n\r\n.dw-note{\r\n  max-width:760px;\r\n\r\n  margin:3rem auto 0;\r\n\r\n  padding:1.7rem;\r\n\r\n  border-radius:28px;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 12% 18%,\r\n      rgba(255,255,255,.88),\r\n      transparent 34%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      #FFF8EF,\r\n      #F3FBF8 52%,\r\n      #EEF7FE\r\n    );\r\n\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  box-shadow:0 14px 34px rgba(90,70,55,.07);\r\n\r\n  text-align:center;\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:1rem;\r\n  line-height:1.8;\r\n\r\n  font-weight:700;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   TABLET\r\n========================================= *\/\r\n\r\n@media(max-width:950px){\r\n\r\n  .dw-oefen-layout{\r\n    grid-template-columns:minmax(0,1fr) 175px;\r\n    gap:1.2rem;\r\n  }\r\n\r\n  .dw-ifi-side-avatar{\r\n    width:155px;\r\n  }\r\n\r\n  .dw-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  .dw-page{\r\n    padding:4rem 5vw;\r\n  }\r\n\r\n  .dw-hero{\r\n    padding:2.3rem 1.7rem;\r\n  }\r\n\r\n  .dw-level-route{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .dw-oefen-box{\r\n    padding:1.5rem 1.15rem;\r\n  }\r\n\r\n  .dw-oefen-layout{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .dw-oefen-top{\r\n    justify-content:center;\r\n    flex-wrap:wrap;\r\n  }\r\n\r\n  .dw-ifi-side{\r\n    order:-1;\r\n\r\n    flex-direction:row;\r\n\r\n    align-items:center;\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  .dw-ifi-side-avatar{\r\n    width:95px;\r\n    flex-shrink:0;\r\n  }\r\n\r\n  .dw-ifi-side-bubble{\r\n    text-align:left;\r\n  }\r\n\r\n  .dw-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  .dw-ifi-side{\r\n    flex-direction:column;\r\n    text-align:center;\r\n  }\r\n\r\n  .dw-ifi-side-bubble{\r\n    text-align:center;\r\n  }\r\n\r\n}\r\n<\/style>\r\n\r\n\r\n<section\r\n  class=\"vt-page\"\r\n  data-withifi-world=\"woordenwereld\"\r\n  data-withifi-parent=\"taalbouwen\">\r\n\r\n  <div class=\"dw-wrap\">\r\n\r\n\r\n    <!-- =====================================\r\n         HERO\r\n    ====================================== -->\r\n\r\n    <div class=\"dw-hero\">\r\n\r\n      <div class=\"dw-label\">\r\n        \ud83c\udfc3 Taal bouwen\r\n      <\/div>\r\n\r\n      <h1 class=\"dw-title\">\r\n        Doe-woorden oefenen.\r\n      <\/h1>\r\n\r\n      <p class=\"dw-intro\">\r\n        Een doe-woord vertelt\r\n        <strong>wat iemand doet<\/strong>\r\n        of <strong>wat er gebeurt<\/strong>.\r\n        Eerst zoeken we het woord samen.\r\n        Daarna krijg je steeds minder hulp en ga je het zelf doen.\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=\"dw-level-route\">\r\n\r\n      <div\r\n        class=\"dw-route-level active\"\r\n        id=\"dwRoute1\">\r\n\r\n        <div class=\"dw-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          Zoek welk woord vertelt wat iemand doet.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"dw-route-level\"\r\n        id=\"dwRoute2\">\r\n\r\n        <div class=\"dw-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          Vind het doe-woord tussen verschillende woorden.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"dw-route-level\"\r\n        id=\"dwRoute3\">\r\n\r\n        <div class=\"dw-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          Bedenk en typ zelf welk doe-woord past.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================\r\n         SUPPORT LEVEL 1\r\n    ====================================== -->\r\n\r\n    <div\r\n      class=\"dw-support\"\r\n      id=\"dwSupport\">\r\n\r\n      <div class=\"dw-support-title\">\r\n        Zo kun je het doe-woord vinden\r\n      <\/div>\r\n\r\n      <div class=\"dw-support-row\">\r\n\r\n        <div class=\"dw-support-pill\">\r\n          \ud83d\udc40 Lees de hele zin\r\n        <\/div>\r\n\r\n        <div class=\"dw-support-pill\">\r\n          \u2753 Vraag: wat doet iemand?\r\n        <\/div>\r\n\r\n        <div class=\"dw-support-pill\">\r\n          \ud83c\udf3f Zoek het woord dat de actie vertelt\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=\"dw-oefen-box\">\r\n\r\n      <div class=\"dw-oefen-layout\">\r\n\r\n\r\n        <!-- =================================\r\n             LINKERKANT \u2014 OEFENING\r\n        ================================== -->\r\n\r\n        <div class=\"dw-oefen-main\">\r\n\r\n\r\n          <div id=\"dwExerciseContent\">\r\n\r\n\r\n            <div class=\"dw-oefen-top\">\r\n\r\n              <div\r\n                class=\"dw-level-pill\"\r\n                id=\"dwLevelPill\">\r\n\r\n                \ud83c\udf31 Level 1 \u00b7 Herkennen\r\n\r\n              <\/div>\r\n\r\n\r\n              <div\r\n                class=\"dw-vraag-pill\"\r\n                id=\"dwQuestionCounter\">\r\n\r\n                Vraag 1\r\n\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"dw-progress-wrap\">\r\n\r\n              <div\r\n                class=\"dw-progress-bar\"\r\n                id=\"dwProgressBar\">\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"dw-vraag-type\"\r\n              id=\"dwQuestionType\">\r\n\r\n              Herkennen\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"dw-vraag-title\"\r\n              id=\"dwQuestionTitle\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"dw-helper\"\r\n              id=\"dwHelper\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"dw-stimulus\"\r\n              id=\"dwStimulus\">\r\n            <\/div>\r\n\r\n\r\n            <div id=\"dwAnswerArea\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"dw-feedback\"\r\n              id=\"dwFeedback\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"dw-next-wrap\"\r\n              id=\"dwNextWrap\">\r\n\r\n              <button\r\n                type=\"button\"\r\n                class=\"dw-next-btn\"\r\n                id=\"dwNextBtn\">\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=\"dw-level-transition\"\r\n            id=\"dwTransition\">\r\n\r\n            <h3 id=\"dwTransitionTitle\">\r\n            <\/h3>\r\n\r\n            <p id=\"dwTransitionText\">\r\n            <\/p>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"dw-next-btn\"\r\n              id=\"dwStartNextLevel\">\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=\"dw-finish\"\r\n            id=\"dwFinish\">\r\n\r\n            <img decoding=\"async\"\r\n              class=\"dw-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=\"dwResultText\">\r\n            <\/p>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"dw-restart-btn\"\r\n              id=\"dwRestartBtn\">\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             IFI RECHTS\r\n        ================================== -->\r\n\r\n        <aside class=\"dw-ifi-side\">\r\n\r\n          <img decoding=\"async\"\r\n            id=\"dwIfiAvatar\"\r\n            class=\"dw-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=\"dw-ifi-side-bubble\">\r\n\r\n            <div class=\"dw-ifi-name\">\r\n              IFI helpt je \ud83c\udf3f\r\n            <\/div>\r\n\r\n            <p\r\n              class=\"dw-ifi-message\"\r\n              id=\"dwIfiMessage\">\r\n\r\n              Lees eerst rustig de hele zin.\r\n              Vraag daarna: wat doet iemand?\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=\"dw-note\">\r\n\r\n      Kleine reminder \ud83c\udf38<br>\r\n\r\n      Je hoeft niet meteen naar losse woorden te kijken.\r\n      Lees eerst de zin en vraag jezelf:\r\n      <strong>wat doet iemand?<\/strong>\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 DW_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 dwLevels = [\r\n\r\n\r\n      \/* =======================================\r\n         LEVEL 1 \u2014 HERKENNEN\r\n      ======================================= *\/\r\n\r\n      {\r\n\r\n        level:1,\r\n\r\n        title:\r\n          \"\ud83c\udf31 Level 1 \u00b7 Herkennen\",\r\n\r\n        questions:[\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Zoek het doe-woord\",\r\n\r\n            question:\r\n              \"Welk woord vertelt wat de jongen doet?\",\r\n\r\n            helper:\r\n              \"Vraag jezelf: wat doet de jongen?\",\r\n\r\n            stimulus:\r\n              \"De jongen rent.\",\r\n\r\n            answers:[\r\n              \"de\",\r\n              \"jongen\",\r\n              \"rent\"\r\n            ],\r\n\r\n            correct:\r\n              \"rent\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Zoek het doe-woord\",\r\n\r\n            question:\r\n              \"Welk woord vertelt wat de kat doet?\",\r\n\r\n            helper:\r\n              \"Wat doet de kat?\",\r\n\r\n            stimulus:\r\n              \"De kat slaapt.\",\r\n\r\n            answers:[\r\n              \"kat\",\r\n              \"slaapt\",\r\n              \"de\"\r\n            ],\r\n\r\n            correct:\r\n              \"slaapt\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Zoek het doe-woord\",\r\n\r\n            question:\r\n              \"Welk woord vertelt wat ik doe?\",\r\n\r\n            helper:\r\n              \"Vraag: wat doe ik?\",\r\n\r\n            stimulus:\r\n              \"Ik lees een boek.\",\r\n\r\n            answers:[\r\n              \"ik\",\r\n              \"lees\",\r\n              \"boek\"\r\n            ],\r\n\r\n            correct:\r\n              \"lees\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Zoek het doe-woord\",\r\n\r\n            question:\r\n              \"Welk woord vertelt wat de hond doet?\",\r\n\r\n            helper:\r\n              \"Wat doet de hond?\",\r\n\r\n            stimulus:\r\n              \"De hond blaft.\",\r\n\r\n            answers:[\r\n              \"hond\",\r\n              \"blaft\",\r\n              \"de\"\r\n            ],\r\n\r\n            correct:\r\n              \"blaft\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Zoek het doe-woord\",\r\n\r\n            question:\r\n              \"Welk woord vertelt wat Noor doet?\",\r\n\r\n            helper:\r\n              \"Wat doet Noor?\",\r\n\r\n            stimulus:\r\n              \"Noor tekent een bloem.\",\r\n\r\n            answers:[\r\n              \"Noor\",\r\n              \"tekent\",\r\n              \"bloem\"\r\n            ],\r\n\r\n            correct:\r\n              \"tekent\"\r\n\r\n          }\r\n\r\n        ]\r\n\r\n      },\r\n\r\n\r\n      \/* =======================================\r\n         LEVEL 2 \u2014 ZOEKEN & BEGRIJPEN\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              \"Wat gebeurt er?\",\r\n\r\n            question:\r\n              \"Welk woord is het doe-woord?\",\r\n\r\n            helper:\r\n              \"Lees de hele zin voordat je kiest.\",\r\n\r\n            stimulus:\r\n              \"Buiten speelt de jongen met een bal.\",\r\n\r\n            answers:[\r\n              \"buiten\",\r\n              \"speelt\",\r\n              \"bal\"\r\n            ],\r\n\r\n            correct:\r\n              \"speelt\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Wat gebeurt er?\",\r\n\r\n            question:\r\n              \"Welk woord vertelt de actie?\",\r\n\r\n            helper:\r\n              \"Wat doet de vogel?\",\r\n\r\n            stimulus:\r\n              \"De kleine vogel vliegt hoog.\",\r\n\r\n            answers:[\r\n              \"kleine\",\r\n              \"vogel\",\r\n              \"vliegt\",\r\n              \"hoog\"\r\n            ],\r\n\r\n            correct:\r\n              \"vliegt\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Zoek het doe-woord\",\r\n\r\n            question:\r\n              \"Welk woord vertelt wat mama doet?\",\r\n\r\n            helper:\r\n              \"Niet ieder woord dat belangrijk klinkt is een doe-woord.\",\r\n\r\n            stimulus:\r\n              \"Mama kookt lekkere soep.\",\r\n\r\n            answers:[\r\n              \"mama\",\r\n              \"kookt\",\r\n              \"lekkere\",\r\n              \"soep\"\r\n            ],\r\n\r\n            correct:\r\n              \"kookt\"\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 actie\",\r\n\r\n            question:\r\n              \"Wat doet de meester?\",\r\n\r\n            helper:\r\n              \"Kies het woord dat echt de actie vertelt.\",\r\n\r\n            stimulus:\r\n              \"De meester schrijft op het bord.\",\r\n\r\n            answers:[\r\n              \"meester\",\r\n              \"schrijft\",\r\n              \"bord\"\r\n            ],\r\n\r\n            correct:\r\n              \"schrijft\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Wat gebeurt er?\",\r\n\r\n            question:\r\n              \"Welk woord vertelt wat de kinderen doen?\",\r\n\r\n            helper:\r\n              \"Vraag: wat doen de kinderen?\",\r\n\r\n            stimulus:\r\n              \"Na school spelen de kinderen buiten.\",\r\n\r\n            answers:[\r\n              \"school\",\r\n              \"kinderen\",\r\n              \"spelen\",\r\n              \"buiten\"\r\n            ],\r\n\r\n            correct:\r\n              \"spelen\"\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              \"Vind het zelf\",\r\n\r\n            question:\r\n              \"Typ alleen het doe-woord.\",\r\n\r\n            helper:\r\n              \"Wat doet Sara?\",\r\n\r\n            stimulus:\r\n              \"Sara danst in de kamer.\",\r\n\r\n            correct:\r\n              \"danst\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"text\",\r\n\r\n            label:\r\n              \"Vind het zelf\",\r\n\r\n            question:\r\n              \"Typ alleen het doe-woord.\",\r\n\r\n            helper:\r\n              \"Wat doet de baby?\",\r\n\r\n            stimulus:\r\n              \"De baby lacht naar papa.\",\r\n\r\n            correct:\r\n              \"lacht\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Maak de zin af\",\r\n\r\n            question:\r\n              \"Welk doe-woord past in de zin?\",\r\n\r\n            helper:\r\n              \"Lees de zin met ieder woord in gedachten.\",\r\n\r\n            stimulus:\r\n              \"De vis ____ in het water.\",\r\n\r\n            answers:[\r\n              \"zwemt\",\r\n              \"blauw\",\r\n              \"water\"\r\n            ],\r\n\r\n            correct:\r\n              \"zwemt\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\r\n              \"Maak de zin af\",\r\n\r\n            question:\r\n              \"Welk doe-woord maakt de zin logisch?\",\r\n\r\n            helper:\r\n              \"Wat kan een kind doen met een bal?\",\r\n\r\n            stimulus:\r\n              \"Het kind ____ met de bal.\",\r\n\r\n            answers:[\r\n              \"speelt\",\r\n              \"groen\",\r\n              \"stoel\"\r\n            ],\r\n\r\n            correct:\r\n              \"speelt\"\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 het doe-woord uit deze zin.\",\r\n\r\n            helper:\r\n              \"Lees de zin rustig en vraag: wat doen wij?\",\r\n\r\n            stimulus:\r\n              \"Wij bouwen samen een toren.\",\r\n\r\n            correct:\r\n              \"bouwen\"\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 dwLevelIndex=0;\r\n    let dwQuestionIndex=0;\r\n    let dwCorrect=0;\r\n    let dwAnswered=false;\r\n\r\n\r\n    const dwTotal=\r\n      dwLevels.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 dwLevelPill=\r\n      document.getElementById(\r\n        \"dwLevelPill\"\r\n      );\r\n\r\n    const dwQuestionCounter=\r\n      document.getElementById(\r\n        \"dwQuestionCounter\"\r\n      );\r\n\r\n    const dwProgressBar=\r\n      document.getElementById(\r\n        \"dwProgressBar\"\r\n      );\r\n\r\n    const dwQuestionType=\r\n      document.getElementById(\r\n        \"dwQuestionType\"\r\n      );\r\n\r\n    const dwQuestionTitle=\r\n      document.getElementById(\r\n        \"dwQuestionTitle\"\r\n      );\r\n\r\n    const dwHelper=\r\n      document.getElementById(\r\n        \"dwHelper\"\r\n      );\r\n\r\n    const dwStimulus=\r\n      document.getElementById(\r\n        \"dwStimulus\"\r\n      );\r\n\r\n    const dwAnswerArea=\r\n      document.getElementById(\r\n        \"dwAnswerArea\"\r\n      );\r\n\r\n    const dwFeedback=\r\n      document.getElementById(\r\n        \"dwFeedback\"\r\n      );\r\n\r\n    const dwNextWrap=\r\n      document.getElementById(\r\n        \"dwNextWrap\"\r\n      );\r\n\r\n    const dwNextBtn=\r\n      document.getElementById(\r\n        \"dwNextBtn\"\r\n      );\r\n\r\n    const dwSupport=\r\n      document.getElementById(\r\n        \"dwSupport\"\r\n      );\r\n\r\n    const dwIfiAvatar=\r\n      document.getElementById(\r\n        \"dwIfiAvatar\"\r\n      );\r\n\r\n    const dwIfiMessage=\r\n      document.getElementById(\r\n        \"dwIfiMessage\"\r\n      );\r\n\r\n    const dwExerciseContent=\r\n      document.getElementById(\r\n        \"dwExerciseContent\"\r\n      );\r\n\r\n    const dwTransition=\r\n      document.getElementById(\r\n        \"dwTransition\"\r\n      );\r\n\r\n    const dwTransitionTitle=\r\n      document.getElementById(\r\n        \"dwTransitionTitle\"\r\n      );\r\n\r\n    const dwTransitionText=\r\n      document.getElementById(\r\n        \"dwTransitionText\"\r\n      );\r\n\r\n    const dwStartNextLevel=\r\n      document.getElementById(\r\n        \"dwStartNextLevel\"\r\n      );\r\n\r\n    const dwFinish=\r\n      document.getElementById(\r\n        \"dwFinish\"\r\n      );\r\n\r\n    const dwResultText=\r\n      document.getElementById(\r\n        \"dwResultText\"\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       HELPERS\r\n    ========================================= *\/\r\n\r\n    function dwNormalize(value){\r\n\r\n      return String(value)\r\n        .trim()\r\n        .toLowerCase()\r\n        .replace(\/[.,!?]\/g,\"\")\r\n        .replace(\/\\s+\/g,\" \");\r\n\r\n    }\r\n\r\n\r\n    function dwShuffle(array){\r\n\r\n      return array\r\n        .map(\r\n          function(item){\r\n\r\n            return{\r\n              item:item,\r\n              sort:Math.random()\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    dwLevels.forEach(\r\n      function(level){\r\n\r\n        level.questions=\r\n          dwShuffle(\r\n            level.questions\r\n          );\r\n\r\n      }\r\n    );\r\n\r\n\r\n    function dwCompletedCount(){\r\n\r\n      let amount=0;\r\n\r\n\r\n      for(\r\n        let i=0;\r\n        i<dwLevelIndex;\r\n        i++\r\n      ){\r\n\r\n        amount+=\r\n          dwLevels[i]\r\n            .questions\r\n            .length;\r\n\r\n      }\r\n\r\n\r\n      return amount+\r\n        dwQuestionIndex;\r\n\r\n    }\r\n\r\n\r\n    function dwUpdateRoute(){\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            \"dwRoute\"+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          dwLevelIndex\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          dwLevelIndex\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 dwSetIfi(\r\n      role,\r\n      message\r\n    ){\r\n\r\n      dwIfiAvatar.style.opacity=\r\n        \"0\";\r\n\r\n\r\n      dwIfiAvatar.style.transform=\r\n        \"translateY(6px)\";\r\n\r\n\r\n      setTimeout(\r\n        function(){\r\n\r\n          dwIfiAvatar.src=\r\n            DW_IFI[role];\r\n\r\n\r\n          dwIfiMessage.textContent=\r\n            message;\r\n\r\n\r\n          dwIfiAvatar.style.opacity=\r\n            \"1\";\r\n\r\n\r\n          dwIfiAvatar.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 dwEmit(\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 dwRender(){\r\n\r\n      dwAnswered=false;\r\n\r\n\r\n      const level=\r\n        dwLevels[\r\n          dwLevelIndex\r\n        ];\r\n\r\n\r\n      const question=\r\n        level.questions[\r\n          dwQuestionIndex\r\n        ];\r\n\r\n\r\n      dwExerciseContent.style.display=\r\n        \"block\";\r\n\r\n\r\n      dwTransition.style.display=\r\n        \"none\";\r\n\r\n\r\n      dwFinish.style.display=\r\n        \"none\";\r\n\r\n\r\n      dwLevelPill.textContent=\r\n        level.title;\r\n\r\n\r\n      const overall=\r\n        dwCompletedCount()+1;\r\n\r\n\r\n      dwQuestionCounter.textContent=\r\n        \"Vraag \"+\r\n        overall+\r\n        \" van \"+\r\n        dwTotal;\r\n\r\n\r\n      dwProgressBar.style.width=\r\n        Math.round(\r\n          (\r\n            dwCompletedCount() \/\r\n            dwTotal\r\n          ) * 100\r\n        )+\"%\";\r\n\r\n\r\n      dwQuestionType.textContent=\r\n        question.label;\r\n\r\n\r\n      dwQuestionTitle.textContent=\r\n        question.question;\r\n\r\n\r\n      dwHelper.textContent=\r\n        question.helper || \"\";\r\n\r\n\r\n      dwStimulus.textContent=\r\n        question.stimulus || \"\";\r\n\r\n\r\n      dwFeedback.textContent=\r\n        \"\";\r\n\r\n\r\n      dwFeedback.className=\r\n        \"dw-feedback\";\r\n\r\n\r\n      dwNextWrap.style.display=\r\n        \"none\";\r\n\r\n\r\n      dwAnswerArea.innerHTML=\r\n        \"\";\r\n\r\n\r\n      \/* =====================================\r\n         SUPPORT ALLEEN LEVEL 1\r\n      ====================================== *\/\r\n\r\n      dwSupport.style.display=\r\n        dwLevelIndex===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        dwLevelIndex===0\r\n      ){\r\n\r\n        dwSetIfi(\r\n\r\n          \"uitleg\",\r\n\r\n          \"Lees eerst de hele zin. Vraag daarna: wat doet iemand? Dat woord zoeken we.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else if(\r\n        dwLevelIndex===1\r\n      ){\r\n\r\n        dwSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          \"Nu krijg je iets minder hulp. Kijk rustig welke persoon of welk dier iets doet en zoek daarna de actie.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        dwSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          \"Je bent bij Level 3. Probeer eerst zelf het doe-woord te vinden voordat je antwoord geeft.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n\r\n      \/* =====================================\r\n         CHOICE\r\n      ====================================== *\/\r\n\r\n      if(\r\n        question.type===\r\n        \"choice\"\r\n      ){\r\n\r\n        const wrap=\r\n          document.createElement(\r\n            \"div\"\r\n          );\r\n\r\n\r\n        wrap.className=\r\n          \"dw-antwoorden\";\r\n\r\n\r\n        dwShuffle(\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              \"dw-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                dwSubmit(\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        dwAnswerArea.appendChild(\r\n          wrap\r\n        );\r\n\r\n      }\r\n\r\n\r\n      \/* =====================================\r\n         TEXT\r\n      ====================================== *\/\r\n\r\n      if(\r\n        question.type===\r\n        \"text\"\r\n      ){\r\n\r\n        const wrap=\r\n          document.createElement(\r\n            \"div\"\r\n          );\r\n\r\n\r\n        wrap.className=\r\n          \"dw-input-wrap\";\r\n\r\n\r\n        wrap.innerHTML=`\r\n\r\n          <input\r\n            type=\"text\"\r\n            class=\"dw-input\"\r\n            id=\"dwTextInput\"\r\n            autocomplete=\"off\"\r\n            autocapitalize=\"off\"\r\n            spellcheck=\"false\"\r\n            placeholder=\"Typ het doe-woord...\"\r\n          >\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"dw-check-btn\"\r\n            id=\"dwCheckText\">\r\n\r\n            Nakijken \ud83c\udf3f\r\n\r\n          <\/button>\r\n\r\n        `;\r\n\r\n\r\n        dwAnswerArea.appendChild(\r\n          wrap\r\n        );\r\n\r\n\r\n        const input=\r\n          document.getElementById(\r\n            \"dwTextInput\"\r\n          );\r\n\r\n\r\n        document\r\n          .getElementById(\r\n            \"dwCheckText\"\r\n          )\r\n          .addEventListener(\r\n\r\n            \"click\",\r\n\r\n            function(){\r\n\r\n              dwSubmit(\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              dwSubmit(\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 dwSubmit(\r\n      value,\r\n      node\r\n    ){\r\n\r\n      if(\r\n        dwAnswered\r\n      ){\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      dwAnswered=true;\r\n\r\n\r\n      const question=\r\n        dwLevels[\r\n          dwLevelIndex\r\n        ]\r\n        .questions[\r\n          dwQuestionIndex\r\n        ];\r\n\r\n\r\n      const correct=\r\n        dwNormalize(value) ===\r\n        dwNormalize(\r\n          question.correct\r\n        );\r\n\r\n\r\n      if(\r\n        correct\r\n      ){\r\n\r\n        dwCorrect++;\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 gezocht.\"\r\n\r\n        ];\r\n\r\n\r\n        dwFeedback.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        dwFeedback.className=\r\n          \"dw-feedback good\";\r\n\r\n\r\n        const ifiSuccess=[\r\n\r\n          \"Mooi gezien. Dat woord vertelt inderdaad wat er gebeurt.\",\r\n\r\n          \"Ja, precies. Je vond de actie in de zin.\",\r\n\r\n          \"Dat klopt. Goed rustig gekeken.\",\r\n\r\n          \"Goed gevonden. Ga maar rustig verder.\"\r\n\r\n        ];\r\n\r\n\r\n        dwSetIfi(\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        dwFeedback.textContent=\r\n          \"Kijk nog eens rustig. Het doe-woord is: \"+\r\n          question.correct+\r\n          \".\";\r\n\r\n\r\n        dwFeedback.className=\r\n          \"dw-feedback retry\";\r\n\r\n\r\n        if(\r\n          dwLevelIndex===0\r\n        ){\r\n\r\n          dwSetIfi(\r\n\r\n            \"denken\",\r\n\r\n            \"Dat geeft niet. Lees de zin opnieuw en vraag: wat doet die persoon of dat dier?\"\r\n\r\n          );\r\n\r\n        }\r\n\r\n        else if(\r\n          dwLevelIndex===1\r\n        ){\r\n\r\n          dwSetIfi(\r\n\r\n            \"denken\",\r\n\r\n            \"Kijk niet alleen naar wie iets doet. Zoek juist het woord dat vertelt w\u00e1t diegene doet.\"\r\n\r\n          );\r\n\r\n        }\r\n\r\n        else{\r\n\r\n          dwSetIfi(\r\n\r\n            \"denken\",\r\n\r\n            \"Lees de zin langzaam. Wie doet iets? En welk woord vertelt precies wat diegene doet?\"\r\n\r\n          );\r\n\r\n        }\r\n\r\n      }\r\n\r\n\r\n      dwAnswerArea\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      dwNextWrap.style.display=\r\n        \"block\";\r\n\r\n\r\n      dwEmit(\r\n\r\n        \"withifi:doewoord-answer\",\r\n\r\n        {\r\n\r\n          level:\r\n            dwLevelIndex+1,\r\n\r\n          questionType:\r\n            question.type,\r\n\r\n          question:\r\n            question.question,\r\n\r\n          sentence:\r\n            question.stimulus,\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 dwNext(){\r\n\r\n      const level=\r\n        dwLevels[\r\n          dwLevelIndex\r\n        ];\r\n\r\n\r\n      dwQuestionIndex++;\r\n\r\n\r\n      if(\r\n        dwQuestionIndex <\r\n        level.questions.length\r\n      ){\r\n\r\n        dwRender();\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      if(\r\n        dwLevelIndex <\r\n        dwLevels.length-1\r\n      ){\r\n\r\n        dwShowTransition();\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      dwComplete();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       LEVEL OVERGANG\r\n    ========================================= *\/\r\n\r\n    function dwShowTransition(){\r\n\r\n      dwExerciseContent.style.display=\r\n        \"none\";\r\n\r\n\r\n      dwTransition.style.display=\r\n        \"block\";\r\n\r\n\r\n      if(\r\n        dwLevelIndex===0\r\n      ){\r\n\r\n        dwTransitionTitle.textContent=\r\n          \"\ud83c\udf3f Klaar voor Level 2\";\r\n\r\n\r\n        dwTransitionText.textContent=\r\n          \"Je kunt het doe-woord al herkennen in eenvoudige zinnen. Nu worden de zinnen iets langer en krijg je minder hulp.\";\r\n\r\n\r\n        dwSetIfi(\r\n\r\n          \"uitleg\",\r\n\r\n          \"Nu gaan we een klein stapje verder. De zinnen worden iets langer, maar je gebruikt nog steeds dezelfde vraag: wat doet iemand?\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        dwTransitionTitle.textContent=\r\n          \"\ud83c\udf33 Klaar voor Level 3\";\r\n\r\n\r\n        dwTransitionText.textContent=\r\n          \"Je kunt doe-woorden al zoeken tussen verschillende woorden. Nu ga je ze steeds meer zelfstandig vinden en gebruiken.\";\r\n\r\n\r\n        dwSetIfi(\r\n\r\n          \"goed\",\r\n\r\n          \"Ik zie dat je er klaar voor bent. Nu mag jij zelf zoeken en soms zelf het doe-woord typen.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    function dwNextLevel(){\r\n\r\n      dwLevelIndex++;\r\n\r\n      dwQuestionIndex=0;\r\n\r\n\r\n      dwUpdateRoute();\r\n\r\n      dwRender();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       KLAAR\r\n    ========================================= *\/\r\n\r\n    function dwComplete(){\r\n\r\n      dwExerciseContent.style.display=\r\n        \"none\";\r\n\r\n\r\n      dwTransition.style.display=\r\n        \"none\";\r\n\r\n\r\n      dwFinish.style.display=\r\n        \"block\";\r\n\r\n\r\n      dwProgressBar.style.width=\r\n        \"100%\";\r\n\r\n\r\n      const percentage=\r\n        Math.round(\r\n          (\r\n            dwCorrect \/\r\n            dwTotal\r\n          ) * 100\r\n        );\r\n\r\n\r\n      dwResultText.innerHTML=\r\n\r\n        \"Je hebt alle drie de levels doorlopen.<br>\" +\r\n\r\n        \"Je had <strong>\" +\r\n        dwCorrect +\r\n        \" van de \" +\r\n        dwTotal +\r\n        \"<\/strong> opdrachten goed (\" +\r\n        percentage +\r\n        \"%).<br><br>\" +\r\n\r\n        \"Je hebt geoefend met doe-woorden herkennen, zoeken en zelfstandig gebruiken.\";\r\n\r\n\r\n      dwSetIfi(\r\n\r\n        \"goed\",\r\n\r\n        \"Goed gedaan. Je kunt nu steeds beter ontdekken welk woord vertelt wat iemand doet of wat er gebeurt.\"\r\n\r\n      );\r\n\r\n\r\n      dwEmit(\r\n\r\n        \"withifi:doewoord-complete\",\r\n\r\n        {\r\n\r\n          topic:\r\n            \"Doe-woorden\",\r\n\r\n          levelsCompleted:\r\n            3,\r\n\r\n          correct:\r\n            dwCorrect,\r\n\r\n          total:\r\n            dwTotal,\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 dwRestart(){\r\n\r\n      dwLevelIndex=0;\r\n\r\n      dwQuestionIndex=0;\r\n\r\n      dwCorrect=0;\r\n\r\n      dwAnswered=false;\r\n\r\n\r\n      dwLevels.forEach(\r\n        function(level){\r\n\r\n          level.questions=\r\n            dwShuffle(\r\n              level.questions\r\n            );\r\n\r\n        }\r\n      );\r\n\r\n\r\n      dwUpdateRoute();\r\n\r\n\r\n      dwSetIfi(\r\n\r\n        \"uitleg\",\r\n\r\n        \"We beginnen gewoon opnieuw. Lees rustig de zin en vraag: wat doet iemand?\"\r\n\r\n      );\r\n\r\n\r\n      dwRender();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       EVENTS\r\n    ========================================= *\/\r\n\r\n    dwNextBtn.addEventListener(\r\n      \"click\",\r\n      dwNext\r\n    );\r\n\r\n\r\n    dwStartNextLevel.addEventListener(\r\n      \"click\",\r\n      dwNextLevel\r\n    );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"dwRestartBtn\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        dwRestart\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       START\r\n    ========================================= *\/\r\n\r\n    dwUpdateRoute();\r\n\r\n    dwRender();\r\n\r\n  }\r\n);\r\n<\/script>\r\n\r\n<!-- With Ifi centrale Sprint 2-runtime: Custom Code 4038 -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfc3 Taal bouwen Doe-woorden oefenen. Een doe-woord vertelt wat iemand doet of wat er gebeurt. Eerst zoeken we het woord samen. Daarna krijg je steeds minder hulp en ga je het zelf doen. \ud83c\udf31 Level 1 \u00b7 Herkennen Zoek welk woord vertelt wat iemand doet. \ud83c\udf3f Level 2 \u00b7 Zoeken Vind het doe-woord tussen verschillende [&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-826","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/826","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=826"}],"version-history":[{"count":58,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/826\/revisions"}],"predecessor-version":[{"id":4401,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/826\/revisions\/4401"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}