{"id":2307,"date":"2026-05-13T03:28:27","date_gmt":"2026-05-13T03:28:27","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?p=2307"},"modified":"2026-06-18T02:41:03","modified_gmt":"2026-06-18T02:41:03","slug":"tafel-van-1","status":"publish","type":"post","link":"https:\/\/withifi.muhubonurture.nl\/?p=2307","title":{"rendered":"Tafel Van 1"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2307\" class=\"elementor elementor-2307\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-925d44e e-con-full e-flex e-con e-parent\" data-id=\"925d44e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0daa6e5 elementor-widget elementor-widget-html\" data-id=\"0daa6e5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- COPY-PASTE VOOR ELEMENTOR -->\r\n\r\n<style>\r\nbody{\r\n  margin:0;\r\n  font-family:'Inter',sans-serif;\r\n}\r\n\r\n.tafel-page{\r\n  min-height:100vh;\r\n  padding:7rem 7vw 4rem;\r\n  color:#3A2B24;\r\n\r\n  background:\r\n    radial-gradient(circle at 18% 20%, rgba(255,255,255,0.78) 0%, transparent 30%),\r\n    radial-gradient(circle at 82% 28%, rgba(210,235,255,0.42) 0%, transparent 32%),\r\n    radial-gradient(circle at 50% 82%, rgba(255,244,228,0.42) 0%, transparent 36%),\r\n    linear-gradient(135deg,#F9FBF8 0%,#EEF7F3 45%,#F7FBF8 100%);\r\n}\r\n\r\n.tafel-hero{\r\n  max-width:980px;\r\n  margin:0 auto 3.5rem;\r\n  padding:3.4rem;\r\n  border-radius:42px;\r\n  background:rgba(255,255,255,0.62);\r\n  border:1px solid rgba(255,255,255,0.96);\r\n  box-shadow:0 16px 42px rgba(90,70,55,0.08);\r\n  backdrop-filter:blur(16px);\r\n  -webkit-backdrop-filter:blur(16px);\r\n  text-align:center;\r\n}\r\n\r\n.tafel-label{\r\n  display:inline-block;\r\n  margin-bottom:22px;\r\n  padding:11px 20px;\r\n  border-radius:999px;\r\n  background:rgba(255,255,255,0.72);\r\n  border:1px solid rgba(255,255,255,0.95);\r\n  color:#8B6B55;\r\n  font-size:15px;\r\n  font-weight:900;\r\n}\r\n\r\n.tafel-hero h1{\r\n  font-size:clamp(44px,6vw,74px);\r\n  line-height:1;\r\n  margin:0 0 24px;\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n}\r\n\r\n.tafel-hero p{\r\n  font-size:19px;\r\n  line-height:1.9;\r\n  color:#7A6455;\r\n  font-weight:650;\r\n  max-width:760px;\r\n  margin:0 auto;\r\n}\r\n\r\n.route-blok,\r\n.oefenblok,\r\n.level2-blok,\r\n.level3-blok{\r\n  max-width:1120px;\r\n  margin:0 auto 4rem;\r\n}\r\n\r\n.route-kop{\r\n  margin-bottom:1.7rem;\r\n}\r\n\r\n.route-title{\r\n  font-size:clamp(32px,4vw,48px);\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n  margin:0 0 .7rem;\r\n}\r\n\r\n.route-text,\r\n.uitleg-sub{\r\n  font-size:18px;\r\n  line-height:1.8;\r\n  color:#7A6455;\r\n  font-weight:650;\r\n  max-width:820px;\r\n  margin:0;\r\n}\r\n\r\n.route-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n  gap:1.4rem;\r\n}\r\n\r\n.route-card,\r\n.uitleg-card,\r\n.oefenblok,\r\n.level2-blok,\r\n.level3-blok{\r\n  padding:1.8rem;\r\n  border-radius:34px;\r\n  background:rgba(255,255,255,0.58);\r\n  border:1px solid rgba(255,255,255,0.94);\r\n  box-shadow:0 10px 28px rgba(90,70,55,0.06);\r\n  color:#3A2B24;\r\n  position:relative;\r\n  overflow:hidden;\r\n}\r\n\r\n.route-card::before,\r\n.uitleg-card::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  right:-42px;\r\n  top:-42px;\r\n  width:128px;\r\n  height:128px;\r\n  border-radius:50%;\r\n  background:rgba(255,255,255,0.52);\r\n}\r\n\r\n.route-card:nth-child(1),\r\n.uitleg-card:nth-child(1){\r\n  background:linear-gradient(135deg,#FFF4E3 0%,#FFF9EF 100%);\r\n}\r\n\r\n.route-card:nth-child(2),\r\n.uitleg-card:nth-child(2){\r\n  background:linear-gradient(135deg,#EAF7F1 0%,#F7FFFB 100%);\r\n}\r\n\r\n.route-card:nth-child(3),\r\n.uitleg-card:nth-child(3){\r\n  background:linear-gradient(135deg,#FFEAF1 0%,#FFF7FA 100%);\r\n}\r\n\r\n.route-card:hover,\r\n.uitleg-card:hover{\r\n  transform:translateY(-6px) scale(1.01);\r\n  background:rgba(255,255,255,0.78);\r\n  box-shadow:0 18px 38px rgba(90,70,55,0.11);\r\n}\r\n\r\n.route-card,\r\n.uitleg-card{\r\n  transition:.25s ease;\r\n}\r\n\r\n.card-top{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:1rem;\r\n  margin-bottom:1.1rem;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n.card-icon{\r\n  width:58px;\r\n  height:58px;\r\n  border-radius:22px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  background:rgba(255,255,255,0.76);\r\n  box-shadow:0 8px 20px rgba(90,70,55,0.08);\r\n  font-size:1.8rem;\r\n  flex-shrink:0;\r\n}\r\n\r\n.route-card h3,\r\n.uitleg-card h3{\r\n  margin:0;\r\n  font-size:1.22rem;\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n.route-card p,\r\n.uitleg-card p{\r\n  margin:0;\r\n  color:#7A6455;\r\n  line-height:1.8;\r\n  font-weight:650;\r\n  font-size:1rem;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n.uitleg-card{\r\n  max-width:1120px;\r\n  margin:0 auto 4rem;\r\n  text-align:center;\r\n}\r\n\r\n.groepjes{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:1rem;\r\n  margin:1.5rem 0;\r\n  justify-content:center;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n.groep{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:.45rem;\r\n  padding:.9rem;\r\n  border-radius:24px;\r\n  background:rgba(255,255,255,0.78);\r\n  box-shadow:0 8px 18px rgba(90,70,55,0.05);\r\n}\r\n\r\n.item{\r\n  width:42px;\r\n  height:42px;\r\n  border-radius:16px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  background:#FFE8D2;\r\n  font-size:1.35rem;\r\n}\r\n\r\n.somregel{\r\n  margin:1.4rem auto 0;\r\n  max-width:420px;\r\n  padding:1rem 1.2rem;\r\n  border-radius:24px;\r\n  background:rgba(255,255,255,0.72);\r\n  color:#3A2B24;\r\n  font-size:1.55rem;\r\n  font-weight:900;\r\n  text-align:center;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n.oefenblok,\r\n.level2-blok,\r\n.level3-blok{\r\n  padding:2.8rem;\r\n  border-radius:42px;\r\n  background:rgba(255,255,255,0.62);\r\n  border:1px solid rgba(255,255,255,0.96);\r\n  box-shadow:0 16px 42px rgba(90,70,55,0.08);\r\n  backdrop-filter:blur(16px);\r\n  -webkit-backdrop-filter:blur(16px);\r\n}\r\n\r\n.level2-blok,\r\n.level3-blok{\r\n  display:none;\r\n}\r\n\r\n.level2-blok.actief,\r\n.level3-blok.actief{\r\n  display:block;\r\n}\r\n\r\n.uitleg-title{\r\n  font-size:clamp(30px,4vw,44px);\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n  margin:0 0 1rem;\r\n  text-align:center;\r\n}\r\n\r\n.oefen-top{\r\n  display:flex;\r\n  justify-content:space-between;\r\n  align-items:center;\r\n  gap:1rem;\r\n  flex-wrap:wrap;\r\n  margin-bottom:1.2rem;\r\n}\r\n\r\n.level-pill,\r\n.score-pill{\r\n  padding:10px 16px;\r\n  border-radius:999px;\r\n  background:rgba(255,255,255,0.78);\r\n  border:1px solid rgba(255,255,255,0.95);\r\n  color:#8B6B55;\r\n  font-size:14px;\r\n  font-weight:900;\r\n}\r\n\r\n.progress-wrap{\r\n  width:100%;\r\n  height:12px;\r\n  border-radius:999px;\r\n  background:rgba(255,255,255,0.72);\r\n  overflow:hidden;\r\n  margin:10px 0 2rem;\r\n}\r\n\r\n.progress-bar{\r\n  height:100%;\r\n  width:0%;\r\n  border-radius:999px;\r\n  background:#A8D5FF;\r\n  transition:width .35s ease;\r\n}\r\n\r\n.vraag-card{\r\n  padding:2rem;\r\n  border-radius:34px;\r\n  background:linear-gradient(135deg,#FFF4E3 0%,#FFF9EF 100%);\r\n  border:1px solid rgba(255,255,255,0.94);\r\n}\r\n\r\n.vraag{\r\n  font-size:1.65rem;\r\n  font-weight:900;\r\n  color:#3A2B24;\r\n  text-align:center;\r\n  margin-bottom:1rem;\r\n}\r\n\r\n.helper{\r\n  color:#7A6455;\r\n  font-weight:750;\r\n  margin-bottom:1rem;\r\n  line-height:1.7;\r\n  text-align:center;\r\n}\r\n\r\n.antwoorden{\r\n  display:flex;\r\n  gap:1rem;\r\n  justify-content:center;\r\n  flex-wrap:wrap;\r\n  margin-top:1.4rem;\r\n}\r\n\r\n.knop{\r\n  min-width:100px;\r\n  padding:1rem 1.7rem;\r\n  border-radius:999px;\r\n  background:rgba(255,255,255,0.94);\r\n  color:#3A2B24 !important;\r\n  font-size:1.25rem;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n  border:2px solid rgba(232,205,188,0.65);\r\n  box-shadow:0 8px 20px rgba(90,70,55,0.06);\r\n  transition:.25s ease;\r\n}\r\n\r\n.knop:hover:not(:disabled){\r\n  transform:translateY(-3px);\r\n  background:#DDEEFF;\r\n}\r\n\r\n.knop:disabled{\r\n  cursor:default;\r\n}\r\n\r\n.knop.juist{\r\n  background:#DDF5E4 !important;\r\n  color:#2F6A46 !important;\r\n  border-color:#B9DEC5 !important;\r\n}\r\n\r\n.knop.fout{\r\n  background:#FFE3E3 !important;\r\n  color:#9A4B4B !important;\r\n  border-color:#F3C4C4 !important;\r\n}\r\n\r\n.feedback{\r\n  display:none;\r\n  margin-top:1.5rem;\r\n  padding:1rem;\r\n  border-radius:20px;\r\n  background:rgba(255,255,255,0.75);\r\n  color:#7A6455;\r\n  font-weight:850;\r\n  line-height:1.8;\r\n  text-align:center;\r\n}\r\n\r\n.feedback strong{\r\n  display:inline-block;\r\n  margin-top:.4rem;\r\n  padding:.45rem 1rem;\r\n  border-radius:999px;\r\n  background:#DDEEFF;\r\n  color:#3A2B24;\r\n}\r\n\r\n.volgende{\r\n  display:none;\r\n  margin-top:1.6rem;\r\n  text-align:center;\r\n}\r\n\r\n.volgende button,\r\n.check-btn{\r\n  padding:1rem 2.1rem;\r\n  border-radius:999px;\r\n  border:none;\r\n  background:#A8D5FF;\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n  box-shadow:0 8px 20px rgba(90,70,55,0.08);\r\n  transition:.25s ease;\r\n}\r\n\r\n.volgende button:hover,\r\n.check-btn:hover{\r\n  transform:translateY(-3px);\r\n  background:#DDEEFF;\r\n}\r\n\r\n.level2-grid{\r\n  margin-top:2rem;\r\n  display:grid;\r\n  grid-template-columns:repeat(2,1fr);\r\n  gap:1rem;\r\n}\r\n\r\n.level2-card{\r\n  background:linear-gradient(135deg,#FFF4E3 0%,#FFF9EF 100%);\r\n  border-radius:28px;\r\n  padding:1.6rem;\r\n  display:flex;\r\n  flex-direction:column;\r\n  align-items:center;\r\n  justify-content:center;\r\n  gap:1rem;\r\n  text-align:center;\r\n  box-shadow:0 8px 20px rgba(90,70,55,0.05);\r\n}\r\n\r\n.level2-card h3{\r\n  margin:0;\r\n  font-size:1.25rem;\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n}\r\n\r\n.level2-input{\r\n  width:90px;\r\n  height:58px;\r\n  border-radius:20px;\r\n  border:2px solid #FFD6A8;\r\n  text-align:center;\r\n  font-size:1.35rem;\r\n  font-weight:900;\r\n  background:white;\r\n  color:#3A2B24;\r\n}\r\n\r\n.level2-feedback,\r\n.level3-feedback{\r\n  margin-top:2rem;\r\n  padding:1rem;\r\n  border-radius:22px;\r\n  background:rgba(255,255,255,0.65);\r\n  line-height:1.8;\r\n  color:#7A6455;\r\n  font-weight:800;\r\n}\r\n\r\n.reminder-box{\r\n  max-width:780px;\r\n  margin:4rem auto 0;\r\n  padding:2rem;\r\n  border-radius:30px;\r\n  background:\r\n    radial-gradient(circle at 12% 18%, rgba(255,255,255,.85) 0%, transparent 34%),\r\n    radial-gradient(circle at 88% 22%, rgba(255,234,242,.58) 0%, transparent 34%),\r\n    linear-gradient(135deg,#FFF8EF 0%,#F3FBF8 48%,#EEF7FE 100%);\r\n  border:1px solid rgba(255,255,255,0.94);\r\n  box-shadow:0 16px 38px rgba(90,70,55,.08);\r\n  color:#7A6455;\r\n  font-size:18px;\r\n  line-height:1.9;\r\n  font-weight:650;\r\n  text-align:center;\r\n}\r\n\r\n@media(max-width:900px){\r\n  .tafel-page{\r\n    padding:5rem 6vw 3rem;\r\n  }\r\n\r\n  .tafel-hero,\r\n  .oefenblok,\r\n  .level2-blok,\r\n  .level3-blok{\r\n    padding:2.4rem;\r\n  }\r\n\r\n  .route-grid,\r\n  .level2-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .route-kop{\r\n    text-align:center;\r\n  }\r\n\r\n  .route-text,\r\n  .uitleg-sub{\r\n    margin-left:auto;\r\n    margin-right:auto;\r\n  }\r\n\r\n  .card-top{\r\n    flex-direction:column;\r\n    text-align:center;\r\n  }\r\n\r\n  .route-card,\r\n  .uitleg-card{\r\n    text-align:center;\r\n  }\r\n\r\n  .oefen-top{\r\n    justify-content:center;\r\n  }\r\n\r\n  .knop{\r\n    width:100%;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"tafel-page\">\r\n\r\n  <div class=\"tafel-hero\">\r\n    <div class=\"tafel-label\">\u2716\ufe0f Werkblad tafels<\/div>\r\n\r\n    <h1>Tafel van 1.<\/h1>\r\n\r\n    <p>\r\n      Vandaag oefenen we met \u00e9\u00e9n voor \u00e9\u00e9n verzamelen.\r\n      Bij de tafel van 1 komt er steeds \u00e9\u00e9n ding bij.\r\n      Rustig kijken, tellen en ontdekken \ud83c\udf3f\r\n    <\/p>\r\n  <\/div>\r\n\r\n  <div class=\"route-blok\">\r\n    <div class=\"route-kop\">\r\n      <h2 class=\"route-title\">\ud83c\udf31 Eerst begrijpen<\/h2>\r\n      <p class=\"route-text\">\r\n        Bij de tafel van 1 zit er in elk groepje precies \u00e9\u00e9n ding.\r\n        Het antwoord blijft hetzelfde als het aantal groepjes.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"route-grid\">\r\n      <div class=\"route-card\">\r\n        <div class=\"card-top\">\r\n          <div class=\"card-icon\">\ud83e\uddfa<\/div>\r\n          <h3>E\u00e9n in elk mandje<\/h3>\r\n        <\/div>\r\n        <p>In elk groepje zit precies \u00e9\u00e9n ding.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"route-card\">\r\n        <div class=\"card-top\">\r\n          <div class=\"card-icon\">\ud83d\udc40<\/div>\r\n          <h3>Rustig kijken<\/h3>\r\n        <\/div>\r\n        <p>Je kijkt hoeveel groepjes er zijn.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"route-card\">\r\n        <div class=\"card-top\">\r\n          <div class=\"card-icon\">\ud83c\udf38<\/div>\r\n          <h3>Het blijft hetzelfde<\/h3>\r\n        <\/div>\r\n        <p>Vier groepjes van 1 zijn gewoon 4.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"uitleg-card\">\r\n    <h2 class=\"uitleg-title\">\ud83c\udf31 Kijk naar de mandjes<\/h2>\r\n\r\n    <div class=\"uitleg-sub\">\r\n      In elk mandje zit \u00e9\u00e9n appel.\r\n      Tel de mandjes. Dan weet je hoeveel appels er samen zijn.\r\n    <\/div>\r\n\r\n    <div class=\"groepjes\">\r\n      <div class=\"groep\"><div class=\"item\">\ud83c\udf4e<\/div><\/div>\r\n      <div class=\"groep\"><div class=\"item\">\ud83c\udf4e<\/div><\/div>\r\n      <div class=\"groep\"><div class=\"item\">\ud83c\udf4e<\/div><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"somregel\">3 \u00d7 1 = 3<\/div>\r\n\r\n    <div class=\"uitleg-sub\" style=\"margin-top:1rem;\">\r\n      Dat betekent: 3 groepjes van 1.\r\n      Het antwoord is hetzelfde als het aantal groepjes.\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"oefenblok\">\r\n\r\n    <div class=\"oefen-top\">\r\n      <div class=\"level-pill\">\ud83c\udf31 Level 1: Mandjes tellen<\/div>\r\n      <div class=\"score-pill\" id=\"scoreTekst\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"progress-wrap\">\r\n      <div class=\"progress-bar\" id=\"progressBar\"><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"vraag-card\">\r\n      <div class=\"vraag\" id=\"vraag\"><\/div>\r\n      <div class=\"groepjes\" id=\"groepjes\"><\/div>\r\n      <div class=\"helper\" id=\"helper\"><\/div>\r\n      <div class=\"antwoorden\" id=\"antwoorden\"><\/div>\r\n      <div class=\"feedback\" id=\"feedback\"><\/div>\r\n\r\n      <div class=\"volgende\" id=\"volgende\">\r\n        <button id=\"volgendeBtn\">Volgende vraag \ud83c\udf3f<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"level2-blok\" id=\"level2Blok\">\r\n\r\n    <div class=\"uitleg-title\">\ud83c\udf38 Level 2: Wat blijft hetzelfde?<\/div>\r\n\r\n    <div class=\"uitleg-sub\" style=\"text-align:center;margin:auto;\">\r\n      Bij de tafel van 1 blijft het getal hetzelfde.\r\n      Vul rustig het antwoord in.\r\n    <\/div>\r\n\r\n    <div class=\"level2-grid\" id=\"level2Grid\"><\/div>\r\n\r\n    <div style=\"margin-top:2rem;text-align:center;\">\r\n      <button class=\"check-btn\" id=\"level2Check\">Nakijken \ud83c\udf3f<\/button>\r\n    <\/div>\r\n\r\n    <div class=\"level2-feedback\" id=\"level2Feedback\"><\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"level3-blok\" id=\"level3Blok\">\r\n\r\n    <div class=\"uitleg-title\">\u2728 Level 3: Sommetjes<\/div>\r\n\r\n    <div class=\"uitleg-sub\" style=\"text-align:center;margin:auto;\">\r\n      Nu oefenen we de sommen.\r\n      Denk aan de regel: bij keer 1 blijft het getal hetzelfde.\r\n    <\/div>\r\n\r\n    <div class=\"vraag-card\" style=\"margin-top:2rem;\">\r\n\r\n      <div class=\"oefen-top\">\r\n        <div class=\"level-pill\">\u2728 Level 3<\/div>\r\n        <div class=\"score-pill\" id=\"level3Score\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"progress-wrap\">\r\n        <div class=\"progress-bar\" id=\"level3Progress\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"vraag\" id=\"level3Vraag\"><\/div>\r\n      <div class=\"helper\" id=\"level3Helper\"><\/div>\r\n      <div class=\"antwoorden\" id=\"level3Antwoorden\"><\/div>\r\n      <div class=\"feedback\" id=\"level3Feedback\"><\/div>\r\n\r\n      <div class=\"volgende\" id=\"level3Volgende\">\r\n        <button id=\"level3VolgendeBtn\">Volgende som \ud83c\udf3f<\/button>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"reminder-box\">\r\n    Kleine reminder \ud83c\udf38<br>\r\n    Bij de tafel van 1 blijft het getal hetzelfde.<br>\r\n    1 \u00d7 4 = 4 en 1 \u00d7 8 = 8.\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n\r\n  const TAFEL_NUMMER = 1;\r\n  const figuren = ['\ud83c\udf4e','\ud83c\udf38','\u2b50','\ud83d\udc1d','\ud83e\uddf8','\ud83c\udf53','\ud83c\udf19','\ud83c\udf40','\ud83e\udd8b','\ud83d\udc9b'];\r\n\r\n  const vragen = Array.from({length:10}, (_, i) => {\r\n    const groepjes = i + 1;\r\n    const antwoord = groepjes;\r\n\r\n    return {\r\n      groepjes:groepjes,\r\n      perGroep:1,\r\n      figuur:figuren[i % figuren.length],\r\n      antwoord:String(antwoord),\r\n      opties:maakOpties(antwoord)\r\n    };\r\n  });\r\n\r\n  const level3Vragen = Array.from({length:10}, (_, i) => {\r\n    const getal = i + 1;\r\n    const antwoord = getal;\r\n\r\n    return {\r\n      som:`${getal} \u00d7 1`,\r\n      antwoord:String(antwoord),\r\n      opties:maakOpties(antwoord)\r\n    };\r\n  });\r\n\r\n  let vraagIndex = 0;\r\n  let goedAantal = 0;\r\n  let locked = false;\r\n  let huidigItem = null;\r\n\r\n  let level3Index = 0;\r\n  let level3Goed = 0;\r\n  let level3Locked = false;\r\n  let huidigLevel3 = null;\r\n\r\n  const scoreTekst = document.getElementById('scoreTekst');\r\n  const progressBar = document.getElementById('progressBar');\r\n  const vraagEl = document.getElementById('vraag');\r\n  const groepjesEl = document.getElementById('groepjes');\r\n  const helperEl = document.getElementById('helper');\r\n  const antwoordenEl = document.getElementById('antwoorden');\r\n  const feedbackEl = document.getElementById('feedback');\r\n  const volgende = document.getElementById('volgende');\r\n  const volgendeBtn = document.getElementById('volgendeBtn');\r\n\r\n  const level2Blok = document.getElementById('level2Blok');\r\n  const level2Grid = document.getElementById('level2Grid');\r\n  const level2Check = document.getElementById('level2Check');\r\n  const level2Feedback = document.getElementById('level2Feedback');\r\n\r\n  const level3Blok = document.getElementById('level3Blok');\r\n  const level3Score = document.getElementById('level3Score');\r\n  const level3Progress = document.getElementById('level3Progress');\r\n  const level3Vraag = document.getElementById('level3Vraag');\r\n  const level3Helper = document.getElementById('level3Helper');\r\n  const level3Antwoorden = document.getElementById('level3Antwoorden');\r\n  const level3Feedback = document.getElementById('level3Feedback');\r\n  const level3Volgende = document.getElementById('level3Volgende');\r\n  const level3VolgendeBtn = document.getElementById('level3VolgendeBtn');\r\n\r\n  function maakOpties(antwoord){\r\n    let opties = [\r\n      antwoord,\r\n      Math.max(1, antwoord - 1),\r\n      antwoord + 1\r\n    ];\r\n\r\n    opties = [...new Set(opties.map(String))];\r\n\r\n    while(opties.length < 3){\r\n      const extra = String(Number(antwoord) + opties.length + 1);\r\n      if(!opties.includes(extra)){\r\n        opties.push(extra);\r\n      }\r\n    }\r\n\r\n    return opties;\r\n  }\r\n\r\n  function shuffle(arr){\r\n    return [...arr].sort(() => Math.random() - 0.5);\r\n  }\r\n\r\n  function toonGroepjes(container, aantalGroepjes, figuur){\r\n    container.innerHTML = '';\r\n\r\n    for(let g = 0; g < aantalGroepjes; g++){\r\n      const groep = document.createElement('div');\r\n      groep.className = 'groep';\r\n      groep.innerHTML = `<div class=\"item\">${figuur}<\/div>`;\r\n      container.appendChild(groep);\r\n    }\r\n  }\r\n\r\n  function resetVraag(){\r\n    locked = false;\r\n    feedbackEl.style.display = 'none';\r\n    feedbackEl.innerHTML = '';\r\n    antwoordenEl.innerHTML = '';\r\n    groepjesEl.innerHTML = '';\r\n    volgende.style.display = 'none';\r\n  }\r\n\r\n  function laadVraag(){\r\n    resetVraag();\r\n\r\n    const item = vragen[vraagIndex];\r\n    huidigItem = item;\r\n\r\n    scoreTekst.textContent = `Vraag ${vraagIndex + 1} van ${vragen.length}`;\r\n    progressBar.style.width = `${(vraagIndex \/ vragen.length) * 100}%`;\r\n\r\n    vraagEl.textContent = 'Hoeveel dingen zijn er samen?';\r\n\r\n    toonGroepjes(\r\n      groepjesEl,\r\n      item.groepjes,\r\n      item.figuur\r\n    );\r\n\r\n    helperEl.textContent =\r\n    `${item.groepjes} mandjes met steeds 1 ding`;\r\n\r\n    shuffle(item.opties).forEach(optie => {\r\n      const btn = document.createElement('button');\r\n      btn.className = 'knop';\r\n      btn.textContent = optie;\r\n      btn.onclick = () => controleer(btn, optie);\r\n      antwoordenEl.appendChild(btn);\r\n    });\r\n  }\r\n\r\n  function controleer(btn, keuze){\r\n    if(locked){\r\n      return;\r\n    }\r\n\r\n    if(keuze === huidigItem.antwoord){\r\n      locked = true;\r\n      goedAantal++;\r\n\r\n      antwoordenEl.querySelectorAll('.knop').forEach(k => {\r\n        k.disabled = true;\r\n      });\r\n\r\n      btn.classList.add('juist');\r\n\r\n      feedbackEl.style.display = 'block';\r\n      feedbackEl.innerHTML = `\r\n        \ud83c\udf38 Goed gekeken.<br>\r\n        <strong>${huidigItem.groepjes} \u00d7 1 = ${huidigItem.antwoord}<\/strong><br>\r\n        Het aantal blijft hetzelfde.\r\n      `;\r\n\r\n      volgende.style.display = 'block';\r\n\r\n    }else{\r\n      btn.classList.add('fout');\r\n      feedbackEl.style.display = 'block';\r\n      feedbackEl.innerHTML = '\ud83c\udf3f Kijk rustig nog eens. Tel de mandjes \u00e9\u00e9n voor \u00e9\u00e9n.';\r\n    }\r\n  }\r\n\r\n  volgendeBtn.onclick = () => {\r\n    vraagIndex++;\r\n\r\n    if(vraagIndex >= vragen.length){\r\n      toonKlaar();\r\n    }else{\r\n      laadVraag();\r\n    }\r\n  };\r\n\r\n  function toonKlaar(){\r\n    progressBar.style.width = '100%';\r\n\r\n    vraagEl.textContent = 'Level 1 is klaar \ud83c\udf38';\r\n    groepjesEl.innerHTML = '';\r\n    helperEl.textContent = '';\r\n    antwoordenEl.innerHTML = '';\r\n\r\n    feedbackEl.style.display = 'block';\r\n    feedbackEl.innerHTML = `\r\n      Je hebt ${goedAantal} antwoorden goed gedaan.<br>\r\n      Nu mag je rustig verder met Level 2.\r\n    `;\r\n\r\n    volgende.style.display = 'none';\r\n\r\n    maakLevel2();\r\n    level2Blok.classList.add('actief');\r\n\r\n    setTimeout(() => {\r\n      level2Blok.scrollIntoView({\r\n        behavior:'smooth',\r\n        block:'start'\r\n      });\r\n    }, 500);\r\n  }\r\n\r\n  function maakLevel2(){\r\n    level2Grid.innerHTML = '';\r\n    level2Feedback.innerHTML = '';\r\n\r\n    for(let i = 1; i <= 10; i++){\r\n      const card = document.createElement('div');\r\n      card.className = 'level2-card';\r\n\r\n      card.innerHTML = `\r\n        <h3>${i} \u00d7 1<\/h3>\r\n        <div style=\"color:#7A6455;font-weight:750;\">Het getal blijft hetzelfde.<\/div>\r\n        <input\r\n        type=\"number\"\r\n        class=\"level2-input\"\r\n        data-answer=\"${i}\"\r\n        aria-label=\"antwoord voor ${i} keer 1\">\r\n      `;\r\n\r\n      level2Grid.appendChild(card);\r\n    }\r\n  }\r\n\r\n  level2Check.addEventListener('click', () => {\r\n    const inputs = document.querySelectorAll('.level2-input');\r\n\r\n    let goed = 0;\r\n    let foutenHtml = '';\r\n\r\n    inputs.forEach((input, index) => {\r\n      const juist = Number(input.dataset.answer);\r\n      const ingevuld = Number(input.value);\r\n\r\n      if(juist === ingevuld){\r\n        goed++;\r\n        input.style.background = '#DDF5E4';\r\n      }else{\r\n        input.style.background = '#FFE3E3';\r\n\r\n        foutenHtml += `\r\n          <div>\r\n            ${index + 1} \u00d7 1 = ${juist}<br>\r\n            Jouw antwoord: ${input.value || 'leeg'}\r\n          <\/div>\r\n          <br>\r\n        `;\r\n      }\r\n    });\r\n\r\n    if(goed === inputs.length){\r\n      level2Feedback.innerHTML = `\r\n        \ud83c\udf38 Wauw, alles goed gemaakt.<br>\r\n        Je mag nu door naar Level 3.\r\n      `;\r\n\r\n      level3Blok.classList.add('actief');\r\n\r\n      setTimeout(() => {\r\n        level3Blok.scrollIntoView({\r\n          behavior:'smooth',\r\n          block:'start'\r\n        });\r\n      }, 500);\r\n\r\n      laadLevel3();\r\n\r\n    }else{\r\n      level2Feedback.innerHTML = `\r\n        \ud83c\udf3f Je hebt ${goed} van de ${inputs.length} goed.<br><br>\r\n        <strong>Kijk rustig naar deze sommen:<\/strong><br><br>\r\n        ${foutenHtml}\r\n      `;\r\n    }\r\n  });\r\n\r\n  function resetLevel3(){\r\n    level3Locked = false;\r\n    level3Feedback.style.display = 'none';\r\n    level3Feedback.innerHTML = '';\r\n    level3Antwoorden.innerHTML = '';\r\n    level3Volgende.style.display = 'none';\r\n  }\r\n\r\n  function laadLevel3(){\r\n    resetLevel3();\r\n\r\n    huidigLevel3 = level3Vragen[level3Index];\r\n\r\n    level3Score.textContent =\r\n    `Som ${level3Index + 1} van ${level3Vragen.length}`;\r\n\r\n    level3Progress.style.width =\r\n    `${(level3Index \/ level3Vragen.length) * 100}%`;\r\n\r\n    level3Vraag.textContent = huidigLevel3.som;\r\n    level3Helper.textContent = 'Kies het goede antwoord. Denk: keer 1 blijft hetzelfde.';\r\n\r\n    shuffle(huidigLevel3.opties).forEach(optie => {\r\n      const btn = document.createElement('button');\r\n      btn.className = 'knop';\r\n      btn.textContent = optie;\r\n      btn.onclick = () => controleerLevel3(btn, optie);\r\n      level3Antwoorden.appendChild(btn);\r\n    });\r\n  }\r\n\r\n  function controleerLevel3(btn, keuze){\r\n    if(level3Locked){\r\n      return;\r\n    }\r\n\r\n    if(keuze === huidigLevel3.antwoord){\r\n      level3Locked = true;\r\n      level3Goed++;\r\n\r\n      level3Antwoorden.querySelectorAll('.knop').forEach(k => {\r\n        k.disabled = true;\r\n      });\r\n\r\n      btn.classList.add('juist');\r\n\r\n      level3Feedback.style.display = 'block';\r\n      level3Feedback.innerHTML = `\r\n        \ud83c\udf38 Goed zo.<br>\r\n        <strong>${huidigLevel3.som} = ${huidigLevel3.antwoord}<\/strong><br>\r\n        Het getal blijft hetzelfde.\r\n      `;\r\n\r\n      level3Volgende.style.display = 'block';\r\n\r\n    }else{\r\n      btn.classList.add('fout');\r\n\r\n      level3Feedback.style.display = 'block';\r\n      level3Feedback.innerHTML = '\ud83c\udf3f Kijk rustig nog eens. Bij keer 1 blijft het getal hetzelfde.';\r\n    }\r\n  }\r\n\r\n  level3VolgendeBtn.onclick = () => {\r\n    level3Index++;\r\n\r\n    if(level3Index >= level3Vragen.length){\r\n      toonLevel3Klaar();\r\n    }else{\r\n      laadLevel3();\r\n    }\r\n  };\r\n\r\n  function toonLevel3Klaar(){\r\n    level3Progress.style.width = '100%';\r\n\r\n    level3Vraag.textContent = 'Alle levels zijn klaar \ud83c\udf38';\r\n    level3Helper.textContent = '';\r\n    level3Antwoorden.innerHTML = '';\r\n\r\n    level3Feedback.style.display = 'block';\r\n    level3Feedback.innerHTML = `\r\n      Je hebt ${level3Goed} van de ${level3Vragen.length} sommetjes goed gedaan.<br>\r\n      Je hebt de tafel van 1 mooi geoefend.\r\n    `;\r\n\r\n    level3Volgende.style.display = 'none';\r\n  }\r\n\r\n  laadVraag();\r\n\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2716\ufe0f Werkblad tafels Tafel van 1. Vandaag oefenen we met \u00e9\u00e9n voor \u00e9\u00e9n verzamelen. Bij de tafel van 1 komt er steeds \u00e9\u00e9n ding bij. Rustig kijken, tellen en ontdekken \ud83c\udf3f \ud83c\udf31 Eerst begrijpen Bij de tafel van 1 zit er in elk groepje precies \u00e9\u00e9n ding. Het antwoord blijft hetzelfde als het aantal groepjes. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10],"tags":[],"class_list":["post-2307","post","type-post","status-publish","format-standard","hentry","category-tafels"],"acf":[],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2307","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"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=2307"}],"version-history":[{"count":28,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2307\/revisions"}],"predecessor-version":[{"id":3621,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2307\/revisions\/3621"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}