{"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-06-16T16:46:35","modified_gmt":"2026-06-16T16:46:35","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<style>\r\nbody{\r\n  margin:0;\r\n  font-family:'Inter',sans-serif;\r\n}\r\n\r\n.groepjes-oefen-page{\r\n  min-height:100vh;\r\n  padding:7rem 7vw 4rem;\r\n  color:#263247;\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,232,255,0.58) 0%, transparent 32%),\r\n    radial-gradient(circle at 50% 82%, rgba(232,244,255,0.48) 0%, transparent 36%),\r\n    linear-gradient(135deg,#F7FBFF 0%,#EAF6FF 45%,#F4FBF7 100%);\r\n}\r\n\r\n.oefen-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(70,105,140,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.oefen-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:#4D6F91;\r\n  font-size:15px;\r\n  font-weight:900;\r\n}\r\n\r\n.oefen-hero h1{\r\n  font-size:clamp(44px,6vw,74px);\r\n  line-height:1;\r\n  margin:0 0 24px;\r\n  color:#263247;\r\n  font-weight:900;\r\n}\r\n\r\n.oefen-hero p{\r\n  font-size:19px;\r\n  line-height:1.9;\r\n  color:#4D5F75;\r\n  font-weight:650;\r\n  max-width:760px;\r\n  margin:0 auto;\r\n}\r\n\r\n.oefenblok{\r\n  max-width:980px;\r\n  margin:0 auto 4rem;\r\n  padding:2.6rem;\r\n  border-radius:40px;\r\n  background:rgba(255,255,255,.82);\r\n  border:1px solid rgba(255,255,255,.96);\r\n  box-shadow:0 18px 44px rgba(70,105,140,.09);\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  gap:14px;\r\n  flex-wrap:wrap;\r\n  margin-bottom:22px;\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.85);\r\n  border:1px solid rgba(255,255,255,0.95);\r\n  color:#4D6F91;\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:14px;\r\n  border-radius:999px;\r\n  background:rgba(255,255,255,0.75);\r\n  overflow:hidden;\r\n  margin:10px 0 26px;\r\n}\r\n\r\n.progress-bar{\r\n  height:100%;\r\n  width:0%;\r\n  border-radius:999px;\r\n  background:#A9D7FF;\r\n  transition:width .35s ease;\r\n}\r\n\r\n.vraag{\r\n  font-size:1.45rem;\r\n  font-weight:900;\r\n  margin-bottom:1rem;\r\n  color:#263247;\r\n}\r\n\r\n.helper{\r\n  color:#4D5F75;\r\n  font-weight:750;\r\n  margin-bottom:1.4rem;\r\n  line-height:1.6;\r\n}\r\n\r\n.objecten,\r\n.groepjes-zone{\r\n  display:flex;\r\n  justify-content:center;\r\n  gap:.75rem;\r\n  flex-wrap:wrap;\r\n  min-height:78px;\r\n  margin:1.4rem 0;\r\n}\r\n\r\n.object{\r\n  width:62px;\r\n  height:62px;\r\n  border-radius:22px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  background:#DDEFFF;\r\n  font-size:2rem;\r\n  box-shadow:0 8px 20px rgba(70,105,140,0.08);\r\n}\r\n\r\n.groepje-box{\r\n  display:flex;\r\n  gap:.55rem;\r\n  padding:.8rem;\r\n  border-radius:24px;\r\n  background:rgba(221,239,255,0.78);\r\n  border:1px solid rgba(255,255,255,0.95);\r\n}\r\n\r\n.antwoorden{\r\n  display:flex;\r\n  gap:1.1rem;\r\n  justify-content:center;\r\n  flex-wrap:wrap;\r\n  margin-top:1.5rem;\r\n}\r\n\r\n.knop{\r\n  min-width:90px;\r\n  padding:1rem 1.8rem;\r\n  border-radius:999px;\r\n  background:rgba(255,255,255,0.92);\r\n  color:#263247 !important;\r\n  font-size:1.25rem;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n  border:3px solid #7CB8E4;\r\n  box-shadow:0 8px 22px rgba(70,105,140,0.08);\r\n  transition:all .25s ease;\r\n}\r\n\r\n.knop:hover{\r\n  transform:translateY(-3px);\r\n  background:#DDEFFF;\r\n}\r\n\r\n.knop.juist{\r\n  background:#DDF5E4 !important;\r\n  border-color:#4E9B68 !important;\r\n  color:#2F6A46 !important;\r\n}\r\n\r\n.knop.fout{\r\n  background:#FFE3E3 !important;\r\n  border-color:#D98585 !important;\r\n  color:#9A4B4B !important;\r\n  opacity:.75;\r\n}\r\n\r\n.feedback{\r\n  margin-top:1.8rem;\r\n  min-height:1.4em;\r\n  color:#4D6F91;\r\n  font-size:1.15rem;\r\n  font-weight:900;\r\n}\r\n\r\n.volgende{\r\n  display:none;\r\n  margin-top:2.2rem;\r\n}\r\n\r\n.volgende button{\r\n  padding:1rem 2.4rem;\r\n  border-radius:999px;\r\n  border:3px solid #7CB8E4;\r\n  background:rgba(255,255,255,0.86);\r\n  color:#263247;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n  box-shadow:0 8px 22px rgba(70,105,140,0.08);\r\n  transition:.25s ease;\r\n}\r\n\r\n.volgende button:hover{\r\n  transform:translateY(-3px);\r\n  background:#DDEFFF;\r\n}\r\n\r\n.groepjes-oefen-note{\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(210,232,255,.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:\r\n    0 16px 38px rgba(70,105,140,.08),\r\n    inset 0 1px 0 rgba(255,255,255,.75);\r\n  color:#4D5F75;\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  .groepjes-oefen-page{\r\n    padding:5rem 6vw 3rem;\r\n  }\r\n\r\n  .oefen-hero,\r\n  .oefenblok{\r\n    padding:2rem;\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=\"groepjes-oefen-page\">\r\n\r\n  <div class=\"oefen-hero\">\r\n    <div class=\"oefen-label\">\ud83d\udd22 Getallenwereld<\/div>\r\n\r\n    <h1>Oefenen met tellen & groepjes.<\/h1>\r\n\r\n    <p>\r\n      Kijk rustig. Tel wat je ziet.\r\n      Daarna kijken we naar groepjes.\r\n      E\u00e9n stap tegelijk \ud83c\udf3f\r\n    <\/p>\r\n  <\/div>\r\n\r\n  <div class=\"oefenblok\">\r\n\r\n    <div class=\"oefen-top\">\r\n      <div class=\"level-pill\" id=\"levelNaam\"><\/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\" id=\"vraag\"><\/div>\r\n    <div class=\"objecten\" id=\"objecten\"><\/div>\r\n    <div class=\"groepjes-zone\" id=\"groepjesZone\"><\/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\r\n  <\/div>\r\n\r\n  <div class=\"groepjes-oefen-note\">\r\n    Kleine reminder \ud83c\udf38<br>\r\n    Tellen mag langzaam.\r\n    Kijk eerst, tel daarna en ontdek rustig welke groepjes je ziet.\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n\r\n  const levels = [\r\n    {\r\n      naam:'\ud83c\udf31 Level 1: E\u00e9n voor \u00e9\u00e9n tellen',\r\n      type:'tellen',\r\n      vragen:[\r\n        { aantal:2, figuur:'\ud83c\udf4e', antwoord:'2', opties:['1','2','3'] },\r\n        { aantal:3, figuur:'\u2b50', antwoord:'3', opties:['2','3','4'] },\r\n        { aantal:4, figuur:'\ud83c\udf38', antwoord:'4', opties:['3','4','5'] },\r\n        { aantal:5, figuur:'\ud83d\udc1d', antwoord:'5', opties:['4','5','6'] },\r\n        { aantal:6, figuur:'\ud83e\uddf8', antwoord:'6', opties:['5','6','7'] }\r\n      ]\r\n    },\r\n    {\r\n      naam:'\ud83c\udf3f Level 2: Groepjes herkennen',\r\n      type:'groepjes',\r\n      vragen:[\r\n        { groepjes:2, perGroep:2, figuur:'\u2b50', antwoord:'2 groepjes', opties:['1 groepje','2 groepjes','4 groepjes'] },\r\n        { groepjes:3, perGroep:2, figuur:'\ud83c\udf4e', antwoord:'3 groepjes', opties:['2 groepjes','3 groepjes','6 groepjes'] },\r\n        { groepjes:2, perGroep:3, figuur:'\ud83c\udf38', antwoord:'2 groepjes', opties:['2 groepjes','3 groepjes','5 groepjes'] },\r\n        { groepjes:4, perGroep:1, figuur:'\ud83d\udc1d', antwoord:'4 groepjes', opties:['1 groepje','3 groepjes','4 groepjes'] }\r\n      ]\r\n    },\r\n    {\r\n      naam:'\ud83c\udf38 Level 3: Hoeveel samen?',\r\n      type:'samen',\r\n      vragen:[\r\n        { groepjes:2, perGroep:2, figuur:'\u2b50', antwoord:'4', opties:['2','4','6'] },\r\n        { groepjes:3, perGroep:2, figuur:'\ud83c\udf4e', antwoord:'6', opties:['3','5','6'] },\r\n        { groepjes:2, perGroep:3, figuur:'\ud83c\udf38', antwoord:'6', opties:['4','5','6'] },\r\n        { groepjes:3, perGroep:3, figuur:'\ud83d\udc1d', antwoord:'9', opties:['6','8','9'] }\r\n      ]\r\n    }\r\n  ];\r\n\r\n  let levelIndex = 0;\r\n  let vraagIndex = 0;\r\n  let goedAantal = 0;\r\n  let locked = false;\r\n  let huidigAntwoord = '';\r\n\r\n  const levelNaam = document.getElementById('levelNaam');\r\n  const scoreTekst = document.getElementById('scoreTekst');\r\n  const progressBar = document.getElementById('progressBar');\r\n  const vraagEl = document.getElementById('vraag');\r\n  const objectenEl = document.getElementById('objecten');\r\n  const groepjesZone = document.getElementById('groepjesZone');\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  function shuffle(arr){\r\n    return [...arr].sort(() => Math.random() - 0.5);\r\n  }\r\n\r\n  function toonObjecten(aantal, figuur){\r\n    objectenEl.innerHTML = '';\r\n    for(let i = 0; i < aantal; i++){\r\n      objectenEl.innerHTML += `<div class=\"object\">${figuur}<\/div>`;\r\n    }\r\n  }\r\n\r\n  function toonGroepjes(groepjes, perGroep, figuur){\r\n    groepjesZone.innerHTML = '';\r\n\r\n    for(let g = 0; g < groepjes; g++){\r\n      let inhoud = '';\r\n      for(let i = 0; i < perGroep; i++){\r\n        inhoud += `<div class=\"object\">${figuur}<\/div>`;\r\n      }\r\n      groepjesZone.innerHTML += `<div class=\"groepje-box\">${inhoud}<\/div>`;\r\n    }\r\n  }\r\n\r\n  function reset(){\r\n    locked = false;\r\n    feedbackEl.textContent = '';\r\n    antwoordenEl.innerHTML = '';\r\n    objectenEl.innerHTML = '';\r\n    groepjesZone.innerHTML = '';\r\n    volgende.style.display = 'none';\r\n  }\r\n\r\n  function laadVraag(){\r\n    reset();\r\n\r\n    const level = levels[levelIndex];\r\n    const item = level.vragen[vraagIndex];\r\n\r\n    levelNaam.textContent = level.naam;\r\n    scoreTekst.textContent = `Vraag ${vraagIndex + 1} van ${level.vragen.length}`;\r\n    progressBar.style.width = `${(vraagIndex \/ level.vragen.length) * 100}%`;\r\n\r\n    huidigAntwoord = item.antwoord;\r\n\r\n    if(level.type === 'tellen'){\r\n      vraagEl.textContent = 'Hoeveel zie je?';\r\n      toonObjecten(item.aantal, item.figuur);\r\n      helperEl.textContent = 'Tel rustig \u00e9\u00e9n voor \u00e9\u00e9n.';\r\n    }\r\n\r\n    if(level.type === 'groepjes'){\r\n      vraagEl.textContent = 'Hoeveel groepjes zie je?';\r\n      toonGroepjes(item.groepjes, item.perGroep, item.figuur);\r\n      helperEl.textContent = 'Kijk naar de bakjes. Elk bakje is een groepje.';\r\n    }\r\n\r\n    if(level.type === 'samen'){\r\n      vraagEl.textContent = 'Hoeveel zijn het samen?';\r\n      toonGroepjes(item.groepjes, item.perGroep, item.figuur);\r\n      helperEl.textContent = 'Tel alles samen rustig op.';\r\n    }\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) return;\r\n\r\n    if(keuze === huidigAntwoord){\r\n      locked = true;\r\n      goedAantal++;\r\n      btn.classList.add('juist');\r\n      feedbackEl.textContent = 'Ja \ud83c\udf38 goed gekeken.';\r\n\r\n      volgende.style.display = 'block';\r\n\r\n      volgendeBtn.onclick = () => {\r\n        vraagIndex++;\r\n\r\n        if(vraagIndex >= levels[levelIndex].vragen.length){\r\n          toonLevelKlaar();\r\n        } else {\r\n          laadVraag();\r\n        }\r\n      };\r\n\r\n    } else {\r\n      btn.classList.add('fout');\r\n      feedbackEl.textContent = 'Kijk nog eens rustig.';\r\n    }\r\n  }\r\n\r\n  function toonLevelKlaar(){\r\n    progressBar.style.width = '100%';\r\n    vraagEl.textContent = 'Goed geoefend \ud83c\udf38';\r\n    objectenEl.innerHTML = '';\r\n    groepjesZone.innerHTML = '';\r\n    helperEl.textContent = '';\r\n    antwoordenEl.innerHTML = '';\r\n    feedbackEl.textContent = `Je hebt ${goedAantal} antwoorden goed gedaan.`;\r\n\r\n    volgende.style.display = 'block';\r\n\r\n    if(levelIndex < levels.length - 1){\r\n      volgendeBtn.textContent = 'Naar het volgende level \ud83c\udf3f';\r\n      volgendeBtn.onclick = () => {\r\n        levelIndex++;\r\n        vraagIndex = 0;\r\n        goedAantal = 0;\r\n        volgendeBtn.textContent = 'Volgende vraag \ud83c\udf3f';\r\n        laadVraag();\r\n      };\r\n    } else {\r\n      volgendeBtn.textContent = 'Nog een keer oefenen \ud83c\udf38';\r\n      volgendeBtn.onclick = () => {\r\n        levelIndex = 0;\r\n        vraagIndex = 0;\r\n        goedAantal = 0;\r\n        volgendeBtn.textContent = 'Volgende vraag \ud83c\udf3f';\r\n        laadVraag();\r\n      };\r\n    }\r\n  }\r\n\r\n  laadVraag();\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>\ud83d\udd22 Getallenwereld Oefenen met tellen &#038; groepjes. Kijk rustig. Tel wat je ziet. Daarna kijken we naar groepjes. E\u00e9n stap tegelijk \ud83c\udf3f Volgende vraag \ud83c\udf3f Kleine reminder \ud83c\udf38 Tellen mag langzaam. Kijk eerst, tel daarna en ontdek rustig welke groepjes je ziet.<\/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":10,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/2056\/revisions"}],"predecessor-version":[{"id":3568,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/2056\/revisions\/3568"}],"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}]}}