{"id":3102,"date":"2026-06-13T18:48:46","date_gmt":"2026-06-13T18:48:46","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?page_id=3102"},"modified":"2026-06-14T02:51:18","modified_gmt":"2026-06-14T02:51:18","slug":"eenheden-tientallen-en-honderdtallen","status":"publish","type":"page","link":"https:\/\/withifi.muhubonurture.nl\/?page_id=3102","title":{"rendered":"Eenheden, tientallen en honderdtallen"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3102\" class=\"elementor elementor-3102\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f9f1f6 e-con-full e-flex e-con e-parent\" data-id=\"1f9f1f6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-87289c5 elementor-widget elementor-widget-html\" data-id=\"87289c5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.ifi-place-page *{\r\n  box-sizing:border-box;\r\n}\r\n\r\n.ifi-place-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-place-wrap{\r\n  max-width:1080px;\r\n  margin:0 auto;\r\n}\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:#ffffff !important;\r\n  color:#1F2A3D !important;\r\n  text-decoration:none !important;\r\n  font-weight:900;\r\n  box-shadow:0 8px 22px rgba(70,105,140,.10);\r\n}\r\n\r\n.ifi-hero,\r\n.ifi-game,\r\n.ifi-mini-note{\r\n  background:#ffffff !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{\r\n  margin-bottom:2rem;\r\n}\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,\r\n.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-hero p,\r\n.ifi-soft,\r\n.ifi-mini-note{\r\n  color:#263F59 !important;\r\n  font-weight:850;\r\n  line-height:1.8;\r\n}\r\n\r\n.ifi-hero p,\r\n.ifi-soft{\r\n  font-size:1.15rem;\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:#ffffff !important;\r\n  color:#1F2A3D !important;\r\n  font-size:1.05rem;\r\n  font-weight:950;\r\n  cursor:pointer;\r\n  opacity:1 !important;\r\n  box-shadow:0 10px 24px rgba(70,105,140,.10);\r\n}\r\n\r\n.ifi-tab.active,\r\n.ifi-tab:hover{\r\n  background:#DDEFFF !important;\r\n  color:#102B44 !important;\r\n}\r\n\r\n.ifi-tab strong,\r\n.ifi-tab span{\r\n  color:#1F2A3D !important;\r\n  opacity:1 !important;\r\n}\r\n\r\n.ifi-game{\r\n  display:none;\r\n}\r\n\r\n.ifi-game.active{\r\n  display:block;\r\n}\r\n\r\n.ifi-question{\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(54px,9vw,94px);\r\n  font-weight:950;\r\n  color:#1F2A3D !important;\r\n  margin:1rem 0;\r\n  line-height:1.1;\r\n}\r\n\r\n.ifi-highlight{\r\n  color:#153E63 !important;\r\n  background:#BFE0F7 !important;\r\n  padding:.04em .22em;\r\n  border-radius:.22em;\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,\r\n.ifi-btn{\r\n  border:3px solid #7CB8E4 !important;\r\n  background:#ffffff !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  box-shadow:0 8px 20px rgba(70,105,140,.10);\r\n}\r\n\r\n.ifi-option{\r\n  border-radius:24px;\r\n  font-size:1.55rem !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,\r\n.ifi-btn:hover{\r\n  background:#DDEFFF !important;\r\n  color:#102B44 !important;\r\n}\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.35rem;\r\n  font-weight:950;\r\n  color:#1D6845 !important;\r\n}\r\n\r\n.ifi-place-card{\r\n  background:#ffffff !important;\r\n  border:3px solid #7CB8E4 !important;\r\n  border-radius:28px;\r\n  padding:1.5rem;\r\n  margin:1rem auto;\r\n  max-width:720px;\r\n  box-shadow:0 8px 20px rgba(70,105,140,.08);\r\n}\r\n\r\n.ifi-place-card h3{\r\n  margin:0 0 1rem;\r\n  color:#1F2A3D !important;\r\n  font-size:1.7rem;\r\n  font-weight:950;\r\n}\r\n\r\n.ifi-place-choice-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n  gap:.8rem;\r\n}\r\n\r\n.ifi-place-choice{\r\n  border:3px solid #B8DDF6 !important;\r\n  border-radius:22px;\r\n  background:#F7FBFF !important;\r\n  color:#1F2A3D !important;\r\n  font-size:1.1rem;\r\n  font-weight:950;\r\n  padding:1rem;\r\n  cursor:pointer;\r\n  opacity:1 !important;\r\n}\r\n\r\n.ifi-place-choice:hover{\r\n  background:#DDEFFF !important;\r\n}\r\n\r\n.ifi-build-list{\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:1rem;\r\n  align-items:center;\r\n  margin:1.5rem auto;\r\n  max-width:520px;\r\n}\r\n\r\n.ifi-build-line{\r\n  width:100%;\r\n  background:#ffffff !important;\r\n  border:3px solid #7CB8E4 !important;\r\n  border-radius:24px;\r\n  padding:1.1rem 1.4rem;\r\n  font-size:clamp(1.5rem,4vw,2.4rem);\r\n  font-weight:950;\r\n  color:#1F2A3D !important;\r\n  text-align:center;\r\n  box-shadow:0 8px 20px rgba(70,105,140,.08);\r\n}\r\n\r\n.ifi-input{\r\n  width:100%;\r\n  max-width:260px;\r\n  padding:1.1rem;\r\n  border-radius:22px;\r\n  border:3px solid #7CB8E4 !important;\r\n  font-size:2rem;\r\n  font-weight:950;\r\n  text-align:center;\r\n  color:#1F2A3D !important;\r\n  background:#ffffff !important;\r\n}\r\n\r\n.ifi-input::placeholder{\r\n  color:#6B7F95 !important;\r\n  opacity:1 !important;\r\n}\r\n\r\n.ifi-mini-note{\r\n  margin-top:2rem;\r\n  font-size:1rem;\r\n}\r\n\r\n@media(max-width:800px){\r\n  .ifi-tabs,\r\n  .ifi-options,\r\n  .ifi-place-choice-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .ifi-hero,\r\n  .ifi-game,\r\n  .ifi-mini-note{\r\n    padding:1.6rem;\r\n  }\r\n\r\n  .ifi-question{\r\n    padding:1.4rem;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"ifi-place-page\">\r\n  <div class=\"ifi-place-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\">\ud83e\uddf1 Getalplek oefenen<\/div>\r\n      <h1>Eenheden, tientallen en honderdtallen<\/h1>\r\n      <p>\r\n        Een cijfer krijgt betekenis door de plek waar het staat.\r\n        We oefenen rustig met kijken, herkennen en bouwen.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"ifi-tabs\">\r\n      <button class=\"ifi-tab active\" onclick=\"showPlaceGame(1)\">\ud83e\uddf1<br><strong>Level 1<\/strong><br><span>Herkennen<\/span><\/button>\r\n      <button class=\"ifi-tab\" onclick=\"showPlaceGame(2)\">\ud83c\udf31<br><strong>Level 2<\/strong><br><span>Zoek de plek<\/span><\/button>\r\n      <button class=\"ifi-tab\" onclick=\"showPlaceGame(3)\">\ud83d\udd0e<br><strong>Level 3<\/strong><br><span>Bouwen<\/span><\/button>\r\n    <\/div>\r\n\r\n    <!-- LEVEL 1 -->\r\n    <div id=\"place-game-1\" class=\"ifi-game active\">\r\n      <h2>\ud83e\uddf1 Level 1: Wat zie je?<\/h2>\r\n      <p class=\"ifi-soft\">\r\n        Kijk naar het gekleurde cijfer. Staat het op de plek van de eenheden, tientallen of honderdtallen?\r\n      <\/p>\r\n\r\n      <div class=\"ifi-question\">\r\n        <div id=\"level1Question\" class=\"ifi-big\"><\/div>\r\n        <p class=\"ifi-soft\">Welke plek heeft het gekleurde cijfer?<\/p>\r\n\r\n        <div class=\"ifi-options\">\r\n          <button class=\"ifi-option\" onclick=\"checkLevel1('eenheid')\">Eenheid<\/button>\r\n          <button class=\"ifi-option\" onclick=\"checkLevel1('tiental')\">Tiental<\/button>\r\n          <button class=\"ifi-option\" onclick=\"checkLevel1('honderdtal')\">Honderdtal<\/button>\r\n        <\/div>\r\n\r\n        <div class=\"ifi-actions\">\r\n          <button class=\"ifi-btn\" onclick=\"newLevel1()\">Nieuw getal<\/button>\r\n        <\/div>\r\n\r\n        <div id=\"level1Feedback\" class=\"ifi-feedback\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- LEVEL 2 -->\r\n    <div id=\"place-game-2\" class=\"ifi-game\">\r\n      <h2>\ud83c\udf31 Level 2: Zoek de plek<\/h2>\r\n      <p class=\"ifi-soft\">\r\n        Kijk naar het getal. Kies per cijfer of het een eenheid, tiental of honderdtal is.\r\n      <\/p>\r\n\r\n      <div class=\"ifi-question\">\r\n        <div id=\"level2Number\" class=\"ifi-big\"><\/div>\r\n\r\n        <div id=\"level2Cards\"><\/div>\r\n\r\n        <div class=\"ifi-actions\">\r\n          <button class=\"ifi-btn\" onclick=\"newLevel2()\">Nieuw getal<\/button>\r\n        <\/div>\r\n\r\n        <div id=\"level2Feedback\" class=\"ifi-feedback\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- LEVEL 3 -->\r\n    <div id=\"place-game-3\" class=\"ifi-game\">\r\n      <h2>\ud83d\udd0e Level 3: Bouw het getal<\/h2>\r\n      <p class=\"ifi-soft\">\r\n        Lees de bouwstenen. Maak daar \u00e9\u00e9n getal van.\r\n      <\/p>\r\n\r\n      <div class=\"ifi-question\">\r\n        <div id=\"level3Build\" class=\"ifi-build-list\"><\/div>\r\n\r\n        <input id=\"level3Answer\" class=\"ifi-input\" type=\"number\" placeholder=\"?\" \/>\r\n\r\n        <div class=\"ifi-actions\">\r\n          <button class=\"ifi-btn\" onclick=\"checkLevel3()\">Controleer<\/button>\r\n          <button class=\"ifi-btn\" onclick=\"newLevel3()\">Nieuwe oefening<\/button>\r\n        <\/div>\r\n\r\n        <div id=\"level3Feedback\" class=\"ifi-feedback\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ifi-mini-note\">\r\n      \ud83c\udf38 Ifi-regel:<br>\r\n      Eenheden staan rechts. Tientallen staan in het midden.\r\n      Honderdtallen staan links. De plek van het cijfer vertelt hoeveel kracht het cijfer heeft.\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<script>\r\nlet level1Correct = \"\";\r\nlet level2Answers = {};\r\nlet level2Done = {};\r\nlet level3Correct = 0;\r\n\r\nfunction r(min,max){\r\n  return Math.floor(Math.random()*(max-min+1))+min;\r\n}\r\n\r\nfunction happy(){\r\n  const texts = [\r\n    \"Mooi gezien \ud83c\udf38\",\r\n    \"Yes, je keek naar de juiste plek \ud83d\udc9b\",\r\n    \"Rustig gedacht, goed gedaan \ud83c\udf31\",\r\n    \"Knap hoor, je brein snapt de plek \ud83e\uddf1\"\r\n  ];\r\n  return texts[r(0,texts.length-1)];\r\n}\r\n\r\nfunction tryAgain(){\r\n  const texts = [\r\n    \"Bijna. Kijk nog eens rustig naar de plek \ud83d\udc9b\",\r\n    \"Geen haast. Kijk van links naar rechts \ud83c\udf31\",\r\n    \"Honderdtallen links, tientallen in het midden, eenheden rechts \ud83e\uddf1\"\r\n  ];\r\n  return texts[r(0,texts.length-1)];\r\n}\r\n\r\nfunction showPlaceGame(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(\"place-game-\" + n).classList.add(\"active\");\r\n  document.querySelectorAll(\".ifi-tab\")[n - 1].classList.add(\"active\");\r\n}\r\n\r\nfunction newLevel1(){\r\n  const number = r(100,999);\r\n  const digits = String(number).split(\"\");\r\n  const place = r(0,2);\r\n\r\n  if(place === 0){\r\n    level1Correct = \"honderdtal\";\r\n  } else if(place === 1){\r\n    level1Correct = \"tiental\";\r\n  } else {\r\n    level1Correct = \"eenheid\";\r\n  }\r\n\r\n  let shown = \"\";\r\n\r\n  digits.forEach(function(digit,index){\r\n    if(index === place){\r\n      shown += '<span class=\"ifi-highlight\">' + digit + '<\/span>';\r\n    } else {\r\n      shown += digit;\r\n    }\r\n  });\r\n\r\n  document.getElementById(\"level1Question\").innerHTML = shown;\r\n  document.getElementById(\"level1Feedback\").innerText = \"\";\r\n}\r\n\r\nfunction checkLevel1(choice){\r\n  document.getElementById(\"level1Feedback\").innerText =\r\n    choice === level1Correct ? happy() : tryAgain();\r\n}\r\n\r\nfunction newLevel2(){\r\n  const number = r(100,999);\r\n  const digits = String(number).split(\"\");\r\n\r\n  level2Answers = {\r\n    0: \"honderdtal\",\r\n    1: \"tiental\",\r\n    2: \"eenheid\"\r\n  };\r\n\r\n  level2Done = {\r\n    0: false,\r\n    1: false,\r\n    2: false\r\n  };\r\n\r\n  document.getElementById(\"level2Number\").innerText = number;\r\n\r\n  let html = \"\";\r\n\r\n  digits.forEach(function(digit,index){\r\n    html +=\r\n      '<div class=\"ifi-place-card\">' +\r\n        '<h3>Waar staat de ' + digit + '?<\/h3>' +\r\n        '<div class=\"ifi-place-choice-grid\">' +\r\n          '<button class=\"ifi-place-choice\" onclick=\"checkLevel2(' + index + ', \\'eenheid\\', this)\">Eenheid<\/button>' +\r\n          '<button class=\"ifi-place-choice\" onclick=\"checkLevel2(' + index + ', \\'tiental\\', this)\">Tiental<\/button>' +\r\n          '<button class=\"ifi-place-choice\" onclick=\"checkLevel2(' + index + ', \\'honderdtal\\', this)\">Honderdtal<\/button>' +\r\n        '<\/div>' +\r\n      '<\/div>';\r\n  });\r\n\r\n  document.getElementById(\"level2Cards\").innerHTML = html;\r\n  document.getElementById(\"level2Feedback\").innerText = \"\";\r\n}\r\n\r\nfunction checkLevel2(index,choice,button){\r\n  if(choice === level2Answers[index]){\r\n    level2Done[index] = true;\r\n    button.style.background = \"#DFF5E8\";\r\n    button.style.borderColor = \"#4E9B68\";\r\n    button.innerText = button.innerText + \" \u2713\";\r\n    button.disabled = true;\r\n\r\n    if(level2Done[0] && level2Done[1] && level2Done[2]){\r\n      document.getElementById(\"level2Feedback\").innerText =\r\n        \"Yes, je hebt alle cijfers op de juiste plek gezet \ud83c\udf31\";\r\n    } else {\r\n      document.getElementById(\"level2Feedback\").innerText =\r\n        \"Goed gezien. Ga rustig door \ud83d\udc9b\";\r\n    }\r\n  } else {\r\n    document.getElementById(\"level2Feedback\").innerText = tryAgain();\r\n  }\r\n}\r\n\r\nfunction newLevel3(){\r\n  const h = r(1,9);\r\n  const t = r(0,9);\r\n  const e = r(0,9);\r\n\r\n  level3Correct = h * 100 + t * 10 + e;\r\n\r\n  document.getElementById(\"level3Build\").innerHTML =\r\n    '<div class=\"ifi-build-line\">' + h + ' honderdtallen<\/div>' +\r\n    '<div class=\"ifi-build-line\">' + t + ' tientallen<\/div>' +\r\n    '<div class=\"ifi-build-line\">' + e + ' eenheden<\/div>';\r\n\r\n  document.getElementById(\"level3Answer\").value = \"\";\r\n  document.getElementById(\"level3Feedback\").innerText = \"\";\r\n}\r\n\r\nfunction checkLevel3(){\r\n  const answer = Number(document.getElementById(\"level3Answer\").value);\r\n\r\n  document.getElementById(\"level3Feedback\").innerText =\r\n    answer === level3Correct ? happy() : tryAgain();\r\n}\r\n\r\nnewLevel1();\r\nnewLevel2();\r\nnewLevel3();\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 \ud83e\uddf1 Getalplek oefenen Eenheden, tientallen en honderdtallen Een cijfer krijgt betekenis door de plek waar het staat. We oefenen rustig met kijken, herkennen en bouwen. \ud83e\uddf1Level 1Herkennen \ud83c\udf31Level 2Zoek de plek \ud83d\udd0eLevel 3Bouwen \ud83e\uddf1 Level 1: Wat zie je? Kijk naar het gekleurde cijfer. Staat het op de plek van de eenheden, tientallen [&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-3102","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/3102","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=3102"}],"version-history":[{"count":16,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/3102\/revisions"}],"predecessor-version":[{"id":3165,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/pages\/3102\/revisions\/3165"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}