{"id":2168,"date":"2026-05-12T04:31:48","date_gmt":"2026-05-12T04:31:48","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?page_id=2168"},"modified":"2026-05-12T04:32:02","modified_gmt":"2026-05-12T04:32:02","slug":"tafel-van-8","status":"publish","type":"page","link":"https:\/\/withifi.muhubonurture.nl\/?page_id=2168","title":{"rendered":"Tafel Van 8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2168\" class=\"elementor elementor-2168\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ea334fc e-con-full e-flex e-con e-parent\" data-id=\"ea334fc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b05175f elementor-widget elementor-widget-html\" data-id=\"b05175f\" 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.tafel-page{\r\n  min-height:100vh;\r\n  padding:7rem 7vw;\r\n  display:grid;\r\n  grid-template-columns:1.05fr 0.95fr;\r\n  gap:5rem;\r\n  color:#3A2B24;\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(255,228,196,0.35) 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-content{max-width:760px;}\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-content h1{\r\n  font-size:clamp(48px,6vw,76px);\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-content p{\r\n  font-size:20px;\r\n  line-height:1.9;\r\n  color:#7A6455;\r\n  font-weight:650;\r\n  margin-bottom:24px;\r\n}\r\n\r\n.uitleg-box,\r\n.oefenblok{\r\n  margin-top:2.4rem;\r\n  padding:2.4rem;\r\n  border-radius:36px;\r\n  background:rgba(255,255,255,0.58);\r\n  border:1px solid rgba(255,255,255,0.96);\r\n  box-shadow:0 12px 32px 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.uitleg-title{\r\n  font-size:1.25rem;\r\n  color:#8B6B55;\r\n  font-weight:900;\r\n  margin-bottom:1.2rem;\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}\r\n\r\n.groep{\r\n  display:flex;\r\n  gap:.45rem;\r\n  padding:1rem;\r\n  border-radius:24px;\r\n  background:#FFF6EC;\r\n  box-shadow:0 8px 20px rgba(90,70,55,0.06);\r\n}\r\n\r\n.item{\r\n  width:42px;\r\n  height:42px;\r\n  border-radius:14px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  background:#FFE8D2;\r\n  font-size:1.4rem;\r\n}\r\n\r\n.somregel{\r\n  margin-top:1.2rem;\r\n  font-size:1.6rem;\r\n  font-weight:900;\r\n  color:#3A2B24;\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:#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:10px;\r\n  border-radius:999px;\r\n  background:rgba(255,255,255,0.72);\r\n  overflow:hidden;\r\n  margin:10px 0 28px;\r\n}\r\n\r\n.progress-bar{\r\n  height:100%;\r\n  width:0%;\r\n  border-radius:999px;\r\n  background:#FFD6A8;\r\n  transition:width .35s ease;\r\n}\r\n\r\n.vraag{\r\n  font-size:1.5rem;\r\n  font-weight:900;\r\n  margin-bottom:1.5rem;\r\n  color:#3A2B24;\r\n  text-align:center;\r\n}\r\n\r\n.helper{\r\n  color:#7A6455;\r\n  font-weight:750;\r\n  margin-bottom:1.5rem;\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:88px;\r\n  padding:1rem 1.7rem;\r\n  border-radius:999px;\r\n  background:rgba(255,255,255,0.92);\r\n  color:#3A2B24 !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(90,70,55,0.08);\r\n  transition:all .25s ease;\r\n}\r\n\r\n.knop:hover{\r\n  transform:translateY(-3px);\r\n  background:#FFF0DE;\r\n}\r\n\r\n.knop.juist{\r\n  background:#FFD6A8;\r\n  box-shadow:0 0 22px rgba(255,214,168,0.85);\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:#8B6B55;\r\n  font-weight:900;\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:#FFF0DE;\r\n  color:#3A2B24;\r\n  font-size:1.15rem;\r\n}\r\n\r\n.volgende{\r\n  display:none;\r\n  margin-top:2rem;\r\n  text-align:center;\r\n}\r\n\r\n.volgende button{\r\n  padding:1rem 2.3rem;\r\n  border-radius:999px;\r\n  border:1px solid rgba(255,255,255,0.96);\r\n  background:rgba(255,255,255,0.92);\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n}\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:500px;\r\n  height:500px;\r\n  border-radius:50%;\r\n  background:radial-gradient(circle, rgba(255,255,255,0.72) 0%, rgba(255,228,196,0.38) 45%, transparent 72%);\r\n  filter:blur(58px);\r\n}\r\n\r\n.avatar img{\r\n  width:760px;\r\n  max-width:none;\r\n  position:relative;\r\n  z-index:2;\r\n  transform:translateY(-30px);\r\n}\r\n\r\n@media(max-width:900px){\r\n  .tafel-page{\r\n    grid-template-columns:1fr;\r\n    text-align:center;\r\n  }\r\n\r\n  .avatar{order:1;}\r\n  .tafel-content{order:2;margin:0 auto;}\r\n  .groepjes{justify-content:center;}\r\n\r\n  .avatar img{\r\n    width:520px;\r\n    max-width:100%;\r\n    transform:translateY(-10px);\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"tafel-page\">\r\n\r\n  <div class=\"tafel-content\">\r\n\r\n    <div class=\"tafel-label\">\u2716\ufe0f Werkblad tafels<\/div>\r\n\r\n    <h1 id=\"titel\">Tafel van ...<\/h1>\r\n\r\n    <p id=\"introTekst\"><\/p>\r\n\r\n    <div class=\"uitleg-box\">\r\n\r\n      <div class=\"uitleg-title\">\ud83c\udf31 Kijk naar de groepjes<\/div>\r\n\r\n      <div class=\"groepjes\" id=\"uitlegGroepjes\"><\/div>\r\n\r\n      <div class=\"somregel\" id=\"uitlegSom\"><\/div>\r\n\r\n      <p id=\"uitlegTekst\"><\/p>\r\n\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\r\n      <div class=\"groepjes\" id=\"groepjes\"><\/div>\r\n\r\n      <div class=\"helper\" id=\"helper\"><\/div>\r\n\r\n      <div class=\"antwoorden\" id=\"antwoorden\"><\/div>\r\n\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 helpt rustig met tafels\">\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n\r\n  \/* ===================================\r\n     VERANDER ALLEEN DIT GETAL PER PAGINA\r\n     Tafel van 2 = 2\r\n     Tafel van 3 = 3\r\n     enzovoort\r\n  =================================== *\/\r\n\r\n  const TAFEL_NUMMER = 8;\r\n\r\n  const avatarRustig =\r\n  'https:\/\/withifi.muhubonurture.nl\/wp-content\/uploads\/2026\/05\/Ontwerp-zonder-titel-26.png';\r\n\r\n  const avatarGoed =\r\n  'https:\/\/withifi.muhubonurture.nl\/wp-content\/uploads\/2026\/05\/Ontwerp-zonder-titel-23-1.png';\r\n\r\n  const figuren = ['\ud83c\udf4e','\ud83c\udf38','\u2b50','\ud83d\udc1d','\ud83e\uddf8'];\r\n\r\n  const vragen = Array.from({length:10}, (_, i) => {\r\n    const groepjes = i + 1;\r\n    const antwoord = groepjes * TAFEL_NUMMER;\r\n\r\n    return {\r\n      groepjes:groepjes,\r\n      perGroep:TAFEL_NUMMER,\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  let vraagIndex = 0;\r\n  let goedAantal = 0;\r\n  let locked = false;\r\n  let huidigItem = null;\r\n\r\n  const titel = document.getElementById('titel');\r\n  const introTekst = document.getElementById('introTekst');\r\n  const uitlegGroepjes = document.getElementById('uitlegGroepjes');\r\n  const uitlegSom = document.getElementById('uitlegSom');\r\n  const uitlegTekst = document.getElementById('uitlegTekst');\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 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  const avatar = document.getElementById('avatar');\r\n\r\n  function maakOpties(antwoord){\r\n    const opties = [\r\n      antwoord,\r\n      Math.max(1, antwoord - TAFEL_NUMMER),\r\n      antwoord + TAFEL_NUMMER\r\n    ];\r\n\r\n    return [...new Set(opties.map(String))];\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, perGroep, 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\r\n      for(let i = 0; i < perGroep; i++){\r\n        groep.innerHTML += `<div class=\"item\">${figuur}<\/div>`;\r\n      }\r\n\r\n      container.appendChild(groep);\r\n    }\r\n  }\r\n\r\n  function maakIntro(){\r\n    titel.textContent = `Tafel van ${TAFEL_NUMMER}.`;\r\n\r\n    introTekst.innerHTML = `\r\n      Bij de tafel van ${TAFEL_NUMMER} zitten er steeds\r\n      <strong>${TAFEL_NUMMER}<\/strong> dingen in \u00e9\u00e9n groepje.<br>\r\n      We kijken rustig naar de groepjes en tellen samen.\r\n    `;\r\n\r\n    toonGroepjes(uitlegGroepjes, 3, TAFEL_NUMMER, '\ud83c\udf4e');\r\n\r\n    uitlegSom.textContent =\r\n    `3 groepjes van ${TAFEL_NUMMER} = ${3 * TAFEL_NUMMER}`;\r\n\r\n    uitlegTekst.innerHTML = `\r\n      Dat schrijven we als:<br>\r\n      <strong>3 \u00d7 ${TAFEL_NUMMER} = ${3 * TAFEL_NUMMER}<\/strong>\r\n    `;\r\n  }\r\n\r\n  function reset(){\r\n    locked = false;\r\n    feedbackEl.innerHTML = '';\r\n    antwoordenEl.innerHTML = '';\r\n    groepjesEl.innerHTML = '';\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 item = vragen[vraagIndex];\r\n    huidigItem = item;\r\n\r\n    levelNaam.textContent = `\ud83c\udf31 Tafel van ${TAFEL_NUMMER}`;\r\n\r\n    scoreTekst.textContent =\r\n    `Vraag ${vraagIndex + 1} van ${vragen.length}`;\r\n\r\n    progressBar.style.width =\r\n    `${(vraagIndex \/ vragen.length) * 100}%`;\r\n\r\n    vraagEl.textContent =\r\n    'Hoeveel zijn het samen?';\r\n\r\n    toonGroepjes(\r\n      groepjesEl,\r\n      item.groepjes,\r\n      item.perGroep,\r\n      item.figuur\r\n    );\r\n\r\n    helperEl.textContent =\r\n    `Dit zijn ${item.groepjes} groepjes van ${item.perGroep}. Tel rustig samen.`;\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 === huidigItem.antwoord){\r\n      locked = true;\r\n      goedAantal++;\r\n      btn.classList.add('juist');\r\n      avatar.src = avatarGoed;\r\n\r\n      feedbackEl.innerHTML = `\r\n        Ja \ud83c\udf38 goed gekeken.<br><br>\r\n        ${huidigItem.groepjes} groepjes van ${huidigItem.perGroep}<br>\r\n        dus:<br>\r\n        <strong>\r\n          ${huidigItem.groepjes} \u00d7 ${huidigItem.perGroep} = ${huidigItem.antwoord}\r\n        <\/strong>\r\n      `;\r\n\r\n      volgende.style.display = 'block';\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    }else{\r\n      btn.classList.add('fout');\r\n      feedbackEl.textContent = 'Kijk nog eens rustig.';\r\n    }\r\n  }\r\n\r\n  function toonKlaar(){\r\n    progressBar.style.width = '100%';\r\n\r\n    vraagEl.textContent = 'Goed geoefend \ud83c\udf38';\r\n    groepjesEl.innerHTML = '';\r\n    helperEl.textContent = '';\r\n    antwoordenEl.innerHTML = '';\r\n    feedbackEl.textContent =\r\n    `Je hebt ${goedAantal} antwoorden goed gedaan.`;\r\n\r\n    avatar.src = avatarGoed;\r\n\r\n    volgende.style.display = 'block';\r\n    volgendeBtn.textContent = 'Nog een keer oefenen \ud83c\udf3f';\r\n\r\n    volgendeBtn.onclick = () => {\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  maakIntro();\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 &#8230; \ud83c\udf31 Kijk naar de groepjes 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-2168","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/2168","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=2168"}],"version-history":[{"count":4,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/2168\/revisions"}],"predecessor-version":[{"id":2173,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/2168\/revisions\/2173"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}