{"id":3248,"date":"2026-06-14T07:26:15","date_gmt":"2026-06-14T07:26:15","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?page_id=3248"},"modified":"2026-06-14T07:29:47","modified_gmt":"2026-06-14T07:29:47","slug":"procenten","status":"publish","type":"page","link":"https:\/\/withifi.muhubonurture.nl\/?page_id=3248","title":{"rendered":"Procenten"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3248\" class=\"elementor elementor-3248\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-764d583 e-con-full e-flex e-con e-parent\" data-id=\"764d583\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3cd801b elementor-widget elementor-widget-html\" data-id=\"3cd801b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.ifi-percent-page *{box-sizing:border-box;}\r\n\r\n.ifi-percent-page{\r\n  min-height:100vh;\r\n  padding:6rem 7vw;\r\n  font-family:'Inter',Arial,sans-serif;\r\n  color:#1F2A3D !important;\r\n  background:linear-gradient(135deg,#F7FBFF 0%,#EAF6FF 50%,#F5FBF7 100%);\r\n}\r\n\r\n.ifi-percent-wrap{max-width:1080px;margin:0 auto;}\r\n\r\n.ifi-back{\r\n  display:inline-flex;\r\n  margin-bottom:2rem;\r\n  padding:.9rem 1.4rem;\r\n  border-radius:999px;\r\n  background:#fff !important;\r\n  color:#1F2A3D !important;\r\n  text-decoration:none !important;\r\n  font-weight:900;\r\n}\r\n\r\n.ifi-hero,.ifi-game,.ifi-note{\r\n  background:#fff !important;\r\n  border-radius:36px;\r\n  padding:2.4rem;\r\n  box-shadow:0 16px 38px rgba(70,105,140,.10);\r\n}\r\n\r\n.ifi-hero{margin-bottom:2rem;}\r\n\r\n.ifi-label{\r\n  display:inline-block;\r\n  padding:.7rem 1.2rem;\r\n  border-radius:999px;\r\n  background:#DDEFFF !important;\r\n  color:#1F4E73 !important;\r\n  font-weight:950;\r\n  margin-bottom:1rem;\r\n}\r\n\r\n.ifi-hero h1,.ifi-game h2{\r\n  color:#1F2A3D !important;\r\n  font-weight:950;\r\n}\r\n\r\n.ifi-hero h1{\r\n  font-size:clamp(36px,5vw,60px);\r\n  margin:0 0 1rem;\r\n}\r\n\r\n.ifi-game h2{\r\n  font-size:clamp(30px,4vw,46px);\r\n  margin:0 0 .8rem;\r\n}\r\n\r\n.ifi-soft,.ifi-hero p,.ifi-note{\r\n  color:#263F59 !important;\r\n  font-weight:850;\r\n  line-height:1.8;\r\n  font-size:1.15rem;\r\n}\r\n\r\n.ifi-rule-box{\r\n  background:#EEF7FE !important;\r\n  border:3px solid #7CB8E4 !important;\r\n  border-radius:28px;\r\n  padding:1.4rem;\r\n  margin-top:1.4rem;\r\n  color:#1F2A3D !important;\r\n  font-weight:950;\r\n  line-height:1.8;\r\n}\r\n\r\n.ifi-tabs{\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n  gap:1rem;\r\n  margin:2rem 0;\r\n}\r\n\r\n.ifi-tab{\r\n  border:3px solid #7CB8E4 !important;\r\n  border-radius:28px;\r\n  padding:1.3rem;\r\n  background:#fff !important;\r\n  color:#1F2A3D !important;\r\n  font-size:1.05rem;\r\n  font-weight:950;\r\n  cursor:pointer;\r\n}\r\n\r\n.ifi-tab.active,.ifi-tab:hover{background:#DDEFFF !important;}\r\n\r\n.ifi-game{display:none;}\r\n.ifi-game.active{display:block;}\r\n\r\n.ifi-box{\r\n  margin-top:1.7rem;\r\n  padding:2rem;\r\n  border-radius:32px;\r\n  background:#EEF7FE !important;\r\n  text-align:center;\r\n}\r\n\r\n.ifi-big{\r\n  font-size:clamp(38px,7vw,70px);\r\n  font-weight:950;\r\n  color:#1F2A3D !important;\r\n  line-height:1.15;\r\n  margin:1rem 0;\r\n}\r\n\r\n.ifi-percent-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(4,1fr);\r\n  gap:.8rem;\r\n  max-width:520px;\r\n  margin:1.6rem auto;\r\n  background:#fff !important;\r\n  border:3px solid #7CB8E4 !important;\r\n  border-radius:28px;\r\n  padding:1.2rem;\r\n}\r\n\r\n.ifi-percent-piece{\r\n  min-height:90px;\r\n  border-radius:20px;\r\n  border:3px solid #7CB8E4 !important;\r\n  background:#fff !important;\r\n  color:#1F2A3D !important;\r\n  font-size:1.8rem;\r\n  font-weight:950;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  cursor:pointer;\r\n}\r\n\r\n.ifi-percent-piece.filled,\r\n.ifi-percent-piece.active{\r\n  background:#DFF5E8 !important;\r\n  border-color:#4E9B68 !important;\r\n}\r\n\r\n.ifi-options{\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n  gap:1rem;\r\n  margin-top:1.5rem;\r\n}\r\n\r\n.ifi-option,.ifi-btn{\r\n  border:3px solid #7CB8E4 !important;\r\n  background:#fff !important;\r\n  color:#1F2A3D !important;\r\n  font-weight:950 !important;\r\n  cursor:pointer;\r\n  opacity:1 !important;\r\n  text-shadow:none !important;\r\n}\r\n\r\n.ifi-option{\r\n  border-radius:24px;\r\n  font-size:1.45rem !important;\r\n  padding:1.3rem !important;\r\n  min-height:82px;\r\n}\r\n\r\n.ifi-btn{\r\n  border-radius:999px;\r\n  padding:1rem 1.7rem;\r\n  font-size:1rem;\r\n}\r\n\r\n.ifi-option:hover,.ifi-btn:hover{background:#DDEFFF !important;}\r\n\r\n.ifi-actions{\r\n  margin-top:1.4rem;\r\n  display:flex;\r\n  gap:1rem;\r\n  justify-content:center;\r\n  flex-wrap:wrap;\r\n}\r\n\r\n.ifi-feedback{\r\n  min-height:38px;\r\n  margin-top:1.3rem;\r\n  font-size:1.25rem;\r\n  font-weight:950;\r\n  color:#1D6845 !important;\r\n  line-height:1.7;\r\n}\r\n\r\n.ifi-connection-card{\r\n  background:#fff !important;\r\n  border:3px solid #7CB8E4 !important;\r\n  border-radius:28px;\r\n  padding:1.5rem;\r\n  margin:1.5rem auto;\r\n  max-width:680px;\r\n  color:#1F2A3D !important;\r\n  font-size:2rem;\r\n  font-weight:950;\r\n  line-height:1.6;\r\n}\r\n\r\n.ifi-note{margin-top:2rem;}\r\n\r\n@media(max-width:800px){\r\n  .ifi-tabs,.ifi-options{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .ifi-percent-grid{\r\n    grid-template-columns:repeat(2,1fr);\r\n  }\r\n\r\n  .ifi-hero,.ifi-game,.ifi-note{\r\n    padding:1.6rem;\r\n  }\r\n\r\n  .ifi-box{\r\n    padding:1.4rem;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"ifi-percent-page\">\r\n  <div class=\"ifi-percent-wrap\">\r\n\r\n    <a class=\"ifi-back\" href=\"javascript:history.back()\">\u2190 Terug<\/a>\r\n\r\n    <div class=\"ifi-hero\">\r\n      <div class=\"ifi-label\">\ud83c\udf08 Procenten<\/div>\r\n      <h1>Procent betekent: van de honderd<\/h1>\r\n      <p>\r\n        Procenten laten zien hoeveel van iets je hebt.\r\n        100% is alles. 50% is de helft. 25% is een kwart.\r\n      <\/p>\r\n\r\n      <div class=\"ifi-rule-box\">\r\n        \ud83c\udf31 100% = alles<br>\r\n        \ud83c\udf31 50% = de helft<br>\r\n        \ud83c\udf31 25% = een kwart<br>\r\n        \ud83c\udf31 75% = drie van de vier stukken\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ifi-tabs\">\r\n      <button class=\"ifi-tab active\" onclick=\"showPercentGame(1)\">\ud83d\udc40<br><strong>Level 1<\/strong><br>Hoeveel zie je?<\/button>\r\n      <button class=\"ifi-tab\" onclick=\"showPercentGame(2)\">\ud83c\udfa8<br><strong>Level 2<\/strong><br>Kleur procent<\/button>\r\n      <button class=\"ifi-tab\" onclick=\"showPercentGame(3)\">\ud83e\udde0<br><strong>Level 3<\/strong><br>Breuk naar procent<\/button>\r\n    <\/div>\r\n\r\n    <div id=\"percent-game-1\" class=\"ifi-game active\">\r\n      <h2>\ud83d\udc40 Level 1: Welk percentage zie je?<\/h2>\r\n      <p class=\"ifi-soft\">\r\n        Kijk hoeveel vakjes gekleurd zijn. Welk percentage hoort erbij?\r\n      <\/p>\r\n\r\n      <div class=\"ifi-box\">\r\n        <div id=\"percentLevel1Grid\" class=\"ifi-percent-grid\"><\/div>\r\n\r\n        <div id=\"percentLevel1Options\" class=\"ifi-options\"><\/div>\r\n\r\n        <div class=\"ifi-actions\">\r\n          <button class=\"ifi-btn\" onclick=\"newPercentLevel1()\">Nieuwe oefening<\/button>\r\n        <\/div>\r\n\r\n        <div id=\"percentLevel1Feedback\" class=\"ifi-feedback\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"percent-game-2\" class=\"ifi-game\">\r\n      <h2>\ud83c\udfa8 Level 2: Kleur het percentage<\/h2>\r\n      <p class=\"ifi-soft\">\r\n        Klik precies zoveel vakjes aan als Ifi vraagt.\r\n      <\/p>\r\n\r\n      <div class=\"ifi-box\">\r\n        <div id=\"percentLevel2Question\" class=\"ifi-big\"><\/div>\r\n\r\n        <div id=\"percentLevel2Grid\" class=\"ifi-percent-grid\"><\/div>\r\n\r\n        <div class=\"ifi-actions\">\r\n          <button class=\"ifi-btn\" onclick=\"checkPercentLevel2()\">Controleer<\/button>\r\n          <button class=\"ifi-btn\" onclick=\"newPercentLevel2()\">Nieuwe procent<\/button>\r\n        <\/div>\r\n\r\n        <div id=\"percentLevel2Feedback\" class=\"ifi-feedback\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div id=\"percent-game-3\" class=\"ifi-game\">\r\n      <h2>\ud83e\udde0 Level 3: Breuk en procent horen bij elkaar<\/h2>\r\n      <p class=\"ifi-soft\">\r\n        Kijk naar de breuk. Welke procent hoort erbij?\r\n      <\/p>\r\n\r\n      <div class=\"ifi-box\">\r\n        <div id=\"percentLevel3Fraction\" class=\"ifi-connection-card\"><\/div>\r\n\r\n        <div id=\"percentLevel3Options\" class=\"ifi-options\"><\/div>\r\n\r\n        <div class=\"ifi-actions\">\r\n          <button class=\"ifi-btn\" onclick=\"newPercentLevel3()\">Nieuwe verbinding<\/button>\r\n        <\/div>\r\n\r\n        <div id=\"percentLevel3Feedback\" class=\"ifi-feedback\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ifi-note\">\r\n      \ud83c\udf38 Ifi weetje:<br>\r\n      100% betekent alles. 50% betekent de helft. 25% betekent een kwart.\r\n      75% betekent drie van de vier stukken.\r\n      Procenten zijn eigenlijk breuken in een ander jasje.\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\nlet percentLevel1Correct = \"\";\r\nlet percentLevel2CorrectPieces = 0;\r\nlet percentLevel2CorrectPercent = \"\";\r\nlet percentLevel3Correct = \"\";\r\n\r\nfunction r(min,max){\r\n  return Math.floor(Math.random()*(max-min+1))+min;\r\n}\r\n\r\nfunction percentHappy(){\r\n  const texts = [\r\n    \"Mooi gezien \ud83c\udf38\",\r\n    \"Yes, je ziet hoeveel van het geheel gekleurd is \ud83d\udc9b\",\r\n    \"Rustig gekeken, goed gedaan \ud83c\udf31\",\r\n    \"Knap hoor, je brein ziet de procenten \u2728\"\r\n  ];\r\n  return texts[r(0,texts.length-1)];\r\n}\r\n\r\nfunction percentTryAgain(){\r\n  const texts = [\r\n    \"Bijna. Kijk hoeveel van de vier vakjes gekleurd zijn \ud83d\udc9b\",\r\n    \"Geen haast. Alles is 100%, de helft is 50% \ud83c\udf31\",\r\n    \"Kijk rustig: 1 van 4 is 25%, 2 van 4 is 50% \ud83e\udde9\"\r\n  ];\r\n  return texts[r(0,texts.length-1)];\r\n}\r\n\r\nfunction showPercentGame(n){\r\n  document.querySelectorAll(\".ifi-game\").forEach(function(game){\r\n    game.classList.remove(\"active\");\r\n  });\r\n\r\n  document.querySelectorAll(\".ifi-tab\").forEach(function(tab){\r\n    tab.classList.remove(\"active\");\r\n  });\r\n\r\n  document.getElementById(\"percent-game-\" + n).classList.add(\"active\");\r\n  document.querySelectorAll(\".ifi-tab\")[n - 1].classList.add(\"active\");\r\n}\r\n\r\nfunction makePercentGrid(containerId,filled,clickable){\r\n  let html = \"\";\r\n\r\n  for(let i = 1; i <= 4; i++){\r\n    const filledClass = i <= filled ? \" filled\" : \"\";\r\n    const click = clickable ? ' onclick=\"togglePercentPiece(this)\"' : \"\";\r\n    html += '<button class=\"ifi-percent-piece' + filledClass + '\"' + click + '>' + i + '<\/button>';\r\n  }\r\n\r\n  document.getElementById(containerId).innerHTML = html;\r\n}\r\n\r\nfunction percentFromPieces(pieces){\r\n  if(pieces === 1) return \"25%\";\r\n  if(pieces === 2) return \"50%\";\r\n  if(pieces === 3) return \"75%\";\r\n  return \"100%\";\r\n}\r\n\r\nfunction newPercentLevel1(){\r\n  const pieces = r(1,4);\r\n  percentLevel1Correct = percentFromPieces(pieces);\r\n\r\n  makePercentGrid(\"percentLevel1Grid\",pieces,false);\r\n\r\n  let options = [\"25%\",\"50%\",\"75%\",\"100%\"];\r\n  options = options.sort(function(){return Math.random() - 0.5;}).slice(0,3);\r\n\r\n  if(!options.includes(percentLevel1Correct)){\r\n    options[0] = percentLevel1Correct;\r\n  }\r\n\r\n  options.sort(function(){return Math.random() - 0.5;});\r\n\r\n  document.getElementById(\"percentLevel1Options\").innerHTML = options.map(function(option){\r\n    return '<button class=\"ifi-option\" onclick=\"checkPercentLevel1(\\'' + option + '\\')\">' + option + '<\/button>';\r\n  }).join(\"\");\r\n\r\n  document.getElementById(\"percentLevel1Feedback\").innerText = \"\";\r\n}\r\n\r\nfunction checkPercentLevel1(choice){\r\n  document.getElementById(\"percentLevel1Feedback\").innerText =\r\n    choice === percentLevel1Correct ? percentHappy() : percentTryAgain();\r\n}\r\n\r\nfunction newPercentLevel2(){\r\n  const pieces = r(1,4);\r\n  percentLevel2CorrectPieces = pieces;\r\n  percentLevel2CorrectPercent = percentFromPieces(pieces);\r\n\r\n  document.getElementById(\"percentLevel2Question\").innerText =\r\n    \"Maak \" + percentLevel2CorrectPercent;\r\n\r\n  makePercentGrid(\"percentLevel2Grid\",0,true);\r\n\r\n  document.getElementById(\"percentLevel2Feedback\").innerText = \"\";\r\n}\r\n\r\nfunction togglePercentPiece(button){\r\n  button.classList.toggle(\"active\");\r\n}\r\n\r\nfunction checkPercentLevel2(){\r\n  const active = document.querySelectorAll(\"#percentLevel2Grid .ifi-percent-piece.active\").length;\r\n\r\n  if(active === percentLevel2CorrectPieces){\r\n    document.getElementById(\"percentLevel2Feedback\").innerHTML =\r\n      \"<strong>Yes \ud83c\udf38<\/strong><br>\" +\r\n      active + \" van de 4 vakjes is \" + percentLevel2CorrectPercent + \".\";\r\n  }else{\r\n    document.getElementById(\"percentLevel2Feedback\").innerText =\r\n      \"Bijna. Kleur precies \" + percentLevel2CorrectPieces + \" van de 4 vakjes \ud83d\udc9b\";\r\n  }\r\n}\r\n\r\nfunction newPercentLevel3(){\r\n  const optionsData = [\r\n    {fraction:\"1\/4\", percent:\"25%\"},\r\n    {fraction:\"1\/2\", percent:\"50%\"},\r\n    {fraction:\"2\/4\", percent:\"50%\"},\r\n    {fraction:\"3\/4\", percent:\"75%\"},\r\n    {fraction:\"4\/4\", percent:\"100%\"}\r\n  ];\r\n\r\n  const item = optionsData[r(0,optionsData.length - 1)];\r\n  percentLevel3Correct = item.percent;\r\n\r\n  document.getElementById(\"percentLevel3Fraction\").innerHTML =\r\n    item.fraction + \"<br><span style='font-size:1.1rem;color:#263F59;'>Welke procent hoort hierbij?<\/span>\";\r\n\r\n  let options = [\"25%\",\"50%\",\"75%\",\"100%\"];\r\n  options = options.sort(function(){return Math.random() - 0.5;}).slice(0,3);\r\n\r\n  if(!options.includes(percentLevel3Correct)){\r\n    options[0] = percentLevel3Correct;\r\n  }\r\n\r\n  options.sort(function(){return Math.random() - 0.5;});\r\n\r\n  document.getElementById(\"percentLevel3Options\").innerHTML = options.map(function(option){\r\n    return '<button class=\"ifi-option\" onclick=\"checkPercentLevel3(\\'' + option + '\\')\">' + option + '<\/button>';\r\n  }).join(\"\");\r\n\r\n  document.getElementById(\"percentLevel3Feedback\").innerText = \"\";\r\n}\r\n\r\nfunction checkPercentLevel3(choice){\r\n  if(choice === percentLevel3Correct){\r\n    document.getElementById(\"percentLevel3Feedback\").innerHTML =\r\n      \"<strong>Mooi verbonden \ud83c\udf38<\/strong><br>\" +\r\n      \"Deze breuk hoort bij \" + percentLevel3Correct + \".\";\r\n  }else{\r\n    document.getElementById(\"percentLevel3Feedback\").innerText =\r\n      \"Bijna. Denk aan: 1\/4 = 25%, 1\/2 = 50%, 3\/4 = 75% \ud83d\udc9b\";\r\n  }\r\n}\r\n\r\nnewPercentLevel1();\r\nnewPercentLevel2();\r\nnewPercentLevel3();\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>\u2190 Terug \ud83c\udf08 Procenten Procent betekent: van de honderd Procenten laten zien hoeveel van iets je hebt. 100% is alles. 50% is de helft. 25% is een kwart. \ud83c\udf31 100% = alles \ud83c\udf31 50% = de helft \ud83c\udf31 25% = een kwart \ud83c\udf31 75% = drie van de vier stukken \ud83d\udc40Level 1Hoeveel zie je? \ud83c\udfa8Level [&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-3248","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/3248","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=3248"}],"version-history":[{"count":4,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/3248\/revisions"}],"predecessor-version":[{"id":3253,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/3248\/revisions\/3253"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}