{"id":2056,"date":"2026-05-11T17:08:37","date_gmt":"2026-05-11T17:08:37","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?page_id=2056"},"modified":"2026-09-15T01:46:28","modified_gmt":"2026-09-15T01:46:28","slug":"oefenen-met-tellen-groepjes","status":"publish","type":"page","link":"https:\/\/withifi.muhubonurture.nl\/?page_id=2056","title":{"rendered":"Oefenen Met Tellen &amp; Groepjes"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2056\" class=\"elementor elementor-2056\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b7214d e-con-full e-flex e-con e-parent\" data-id=\"9b7214d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bfde20b elementor-widget elementor-widget-html\" data-id=\"bfde20b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================\r\n     WITH IFI \u2014 TELLEN & GROEPJES\r\n     GETALLENWERELD\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.tg-page{\r\n  min-height:100vh;\r\n  padding:6rem 6vw 5rem;\r\n\r\n  color:#263247;\r\n\r\n  background:\r\n    radial-gradient(circle at 16% 18%,rgba(255,255,255,.90) 0%,transparent 31%),\r\n    radial-gradient(circle at 86% 22%,rgba(210,232,255,.58) 0%,transparent 31%),\r\n    radial-gradient(circle at 50% 86%,rgba(230,245,237,.58) 0%,transparent 38%),\r\n    linear-gradient(135deg,#F7FBFF 0%,#EAF6FF 46%,#F4FBF7 100%);\r\n}\r\n\r\n.tg-page *{\r\n  box-sizing:border-box;\r\n}\r\n\r\n.tg-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.tg-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,.66);\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  box-shadow:0 16px 42px rgba(70,105,140,.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.tg-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,.80);\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  color:#4D6F91;\r\n\r\n  font-size:.9rem;\r\n  font-weight:900;\r\n}\r\n\r\n.tg-title{\r\n  margin:0 0 1.2rem;\r\n\r\n  color:#263247;\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.tg-intro{\r\n  max-width:760px;\r\n  margin:0 auto;\r\n\r\n  color:#4D5F75;\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.tg-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.tg-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(70,105,140,.06);\r\n\r\n  transition:.25s ease;\r\n}\r\n\r\n.tg-route-level:nth-child(1){\r\n  background:linear-gradient(135deg,#FFF4E3,#FFF9EF);\r\n}\r\n\r\n.tg-route-level:nth-child(2){\r\n  background:linear-gradient(135deg,#EAF7F1,#F7FFFB);\r\n}\r\n\r\n.tg-route-level:nth-child(3){\r\n  background:linear-gradient(135deg,#E8F3FF,#F7FBFF);\r\n}\r\n\r\n.tg-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.tg-route-level.active{\r\n  transform:translateY(-5px);\r\n\r\n  box-shadow:0 18px 38px rgba(70,105,140,.11);\r\n}\r\n\r\n.tg-route-level.done{\r\n  opacity:.72;\r\n}\r\n\r\n.tg-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,.82);\r\n\r\n  font-size:1.45rem;\r\n}\r\n\r\n.tg-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:#263247;\r\n\r\n  font-size:1.15rem;\r\n  font-weight:950;\r\n}\r\n\r\n.tg-route-level p{\r\n  position:relative;\r\n  z-index:2;\r\n\r\n  margin:0;\r\n\r\n  color:#4D5F75;\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\r\n========================================= *\/\r\n\r\n.tg-support{\r\n  max-width:920px;\r\n  margin:0 auto 2.3rem;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.tg-support-title{\r\n  margin-bottom:1rem;\r\n\r\n  color:#4D5F75;\r\n\r\n  font-size:.95rem;\r\n  font-weight:850;\r\n}\r\n\r\n.tg-support-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n\r\n  gap:1rem;\r\n}\r\n\r\n.tg-support-card{\r\n  padding:1.25rem;\r\n\r\n  border-radius:24px;\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(70,105,140,.06);\r\n}\r\n\r\n.tg-support-icon{\r\n  display:block;\r\n\r\n  margin-bottom:.5rem;\r\n\r\n  font-size:1.9rem;\r\n}\r\n\r\n.tg-support-card strong{\r\n  display:block;\r\n\r\n  margin-bottom:.35rem;\r\n\r\n  color:#263247;\r\n\r\n  font-weight:950;\r\n}\r\n\r\n.tg-support-card span{\r\n  color:#4D5F75;\r\n\r\n  font-size:.92rem;\r\n  line-height:1.55;\r\n\r\n  font-weight:700;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   OEFENBOX\r\n========================================= *\/\r\n\r\n.tg-oefen-box{\r\n  max-width:1120px;\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,.70);\r\n\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  box-shadow:0 18px 46px rgba(70,105,140,.09);\r\n\r\n  backdrop-filter:blur(14px);\r\n  -webkit-backdrop-filter:blur(14px);\r\n}\r\n\r\n.tg-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.tg-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.tg-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.tg-level-pill,\r\n.tg-counter{\r\n  padding:10px 16px;\r\n\r\n  border-radius:999px;\r\n\r\n  background:rgba(255,255,255,.90);\r\n\r\n  color:#4D6F91;\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.tg-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:#EAF1F5;\r\n}\r\n\r\n.tg-progress{\r\n  width:0%;\r\n  height:100%;\r\n\r\n  border-radius:999px;\r\n\r\n  background:linear-gradient(\r\n    90deg,\r\n    #FFD8B3 0%,\r\n    #CDEADF 50%,\r\n    #A9D7FF 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.tg-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:#EAF6FF;\r\n\r\n  color:#4D6F91;\r\n\r\n  font-size:.82rem;\r\n  font-weight:900;\r\n}\r\n\r\n.tg-question{\r\n  max-width:650px;\r\n  margin:0 auto .65rem;\r\n\r\n  color:#263247;\r\n\r\n  font-size:clamp(1.5rem,3vw,2rem);\r\n  line-height:1.3;\r\n\r\n  font-weight:950;\r\n}\r\n\r\n.tg-helper{\r\n  max-width:650px;\r\n  margin:0 auto 1.5rem;\r\n\r\n  color:#4D5F75;\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   STIMULUS\r\n========================================= *\/\r\n\r\n.tg-stimulus{\r\n  max-width:760px;\r\n\r\n  margin:1.2rem auto 2rem;\r\n  padding:1.5rem;\r\n\r\n  min-height:120px;\r\n\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  border-radius:28px;\r\n\r\n  background:linear-gradient(\r\n    135deg,\r\n    #F8FCFF,\r\n    #F7FCF9\r\n  );\r\n\r\n  border:1px solid rgba(255,255,255,.98);\r\n}\r\n\r\n\r\n\/* =========================================\r\n   LOSSE OBJECTEN\r\n========================================= *\/\r\n\r\n.tg-objects{\r\n  display:flex;\r\n\r\n  justify-content:center;\r\n  flex-wrap:wrap;\r\n\r\n  gap:.7rem;\r\n\r\n  max-width:660px;\r\n}\r\n\r\n.tg-object{\r\n  width:58px;\r\n  height:58px;\r\n\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  border-radius:20px;\r\n\r\n  background:#DDEFFF;\r\n\r\n  box-shadow:0 7px 18px rgba(70,105,140,.07);\r\n\r\n  font-size:1.8rem;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   GROEPJES\r\n========================================= *\/\r\n\r\n.tg-groups{\r\n  display:flex;\r\n\r\n  justify-content:center;\r\n  align-items:center;\r\n\r\n  flex-wrap:wrap;\r\n\r\n  gap:1rem;\r\n\r\n  max-width:680px;\r\n}\r\n\r\n.tg-group{\r\n  display:flex;\r\n\r\n  justify-content:center;\r\n  flex-wrap:wrap;\r\n\r\n  gap:.45rem;\r\n\r\n  padding:.8rem;\r\n\r\n  min-width:90px;\r\n\r\n  border-radius:23px;\r\n\r\n  background:#EAF6FF;\r\n\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  box-shadow:0 7px 18px rgba(70,105,140,.06);\r\n}\r\n\r\n.tg-group:nth-child(even){\r\n  background:#EAF7F1;\r\n}\r\n\r\n.tg-group .tg-object{\r\n  width:46px;\r\n  height:46px;\r\n\r\n  border-radius:16px;\r\n\r\n  font-size:1.45rem;\r\n\r\n  background:rgba(255,255,255,.86);\r\n}\r\n\r\n\r\n\/* =========================================\r\n   GROEPSLABEL\r\n========================================= *\/\r\n\r\n.tg-group-label{\r\n  width:100%;\r\n\r\n  margin-bottom:.3rem;\r\n\r\n  color:#4D6F91;\r\n\r\n  font-size:.78rem;\r\n  font-weight:900;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   SEQUENCE \/ NUMBER DISPLAY\r\n========================================= *\/\r\n\r\n.tg-number-display{\r\n  color:#263247;\r\n\r\n  font-size:clamp(3rem,7vw,5rem);\r\n\r\n  font-weight:950;\r\n}\r\n\r\n.tg-mini-equation{\r\n  display:flex;\r\n\r\n  justify-content:center;\r\n  align-items:center;\r\n\r\n  flex-wrap:wrap;\r\n\r\n  gap:.65rem;\r\n\r\n  color:#263247;\r\n\r\n  font-size:clamp(1.6rem,4vw,2.6rem);\r\n\r\n  font-weight:950;\r\n}\r\n\r\n.tg-equation-block{\r\n  padding:.7rem 1rem;\r\n\r\n  border-radius:18px;\r\n\r\n  background:#FFFFFF;\r\n\r\n  box-shadow:0 7px 18px rgba(70,105,140,.06);\r\n}\r\n\r\n\r\n\/* =========================================\r\n   ANTWOORDEN\r\n========================================= *\/\r\n\r\n.tg-answers{\r\n  display:flex;\r\n\r\n  justify-content:center;\r\n  flex-wrap:wrap;\r\n\r\n  gap:.9rem;\r\n}\r\n\r\n.tg-answer{\r\n  min-width:110px;\r\n\r\n  padding:1rem 1.45rem;\r\n\r\n  border:2px solid #B9D9EF;\r\n  border-radius:999px;\r\n\r\n  background:#FFFFFF;\r\n\r\n  color:#263247 !important;\r\n\r\n  box-shadow:0 8px 20px rgba(70,105,140,.07);\r\n\r\n  font-family:inherit;\r\n\r\n  font-size:1.15rem;\r\n  font-weight:950;\r\n\r\n  cursor:pointer;\r\n\r\n  transition:.22s ease;\r\n}\r\n\r\n.tg-answer:hover{\r\n  transform:translateY(-2px);\r\n\r\n  background:#DDEFFF;\r\n}\r\n\r\n.tg-answer.correct{\r\n  background:#DDF5E4 !important;\r\n\r\n  color:#315D43 !important;\r\n\r\n  border-color:#AED5BC !important;\r\n}\r\n\r\n.tg-answer.wrong{\r\n  background:#FFE8E8 !important;\r\n\r\n  color:#8A5151 !important;\r\n\r\n  border-color:#EBC4C4 !important;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   INPUT\r\n========================================= *\/\r\n\r\n.tg-input-wrap{\r\n  max-width:380px;\r\n  margin:0 auto;\r\n}\r\n\r\n.tg-input{\r\n  width:100%;\r\n\r\n  padding:1rem 1.25rem;\r\n\r\n  border:2px solid #BDD9EB;\r\n  border-radius:20px;\r\n\r\n  outline:none;\r\n\r\n  background:#FFFFFF;\r\n\r\n  color:#263247;\r\n\r\n  text-align:center;\r\n\r\n  font-family:inherit;\r\n\r\n  font-size:1.4rem;\r\n  font-weight:950;\r\n\r\n  transition:.2s ease;\r\n}\r\n\r\n.tg-input:focus{\r\n  border-color:#7CB8E4;\r\n\r\n  box-shadow:0 0 0 5px rgba(169,215,255,.28);\r\n}\r\n\r\n.tg-input.correct{\r\n  background:#F0FAF3;\r\n  border-color:#B8DCC4;\r\n}\r\n\r\n.tg-input.wrong{\r\n  background:#FFF5F5;\r\n  border-color:#EACACA;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   BUTTONS\r\n========================================= *\/\r\n\r\n.tg-check,\r\n.tg-next,\r\n.tg-restart{\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:#A9D7FF;\r\n\r\n  color:#263247;\r\n\r\n  box-shadow:0 9px 22px rgba(70,105,140,.09);\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.tg-check:hover,\r\n.tg-next:hover,\r\n.tg-restart:hover{\r\n  transform:translateY(-2px);\r\n\r\n  background:#DDEFFF;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   FEEDBACK\r\n========================================= *\/\r\n\r\n.tg-feedback{\r\n  min-height:34px;\r\n\r\n  margin-top:1.5rem;\r\n\r\n  color:#4D6F91;\r\n\r\n  font-size:1rem;\r\n  line-height:1.7;\r\n\r\n  font-weight:850;\r\n}\r\n\r\n.tg-feedback.good{\r\n  color:#47735A;\r\n}\r\n\r\n.tg-feedback.retry{\r\n  color:#8A6555;\r\n}\r\n\r\n.tg-next-wrap{\r\n  display:none;\r\n}\r\n\r\n\r\n\/* =========================================\r\n   IFI\r\n========================================= *\/\r\n\r\n.tg-ifi{\r\n  align-self:stretch;\r\n\r\n  display:flex;\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\r\n.tg-ifi-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:drop-shadow(\r\n    0 14px 24px rgba(70,105,140,.10)\r\n  );\r\n\r\n  transition:\r\n    opacity .25s ease,\r\n    transform .25s ease;\r\n}\r\n\r\n.tg-ifi-bubble{\r\n  width:100%;\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,.95),\r\n      transparent 40%\r\n    ),\r\n    linear-gradient(\r\n      135deg,\r\n      #F8FCFF,\r\n      #F3FBF8\r\n    );\r\n\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  box-shadow:0 10px 26px rgba(70,105,140,.07);\r\n\r\n  text-align:center;\r\n}\r\n\r\n.tg-ifi-name{\r\n  display:inline-block;\r\n\r\n  margin-bottom:.5rem;\r\n  padding:6px 11px;\r\n\r\n  border-radius:999px;\r\n\r\n  background:rgba(255,255,255,.86);\r\n\r\n  color:#4D6F91;\r\n\r\n  font-size:.82rem;\r\n  font-weight:900;\r\n}\r\n\r\n.tg-ifi-message{\r\n  margin:0;\r\n\r\n  color:#4D5F75;\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   TRANSITION\r\n========================================= *\/\r\n\r\n.tg-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.tg-transition h3{\r\n  margin:0 0 .7rem;\r\n\r\n  color:#263247;\r\n\r\n  font-size:1.6rem;\r\n  font-weight:950;\r\n}\r\n\r\n.tg-transition p{\r\n  max-width:620px;\r\n  margin:0 auto;\r\n\r\n  color:#4D5F75;\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.tg-finish{\r\n  display:none;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.tg-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\r\n.tg-finish h2{\r\n  margin:.5rem 0 .8rem;\r\n\r\n  color:#263247;\r\n\r\n  font-size:clamp(2rem,4vw,3rem);\r\n\r\n  font-weight:950;\r\n}\r\n\r\n.tg-finish p{\r\n  max-width:620px;\r\n\r\n  margin:0 auto;\r\n\r\n  color:#4D5F75;\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.tg-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(70,105,140,.07);\r\n\r\n  text-align:center;\r\n\r\n  color:#4D5F75;\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   RESPONSIVE\r\n========================================= *\/\r\n\r\n@media(max-width:950px){\r\n\r\n  .tg-oefen-layout{\r\n    grid-template-columns:minmax(0,1fr) 175px;\r\n    gap:1.2rem;\r\n  }\r\n\r\n  .tg-ifi-avatar{\r\n    width:155px;\r\n  }\r\n\r\n}\r\n\r\n\r\n@media(max-width:700px){\r\n\r\n  .tg-page{\r\n    padding:4rem 5vw;\r\n  }\r\n\r\n  .tg-hero{\r\n    padding:2.3rem 1.7rem;\r\n  }\r\n\r\n  .tg-level-route,\r\n  .tg-support-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .tg-oefen-box{\r\n    padding:1.5rem 1.15rem;\r\n  }\r\n\r\n  .tg-oefen-layout{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .tg-top{\r\n    justify-content:center;\r\n    flex-wrap:wrap;\r\n  }\r\n\r\n  .tg-ifi{\r\n    order:-1;\r\n\r\n    flex-direction:row;\r\n\r\n    gap:1rem;\r\n  }\r\n\r\n  .tg-ifi-avatar{\r\n    width:95px;\r\n  }\r\n\r\n  .tg-ifi-bubble{\r\n    text-align:left;\r\n  }\r\n\r\n  .tg-answer{\r\n    width:100%;\r\n  }\r\n\r\n}\r\n\r\n\r\n@media(max-width:480px){\r\n\r\n  .tg-ifi{\r\n    flex-direction:column;\r\n  }\r\n\r\n  .tg-ifi-bubble{\r\n    text-align:center;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<section class=\"kl-page\" data-withifi-world=\"getallenwereld\">\r\n\r\n<div class=\"tg-wrap\">\r\n\r\n\r\n  <!-- =====================================\r\n       HERO\r\n  ====================================== -->\r\n\r\n  <div class=\"tg-hero\">\r\n\r\n    <div class=\"tg-label\">\r\n      \ud83e\uddfa Getallenwereld\r\n    <\/div>\r\n\r\n    <h1 class=\"tg-title\">\r\n      Oefenen met tellen & groepjes.\r\n    <\/h1>\r\n\r\n    <p class=\"tg-intro\">\r\n      Eerst tellen we dingen\r\n      <strong>\u00e9\u00e9n voor \u00e9\u00e9n<\/strong>.\r\n      Daarna ontdekken we dat je aantallen\r\n      ook in <strong>groepjes<\/strong> kunt zien.\r\n      Zo wordt tellen steeds overzichtelijker.\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=\"tg-level-route\">\r\n\r\n    <div\r\n      class=\"tg-route-level active\"\r\n      id=\"tgRoute1\">\r\n\r\n      <div class=\"tg-route-icon\">\r\n        \ud83c\udf31\r\n      <\/div>\r\n\r\n      <h3>\r\n        Level 1 \u00b7 Tellen\r\n      <\/h3>\r\n\r\n      <p>\r\n        Tel losse voorwerpen \u00e9\u00e9n voor \u00e9\u00e9n.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div\r\n      class=\"tg-route-level\"\r\n      id=\"tgRoute2\">\r\n\r\n      <div class=\"tg-route-icon\">\r\n        \ud83c\udf3f\r\n      <\/div>\r\n\r\n      <h3>\r\n        Level 2 \u00b7 Groepjes zien\r\n      <\/h3>\r\n\r\n      <p>\r\n        Ontdek hoeveel voorwerpen in elk groepje zitten.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n\r\n    <div\r\n      class=\"tg-route-level\"\r\n      id=\"tgRoute3\">\r\n\r\n      <div class=\"tg-route-icon\">\r\n        \ud83c\udf33\r\n      <\/div>\r\n\r\n      <h3>\r\n        Level 3 \u00b7 Zelf toepassen\r\n      <\/h3>\r\n\r\n      <p>\r\n        Gebruik groepjes om grotere aantallen te vinden.\r\n      <\/p>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- =====================================\r\n       SUPPORT\r\n  ====================================== -->\r\n\r\n  <div\r\n    class=\"tg-support\"\r\n    id=\"tgSupport\">\r\n\r\n    <div class=\"tg-support-title\">\r\n      Zo kun je rustig tellen\r\n    <\/div>\r\n\r\n    <div class=\"tg-support-grid\">\r\n\r\n      <div class=\"tg-support-card\">\r\n\r\n        <span class=\"tg-support-icon\">\r\n          \ud83d\udc46\r\n        <\/span>\r\n\r\n        <strong>\r\n          Aanwijzen\r\n        <\/strong>\r\n\r\n        <span>\r\n          Wijs elk voorwerp \u00e9\u00e9n keer aan.\r\n        <\/span>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"tg-support-card\">\r\n\r\n        <span class=\"tg-support-icon\">\r\n          \ud83d\udd22\r\n        <\/span>\r\n\r\n        <strong>\r\n          Hardop tellen\r\n        <\/strong>\r\n\r\n        <span>\r\n          Zeg bij ieder voorwerp het volgende getal.\r\n        <\/span>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"tg-support-card\">\r\n\r\n        <span class=\"tg-support-icon\">\r\n          \ud83e\uddfa\r\n        <\/span>\r\n\r\n        <strong>\r\n          Groepjes zien\r\n        <\/strong>\r\n\r\n        <span>\r\n          Later hoef je niet meer alles los te bekijken.\r\n        <\/span>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n  <!-- =====================================\r\n       OEFENBOX\r\n  ====================================== -->\r\n\r\n  <div class=\"tg-oefen-box\">\r\n\r\n    <div class=\"tg-oefen-layout\">\r\n\r\n\r\n      <div class=\"tg-main\">\r\n\r\n\r\n        <div id=\"tgExercise\">\r\n\r\n\r\n          <div class=\"tg-top\">\r\n\r\n            <div\r\n              class=\"tg-level-pill\"\r\n              id=\"tgLevelPill\">\r\n\r\n              \ud83c\udf31 Level 1 \u00b7 Tellen\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n              class=\"tg-counter\"\r\n              id=\"tgCounter\">\r\n\r\n              Vraag 1\r\n\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div class=\"tg-progress-wrap\">\r\n\r\n            <div\r\n              class=\"tg-progress\"\r\n              id=\"tgProgress\">\r\n            <\/div>\r\n\r\n          <\/div>\r\n\r\n\r\n          <div\r\n            class=\"tg-type\"\r\n            id=\"tgType\">\r\n          <\/div>\r\n\r\n\r\n          <div\r\n            class=\"tg-question\"\r\n            id=\"tgQuestion\">\r\n          <\/div>\r\n\r\n\r\n          <div\r\n            class=\"tg-helper\"\r\n            id=\"tgHelper\">\r\n          <\/div>\r\n\r\n\r\n          <div\r\n            class=\"tg-stimulus\"\r\n            id=\"tgStimulus\">\r\n          <\/div>\r\n\r\n\r\n          <div id=\"tgAnswerArea\">\r\n          <\/div>\r\n\r\n\r\n          <div\r\n            class=\"tg-feedback\"\r\n            id=\"tgFeedback\">\r\n          <\/div>\r\n\r\n\r\n          <div\r\n            class=\"tg-next-wrap\"\r\n            id=\"tgNextWrap\">\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"tg-next\"\r\n              id=\"tgNext\">\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        <!-- TRANSITION -->\r\n\r\n        <div\r\n          class=\"tg-transition\"\r\n          id=\"tgTransition\">\r\n\r\n          <h3 id=\"tgTransitionTitle\">\r\n          <\/h3>\r\n\r\n          <p id=\"tgTransitionText\">\r\n          <\/p>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"tg-next\"\r\n            id=\"tgNextLevel\">\r\n\r\n            Verder \ud83c\udf3f\r\n\r\n          <\/button>\r\n\r\n        <\/div>\r\n\r\n\r\n        <!-- FINISH -->\r\n\r\n        <div\r\n          class=\"tg-finish\"\r\n          id=\"tgFinish\">\r\n\r\n          <img decoding=\"async\"\r\n            class=\"tg-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=\"tgResult\">\r\n          <\/p>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"tg-restart\"\r\n            id=\"tgRestart\">\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=\"tg-ifi\">\r\n\r\n        <img decoding=\"async\"\r\n          id=\"tgIfiAvatar\"\r\n          class=\"tg-ifi-avatar\"\r\n          src=\"https:\/\/withifi.muhubonurture.nl\/wp-content\/uploads\/2026\/06\/uitleg.png\"\r\n          alt=\"Ifi helpt bij tellen\">\r\n\r\n        <div class=\"tg-ifi-bubble\">\r\n\r\n          <div class=\"tg-ifi-name\">\r\n            IFI helpt je \ud83c\udf3f\r\n          <\/div>\r\n\r\n          <p\r\n            class=\"tg-ifi-message\"\r\n            id=\"tgIfiMessage\">\r\n\r\n            Wijs de voorwerpen rustig \u00e9\u00e9n voor \u00e9\u00e9n aan.\r\n            Zo tel je niets dubbel.\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  <div class=\"tg-note\">\r\n\r\n    Kleine reminder \ud83c\udf38<br>\r\n\r\n    Tellen hoeft niet snel.\r\n    Eerst kijk je,\r\n    daarna tel je.\r\n    Groepjes helpen je om grotere aantallen\r\n    steeds makkelijker te herkennen.\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\r\n    ========================================= *\/\r\n\r\n    const TG_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       VRAGEN\r\n    ========================================= *\/\r\n\r\n    const tgLevels=[\r\n\r\n\r\n      \/* =====================================\r\n         LEVEL 1\r\n      ====================================== *\/\r\n\r\n      {\r\n\r\n        title:\"\ud83c\udf31 Level 1 \u00b7 Tellen\",\r\n\r\n        questions:[\r\n\r\n\r\n          {\r\n\r\n            type:\"objects\",\r\n\r\n            label:\"E\u00e9n voor \u00e9\u00e9n tellen\",\r\n\r\n            question:\"Hoeveel appels zie je?\",\r\n\r\n            helper:\r\n            \"Wijs elke appel \u00e9\u00e9n keer aan.\",\r\n\r\n            amount:4,\r\n\r\n            icon:\"\ud83c\udf4e\",\r\n\r\n            answers:[\"3\",\"4\",\"5\"],\r\n\r\n            correct:\"4\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"objects\",\r\n\r\n            label:\"E\u00e9n voor \u00e9\u00e9n tellen\",\r\n\r\n            question:\"Hoeveel sterren zie je?\",\r\n\r\n            helper:\r\n            \"Tel rustig van links naar rechts.\",\r\n\r\n            amount:6,\r\n\r\n            icon:\"\u2b50\",\r\n\r\n            answers:[\"5\",\"6\",\"7\"],\r\n\r\n            correct:\"6\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"objects\",\r\n\r\n            label:\"E\u00e9n voor \u00e9\u00e9n tellen\",\r\n\r\n            question:\"Hoeveel bloemen zie je?\",\r\n\r\n            helper:\r\n            \"Raak ieder plaatje in gedachten \u00e9\u00e9n keer aan.\",\r\n\r\n            amount:5,\r\n\r\n            icon:\"\ud83c\udf38\",\r\n\r\n            answers:[\"4\",\"5\",\"6\"],\r\n\r\n            correct:\"5\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"objects\",\r\n\r\n            label:\"E\u00e9n voor \u00e9\u00e9n tellen\",\r\n\r\n            question:\"Hoeveel hartjes zie je?\",\r\n\r\n            helper:\r\n            \"Begin bij \u00e9\u00e9n en tel rustig verder.\",\r\n\r\n            amount:7,\r\n\r\n            icon:\"\ud83d\udc9a\",\r\n\r\n            answers:[\"6\",\"7\",\"8\"],\r\n\r\n            correct:\"7\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"objects\",\r\n\r\n            label:\"E\u00e9n voor \u00e9\u00e9n tellen\",\r\n\r\n            question:\"Hoeveel ballen zie je?\",\r\n\r\n            helper:\r\n            \"Controleer na het tellen nog \u00e9\u00e9n keer.\",\r\n\r\n            amount:8,\r\n\r\n            icon:\"\ud83d\udd35\",\r\n\r\n            answers:[\"7\",\"8\",\"9\"],\r\n\r\n            correct:\"8\"\r\n\r\n          }\r\n\r\n\r\n        ]\r\n\r\n      },\r\n\r\n\r\n      \/* =====================================\r\n         LEVEL 2\r\n      ====================================== *\/\r\n\r\n      {\r\n\r\n        title:\"\ud83c\udf3f Level 2 \u00b7 Groepjes zien\",\r\n\r\n        questions:[\r\n\r\n\r\n          {\r\n\r\n            type:\"groups-count\",\r\n\r\n            label:\"Groepjes tellen\",\r\n\r\n            question:\r\n            \"Hoeveel groepjes zie je?\",\r\n\r\n            helper:\r\n            \"Tel nu de vakjes, niet alle losse voorwerpen.\",\r\n\r\n            groups:[\r\n              2,\r\n              2,\r\n              2\r\n            ],\r\n\r\n            icon:\"\ud83c\udf4e\",\r\n\r\n            answers:[\"2\",\"3\",\"6\"],\r\n\r\n            correct:\"3\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"group-size\",\r\n\r\n            label:\"Hoe groot is een groepje?\",\r\n\r\n            question:\r\n            \"Hoeveel sterren zitten in elk groepje?\",\r\n\r\n            helper:\r\n            \"Kijk naar \u00e9\u00e9n groepje.\",\r\n\r\n            groups:[\r\n              3,\r\n              3\r\n            ],\r\n\r\n            icon:\"\u2b50\",\r\n\r\n            answers:[\"2\",\"3\",\"6\"],\r\n\r\n            correct:\"3\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"groups-total\",\r\n\r\n            label:\"Groepjes samen\",\r\n\r\n            question:\r\n            \"Hoeveel bloemen zijn er samen?\",\r\n\r\n            helper:\r\n            \"Je ziet twee groepjes van drie.\",\r\n\r\n            groups:[\r\n              3,\r\n              3\r\n            ],\r\n\r\n            icon:\"\ud83c\udf38\",\r\n\r\n            answers:[\"3\",\"5\",\"6\"],\r\n\r\n            correct:\"6\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"groups-total\",\r\n\r\n            label:\"Groepjes samen\",\r\n\r\n            question:\r\n            \"Hoeveel hartjes zijn er samen?\",\r\n\r\n            helper:\r\n            \"Tel eerst het ene groepje en daarna het andere.\",\r\n\r\n            groups:[\r\n              4,\r\n              4\r\n            ],\r\n\r\n            icon:\"\ud83d\udc9a\",\r\n\r\n            answers:[\"4\",\"8\",\"9\"],\r\n\r\n            correct:\"8\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"groups-count\",\r\n\r\n            label:\"Groepjes herkennen\",\r\n\r\n            question:\r\n            \"Hoeveel groepjes van twee zie je?\",\r\n\r\n            helper:\r\n            \"Ieder vakje is \u00e9\u00e9n groepje.\",\r\n\r\n            groups:[\r\n              2,\r\n              2,\r\n              2,\r\n              2\r\n            ],\r\n\r\n            icon:\"\ud83d\udd35\",\r\n\r\n            answers:[\"2\",\"4\",\"8\"],\r\n\r\n            correct:\"4\"\r\n\r\n          }\r\n\r\n\r\n        ]\r\n\r\n      },\r\n\r\n\r\n      \/* =====================================\r\n         LEVEL 3\r\n      ====================================== *\/\r\n\r\n      {\r\n\r\n        title:\"\ud83c\udf33 Level 3 \u00b7 Zelf toepassen\",\r\n\r\n        questions:[\r\n\r\n\r\n          {\r\n\r\n            type:\"text-groups\",\r\n\r\n            label:\"Zelf tellen\",\r\n\r\n            question:\r\n            \"Hoeveel zijn er samen?\",\r\n\r\n            helper:\r\n            \"Je ziet drie groepjes van twee.\",\r\n\r\n            groups:[\r\n              2,\r\n              2,\r\n              2\r\n            ],\r\n\r\n            icon:\"\ud83c\udf4e\",\r\n\r\n            correct:\"6\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"text-groups\",\r\n\r\n            label:\"Zelf tellen\",\r\n\r\n            question:\r\n            \"Hoeveel sterren zijn er samen?\",\r\n\r\n            helper:\r\n            \"Je ziet twee groepjes van vier.\",\r\n\r\n            groups:[\r\n              4,\r\n              4\r\n            ],\r\n\r\n            icon:\"\u2b50\",\r\n\r\n            correct:\"8\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"missing-group\",\r\n\r\n            label:\"Welk groepje mist?\",\r\n\r\n            question:\r\n            \"Er moeten 6 bloemen zijn. Hoeveel bloemen missen?\",\r\n\r\n            helper:\r\n            \"Je ziet nu 4 bloemen.\",\r\n\r\n            groups:[\r\n              2,\r\n              2\r\n            ],\r\n\r\n            icon:\"\ud83c\udf38\",\r\n\r\n            total:6,\r\n\r\n            correct:\"2\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"text-groups\",\r\n\r\n            label:\"Groepjes samen\",\r\n\r\n            question:\r\n            \"Hoeveel hartjes zijn dit samen?\",\r\n\r\n            helper:\r\n            \"Tel de groepjes handig.\",\r\n\r\n            groups:[\r\n              3,\r\n              3,\r\n              3\r\n            ],\r\n\r\n            icon:\"\ud83d\udc9a\",\r\n\r\n            correct:\"9\"\r\n\r\n          },\r\n\r\n\r\n          {\r\n\r\n            type:\"text-groups\",\r\n\r\n            label:\"Zelf toepassen\",\r\n\r\n            question:\r\n            \"Hoeveel ballen zijn er samen?\",\r\n\r\n            helper:\r\n            \"Vier groepjes van twee.\",\r\n\r\n            groups:[\r\n              2,\r\n              2,\r\n              2,\r\n              2\r\n            ],\r\n\r\n            icon:\"\ud83d\udd35\",\r\n\r\n            correct:\"8\"\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 tgLevel=0;\r\n    let tgQuestion=0;\r\n    let tgCorrect=0;\r\n    let tgAnswered=false;\r\n\r\n\r\n    const tgTotal=\r\n      tgLevels.reduce(\r\n        function(total,level){\r\n          return total+level.questions.length;\r\n        },\r\n        0\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       DOM\r\n    ========================================= *\/\r\n\r\n    const levelPill=\r\n      document.getElementById(\"tgLevelPill\");\r\n\r\n    const counter=\r\n      document.getElementById(\"tgCounter\");\r\n\r\n    const progress=\r\n      document.getElementById(\"tgProgress\");\r\n\r\n    const type=\r\n      document.getElementById(\"tgType\");\r\n\r\n    const question=\r\n      document.getElementById(\"tgQuestion\");\r\n\r\n    const helper=\r\n      document.getElementById(\"tgHelper\");\r\n\r\n    const stimulus=\r\n      document.getElementById(\"tgStimulus\");\r\n\r\n    const answerArea=\r\n      document.getElementById(\"tgAnswerArea\");\r\n\r\n    const feedback=\r\n      document.getElementById(\"tgFeedback\");\r\n\r\n    const nextWrap=\r\n      document.getElementById(\"tgNextWrap\");\r\n\r\n    const exercise=\r\n      document.getElementById(\"tgExercise\");\r\n\r\n    const transition=\r\n      document.getElementById(\"tgTransition\");\r\n\r\n    const finish=\r\n      document.getElementById(\"tgFinish\");\r\n\r\n    const support=\r\n      document.getElementById(\"tgSupport\");\r\n\r\n    const ifiAvatar=\r\n      document.getElementById(\"tgIfiAvatar\");\r\n\r\n    const ifiMessage=\r\n      document.getElementById(\"tgIfiMessage\");\r\n\r\n\r\n    \/* =========================================\r\n       HELPERS\r\n    ========================================= *\/\r\n\r\n    function normalize(value){\r\n\r\n      return String(value)\r\n        .trim()\r\n        .toLowerCase();\r\n\r\n    }\r\n\r\n\r\n    function shuffle(array){\r\n\r\n      return array\r\n        .map(function(item){\r\n          return{\r\n            item:item,\r\n            random:Math.random()\r\n          };\r\n        })\r\n        .sort(function(a,b){\r\n          return a.random-b.random;\r\n        })\r\n        .map(function(entry){\r\n          return entry.item;\r\n        });\r\n\r\n    }\r\n\r\n\r\n    tgLevels.forEach(\r\n      function(level){\r\n\r\n        level.questions=\r\n          shuffle(level.questions);\r\n\r\n      }\r\n    );\r\n\r\n\r\n    function completedCount(){\r\n\r\n      let amount=0;\r\n\r\n      for(\r\n        let i=0;\r\n        i<tgLevel;\r\n        i++\r\n      ){\r\n\r\n        amount+=\r\n          tgLevels[i].questions.length;\r\n\r\n      }\r\n\r\n      return amount+tgQuestion;\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       IFI\r\n    ========================================= *\/\r\n\r\n    function setIfi(role,message){\r\n\r\n      ifiAvatar.style.opacity=\"0\";\r\n\r\n      ifiAvatar.style.transform=\r\n        \"translateY(6px)\";\r\n\r\n\r\n      setTimeout(\r\n        function(){\r\n\r\n          ifiAvatar.src=\r\n            TG_IFI[role];\r\n\r\n          ifiMessage.textContent=\r\n            message;\r\n\r\n          ifiAvatar.style.opacity=\"1\";\r\n\r\n          ifiAvatar.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       ROUTE\r\n    ========================================= *\/\r\n\r\n    function updateRoute(){\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            \"tgRoute\"+i\r\n          );\r\n\r\n        node.classList.remove(\r\n          \"active\",\r\n          \"done\"\r\n        );\r\n\r\n        if(i-1<tgLevel){\r\n          node.classList.add(\"done\");\r\n        }\r\n\r\n        if(i-1===tgLevel){\r\n          node.classList.add(\"active\");\r\n        }\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       OBJECT\r\n    ========================================= *\/\r\n\r\n    function createObject(icon){\r\n\r\n      const object=\r\n        document.createElement(\"div\");\r\n\r\n      object.className=\"tg-object\";\r\n\r\n      object.textContent=icon;\r\n\r\n      return object;\r\n\r\n    }\r\n\r\n\r\n    function createObjects(amount,icon){\r\n\r\n      const wrap=\r\n        document.createElement(\"div\");\r\n\r\n      wrap.className=\r\n        \"tg-objects\";\r\n\r\n      for(\r\n        let i=0;\r\n        i<amount;\r\n        i++\r\n      ){\r\n\r\n        wrap.appendChild(\r\n          createObject(icon)\r\n        );\r\n\r\n      }\r\n\r\n      return wrap;\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       GROUPS\r\n    ========================================= *\/\r\n\r\n    function createGroups(groups,icon){\r\n\r\n      const wrap=\r\n        document.createElement(\"div\");\r\n\r\n      wrap.className=\r\n        \"tg-groups\";\r\n\r\n\r\n      groups.forEach(\r\n        function(amount,index){\r\n\r\n          const group=\r\n            document.createElement(\"div\");\r\n\r\n          group.className=\r\n            \"tg-group\";\r\n\r\n\r\n          const label=\r\n            document.createElement(\"div\");\r\n\r\n          label.className=\r\n            \"tg-group-label\";\r\n\r\n          label.textContent=\r\n            \"groepje \"+(index+1);\r\n\r\n          group.appendChild(label);\r\n\r\n\r\n          for(\r\n            let i=0;\r\n            i<amount;\r\n            i++\r\n          ){\r\n\r\n            group.appendChild(\r\n              createObject(icon)\r\n            );\r\n\r\n          }\r\n\r\n          wrap.appendChild(group);\r\n\r\n        }\r\n      );\r\n\r\n      return wrap;\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       STIMULUS\r\n    ========================================= *\/\r\n\r\n    function renderStimulus(item){\r\n\r\n      stimulus.innerHTML=\"\";\r\n\r\n\r\n      if(\r\n        item.type===\"objects\"\r\n      ){\r\n\r\n        stimulus.appendChild(\r\n\r\n          createObjects(\r\n            item.amount,\r\n            item.icon\r\n          )\r\n\r\n        );\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      if(\r\n        item.groups\r\n      ){\r\n\r\n        stimulus.appendChild(\r\n\r\n          createGroups(\r\n            item.groups,\r\n            item.icon\r\n          )\r\n\r\n        );\r\n\r\n        return;\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       RENDER\r\n    ========================================= *\/\r\n\r\n    function render(){\r\n\r\n      tgAnswered=false;\r\n\r\n\r\n      const level=\r\n        tgLevels[tgLevel];\r\n\r\n      const item=\r\n        level.questions[tgQuestion];\r\n\r\n\r\n      exercise.style.display=\"block\";\r\n\r\n      transition.style.display=\"none\";\r\n\r\n      finish.style.display=\"none\";\r\n\r\n\r\n      levelPill.textContent=\r\n        level.title;\r\n\r\n\r\n      counter.textContent=\r\n        \"Vraag \"+\r\n        (completedCount()+1)+\r\n        \" van \"+\r\n        tgTotal;\r\n\r\n\r\n      progress.style.width=\r\n        Math.round(\r\n          (\r\n            completedCount() \/\r\n            tgTotal\r\n          )*100\r\n        )+\"%\";\r\n\r\n\r\n      type.textContent=\r\n        item.label;\r\n\r\n      question.textContent=\r\n        item.question;\r\n\r\n      helper.textContent=\r\n        item.helper || \"\";\r\n\r\n      feedback.textContent=\"\";\r\n\r\n      feedback.className=\r\n        \"tg-feedback\";\r\n\r\n      nextWrap.style.display=\r\n        \"none\";\r\n\r\n      answerArea.innerHTML=\"\";\r\n\r\n\r\n      renderStimulus(item);\r\n\r\n\r\n      support.style.display=\r\n        tgLevel===0\r\n        ? \"block\"\r\n        : \"none\";\r\n\r\n\r\n      \/* IFI *\/\r\n\r\n      if(tgLevel===0){\r\n\r\n        setIfi(\r\n          \"uitleg\",\r\n          \"Wijs ieder voorwerp \u00e9\u00e9n keer aan en tel rustig mee. Zo vergeet je niets en tel je niets dubbel.\"\r\n        );\r\n\r\n      }\r\n\r\n      else if(tgLevel===1){\r\n\r\n        setIfi(\r\n          \"denken\",\r\n          \"Nu hoef je niet alleen losse voorwerpen te zien. Kijk ook naar de vakjes: ieder vakje is \u00e9\u00e9n groepje.\"\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        setIfi(\r\n          \"denken\",\r\n          \"Nu ga je de groepjes gebruiken om het totaal zelf te vinden. Je mag nog steeds rustig tellen.\"\r\n        );\r\n\r\n      }\r\n\r\n\r\n      \/* KEUZEVRAAG *\/\r\n\r\n      if(item.answers){\r\n\r\n        const wrap=\r\n          document.createElement(\"div\");\r\n\r\n        wrap.className=\r\n          \"tg-answers\";\r\n\r\n\r\n        shuffle(item.answers)\r\n        .forEach(\r\n          function(answer){\r\n\r\n            const button=\r\n              document.createElement(\"button\");\r\n\r\n            button.type=\"button\";\r\n\r\n            button.className=\r\n              \"tg-answer\";\r\n\r\n            button.textContent=\r\n              answer;\r\n\r\n\r\n            button.addEventListener(\r\n              \"click\",\r\n              function(){\r\n\r\n                submit(\r\n                  answer,\r\n                  button\r\n                );\r\n\r\n              }\r\n            );\r\n\r\n\r\n            wrap.appendChild(button);\r\n\r\n          }\r\n        );\r\n\r\n\r\n        answerArea.appendChild(wrap);\r\n\r\n      }\r\n\r\n\r\n      \/* TYPEVRAAG *\/\r\n\r\n      else{\r\n\r\n        const wrap=\r\n          document.createElement(\"div\");\r\n\r\n        wrap.className=\r\n          \"tg-input-wrap\";\r\n\r\n\r\n        wrap.innerHTML=`\r\n\r\n          <input\r\n            type=\"number\"\r\n            inputmode=\"numeric\"\r\n            class=\"tg-input\"\r\n            id=\"tgInput\"\r\n            placeholder=\"Typ het aantal...\"\r\n            autocomplete=\"off\"\r\n          >\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"tg-check\"\r\n            id=\"tgCheck\">\r\n\r\n            Nakijken \ud83c\udf3f\r\n\r\n          <\/button>\r\n\r\n        `;\r\n\r\n\r\n        answerArea.appendChild(wrap);\r\n\r\n\r\n        const input=\r\n          document.getElementById(\r\n            \"tgInput\"\r\n          );\r\n\r\n\r\n        document\r\n          .getElementById(\r\n            \"tgCheck\"\r\n          )\r\n          .addEventListener(\r\n            \"click\",\r\n            function(){\r\n\r\n              submit(\r\n                input.value,\r\n                input\r\n              );\r\n\r\n            }\r\n          );\r\n\r\n\r\n        input.addEventListener(\r\n          \"keydown\",\r\n          function(event){\r\n\r\n            if(event.key===\"Enter\"){\r\n\r\n              submit(\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       SUBMIT\r\n    ========================================= *\/\r\n\r\n    function submit(value,node){\r\n\r\n      if(tgAnswered){\r\n        return;\r\n      }\r\n\r\n\r\n      tgAnswered=true;\r\n\r\n\r\n      const item=\r\n        tgLevels[tgLevel]\r\n        .questions[tgQuestion];\r\n\r\n\r\n      const correct=\r\n        normalize(value)===\r\n        normalize(item.correct);\r\n\r\n\r\n      if(correct){\r\n\r\n        tgCorrect++;\r\n\r\n        node.classList.add(\r\n          \"correct\"\r\n        );\r\n\r\n        feedback.textContent=\r\n          [\r\n            \"Mooi geteld.\",\r\n            \"Ja, precies.\",\r\n            \"Dat klopt.\",\r\n            \"Goed gezien.\"\r\n          ][\r\n            Math.floor(\r\n              Math.random()*4\r\n            )\r\n          ];\r\n\r\n        feedback.className=\r\n          \"tg-feedback good\";\r\n\r\n\r\n        setIfi(\r\n          \"goed\",\r\n          [\r\n            \"Mooi gedaan. Je hebt rustig en precies geteld.\",\r\n            \"Ja, precies. Je zag de groepjes goed.\",\r\n            \"Dat klopt. Goed gekeken naar het totaal.\",\r\n            \"Goed gedaan. Ga maar rustig verder.\"\r\n          ][\r\n            Math.floor(\r\n              Math.random()*4\r\n            )\r\n          ]\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        node.classList.add(\r\n          \"wrong\"\r\n        );\r\n\r\n        feedback.textContent=\r\n          \"Kijk nog eens rustig. Het goede antwoord is \"+\r\n          item.correct+\r\n          \".\";\r\n\r\n        feedback.className=\r\n          \"tg-feedback retry\";\r\n\r\n\r\n        if(tgLevel===0){\r\n\r\n          setIfi(\r\n            \"denken\",\r\n            \"Dat geeft niet. Begin opnieuw bij \u00e9\u00e9n en wijs ieder voorwerp maar \u00e9\u00e9n keer aan.\"\r\n          );\r\n\r\n        }\r\n\r\n        else if(tgLevel===1){\r\n\r\n          setIfi(\r\n            \"denken\",\r\n            \"Kijk eerst hoeveel groepjes je ziet. Daarna kun je kijken hoeveel er in ieder groepje zitten.\"\r\n          );\r\n\r\n        }\r\n\r\n        else{\r\n\r\n          setIfi(\r\n            \"denken\",\r\n            \"Probeer ieder groepje apart te tellen. Daarna tel je de groepjes rustig bij elkaar op.\"\r\n          );\r\n\r\n        }\r\n\r\n      }\r\n\r\n\r\n      answerArea\r\n        .querySelectorAll(\r\n          \"button,input\"\r\n        )\r\n        .forEach(\r\n          function(element){\r\n            element.disabled=true;\r\n          }\r\n        );\r\n\r\n\r\n      nextWrap.style.display=\r\n        \"block\";\r\n\r\n\r\n      window.dispatchEvent(\r\n        new CustomEvent(\r\n          \"withifi:tellen-groepjes-answer\",\r\n          {\r\n            detail:{\r\n              world:\"getallenwereld\",\r\n              topic:\"Tellen & groepjes\",\r\n              level:tgLevel+1,\r\n              questionType:item.type,\r\n              answer:value,\r\n              expected:item.correct,\r\n              isCorrect: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 next(){\r\n\r\n      tgQuestion++;\r\n\r\n\r\n      if(\r\n        tgQuestion <\r\n        tgLevels[tgLevel]\r\n          .questions.length\r\n      ){\r\n\r\n        render();\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      if(\r\n        tgLevel <\r\n        tgLevels.length-1\r\n      ){\r\n\r\n        showTransition();\r\n\r\n        return;\r\n\r\n      }\r\n\r\n\r\n      complete();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       TRANSITION\r\n    ========================================= *\/\r\n\r\n    function showTransition(){\r\n\r\n      exercise.style.display=\"none\";\r\n\r\n      transition.style.display=\"block\";\r\n\r\n\r\n      if(tgLevel===0){\r\n\r\n        document\r\n          .getElementById(\r\n            \"tgTransitionTitle\"\r\n          )\r\n          .textContent=\r\n          \"\ud83c\udf3f Klaar voor Level 2\";\r\n\r\n\r\n        document\r\n          .getElementById(\r\n            \"tgTransitionText\"\r\n          )\r\n          .textContent=\r\n          \"Je kunt losse voorwerpen al rustig tellen. Nu gaan we ontdekken dat voorwerpen ook in groepjes kunnen staan.\";\r\n\r\n\r\n        setIfi(\r\n          \"uitleg\",\r\n          \"Nu maken we het overzichtelijker. In plaats van alleen losse dingen te tellen, gaan we kijken welke dingen bij elkaar horen.\"\r\n        );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        document\r\n          .getElementById(\r\n            \"tgTransitionTitle\"\r\n          )\r\n          .textContent=\r\n          \"\ud83c\udf33 Klaar voor Level 3\";\r\n\r\n\r\n        document\r\n          .getElementById(\r\n            \"tgTransitionText\"\r\n          )\r\n          .textContent=\r\n          \"Je kunt groepjes herkennen en samen tellen. Nu mag je zelf het totaal bedenken zonder antwoordknoppen.\";\r\n\r\n\r\n        setIfi(\r\n          \"goed\",\r\n          \"Ik zie dat je er klaar voor bent. Nu ga jij de groepjes gebruiken om zelf het antwoord te vinden.\"\r\n        );\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    function nextLevel(){\r\n\r\n      tgLevel++;\r\n\r\n      tgQuestion=0;\r\n\r\n      updateRoute();\r\n\r\n      render();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       COMPLETE\r\n    ========================================= *\/\r\n\r\n    function complete(){\r\n\r\n      exercise.style.display=\"none\";\r\n\r\n      transition.style.display=\"none\";\r\n\r\n      finish.style.display=\"block\";\r\n\r\n\r\n      progress.style.width=\"100%\";\r\n\r\n\r\n      const percentage=\r\n        Math.round(\r\n          (\r\n            tgCorrect\/\r\n            tgTotal\r\n          )*100\r\n        );\r\n\r\n\r\n      document\r\n        .getElementById(\r\n          \"tgResult\"\r\n        )\r\n        .innerHTML=\r\n\r\n        \"Je hebt alle drie de levels doorlopen.<br>\"+\r\n\r\n        \"Je had <strong>\"+\r\n        tgCorrect+\r\n        \" van de \"+\r\n        tgTotal+\r\n        \"<\/strong> opdrachten goed (\"+\r\n        percentage+\r\n        \"%).<br><br>\"+\r\n\r\n        \"Je hebt geoefend met \u00e9\u00e9n voor \u00e9\u00e9n tellen, groepjes herkennen en groepjes samen gebruiken.\";\r\n\r\n\r\n      setIfi(\r\n        \"goed\",\r\n        \"Goed gedaan. Je kunt nu niet alleen losse dingen tellen, maar ook groepjes gebruiken om aantallen sneller te begrijpen.\"\r\n      );\r\n\r\n\r\n      window.dispatchEvent(\r\n        new CustomEvent(\r\n          \"withifi:tellen-groepjes-complete\",\r\n          {\r\n            detail:{\r\n              world:\"getallenwereld\",\r\n              topic:\"Tellen & groepjes\",\r\n              levelsCompleted:3,\r\n              correct:tgCorrect,\r\n              total:tgTotal,\r\n              percentage:percentage\r\n            }\r\n          }\r\n        )\r\n      );\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       RESTART\r\n    ========================================= *\/\r\n\r\n    function restart(){\r\n\r\n      tgLevel=0;\r\n\r\n      tgQuestion=0;\r\n\r\n      tgCorrect=0;\r\n\r\n      tgAnswered=false;\r\n\r\n\r\n      tgLevels.forEach(\r\n        function(level){\r\n\r\n          level.questions=\r\n            shuffle(level.questions);\r\n\r\n        }\r\n      );\r\n\r\n\r\n      updateRoute();\r\n\r\n      render();\r\n\r\n    }\r\n\r\n\r\n    \/* =========================================\r\n       EVENTS\r\n    ========================================= *\/\r\n\r\n    document\r\n      .getElementById(\r\n        \"tgNext\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        next\r\n      );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"tgNextLevel\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        nextLevel\r\n      );\r\n\r\n\r\n    document\r\n      .getElementById(\r\n        \"tgRestart\"\r\n      )\r\n      .addEventListener(\r\n        \"click\",\r\n        restart\r\n      );\r\n\r\n\r\n    \/* =========================================\r\n       START\r\n    ========================================= *\/\r\n\r\n    updateRoute();\r\n\r\n    render();\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>\ud83e\uddfa Getallenwereld Oefenen met tellen &#038; groepjes. Eerst tellen we dingen \u00e9\u00e9n voor \u00e9\u00e9n. Daarna ontdekken we dat je aantallen ook in groepjes kunt zien. Zo wordt tellen steeds overzichtelijker. \ud83c\udf31 Level 1 \u00b7 Tellen Tel losse voorwerpen \u00e9\u00e9n voor \u00e9\u00e9n. \ud83c\udf3f Level 2 \u00b7 Groepjes zien Ontdek hoeveel voorwerpen in elk groepje zitten. \ud83c\udf33 [&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-2056","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/2056","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=2056"}],"version-history":[{"count":25,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/2056\/revisions"}],"predecessor-version":[{"id":4682,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/2056\/revisions\/4682"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2056"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}