{"id":941,"date":"2026-02-12T06:00:26","date_gmt":"2026-02-12T06:00:26","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?page_id=941"},"modified":"2026-08-29T14:51:19","modified_gmt":"2026-08-29T14:51:19","slug":"oefenen-met-hij-zij-jij-wij","status":"publish","type":"page","link":"https:\/\/withifi.muhubonurture.nl\/?page_id=941","title":{"rendered":"Oefenen Met Hij\/Zij\/Jij\/Wij"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"941\" class=\"elementor elementor-941\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e8e1ee1 e-con-full e-flex e-con e-parent\" data-id=\"e8e1ee1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-06d91bc elementor-widget elementor-widget-html\" data-id=\"06d91bc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================\r\n     WITH IFI \u2014 WIE-WOORDEN OEFENEN\r\n     3 LEVELS + IFI ALS BEGELEIDER\r\n========================================= -->\r\n\r\n<style>\r\n\r\nbody{\r\n  margin:0;\r\n  font-family:'Inter',sans-serif;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   PAGINA\r\n========================================= *\/\r\n\r\n.wiw-page{\r\n  min-height:100vh;\r\n  padding:6rem 6vw 5rem;\r\n\r\n  color:#3A2B24;\r\n\r\n  background:\r\n    radial-gradient(\r\n      circle at 16% 18%,\r\n      rgba(255,255,255,.88) 0%,\r\n      transparent 31%\r\n    ),\r\n    radial-gradient(\r\n      circle at 86% 22%,\r\n      rgba(255,231,239,.42) 0%,\r\n      transparent 31%\r\n    ),\r\n    radial-gradient(\r\n      circle at 50% 86%,\r\n      rgba(230,244,237,.55) 0%,\r\n      transparent 38%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      #F9FBF8 0%,\r\n      #EEF7F3 48%,\r\n      #FFF8EF 100%\r\n    );\r\n}\r\n\r\n.wiw-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.wiw-hero{\r\n  max-width:940px;\r\n\r\n  margin:0 auto 3.5rem;\r\n\r\n  padding:3.1rem;\r\n\r\n  border-radius:42px;\r\n\r\n  background:rgba(255,255,255,.64);\r\n\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.wiw-label{\r\n  display:inline-flex;\r\n\r\n  align-items:center;\r\n\r\n  gap:.45rem;\r\n\r\n  margin-bottom:1.2rem;\r\n\r\n  padding:10px 18px;\r\n\r\n  border-radius:999px;\r\n\r\n  background:rgba(255,255,255,.78);\r\n\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\r\n  font-weight:900;\r\n}\r\n\r\n.wiw-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\r\n  line-height:1.05;\r\n\r\n  font-weight:950;\r\n}\r\n\r\n.wiw-intro{\r\n  max-width:760px;\r\n\r\n  margin:0 auto;\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:19px;\r\n\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.wiw-level-route{\r\n  max-width:1000px;\r\n\r\n  margin:0 auto 3rem;\r\n\r\n  display:grid;\r\n\r\n  grid-template-columns:repeat(3,1fr);\r\n\r\n  gap:1.2rem;\r\n}\r\n\r\n.wiw-route-level{\r\n  position:relative;\r\n\r\n  overflow:hidden;\r\n\r\n  padding:1.6rem;\r\n\r\n  border-radius:30px;\r\n\r\n  border:1px solid rgba(255,255,255,.95);\r\n\r\n  box-shadow:0 10px 28px rgba(90,70,55,.06);\r\n\r\n  transition:.25s ease;\r\n}\r\n\r\n.wiw-route-level:nth-child(1){\r\n  background:linear-gradient(\r\n    135deg,\r\n    #FFF4E3,\r\n    #FFF9EF\r\n  );\r\n}\r\n\r\n.wiw-route-level:nth-child(2){\r\n  background:linear-gradient(\r\n    135deg,\r\n    #EAF7F1,\r\n    #F7FFFB\r\n  );\r\n}\r\n\r\n.wiw-route-level:nth-child(3){\r\n  background:linear-gradient(\r\n    135deg,\r\n    #FFEAF1,\r\n    #FFF7FA\r\n  );\r\n}\r\n\r\n.wiw-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.wiw-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.wiw-route-level.done{\r\n  opacity:.72;\r\n}\r\n\r\n.wiw-route-icon{\r\n  position:relative;\r\n\r\n  z-index:2;\r\n\r\n  width:52px;\r\n  height:52px;\r\n\r\n  display:flex;\r\n\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.wiw-route-level h3{\r\n  position:relative;\r\n\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\r\n  font-weight:950;\r\n}\r\n\r\n.wiw-route-level p{\r\n  position:relative;\r\n\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\r\n  line-height:1.6;\r\n\r\n  font-weight:650;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   SUPPORT LEVEL 1\r\n========================================= *\/\r\n\r\n.wiw-support{\r\n  max-width:920px;\r\n\r\n  margin:0 auto 2.3rem;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.wiw-support-title{\r\n  margin-bottom:1rem;\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:.95rem;\r\n\r\n  font-weight:850;\r\n}\r\n\r\n.wiw-support-row{\r\n  display:flex;\r\n\r\n  flex-wrap:wrap;\r\n\r\n  justify-content:center;\r\n\r\n  gap:.7rem;\r\n}\r\n\r\n.wiw-support-pill{\r\n  min-width:80px;\r\n\r\n  padding:.9rem 1rem;\r\n\r\n  border-radius:20px;\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,.06);\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:1rem;\r\n\r\n  font-weight:900;\r\n}\r\n\r\n.wiw-support-pill span{\r\n  display:block;\r\n\r\n  margin-bottom:.25rem;\r\n\r\n  font-size:1.3rem;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   OEFENKAART\r\n========================================= *\/\r\n\r\n.wiw-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.wiw-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.wiw-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.wiw-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.wiw-level-pill,\r\n.wiw-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\r\n  font-weight:900;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   PROGRESS\r\n========================================= *\/\r\n\r\n.wiw-progress-wrap{\r\n  width:100%;\r\n\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.wiw-progress-bar{\r\n  width:0%;\r\n\r\n  height:100%;\r\n\r\n  border-radius:999px;\r\n\r\n  background: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.wiw-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\r\n  font-weight:900;\r\n}\r\n\r\n.wiw-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.wiw-helper{\r\n  max-width:650px;\r\n\r\n  margin:0 auto 1.6rem;\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:1rem;\r\n\r\n  line-height:1.7;\r\n\r\n  font-weight:700;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   ZIN \/ CONTEXT\r\n========================================= *\/\r\n\r\n.wiw-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: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.65rem,4vw,2.7rem);\r\n\r\n  line-height:1.45;\r\n\r\n  font-weight:950;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   ANTWOORDEN\r\n========================================= *\/\r\n\r\n.wiw-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.wiw-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.wiw-answer:hover{\r\n  transform:translateY(-2px);\r\n\r\n  background:#FFF0DE;\r\n}\r\n\r\n.wiw-answer.correct{\r\n  background:#DDF5E4 !important;\r\n\r\n  color:#315D43 !important;\r\n}\r\n\r\n.wiw-answer.try-again{\r\n  background:#FFF0E8 !important;\r\n\r\n  color:#8A5D4C !important;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   INPUT\r\n========================================= *\/\r\n\r\n.wiw-input-wrap{\r\n  max-width:440px;\r\n\r\n  margin:0 auto;\r\n}\r\n\r\n.wiw-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.wiw-input:focus{\r\n  border-color:#C9DED5;\r\n\r\n  box-shadow:0 0 0 5px rgba(207,234,214,.35);\r\n}\r\n\r\n.wiw-input.correct{\r\n  background:#F0FAF3;\r\n\r\n  border-color:#C4E4CF;\r\n}\r\n\r\n.wiw-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.wiw-check-btn,\r\n.wiw-next-btn,\r\n.wiw-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.wiw-check-btn:hover,\r\n.wiw-next-btn:hover,\r\n.wiw-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.wiw-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.wiw-feedback.good{\r\n  color:#47735A;\r\n}\r\n\r\n.wiw-feedback.retry{\r\n  color:#8A6555;\r\n}\r\n\r\n.wiw-next-wrap{\r\n  display:none;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   IFI RECHTS\r\n========================================= *\/\r\n\r\n.wiw-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.wiw-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: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.wiw-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.wiw-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.wiw-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 OVERGANG\r\n========================================= *\/\r\n\r\n.wiw-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: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.wiw-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.wiw-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.wiw-finish{\r\n  display:none;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.wiw-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:drop-shadow(\r\n    0 12px 22px rgba(90,70,55,.10)\r\n  );\r\n}\r\n\r\n.wiw-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.wiw-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.wiw-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  .wiw-oefen-layout{\r\n    grid-template-columns:minmax(0,1fr) 175px;\r\n\r\n    gap:1.2rem;\r\n  }\r\n\r\n  .wiw-ifi-side-avatar{\r\n    width:155px;\r\n  }\r\n\r\n  .wiw-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  .wiw-page{\r\n    padding:4rem 5vw;\r\n  }\r\n\r\n  .wiw-hero{\r\n    padding:2.3rem 1.7rem;\r\n  }\r\n\r\n  .wiw-level-route{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .wiw-oefen-box{\r\n    padding:1.5rem 1.15rem;\r\n  }\r\n\r\n  .wiw-oefen-layout{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .wiw-oefen-top{\r\n    justify-content:center;\r\n\r\n    flex-wrap:wrap;\r\n  }\r\n\r\n  .wiw-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  .wiw-ifi-side-avatar{\r\n    width:95px;\r\n\r\n    flex-shrink:0;\r\n  }\r\n\r\n  .wiw-ifi-side-bubble{\r\n    text-align:left;\r\n  }\r\n\r\n  .wiw-answer{\r\n    width:100%;\r\n  }\r\n\r\n}\r\n\r\n\r\n\/* =========================================\r\n   EXTRA KLEIN\r\n========================================= *\/\r\n\r\n@media(max-width:480px){\r\n\r\n  .wiw-ifi-side{\r\n    flex-direction:column;\r\n\r\n    text-align:center;\r\n  }\r\n\r\n  .wiw-ifi-side-bubble{\r\n    text-align:center;\r\n  }\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=\"wiw-wrap\">\r\n\r\n\r\n    <!-- =====================================\r\n         HERO\r\n    ====================================== -->\r\n\r\n    <div class=\"wiw-hero\">\r\n\r\n      <div class=\"wiw-label\">\r\n        \ud83d\udc64 Taal bouwen\r\n      <\/div>\r\n\r\n      <h1 class=\"wiw-title\">\r\n        Wie-woorden oefenen.\r\n      <\/h1>\r\n\r\n      <p class=\"wiw-intro\">\r\n        Wie-woorden vertellen\r\n        <strong>over wie de zin gaat<\/strong>.\r\n        Denk aan\r\n        <strong>ik, jij, hij, zij en wij<\/strong>.\r\n        Eerst herkennen we wie bedoeld wordt.\r\n        Daarna ga je steeds meer zelf kiezen.\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=\"wiw-level-route\">\r\n\r\n\r\n      <div\r\n        class=\"wiw-route-level active\"\r\n        id=\"wiwRoute1\">\r\n\r\n        <div class=\"wiw-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          Ontdek welk wie-woord bij een persoon past.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"wiw-route-level\"\r\n        id=\"wiwRoute2\">\r\n\r\n        <div class=\"wiw-route-icon\">\r\n          \ud83c\udf3f\r\n        <\/div>\r\n\r\n        <h3>\r\n          Level 2 \u00b7 Kiezen\r\n        <\/h3>\r\n\r\n        <p>\r\n          Gebruik de zin en het werkwoord om te kiezen.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"wiw-route-level\"\r\n        id=\"wiwRoute3\">\r\n\r\n        <div class=\"wiw-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 zelfstandig het wie-woord.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================\r\n         SUPPORT\r\n    ====================================== -->\r\n\r\n    <div\r\n      class=\"wiw-support\"\r\n      id=\"wiwSupport\">\r\n\r\n      <div class=\"wiw-support-title\">\r\n        Deze wie-woorden helpen je vandaag\r\n      <\/div>\r\n\r\n      <div class=\"wiw-support-row\">\r\n\r\n        <div class=\"wiw-support-pill\">\r\n          <span>\ud83d\ude4b<\/span>\r\n          ik\r\n        <\/div>\r\n\r\n        <div class=\"wiw-support-pill\">\r\n          <span>\ud83d\udc49<\/span>\r\n          jij\r\n        <\/div>\r\n\r\n        <div class=\"wiw-support-pill\">\r\n          <span>\ud83d\udc66<\/span>\r\n          hij\r\n        <\/div>\r\n\r\n        <div class=\"wiw-support-pill\">\r\n          <span>\ud83d\udc67<\/span>\r\n          zij\r\n        <\/div>\r\n\r\n        <div class=\"wiw-support-pill\">\r\n          <span>\ud83d\udc6b<\/span>\r\n          wij\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =====================================\r\n         OEFENING\r\n    ====================================== -->\r\n\r\n    <div class=\"wiw-oefen-box\">\r\n\r\n      <div class=\"wiw-oefen-layout\">\r\n\r\n\r\n        <!-- LINKERKANT -->\r\n\r\n        <div class=\"wiw-oefen-main\">\r\n\r\n\r\n          <div id=\"wiwExerciseContent\">\r\n\r\n\r\n            <div class=\"wiw-oefen-top\">\r\n\r\n              <div\r\n                class=\"wiw-level-pill\"\r\n                id=\"wiwLevelPill\">\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=\"wiw-vraag-pill\"\r\n                id=\"wiwQuestionCounter\">\r\n\r\n                Vraag 1\r\n\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div class=\"wiw-progress-wrap\">\r\n\r\n              <div\r\n                class=\"wiw-progress-bar\"\r\n                id=\"wiwProgressBar\">\r\n              <\/div>\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"wiw-vraag-type\"\r\n              id=\"wiwQuestionType\">\r\n\r\n              Herkennen\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"wiw-vraag-title\"\r\n              id=\"wiwQuestionTitle\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"wiw-helper\"\r\n              id=\"wiwHelper\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"wiw-stimulus\"\r\n              id=\"wiwStimulus\">\r\n            <\/div>\r\n\r\n\r\n            <div id=\"wiwAnswerArea\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"wiw-feedback\"\r\n              id=\"wiwFeedback\">\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"wiw-next-wrap\"\r\n              id=\"wiwNextWrap\">\r\n\r\n              <button\r\n                type=\"button\"\r\n                class=\"wiw-next-btn\"\r\n                id=\"wiwNextBtn\">\r\n\r\n                Rustig verder \ud83c\udf3f\r\n\r\n              <\/button>\r\n\r\n            <\/div>\r\n\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- LEVEL OVERGANG -->\r\n\r\n          <div\r\n            class=\"wiw-level-transition\"\r\n            id=\"wiwTransition\">\r\n\r\n            <h3 id=\"wiwTransitionTitle\">\r\n            <\/h3>\r\n\r\n            <p id=\"wiwTransitionText\">\r\n            <\/p>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"wiw-next-btn\"\r\n              id=\"wiwStartNextLevel\">\r\n\r\n              Verder \ud83c\udf3f\r\n\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n\r\n          <!-- EINDE -->\r\n\r\n          <div\r\n            class=\"wiw-finish\"\r\n            id=\"wiwFinish\">\r\n\r\n            <img decoding=\"async\"\r\n              class=\"wiw-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=\"wiwResultText\">\r\n            <\/p>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"wiw-restart-btn\"\r\n              id=\"wiwRestartBtn\">\r\n\r\n              Nog een keer oefenen \ud83c\udf3f\r\n\r\n            <\/button>\r\n\r\n          <\/div>\r\n\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- =================================\r\n             IFI RECHTS\r\n        ================================== -->\r\n\r\n        <aside class=\"wiw-ifi-side\">\r\n\r\n          <img decoding=\"async\"\r\n            id=\"wiwIfiAvatar\"\r\n            class=\"wiw-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=\"wiw-ifi-side-bubble\">\r\n\r\n            <div class=\"wiw-ifi-name\">\r\n              IFI helpt je \ud83c\udf3f\r\n            <\/div>\r\n\r\n            <p\r\n              class=\"wiw-ifi-message\"\r\n              id=\"wiwIfiMessage\">\r\n\r\n              Kijk eerst over wie de zin gaat.\r\n              Daarna zoeken we het wie-woord dat daarbij past.\r\n\r\n            <\/p>\r\n\r\n          <\/div>\r\n\r\n        <\/aside>\r\n\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=\"wiw-note\">\r\n\r\n      Kleine reminder \ud83c\udf38<br>\r\n\r\n      Vraag jezelf eerst:\r\n      <strong>over wie gaat de zin?<\/strong>\r\n      Daarna kun je kiezen welk wie-woord daarbij past.\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n\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 WIW_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 wiwLevels=[\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:\"Wie bedoelen we?\",\r\n\r\n            question:\r\n              \"Welk wie-woord kan Sara vervangen?\",\r\n\r\n            helper:\r\n              \"Sara is \u00e9\u00e9n meisje.\",\r\n\r\n            stimulus:\r\n              \"Sara leest een boek.\",\r\n\r\n            answers:[\r\n              \"hij\",\r\n              \"zij\",\r\n              \"wij\"\r\n            ],\r\n\r\n            correct:\"zij\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\"Wie bedoelen we?\",\r\n\r\n            question:\r\n              \"Welk wie-woord kan Adam vervangen?\",\r\n\r\n            helper:\r\n              \"Adam is \u00e9\u00e9n jongen.\",\r\n\r\n            stimulus:\r\n              \"Adam rent naar buiten.\",\r\n\r\n            answers:[\r\n              \"hij\",\r\n              \"zij\",\r\n              \"ik\"\r\n            ],\r\n\r\n            correct:\"hij\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\"Wie bedoelen we?\",\r\n\r\n            question:\r\n              \"Welk wie-woord past bij jezelf?\",\r\n\r\n            helper:\r\n              \"Je vertelt iets over jezelf.\",\r\n\r\n            stimulus:\r\n              \"___ lees een boek.\",\r\n\r\n            answers:[\r\n              \"ik\",\r\n              \"hij\",\r\n              \"wij\"\r\n            ],\r\n\r\n            correct:\"ik\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\"Wie bedoelen we?\",\r\n\r\n            question:\r\n              \"Welk wie-woord gebruik je voor jezelf en Noor samen?\",\r\n\r\n            helper:\r\n              \"Jullie zijn samen met twee of meer.\",\r\n\r\n            stimulus:\r\n              \"Noor en ik zingen samen.\",\r\n\r\n            answers:[\r\n              \"wij\",\r\n              \"hij\",\r\n              \"jij\"\r\n            ],\r\n\r\n            correct:\"wij\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\"Wie bedoelen we?\",\r\n\r\n            question:\r\n              \"Welk wie-woord gebruik je als je rechtstreeks tegen iemand praat?\",\r\n\r\n            helper:\r\n              \"Je praat tegen \u00e9\u00e9n andere persoon.\",\r\n\r\n            stimulus:\r\n              \"___ bent aan de beurt.\",\r\n\r\n            answers:[\r\n              \"jij\",\r\n              \"ik\",\r\n              \"hij\"\r\n            ],\r\n\r\n            correct:\"jij\"\r\n\r\n          }\r\n\r\n\r\n        ]\r\n\r\n      },\r\n\r\n\r\n      \/* =======================================\r\n         LEVEL 2 \u2014 KIEZEN\r\n      ======================================= *\/\r\n\r\n      {\r\n\r\n        level:2,\r\n\r\n        title:\r\n          \"\ud83c\udf3f Level 2 \u00b7 Kiezen\",\r\n\r\n        questions:[\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\"Kijk naar de zin\",\r\n\r\n            question:\r\n              \"Welk wie-woord past?\",\r\n\r\n            helper:\r\n              \"Mijn broer is \u00e9\u00e9n jongen.\",\r\n\r\n            stimulus:\r\n              \"Mijn broer fietst naar school. ___ draagt een helm.\",\r\n\r\n            answers:[\r\n              \"hij\",\r\n              \"zij\",\r\n              \"wij\"\r\n            ],\r\n\r\n            correct:\"hij\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\"Kijk naar de zin\",\r\n\r\n            question:\r\n              \"Welk wie-woord past?\",\r\n\r\n            helper:\r\n              \"Mijn zus is \u00e9\u00e9n meisje.\",\r\n\r\n            stimulus:\r\n              \"Mijn zus tekent een bloem. ___ gebruikt veel kleuren.\",\r\n\r\n            answers:[\r\n              \"zij\",\r\n              \"hij\",\r\n              \"ik\"\r\n            ],\r\n\r\n            correct:\"zij\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\"Kijk naar het werkwoord\",\r\n\r\n            question:\r\n              \"Welk wie-woord past voor de lege plek?\",\r\n\r\n            helper:\r\n              \"Let ook op het woord 'ben'.\",\r\n\r\n            stimulus:\r\n              \"___ ben vandaag vroeg wakker.\",\r\n\r\n            answers:[\r\n              \"ik\",\r\n              \"hij\",\r\n              \"wij\"\r\n            ],\r\n\r\n            correct:\"ik\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\"Kijk naar het werkwoord\",\r\n\r\n            question:\r\n              \"Welk wie-woord past?\",\r\n\r\n            helper:\r\n              \"Wie hoort bij 'bent'?\",\r\n\r\n            stimulus:\r\n              \"___ bent vandaag de helper.\",\r\n\r\n            answers:[\r\n              \"jij\",\r\n              \"wij\",\r\n              \"hij\"\r\n            ],\r\n\r\n            correct:\"jij\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"choice\",\r\n\r\n            label:\"Kijk naar de betekenis\",\r\n\r\n            question:\r\n              \"Welk wie-woord past bij deze groep?\",\r\n\r\n            helper:\r\n              \"Ik hoor zelf bij deze groep.\",\r\n\r\n            stimulus:\r\n              \"Mijn vrienden en ik spelen buiten. ___ hebben een bal.\",\r\n\r\n            answers:[\r\n              \"wij\",\r\n              \"hij\",\r\n              \"jij\"\r\n            ],\r\n\r\n            correct:\"wij\"\r\n\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:\"Typ het wie-woord\",\r\n\r\n            question:\r\n              \"Vervang Lina door een wie-woord.\",\r\n\r\n            helper:\r\n              \"Typ alleen het wie-woord.\",\r\n\r\n            stimulus:\r\n              \"Lina maakt een puzzel.\",\r\n\r\n            correct:\"zij\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"text\",\r\n\r\n            label:\"Typ het wie-woord\",\r\n\r\n            question:\r\n              \"Vervang Amir door een wie-woord.\",\r\n\r\n            helper:\r\n              \"Typ alleen het wie-woord.\",\r\n\r\n            stimulus:\r\n              \"Amir speelt voetbal.\",\r\n\r\n            correct:\"hij\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"text\",\r\n\r\n            label:\"Zelf kiezen\",\r\n\r\n            question:\r\n              \"Welk wie-woord hoort op de lege plek?\",\r\n\r\n            helper:\r\n              \"De spreker vertelt iets over zichzelf.\",\r\n\r\n            stimulus:\r\n              \"___ schrijf mijn naam.\",\r\n\r\n            correct:\"ik\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"text\",\r\n\r\n            label:\"Zelf kiezen\",\r\n\r\n            question:\r\n              \"Welk wie-woord hoort op de lege plek?\",\r\n\r\n            helper:\r\n              \"De zin is tegen jou gericht.\",\r\n\r\n            stimulus:\r\n              \"___ mag nu kiezen.\",\r\n\r\n            correct:\"jij\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"text\",\r\n\r\n            label:\"Zelf toepassen\",\r\n\r\n            question:\r\n              \"Vervang 'mijn moeder en ik' door \u00e9\u00e9n wie-woord.\",\r\n\r\n            helper:\r\n              \"Jij hoort zelf bij de groep.\",\r\n\r\n            stimulus:\r\n              \"Mijn moeder en ik koken samen.\",\r\n\r\n            correct:\"wij\"\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       STATE\r\n    ========================================= *\/\r\n\r\n    let wiwLevelIndex=0;\r\n\r\n    let wiwQuestionIndex=0;\r\n\r\n    let wiwCorrect=0;\r\n\r\n    let wiwAnswered=false;\r\n\r\n\r\n    const wiwTotal=\r\n      wiwLevels.reduce(\r\n\r\n        function(total,level){\r\n\r\n          return total+\r\n            level.questions.length;\r\n\r\n        },\r\n\r\n        0\r\n\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       DOM\r\n    ========================================= *\/\r\n\r\n    const wiwLevelPill=\r\n      document.getElementById(\r\n        \"wiwLevelPill\"\r\n      );\r\n\r\n    const wiwQuestionCounter=\r\n      document.getElementById(\r\n        \"wiwQuestionCounter\"\r\n      );\r\n\r\n    const wiwProgressBar=\r\n      document.getElementById(\r\n        \"wiwProgressBar\"\r\n      );\r\n\r\n    const wiwQuestionType=\r\n      document.getElementById(\r\n        \"wiwQuestionType\"\r\n      );\r\n\r\n    const wiwQuestionTitle=\r\n      document.getElementById(\r\n        \"wiwQuestionTitle\"\r\n      );\r\n\r\n    const wiwHelper=\r\n      document.getElementById(\r\n        \"wiwHelper\"\r\n      );\r\n\r\n    const wiwStimulus=\r\n      document.getElementById(\r\n        \"wiwStimulus\"\r\n      );\r\n\r\n    const wiwAnswerArea=\r\n      document.getElementById(\r\n        \"wiwAnswerArea\"\r\n      );\r\n\r\n    const wiwFeedback=\r\n      document.getElementById(\r\n        \"wiwFeedback\"\r\n      );\r\n\r\n    const wiwNextWrap=\r\n      document.getElementById(\r\n        \"wiwNextWrap\"\r\n      );\r\n\r\n    const wiwNextBtn=\r\n      document.getElementById(\r\n        \"wiwNextBtn\"\r\n      );\r\n\r\n    const wiwSupport=\r\n      document.getElementById(\r\n        \"wiwSupport\"\r\n      );\r\n\r\n    const wiwIfiAvatar=\r\n      document.getElementById(\r\n        \"wiwIfiAvatar\"\r\n      );\r\n\r\n    const wiwIfiMessage=\r\n      document.getElementById(\r\n        \"wiwIfiMessage\"\r\n      );\r\n\r\n    const wiwExerciseContent=\r\n      document.getElementById(\r\n        \"wiwExerciseContent\"\r\n      );\r\n\r\n    const wiwTransition=\r\n      document.getElementById(\r\n        \"wiwTransition\"\r\n      );\r\n\r\n    const wiwTransitionTitle=\r\n      document.getElementById(\r\n        \"wiwTransitionTitle\"\r\n      );\r\n\r\n    const wiwTransitionText=\r\n      document.getElementById(\r\n        \"wiwTransitionText\"\r\n      );\r\n\r\n    const wiwStartNextLevel=\r\n      document.getElementById(\r\n        \"wiwStartNextLevel\"\r\n      );\r\n\r\n    const wiwFinish=\r\n      document.getElementById(\r\n        \"wiwFinish\"\r\n      );\r\n\r\n    const wiwResultText=\r\n      document.getElementById(\r\n        \"wiwResultText\"\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       HELPERS\r\n    ========================================= *\/\r\n\r\n    function wiwNormalize(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 wiwShuffle(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    wiwLevels.forEach(\r\n\r\n      function(level){\r\n\r\n        level.questions=\r\n          wiwShuffle(\r\n            level.questions\r\n          );\r\n\r\n      }\r\n\r\n    );\r\n\r\n\r\n    function wiwCompletedCount(){\r\n\r\n      let amount=0;\r\n\r\n\r\n      for(\r\n        let i=0;\r\n        i<wiwLevelIndex;\r\n        i++\r\n      ){\r\n\r\n        amount+=\r\n          wiwLevels[i]\r\n            .questions\r\n            .length;\r\n\r\n      }\r\n\r\n\r\n      return amount+\r\n        wiwQuestionIndex;\r\n\r\n    }\r\n\r\n\r\n    function wiwUpdateRoute(){\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            \"wiwRoute\"+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          wiwLevelIndex\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          wiwLevelIndex\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 wiwSetIfi(\r\n      role,\r\n      message\r\n    ){\r\n\r\n      wiwIfiAvatar.style.opacity=\r\n        \"0\";\r\n\r\n\r\n      wiwIfiAvatar.style.transform=\r\n        \"translateY(6px)\";\r\n\r\n\r\n      setTimeout(\r\n\r\n        function(){\r\n\r\n          wiwIfiAvatar.src=\r\n            WIW_IFI[role];\r\n\r\n\r\n          wiwIfiMessage.textContent=\r\n            message;\r\n\r\n\r\n          wiwIfiAvatar.style.opacity=\r\n            \"1\";\r\n\r\n\r\n          wiwIfiAvatar.style.transform=\r\n            \"translateY(0)\";\r\n\r\n        },\r\n\r\n        150\r\n\r\n      );\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       ADAPTIVE EVENT\r\n    ========================================= *\/\r\n\r\n    function wiwEmit(\r\n      name,\r\n      detail\r\n    ){\r\n\r\n      window.dispatchEvent(\r\n\r\n        new CustomEvent(\r\n\r\n          name,\r\n\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    \/* =========================================\r\n       RENDER\r\n    ========================================= *\/\r\n\r\n    function wiwRender(){\r\n\r\n      wiwAnswered=false;\r\n\r\n\r\n      const level=\r\n        wiwLevels[\r\n          wiwLevelIndex\r\n        ];\r\n\r\n\r\n      const question=\r\n        level.questions[\r\n          wiwQuestionIndex\r\n        ];\r\n\r\n\r\n      wiwExerciseContent.style.display=\r\n        \"block\";\r\n\r\n\r\n      wiwTransition.style.display=\r\n        \"none\";\r\n\r\n\r\n      wiwFinish.style.display=\r\n        \"none\";\r\n\r\n\r\n      wiwLevelPill.textContent=\r\n        level.title;\r\n\r\n\r\n      const overall=\r\n        wiwCompletedCount()+1;\r\n\r\n\r\n      wiwQuestionCounter.textContent=\r\n        \"Vraag \"+\r\n        overall+\r\n        \" van \"+\r\n        wiwTotal;\r\n\r\n\r\n      wiwProgressBar.style.width=\r\n        Math.round(\r\n          (\r\n            wiwCompletedCount() \/\r\n            wiwTotal\r\n          ) * 100\r\n        )+\"%\";\r\n\r\n\r\n      wiwQuestionType.textContent=\r\n        question.label;\r\n\r\n\r\n      wiwQuestionTitle.textContent=\r\n        question.question;\r\n\r\n\r\n      wiwHelper.textContent=\r\n        question.helper || \"\";\r\n\r\n\r\n      wiwStimulus.textContent=\r\n        question.stimulus || \"\";\r\n\r\n\r\n      wiwFeedback.textContent=\r\n        \"\";\r\n\r\n\r\n      wiwFeedback.className=\r\n        \"wiw-feedback\";\r\n\r\n\r\n      wiwNextWrap.style.display=\r\n        \"none\";\r\n\r\n\r\n      wiwAnswerArea.innerHTML=\r\n        \"\";\r\n\r\n\r\n      \/* =====================================\r\n         SUPPORT ALLEEN LEVEL 1\r\n      ====================================== *\/\r\n\r\n      wiwSupport.style.display=\r\n        wiwLevelIndex===0\r\n\r\n        ? \"block\"\r\n\r\n        : \"none\";\r\n\r\n\r\n      \/* =====================================\r\n         IFI\r\n      ====================================== *\/\r\n\r\n      if(\r\n        wiwLevelIndex===0\r\n      ){\r\n\r\n        wiwSetIfi(\r\n\r\n          \"uitleg\",\r\n\r\n          \"Kijk eerst wie bedoeld wordt. Is het jezelf, iemand tegen wie je praat, \u00e9\u00e9n jongen, \u00e9\u00e9n meisje of een groep waar jij bij hoort?\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else if(\r\n        wiwLevelIndex===1\r\n      ){\r\n\r\n        wiwSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          \"Nu krijg je wat meer informatie in de zin. Gebruik de betekenis \u00e9n het werkwoord om te kiezen.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        wiwSetIfi(\r\n\r\n          \"denken\",\r\n\r\n          \"Nu mag jij het zelf doen. Lees eerst de context en typ daarna alleen het wie-woord.\"\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          \"wiw-antwoorden\";\r\n\r\n\r\n        wiwShuffle(\r\n          question.answers\r\n        )\r\n        .forEach(\r\n\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              \"wiw-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                wiwSubmit(\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\r\n        wiwAnswerArea.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          \"wiw-input-wrap\";\r\n\r\n\r\n        wrap.innerHTML=`\r\n\r\n          <input\r\n            type=\"text\"\r\n            class=\"wiw-input\"\r\n            id=\"wiwTextInput\"\r\n            autocomplete=\"off\"\r\n            autocapitalize=\"off\"\r\n            spellcheck=\"false\"\r\n            placeholder=\"Typ het wie-woord...\"\r\n          >\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"wiw-check-btn\"\r\n            id=\"wiwCheckText\">\r\n\r\n            Nakijken \ud83c\udf3f\r\n\r\n          <\/button>\r\n\r\n        `;\r\n\r\n\r\n        wiwAnswerArea.appendChild(\r\n          wrap\r\n        );\r\n\r\n\r\n        const input=\r\n          document.getElementById(\r\n            \"wiwTextInput\"\r\n          );\r\n\r\n\r\n        document\r\n          .getElementById(\r\n            \"wiwCheckText\"\r\n          )\r\n          .addEventListener(\r\n\r\n            \"click\",\r\n\r\n            function(){\r\n\r\n              wiwSubmit(\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              wiwSubmit(\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 wiwSubmit(\r\n      value,\r\n      node\r\n    ){\r\n\r\n      if(\r\n        wiwAnswered\r\n      ){\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      wiwAnswered=true;\r\n\r\n\r\n      const question=\r\n        wiwLevels[\r\n          wiwLevelIndex\r\n        ]\r\n        .questions[\r\n          wiwQuestionIndex\r\n        ];\r\n\r\n\r\n      const correct=\r\n        wiwNormalize(value) ===\r\n        wiwNormalize(\r\n          question.correct\r\n        );\r\n\r\n\r\n      if(\r\n        correct\r\n      ){\r\n\r\n        wiwCorrect++;\r\n\r\n\r\n        node.classList.add(\r\n          \"correct\"\r\n        );\r\n\r\n\r\n        const successTexts=[\r\n\r\n          \"Mooi gezien.\",\r\n\r\n          \"Ja, precies.\",\r\n\r\n          \"Dat klopt.\",\r\n\r\n          \"Goed gekeken.\"\r\n\r\n        ];\r\n\r\n\r\n        wiwFeedback.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        wiwFeedback.className=\r\n          \"wiw-feedback good\";\r\n\r\n\r\n        const ifiSuccess=[\r\n\r\n          \"Mooi gezien. Je wist precies over wie de zin ging.\",\r\n\r\n          \"Ja, precies. Dat wie-woord past goed.\",\r\n\r\n          \"Dat klopt. Goed naar de context gekeken.\",\r\n\r\n          \"Goed gedaan. Ga maar rustig verder.\"\r\n\r\n        ];\r\n\r\n\r\n        wiwSetIfi(\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        wiwFeedback.textContent=\r\n          \"Kijk nog eens rustig. Het goede wie-woord is: \"+\r\n          question.correct+\r\n          \".\";\r\n\r\n\r\n        wiwFeedback.className=\r\n          \"wiw-feedback retry\";\r\n\r\n\r\n        if(\r\n          wiwLevelIndex===0\r\n        ){\r\n\r\n          wiwSetIfi(\r\n\r\n            \"denken\",\r\n\r\n            \"Dat geeft niet. Kijk opnieuw wie de persoon is. Gaat het over jezelf, een jongen, een meisje of jullie samen?\"\r\n\r\n          );\r\n\r\n        }\r\n\r\n        else if(\r\n          wiwLevelIndex===1\r\n        ){\r\n\r\n          wiwSetIfi(\r\n\r\n            \"denken\",\r\n\r\n            \"Lees de hele zin nog eens. Soms vertelt de eerste zin al precies wie bedoeld wordt.\"\r\n\r\n          );\r\n\r\n        }\r\n\r\n        else{\r\n\r\n          wiwSetIfi(\r\n\r\n            \"denken\",\r\n\r\n            \"Kijk rustig naar de context. Over wie wordt gesproken? Vervang die persoon daarna door het wie-woord.\"\r\n\r\n          );\r\n\r\n        }\r\n\r\n      }\r\n\r\n\r\n      wiwAnswerArea\r\n        .querySelectorAll(\r\n          \"button,input\"\r\n        )\r\n        .forEach(\r\n\r\n          function(item){\r\n\r\n            item.disabled=true;\r\n\r\n          }\r\n\r\n        );\r\n\r\n\r\n      wiwNextWrap.style.display=\r\n        \"block\";\r\n\r\n\r\n      wiwEmit(\r\n\r\n        \"withifi:wiewoord-answer\",\r\n\r\n        {\r\n\r\n          level:\r\n            wiwLevelIndex+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 wiwNext(){\r\n\r\n      const level=\r\n        wiwLevels[\r\n          wiwLevelIndex\r\n        ];\r\n\r\n\r\n      wiwQuestionIndex++;\r\n\r\n\r\n      if(\r\n        wiwQuestionIndex <\r\n        level.questions.length\r\n      ){\r\n\r\n        wiwRender();\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      if(\r\n        wiwLevelIndex <\r\n        wiwLevels.length-1\r\n      ){\r\n\r\n        wiwShowTransition();\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      wiwComplete();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       LEVEL OVERGANG\r\n    ========================================= *\/\r\n\r\n    function wiwShowTransition(){\r\n\r\n      wiwExerciseContent.style.display=\r\n        \"none\";\r\n\r\n\r\n      wiwTransition.style.display=\r\n        \"block\";\r\n\r\n\r\n      if(\r\n        wiwLevelIndex===0\r\n      ){\r\n\r\n        wiwTransitionTitle.textContent=\r\n          \"\ud83c\udf3f Klaar voor Level 2\";\r\n\r\n\r\n        wiwTransitionText.textContent=\r\n          \"Je kunt al herkennen welk wie-woord bij een persoon past. Nu krijg je meer informatie in de zin en ga je zelf nadenken welk woord klopt.\";\r\n\r\n\r\n        wiwSetIfi(\r\n\r\n          \"uitleg\",\r\n\r\n          \"Nu wordt het een klein beetje moeilijker. Lees eerst de hele zin, want daarin zit vaak de aanwijzing die je nodig hebt.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        wiwTransitionTitle.textContent=\r\n          \"\ud83c\udf33 Klaar voor Level 3\";\r\n\r\n\r\n        wiwTransitionText.textContent=\r\n          \"Je kunt wie-woorden al herkennen en kiezen. Nu krijg je geen antwoordknoppen meer bij iedere opdracht: jij gaat het woord zelf bedenken.\";\r\n\r\n\r\n        wiwSetIfi(\r\n\r\n          \"goed\",\r\n\r\n          \"Ik zie dat je er klaar voor bent. Nu ga jij zelf het wie-woord typen.\"\r\n\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    function wiwNextLevel(){\r\n\r\n      wiwLevelIndex++;\r\n\r\n      wiwQuestionIndex=0;\r\n\r\n\r\n      wiwUpdateRoute();\r\n\r\n      wiwRender();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       KLAAR\r\n    ========================================= *\/\r\n\r\n    function wiwComplete(){\r\n\r\n      wiwExerciseContent.style.display=\r\n        \"none\";\r\n\r\n\r\n      wiwTransition.style.display=\r\n        \"none\";\r\n\r\n\r\n      wiwFinish.style.display=\r\n        \"block\";\r\n\r\n\r\n      wiwProgressBar.style.width=\r\n        \"100%\";\r\n\r\n\r\n      const percentage=\r\n        Math.round(\r\n          (\r\n            wiwCorrect \/\r\n            wiwTotal\r\n          ) * 100\r\n        );\r\n\r\n\r\n      wiwResultText.innerHTML=\r\n\r\n        \"Je hebt alle drie de levels doorlopen.<br>\" +\r\n\r\n        \"Je had <strong>\" +\r\n        wiwCorrect +\r\n        \" van de \" +\r\n        wiwTotal +\r\n        \"<\/strong> opdrachten goed (\" +\r\n        percentage +\r\n        \"%).<br><br>\" +\r\n\r\n        \"Je hebt geoefend met wie-woorden herkennen, kiezen en zelfstandig gebruiken.\";\r\n\r\n\r\n      wiwSetIfi(\r\n\r\n        \"goed\",\r\n\r\n        \"Goed gedaan. Je kunt steeds beter ontdekken over wie een zin gaat en welk wie-woord daarbij hoort.\"\r\n\r\n      );\r\n\r\n\r\n      wiwEmit(\r\n\r\n        \"withifi:wiewoord-complete\",\r\n\r\n        {\r\n\r\n          topic:\r\n            \"Wie-woorden\",\r\n\r\n          levelsCompleted:\r\n            3,\r\n\r\n          correct:\r\n            wiwCorrect,\r\n\r\n          total:\r\n            wiwTotal,\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 wiwRestart(){\r\n\r\n      wiwLevelIndex=0;\r\n\r\n      wiwQuestionIndex=0;\r\n\r\n      wiwCorrect=0;\r\n\r\n      wiwAnswered=false;\r\n\r\n\r\n      wiwLevels.forEach(\r\n\r\n        function(level){\r\n\r\n          level.questions=\r\n            wiwShuffle(\r\n              level.questions\r\n            );\r\n\r\n        }\r\n\r\n      );\r\n\r\n\r\n      wiwUpdateRoute();\r\n\r\n\r\n      wiwSetIfi(\r\n\r\n        \"uitleg\",\r\n\r\n        \"We beginnen gewoon opnieuw. Kijk eerst rustig over wie de zin gaat.\"\r\n\r\n      );\r\n\r\n\r\n      wiwRender();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       EVENTS\r\n    ========================================= *\/\r\n\r\n    wiwNextBtn.addEventListener(\r\n      \"click\",\r\n      wiwNext\r\n    );\r\n\r\n\r\n    wiwStartNextLevel.addEventListener(\r\n      \"click\",\r\n      wiwNextLevel\r\n    );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"wiwRestartBtn\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        wiwRestart\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       START\r\n    ========================================= *\/\r\n\r\n    wiwUpdateRoute();\r\n\r\n    wiwRender();\r\n\r\n  }\r\n\r\n);\r\n\r\n<\/script>\r\n\r\n<!-- With Ifi centrale Sprint 2-runtime: Custom Code 4038 -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83d\udc64 Taal bouwen Wie-woorden oefenen. Wie-woorden vertellen over wie de zin gaat. Denk aan ik, jij, hij, zij en wij. Eerst herkennen we wie bedoeld wordt. Daarna ga je steeds meer zelf kiezen. \ud83c\udf31 Level 1 \u00b7 Herkennen Ontdek welk wie-woord bij een persoon past. \ud83c\udf3f Level 2 \u00b7 Kiezen Gebruik de zin en het [&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-941","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/941","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=941"}],"version-history":[{"count":34,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/941\/revisions"}],"predecessor-version":[{"id":4407,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/941\/revisions\/4407"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=941"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}