{"id":2069,"date":"2026-05-12T02:04:20","date_gmt":"2026-05-12T02:04:20","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?page_id=2069"},"modified":"2026-05-12T02:06:53","modified_gmt":"2026-05-12T02:06:53","slug":"oefenen-met-rekenen","status":"publish","type":"page","link":"https:\/\/withifi.muhubonurture.nl\/?page_id=2069","title":{"rendered":"Oefenen Met Rekenen"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2069\" class=\"elementor elementor-2069\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-518defc e-con-full e-flex e-con e-parent\" data-id=\"518defc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5371b8e elementor-widget elementor-widget-html\" data-id=\"5371b8e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\nbody{margin:0;font-family:'Inter',sans-serif;}\r\n\r\n.rekenen-oefen-page{\r\n  min-height:100vh;\r\n  padding:7rem 7vw;\r\n  display:grid;\r\n  grid-template-columns:1.1fr 0.9fr;\r\n  gap:5rem;\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-content{max-width:740px;}\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.62);\r\n  border:1px solid rgba(255,255,255,0.9);\r\n  color:#4D6F91;\r\n  font-size:15px;\r\n  font-weight:900;\r\n}\r\n\r\n.oefen-content h2{\r\n  font-size:clamp(42px,5vw,64px);\r\n  line-height:1.05;\r\n  font-weight:900;\r\n  margin:0 0 22px;\r\n  color:#263247;\r\n}\r\n\r\n.oefen-intro{\r\n  font-size:19px;\r\n  line-height:1.8;\r\n  color:#4D5F75;\r\n  font-weight:650;\r\n  margin-bottom:2rem;\r\n}\r\n\r\n.oefenblok{\r\n  background:rgba(255,255,255,0.58);\r\n  border-radius:36px;\r\n  padding:2.6rem;\r\n  backdrop-filter:blur(16px);\r\n  border:1px solid rgba(255,255,255,0.95);\r\n  box-shadow:0 12px 32px rgba(70,105,140,0.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.78);\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:10px;\r\n  border-radius:999px;\r\n  background:rgba(255,255,255,0.65);\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.35rem;\r\n  font-weight:900;\r\n  margin-bottom:1rem;\r\n}\r\n\r\n.som{\r\n  font-size:clamp(2.8rem,6vw,4.8rem);\r\n  font-weight:900;\r\n  color:#263247;\r\n  line-height:1.1;\r\n  margin:1rem 0;\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  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:58px;\r\n  height:58px;\r\n  border-radius:20px;\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.object.fade{\r\n  opacity:.28;\r\n  transform:scale(.9);\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:82px;\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:1px solid rgba(255,255,255,0.98);\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:#A9D7FF;\r\n  box-shadow:0 0 22px rgba(169,215,255,0.9);\r\n}\r\n\r\n.knop.fout{opacity:.45;}\r\n\r\n.feedback{\r\n  margin-top:1.8rem;\r\n  min-height:1.4em;\r\n  color:#4D6F91;\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:1px solid rgba(255,255,255,0.95);\r\n  background:rgba(255,255,255,0.86);\r\n  color:#263247;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n}\r\n\r\n.volgende button:hover{background:#DDEFFF;}\r\n\r\n.avatar{\r\n  display:flex;\r\n  justify-content:center;\r\n  align-items:center;\r\n  position:relative;\r\n}\r\n\r\n.avatar::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  width:460px;\r\n  height:460px;\r\n  border-radius:50%;\r\n  background:radial-gradient(circle, rgba(255,255,255,0.74) 0%, rgba(210,232,255,0.48) 45%, transparent 72%);\r\n  filter:blur(58px);\r\n}\r\n\r\n.avatar img{\r\n  width:780px;\r\n  max-width:none;\r\n  position:relative;\r\n  z-index:2;\r\n  transform:translateY(-40px);\r\n}\r\n\r\n@media(max-width:900px){\r\n  .rekenen-oefen-page{\r\n    grid-template-columns:1fr;\r\n    text-align:center;\r\n  }\r\n\r\n  .avatar{order:1;}\r\n  .oefen-content{order:2;margin:0 auto;}\r\n\r\n  .avatar img{\r\n    width:520px;\r\n    max-width:100%;\r\n    transform:translateY(-20px);\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"rekenen-oefen-page\">\r\n\r\n  <div class=\"oefen-content\">\r\n\r\n    <div class=\"oefen-label\">\ud83d\udd22 Getallenwereld<\/div>\r\n\r\n    <h2>Oefenen met rekenen.<\/h2>\r\n\r\n    <p class=\"oefen-intro\">\r\n      Kijk rustig.<br>\r\n      Komt er iets bij? Of gaat er iets weg?\r\n    <\/p>\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=\"som\" id=\"som\"><\/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>\r\n\r\n  <div class=\"avatar\">\r\n    <img decoding=\"async\" id=\"avatar\"\r\n      src=\"https:\/\/withifi.muhubonurture.nl\/wp-content\/uploads\/2026\/05\/Ontwerp-zonder-titel-26.png\"\r\n      alt=\"IFI denkt rustig mee\">\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n\r\n  const avatarRustig = 'https:\/\/withifi.muhubonurture.nl\/wp-content\/uploads\/2026\/05\/Ontwerp-zonder-titel-26.png';\r\n  const avatarGoed = 'https:\/\/withifi.muhubonurture.nl\/wp-content\/uploads\/2026\/05\/Ontwerp-zonder-titel-23-1.png';\r\n\r\n  const levels = [\r\n    {\r\n      naam:'\ud83c\udf31 Level 1: Erbij of eraf?',\r\n      type:'begrip',\r\n      vragen:[\r\n        { zin:'Er komt iets bij.', antwoord:'Erbij', opties:['Erbij','Eraf'] },\r\n        { zin:'Er gaat iets weg.', antwoord:'Eraf', opties:['Erbij','Eraf'] },\r\n        { zin:'Het wordt meer.', antwoord:'Erbij', opties:['Erbij','Eraf'] },\r\n        { zin:'Het wordt minder.', antwoord:'Eraf', opties:['Erbij','Eraf'] }\r\n      ]\r\n    },\r\n    {\r\n      naam:'\ud83c\udf3f Level 2: Erbij tellen',\r\n      type:'plus',\r\n      vragen:[\r\n        { start:1, erbij:1, figuur:'\ud83c\udf4e', antwoord:'2', opties:['1','2','3'] },\r\n        { start:2, erbij:1, figuur:'\u2b50', antwoord:'3', opties:['2','3','4'] },\r\n        { start:2, erbij:2, figuur:'\ud83c\udf38', antwoord:'4', opties:['3','4','5'] },\r\n        { start:3, erbij:2, figuur:'\ud83d\udc1d', antwoord:'5', opties:['4','5','6'] }\r\n      ]\r\n    },\r\n    {\r\n      naam:'\ud83c\udf38 Level 3: Eraf halen',\r\n      type:'min',\r\n      vragen:[\r\n        { start:3, eraf:1, figuur:'\ud83c\udf4e', antwoord:'2', opties:['1','2','3'] },\r\n        { start:4, eraf:1, figuur:'\u2b50', antwoord:'3', opties:['2','3','4'] },\r\n        { start:5, eraf:2, figuur:'\ud83c\udf38', antwoord:'3', opties:['3','4','5'] },\r\n        { start:6, eraf:2, figuur:'\ud83d\udc1d', antwoord:'4', opties:['3','4','5'] }\r\n      ]\r\n    },\r\n    {\r\n      naam:'\u2728 Level 4: Kleine sommen',\r\n      type:'som',\r\n      vragen:[\r\n        { som:'1 + 1', antwoord:'2', opties:['1','2','3'] },\r\n        { som:'2 + 2', antwoord:'4', opties:['3','4','5'] },\r\n        { som:'3 \u2212 1', antwoord:'2', opties:['1','2','3'] },\r\n        { som:'5 \u2212 2', antwoord:'3', opties:['2','3','4'] },\r\n        { som:'4 + 1', antwoord:'5', opties:['4','5','6'] }\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 somEl = document.getElementById('som');\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  const avatar = document.getElementById('avatar');\r\n\r\n  function shuffle(arr){\r\n    return [...arr].sort(() => Math.random() - 0.5);\r\n  }\r\n\r\n  function toonObjectenPlus(start, erbij, figuur){\r\n    objectenEl.innerHTML = '';\r\n\r\n    for(let i = 0; i < start; i++){\r\n      objectenEl.innerHTML += `<div class=\"object\">${figuur}<\/div>`;\r\n    }\r\n\r\n    objectenEl.innerHTML += `<div class=\"object\">+<\/div>`;\r\n\r\n    for(let i = 0; i < erbij; i++){\r\n      objectenEl.innerHTML += `<div class=\"object\">${figuur}<\/div>`;\r\n    }\r\n  }\r\n\r\n  function toonObjectenMin(start, eraf, figuur){\r\n    objectenEl.innerHTML = '';\r\n\r\n    for(let i = 0; i < start; i++){\r\n      const weg = i >= start - eraf ? ' fade' : '';\r\n      objectenEl.innerHTML += `<div class=\"object${weg}\">${figuur}<\/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    somEl.textContent = '';\r\n    volgende.style.display = 'none';\r\n    avatar.src = avatarRustig;\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 === 'begrip'){\r\n      vraagEl.textContent = item.zin;\r\n      helperEl.textContent = 'Wordt het meer of minder?';\r\n    }\r\n\r\n    if(level.type === 'plus'){\r\n      vraagEl.textContent = 'Hoeveel zijn het samen?';\r\n      toonObjectenPlus(item.start, item.erbij, item.figuur);\r\n      somEl.textContent = `${item.start} + ${item.erbij}`;\r\n      helperEl.textContent = 'Er komt iets bij. Tel alles samen.';\r\n    }\r\n\r\n    if(level.type === 'min'){\r\n      vraagEl.textContent = 'Hoeveel blijven er over?';\r\n      toonObjectenMin(item.start, item.eraf, item.figuur);\r\n      somEl.textContent = `${item.start} \u2212 ${item.eraf}`;\r\n      helperEl.textContent = 'De lichte figuren gaan weg. Wat blijft over?';\r\n    }\r\n\r\n    if(level.type === 'som'){\r\n      vraagEl.textContent = 'Wat is het antwoord?';\r\n      somEl.textContent = item.som;\r\n      helperEl.textContent = 'Kijk rustig naar de som.';\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      avatar.src = avatarGoed;\r\n\r\n      feedbackEl.textContent = [\r\n        'Ja \ud83c\udf38 goed gekeken.',\r\n        'Dat klopt \ud83c\udf3f',\r\n        'Mooi rustig gerekend.',\r\n        'Knap gedaan.'\r\n      ][Math.floor(Math.random() * 4)];\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    somEl.textContent = '';\r\n    helperEl.textContent = '';\r\n    antwoordenEl.innerHTML = '';\r\n    feedbackEl.textContent = `Je hebt ${goedAantal} antwoorden goed gedaan.`;\r\n    avatar.src = avatarGoed;\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 rekenen. Kijk rustig. Komt er iets bij? Of gaat er iets weg? Volgende vraag \ud83c\udf3f<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2069","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/2069","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=2069"}],"version-history":[{"count":3,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/2069\/revisions"}],"predecessor-version":[{"id":2073,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/2069\/revisions\/2073"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}