{"id":2355,"date":"2026-05-13T15:44:21","date_gmt":"2026-05-13T15:44:21","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?p=2355"},"modified":"2026-06-18T04:14:06","modified_gmt":"2026-06-18T04:14:06","slug":"tafel-van-9","status":"publish","type":"post","link":"https:\/\/withifi.muhubonurture.nl\/?p=2355","title":{"rendered":"Tafel Van 9"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2355\" class=\"elementor elementor-2355\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-20169ae e-con-full e-flex e-con e-parent\" data-id=\"20169ae\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0c31ebe elementor-widget elementor-widget-html\" data-id=\"0c31ebe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- COPY-PASTE VOOR ELEMENTOR -->\r\n\r\n<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 4rem;\r\n  color:#3A2B24;\r\n\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,232,210,0.42) 0%, transparent 32%),\r\n    radial-gradient(circle at 50% 82%, rgba(238,247,243,0.58) 0%, transparent 36%),\r\n    linear-gradient(135deg,#F9FBF8 0%,#FFF6EC 45%,#F4FBF7 100%);\r\n}\r\n\r\n.tafel-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(90,70,55,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.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-hero h1{\r\n  font-size:clamp(44px,6vw,74px);\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-hero p{\r\n  font-size:19px;\r\n  line-height:1.9;\r\n  color:#7A6455;\r\n  font-weight:650;\r\n  max-width:760px;\r\n  margin:0 auto;\r\n}\r\n\r\n.route-blok,\r\n.oefenblok,\r\n.level2-blok,\r\n.level3-blok{\r\n  max-width:1120px;\r\n  margin:0 auto 4rem;\r\n}\r\n\r\n.route-kop{\r\n  margin-bottom:1.7rem;\r\n}\r\n\r\n.route-title{\r\n  font-size:clamp(32px,4vw,48px);\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n  margin:0 0 .7rem;\r\n}\r\n\r\n.route-text,\r\n.uitleg-sub{\r\n  font-size:18px;\r\n  line-height:1.8;\r\n  color:#7A6455;\r\n  font-weight:650;\r\n  max-width:820px;\r\n  margin:0;\r\n}\r\n\r\n.route-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n  gap:1.4rem;\r\n}\r\n\r\n.route-card,\r\n.uitleg-card,\r\n.oefenblok,\r\n.level2-blok,\r\n.level3-blok{\r\n  padding:1.8rem;\r\n  border-radius:34px;\r\n  background:rgba(255,255,255,0.58);\r\n  border:1px solid rgba(255,255,255,0.94);\r\n  box-shadow:0 10px 28px rgba(90,70,55,0.06);\r\n  color:#3A2B24;\r\n  position:relative;\r\n  overflow:hidden;\r\n}\r\n\r\n.route-card::before,\r\n.uitleg-card::before{\r\n  content:\"\";\r\n  position:absolute;\r\n  right:-42px;\r\n  top:-42px;\r\n  width:128px;\r\n  height:128px;\r\n  border-radius:50%;\r\n  background:rgba(255,255,255,0.52);\r\n}\r\n\r\n.route-card:nth-child(1),\r\n.uitleg-card:nth-child(1){\r\n  background:linear-gradient(135deg,#FFF4E3 0%,#FFF9EF 100%);\r\n}\r\n\r\n.route-card:nth-child(2),\r\n.uitleg-card:nth-child(2){\r\n  background:linear-gradient(135deg,#EAF7F1 0%,#F7FFFB 100%);\r\n}\r\n\r\n.route-card:nth-child(3),\r\n.uitleg-card:nth-child(3){\r\n  background:linear-gradient(135deg,#FFEAF1 0%,#FFF7FA 100%);\r\n}\r\n\r\n.route-card:hover,\r\n.uitleg-card:hover{\r\n  transform:translateY(-6px) scale(1.01);\r\n  background:rgba(255,255,255,0.78);\r\n  box-shadow:0 18px 38px rgba(90,70,55,0.11);\r\n}\r\n\r\n.route-card,\r\n.uitleg-card{\r\n  transition:.25s ease;\r\n}\r\n\r\n.card-top{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:1rem;\r\n  margin-bottom:1.1rem;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n.card-icon{\r\n  width:58px;\r\n  height:58px;\r\n  border-radius:22px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  background:rgba(255,255,255,0.76);\r\n  box-shadow:0 8px 20px rgba(90,70,55,0.08);\r\n  font-size:1.8rem;\r\n  flex-shrink:0;\r\n}\r\n\r\n.route-card h3,\r\n.uitleg-card h3{\r\n  margin:0;\r\n  font-size:1.22rem;\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n.route-card p,\r\n.uitleg-card p{\r\n  margin:0;\r\n  color:#7A6455;\r\n  line-height:1.8;\r\n  font-weight:650;\r\n  font-size:1rem;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n.uitleg-card{\r\n  max-width:1120px;\r\n  margin:0 auto 4rem;\r\n  text-align:center;\r\n}\r\n\r\n.negen-groepen{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:1rem;\r\n  justify-content:center;\r\n  margin:1.5rem 0;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n.negenblok{\r\n  width:112px;\r\n  height:112px;\r\n  border-radius:28px;\r\n  background:rgba(255,255,255,0.78);\r\n  box-shadow:0 8px 18px rgba(90,70,55,0.05);\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n  grid-template-rows:repeat(3,1fr);\r\n  place-items:center;\r\n  padding:.7rem;\r\n}\r\n\r\n.ster{\r\n  width:28px;\r\n  height:28px;\r\n  border-radius:12px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  background:#FFE8D2;\r\n  font-size:1rem;\r\n}\r\n\r\n.somregel{\r\n  margin:1.4rem auto 0;\r\n  max-width:460px;\r\n  padding:1rem 1.2rem;\r\n  border-radius:24px;\r\n  background:rgba(255,255,255,0.72);\r\n  color:#3A2B24;\r\n  font-size:1.55rem;\r\n  line-height:1.7;\r\n  font-weight:900;\r\n  text-align:center;\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n.oefenblok,\r\n.level2-blok,\r\n.level3-blok{\r\n  padding:2.8rem;\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(90,70,55,0.08);\r\n  backdrop-filter:blur(16px);\r\n  -webkit-backdrop-filter:blur(16px);\r\n}\r\n\r\n.level2-blok,\r\n.level3-blok{\r\n  display:none;\r\n}\r\n\r\n.level2-blok.actief,\r\n.level3-blok.actief{\r\n  display:block;\r\n}\r\n\r\n.uitleg-title{\r\n  font-size:clamp(30px,4vw,44px);\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n  margin:0 0 1rem;\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  align-items:center;\r\n  gap:1rem;\r\n  flex-wrap:wrap;\r\n  margin-bottom:1.2rem;\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:12px;\r\n  border-radius:999px;\r\n  background:rgba(255,255,255,0.72);\r\n  overflow:hidden;\r\n  margin:10px 0 2rem;\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-card{\r\n  padding:2rem;\r\n  border-radius:34px;\r\n  background:linear-gradient(135deg,#FFF4E3 0%,#FFF9EF 100%);\r\n  border:1px solid rgba(255,255,255,0.94);\r\n  text-align:center;\r\n}\r\n\r\n.vraag{\r\n  font-size:1.65rem;\r\n  font-weight:900;\r\n  color:#3A2B24;\r\n  text-align:center;\r\n  margin-bottom:1rem;\r\n}\r\n\r\n.level3-som{\r\n  font-size:clamp(2.6rem,6vw,4.4rem);\r\n  font-weight:900;\r\n  margin:1.5rem 0;\r\n  color:#3A2B24;\r\n  line-height:1;\r\n}\r\n\r\n.helper{\r\n  color:#7A6455;\r\n  font-weight:750;\r\n  margin-bottom:1rem;\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:100px;\r\n  padding:1rem 1.7rem;\r\n  border-radius:999px;\r\n  background:rgba(255,255,255,0.94);\r\n  color:#3A2B24 !important;\r\n  font-size:1.25rem;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n  border:2px solid rgba(232,205,188,0.65);\r\n  box-shadow:0 8px 20px rgba(90,70,55,0.06);\r\n  transition:.25s ease;\r\n}\r\n\r\n.knop:hover:not(:disabled){\r\n  transform:translateY(-3px);\r\n  background:#FFF0DE;\r\n}\r\n\r\n.knop:disabled{\r\n  cursor:default;\r\n}\r\n\r\n.knop.juist{\r\n  background:#DDF5E4 !important;\r\n  color:#2F6A46 !important;\r\n  border-color:#B9DEC5 !important;\r\n}\r\n\r\n.knop.fout{\r\n  background:#FFE3E3 !important;\r\n  color:#9A4B4B !important;\r\n  border-color:#F3C4C4 !important;\r\n}\r\n\r\n.feedback{\r\n  display:none;\r\n  margin-top:1.5rem;\r\n  padding:1rem;\r\n  border-radius:20px;\r\n  background:rgba(255,255,255,0.75);\r\n  color:#7A6455;\r\n  font-weight:850;\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}\r\n\r\n.volgende{\r\n  display:none;\r\n  margin-top:1.6rem;\r\n  text-align:center;\r\n}\r\n\r\n.volgende button,\r\n.check-btn{\r\n  padding:1rem 2.1rem;\r\n  border-radius:999px;\r\n  border:none;\r\n  background:#FFD6A8;\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n  box-shadow:0 8px 20px rgba(90,70,55,0.08);\r\n  transition:.25s ease;\r\n}\r\n\r\n.volgende button:hover,\r\n.check-btn:hover{\r\n  transform:translateY(-3px);\r\n  background:#FFF0DE;\r\n}\r\n\r\n.level2-grid{\r\n  margin-top:2rem;\r\n  display:grid;\r\n  grid-template-columns:repeat(2,1fr);\r\n  gap:1rem;\r\n}\r\n\r\n.level2-card{\r\n  background:linear-gradient(135deg,#FFF4E3 0%,#FFF9EF 100%);\r\n  border-radius:28px;\r\n  padding:1.6rem;\r\n  text-align:center;\r\n  box-shadow:0 8px 20px rgba(90,70,55,0.05);\r\n}\r\n\r\n.level2-card h3{\r\n  margin:0 0 1rem;\r\n  font-size:1.35rem;\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n  line-height:1.5;\r\n}\r\n\r\n.level2-card p{\r\n  color:#7A6455;\r\n  font-weight:750;\r\n  line-height:1.6;\r\n}\r\n\r\n.level2-feedback,\r\n.level3-feedback{\r\n  margin-top:2rem;\r\n  padding:1rem;\r\n  border-radius:22px;\r\n  background:rgba(255,255,255,0.65);\r\n  line-height:1.8;\r\n  color:#7A6455;\r\n  font-weight:800;\r\n}\r\n\r\n.reminder-box{\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(255,234,242,.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:0 16px 38px rgba(90,70,55,.08);\r\n  color:#7A6455;\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  .tafel-page{\r\n    padding:5rem 6vw 3rem;\r\n  }\r\n\r\n  .tafel-hero,\r\n  .oefenblok,\r\n  .level2-blok,\r\n  .level3-blok{\r\n    padding:2.4rem;\r\n  }\r\n\r\n  .route-grid,\r\n  .level2-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .route-kop{\r\n    text-align:center;\r\n  }\r\n\r\n  .route-text,\r\n  .uitleg-sub{\r\n    margin-left:auto;\r\n    margin-right:auto;\r\n  }\r\n\r\n  .card-top{\r\n    flex-direction:column;\r\n    text-align:center;\r\n  }\r\n\r\n  .route-card,\r\n  .uitleg-card{\r\n    text-align:center;\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=\"tafel-page\">\r\n\r\n  <div class=\"tafel-hero\">\r\n    <div class=\"tafel-label\">\u2716\ufe0f Werkblad tafels<\/div>\r\n\r\n    <h1>Tafel van 9.<\/h1>\r\n\r\n    <p>\r\n      Bij de tafel van 9 oefenen we met magische 9-blokken.\r\n      Elk blok heeft 9 sterretjes.\r\n      We tellen rustig: 9, 18, 27, 36 \ud83c\udf3f\r\n    <\/p>\r\n  <\/div>\r\n\r\n  <div class=\"route-blok\">\r\n    <div class=\"route-kop\">\r\n      <h2 class=\"route-title\">\ud83c\udf31 Eerst begrijpen<\/h2>\r\n      <p class=\"route-text\">\r\n        Bij de tafel van 9 kijken we naar blokken met sterretjes.\r\n        Elk blok helpt je om de sprongen van 9 rustig te zien.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"route-grid\">\r\n      <div class=\"route-card\">\r\n        <div class=\"card-top\">\r\n          <div class=\"card-icon\">\u2728<\/div>\r\n          <h3>9-blokken zien<\/h3>\r\n        <\/div>\r\n        <p>Elk blok heeft precies 9 sterretjes.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"route-card\">\r\n        <div class=\"card-top\">\r\n          <div class=\"card-icon\">\ud83c\udf3f<\/div>\r\n          <h3>9 erbij<\/h3>\r\n        <\/div>\r\n        <p>Elke stap wordt 9 meer.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"route-card\">\r\n        <div class=\"card-top\">\r\n          <div class=\"card-icon\">\ud83e\ude84<\/div>\r\n          <h3>Magisch patroon<\/h3>\r\n        <\/div>\r\n        <p>De antwoorden lopen steeds door met 9.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"uitleg-card\">\r\n    <h2 class=\"uitleg-title\">\ud83c\udf31 Kijk naar de 9-blokken<\/h2>\r\n\r\n    <div class=\"uitleg-sub\">\r\n      Hier zie je 3 blokken.\r\n      Elk blok heeft 9 sterretjes.\r\n    <\/div>\r\n\r\n    <div class=\"negen-groepen\">\r\n      <div class=\"negenblok\"><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><\/div>\r\n      <div class=\"negenblok\"><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><\/div>\r\n      <div class=\"negenblok\"><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"somregel\">\r\n      3 blokken van 9 = 27<br>\r\n      3 \u00d7 9 = 27\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"oefenblok\">\r\n\r\n    <div class=\"oefen-top\">\r\n      <div class=\"level-pill\">\ud83c\udf31 Level 1: 9-blokken tellen<\/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-card\">\r\n      <div class=\"vraag\" id=\"vraag\"><\/div>\r\n      <div class=\"helper\" id=\"helper\"><\/div>\r\n      <div class=\"negen-groepen\" id=\"negenGroepen\"><\/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    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"level2-blok\" id=\"level2Blok\">\r\n\r\n    <div class=\"uitleg-title\">\ud83c\udf38 Level 2: De magische 9-route<\/div>\r\n\r\n    <div class=\"uitleg-sub\" style=\"text-align:center;margin:auto;\">\r\n      Kies welk getal ontbreekt in de rij.\r\n      Denk steeds: 9 erbij.\r\n    <\/div>\r\n\r\n    <div class=\"level2-grid\" id=\"level2Grid\"><\/div>\r\n    <div class=\"level2-feedback\" id=\"level2Feedback\"><\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"level3-blok\" id=\"level3Blok\">\r\n\r\n    <div class=\"uitleg-title\">\u2728 Level 3: Sommetjes<\/div>\r\n\r\n    <div class=\"uitleg-sub\" style=\"text-align:center;margin:auto;\">\r\n      Nu gaan we gewone tafelsommetjes oefenen.\r\n      De sommen komen steeds in een andere volgorde.\r\n    <\/div>\r\n\r\n    <div class=\"vraag-card\" style=\"margin-top:2rem;\">\r\n      <div class=\"oefen-top\">\r\n        <div class=\"level-pill\">\u2728 Level 3: Sommen<\/div>\r\n        <div class=\"score-pill\" id=\"level3Score\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"progress-wrap\">\r\n        <div class=\"progress-bar\" id=\"level3Progress\"><\/div>\r\n      <\/div>\r\n\r\n      <div class=\"vraag\">Welke uitkomst hoort erbij?<\/div>\r\n      <div class=\"level3-som\" id=\"level3Som\"><\/div>\r\n      <div class=\"helper\" id=\"level3Helper\"><\/div>\r\n      <div class=\"antwoorden\" id=\"level3Antwoorden\"><\/div>\r\n      <div class=\"feedback level3-feedback\" id=\"level3Feedback\"><\/div>\r\n\r\n      <div class=\"volgende\" id=\"level3Volgende\">\r\n        <button id=\"level3VolgendeBtn\">Volgende som \ud83c\udf3f<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"reminder-box\">\r\n    Kleine reminder \ud83c\udf38<br>\r\n    De tafel van 9 gaat steeds met sprongen van 9:<br>\r\n    9, 18, 27, 36, 45...\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded',()=>{\r\n\r\nconst vragen = [\r\n  {aantal:1, antwoord:'9', opties:['7','9','11']},\r\n  {aantal:2, antwoord:'18', opties:['16','18','20']},\r\n  {aantal:3, antwoord:'27', opties:['18','27','36']},\r\n  {aantal:4, antwoord:'36', opties:['27','36','45']},\r\n  {aantal:5, antwoord:'45', opties:['36','45','54']},\r\n  {aantal:6, antwoord:'54', opties:['45','54','63']},\r\n  {aantal:7, antwoord:'63', opties:['54','63','72']},\r\n  {aantal:8, antwoord:'72', opties:['63','72','81']},\r\n  {aantal:9, antwoord:'81', opties:['72','81','90']},\r\n  {aantal:10, antwoord:'90', opties:['81','90','99']}\r\n];\r\n\r\nconst level2Vragen = [\r\n  {tekst:'9, 18, 27, 36, ...', antwoord:'45', opties:['36','45','54']},\r\n  {tekst:'18, 27, 36, 45, ...', antwoord:'54', opties:['45','54','63']},\r\n  {tekst:'27, 36, 45, 54, ...', antwoord:'63', opties:['54','63','72']},\r\n  {tekst:'36, 45, 54, 63, ...', antwoord:'72', opties:['63','72','81']},\r\n  {tekst:'45, 54, 63, 72, ...', antwoord:'81', opties:['72','81','90']},\r\n  {tekst:'54, 63, 72, 81, ...', antwoord:'90', opties:['81','90','99']},\r\n  {tekst:'9, 18, ..., 36, 45', antwoord:'27', opties:['18','27','36']},\r\n  {tekst:'18, ..., 36, 45, 54', antwoord:'27', opties:['27','36','45']},\r\n  {tekst:'27, 36, ..., 54, 63', antwoord:'45', opties:['36','45','54']},\r\n  {tekst:'45, 54, ..., 72, 81', antwoord:'63', opties:['54','63','72']}\r\n];\r\n\r\nfunction shuffleArray(array){\r\n  const arr = [...array];\r\n\r\n  for(let i = arr.length - 1; i > 0; i--){\r\n    const j = Math.floor(Math.random() * (i + 1));\r\n    [arr[i], arr[j]] = [arr[j], arr[i]];\r\n  }\r\n\r\n  return arr;\r\n}\r\n\r\nconst level3Vragen = shuffleArray([\r\n  {som:'1 \u00d7 9', antwoord:'9', opties:['7','9','11']},\r\n  {som:'2 \u00d7 9', antwoord:'18', opties:['16','18','20']},\r\n  {som:'3 \u00d7 9', antwoord:'27', opties:['18','27','36']},\r\n  {som:'4 \u00d7 9', antwoord:'36', opties:['27','36','45']},\r\n  {som:'5 \u00d7 9', antwoord:'45', opties:['36','45','54']},\r\n  {som:'6 \u00d7 9', antwoord:'54', opties:['45','54','63']},\r\n  {som:'7 \u00d7 9', antwoord:'63', opties:['54','63','72']},\r\n  {som:'8 \u00d7 9', antwoord:'72', opties:['63','72','81']},\r\n  {som:'9 \u00d7 9', antwoord:'81', opties:['72','81','90']},\r\n  {som:'10 \u00d7 9', antwoord:'90', opties:['81','90','99']}\r\n]);\r\n\r\nlet vraagIndex = 0;\r\nlet goedAantal = 0;\r\nlet locked = false;\r\nlet huidigItem = null;\r\n\r\nlet level2Goed = 0;\r\nlet level2Beantwoord = 0;\r\n\r\nlet level3Index = 0;\r\nlet level3Goed = 0;\r\nlet level3Locked = false;\r\nlet huidigLevel3 = null;\r\n\r\nconst scoreTekst = document.getElementById('scoreTekst');\r\nconst progressBar = document.getElementById('progressBar');\r\nconst vraagEl = document.getElementById('vraag');\r\nconst helperEl = document.getElementById('helper');\r\nconst negenGroepenEl = document.getElementById('negenGroepen');\r\nconst antwoordenEl = document.getElementById('antwoorden');\r\nconst feedbackEl = document.getElementById('feedback');\r\nconst volgende = document.getElementById('volgende');\r\nconst volgendeBtn = document.getElementById('volgendeBtn');\r\n\r\nconst level2Blok = document.getElementById('level2Blok');\r\nconst level2Grid = document.getElementById('level2Grid');\r\nconst level2Feedback = document.getElementById('level2Feedback');\r\n\r\nconst level3Blok = document.getElementById('level3Blok');\r\nconst level3Score = document.getElementById('level3Score');\r\nconst level3Progress = document.getElementById('level3Progress');\r\nconst level3Som = document.getElementById('level3Som');\r\nconst level3Helper = document.getElementById('level3Helper');\r\nconst level3Antwoorden = document.getElementById('level3Antwoorden');\r\nconst level3Feedback = document.getElementById('level3Feedback');\r\nconst level3Volgende = document.getElementById('level3Volgende');\r\nconst level3VolgendeBtn = document.getElementById('level3VolgendeBtn');\r\n\r\nfunction shuffle(arr){\r\n  return [...arr].sort(()=>Math.random() - 0.5);\r\n}\r\n\r\nfunction maakNegenBlok(){\r\n  const blok = document.createElement('div');\r\n  blok.className = 'negenblok';\r\n\r\n  blok.innerHTML = `\r\n    <span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span>\r\n    <span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span>\r\n    <span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span><span class=\"ster\">\u2b50<\/span>\r\n  `;\r\n\r\n  return blok;\r\n}\r\n\r\nfunction toonNegenGroepen(aantal){\r\n  negenGroepenEl.innerHTML = '';\r\n\r\n  for(let i = 0; i < aantal; i++){\r\n    negenGroepenEl.appendChild(maakNegenBlok());\r\n  }\r\n}\r\n\r\nfunction resetVraag(){\r\n  locked = false;\r\n  feedbackEl.style.display = 'none';\r\n  feedbackEl.innerHTML = '';\r\n  antwoordenEl.innerHTML = '';\r\n  negenGroepenEl.innerHTML = '';\r\n  volgende.style.display = 'none';\r\n}\r\n\r\nfunction laadVraag(){\r\n  resetVraag();\r\n\r\n  huidigItem = vragen[vraagIndex];\r\n\r\n  scoreTekst.textContent = `Vraag ${vraagIndex + 1} van ${vragen.length}`;\r\n  progressBar.style.width = `${(vraagIndex \/ vragen.length) * 100}%`;\r\n\r\n  vraagEl.textContent = 'Hoeveel sterretjes zijn het samen?';\r\n\r\n  helperEl.textContent =\r\n  `${huidigItem.aantal} blok(ken). Elk blok heeft 9 sterretjes.`;\r\n\r\n  toonNegenGroepen(huidigItem.aantal);\r\n\r\n  shuffle(huidigItem.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\nfunction controleer(btn,keuze){\r\n  if(locked){\r\n    return;\r\n  }\r\n\r\n  if(keuze === huidigItem.antwoord){\r\n    locked = true;\r\n    goedAantal++;\r\n\r\n    document.querySelectorAll('.knop').forEach(k=>{\r\n      k.disabled = true;\r\n    });\r\n\r\n    btn.classList.add('juist');\r\n\r\n    feedbackEl.style.display = 'block';\r\n    feedbackEl.innerHTML = `\r\n      \ud83c\udf38 Goed gezien.<br>\r\n      <strong>${huidigItem.aantal} \u00d7 9 = ${huidigItem.antwoord}<\/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.style.display = 'block';\r\n    feedbackEl.innerHTML = '\ud83c\udf3f Kijk rustig nog eens. Tel de blokken.';\r\n  }\r\n}\r\n\r\nfunction toonKlaar(){\r\n  progressBar.style.width = '100%';\r\n\r\n  vraagEl.textContent = 'Level 1 is klaar \ud83c\udf38';\r\n  helperEl.textContent = '';\r\n  negenGroepenEl.innerHTML = '';\r\n  antwoordenEl.innerHTML = '';\r\n\r\n  feedbackEl.style.display = 'block';\r\n  feedbackEl.innerHTML = `\r\n    Je hebt ${goedAantal} antwoorden goed gedaan.<br>\r\n    Nu mag je rustig verder met Level 2.\r\n  `;\r\n\r\n  volgende.style.display = 'none';\r\n\r\n  maakLevel2();\r\n  level2Blok.classList.add('actief');\r\n\r\n  setTimeout(()=>{\r\n    level2Blok.scrollIntoView({\r\n      behavior:'smooth',\r\n      block:'start'\r\n    });\r\n  },400);\r\n}\r\n\r\nfunction maakLevel2(){\r\n  level2Grid.innerHTML = '';\r\n  level2Feedback.innerHTML = '';\r\n  level2Goed = 0;\r\n  level2Beantwoord = 0;\r\n\r\n  level2Vragen.forEach((item)=>{\r\n    const card = document.createElement('div');\r\n    card.className = 'level2-card';\r\n\r\n    let knoppen = '';\r\n\r\n    shuffle(item.opties).forEach(optie=>{\r\n      knoppen += `\r\n        <button\r\n        class=\"knop\"\r\n        data-keuze=\"${optie}\"\r\n        data-antwoord=\"${item.antwoord}\"\r\n        onclick=\"checkLevel2(this)\">\r\n        ${optie}\r\n        <\/button>\r\n      `;\r\n    });\r\n\r\n    card.innerHTML = `\r\n      <h3>${item.tekst}<\/h3>\r\n      <p>Welk getal hoort erbij?<\/p>\r\n      <div class=\"antwoorden\">${knoppen}<\/div>\r\n    `;\r\n\r\n    level2Grid.appendChild(card);\r\n  });\r\n}\r\n\r\nwindow.checkLevel2 = function(btn){\r\n  const card = btn.closest('.level2-card');\r\n\r\n  if(card.classList.contains('klaar')){\r\n    return;\r\n  }\r\n\r\n  const keuze = btn.getAttribute('data-keuze');\r\n  const antwoord = btn.getAttribute('data-antwoord');\r\n  const knoppen = card.querySelectorAll('.knop');\r\n\r\n  knoppen.forEach(k=>{\r\n    k.disabled = true;\r\n  });\r\n\r\n  if(keuze === antwoord){\r\n    btn.classList.add('juist');\r\n    level2Goed++;\r\n  }else{\r\n    btn.classList.add('fout');\r\n\r\n    knoppen.forEach(k=>{\r\n      if(k.getAttribute('data-keuze') === antwoord){\r\n        k.classList.add('juist');\r\n      }\r\n    });\r\n  }\r\n\r\n  card.classList.add('klaar');\r\n  level2Beantwoord++;\r\n\r\n  if(level2Beantwoord === level2Vragen.length){\r\n    if(level2Goed === level2Vragen.length){\r\n\r\n      level2Feedback.innerHTML = `\r\n        \ud83c\udf38 Wauw, alles goed gemaakt.<br>\r\n        Je mag nu door naar Level 3.\r\n      `;\r\n\r\n      level3Blok.classList.add('actief');\r\n\r\n      setTimeout(()=>{\r\n        level3Blok.scrollIntoView({\r\n          behavior:'smooth',\r\n          block:'start'\r\n        });\r\n      },500);\r\n\r\n      laadLevel3();\r\n\r\n    }else{\r\n      level2Feedback.innerHTML = `\r\n        \ud83c\udf3f Je hebt ${level2Goed} van de ${level2Vragen.length} goed.<br>\r\n        Kijk rustig naar de groene antwoorden.\r\n      `;\r\n    }\r\n  }\r\n};\r\n\r\nfunction resetLevel3(){\r\n  level3Locked = false;\r\n  level3Feedback.style.display = 'none';\r\n  level3Feedback.innerHTML = '';\r\n  level3Antwoorden.innerHTML = '';\r\n  level3Volgende.style.display = 'none';\r\n}\r\n\r\nfunction laadLevel3(){\r\n  resetLevel3();\r\n\r\n  huidigLevel3 = level3Vragen[level3Index];\r\n\r\n  level3Score.textContent =\r\n  `Som ${level3Index + 1} van ${level3Vragen.length}`;\r\n\r\n  level3Progress.style.width =\r\n  `${(level3Index \/ level3Vragen.length) * 100}%`;\r\n\r\n  level3Som.textContent = huidigLevel3.som;\r\n  level3Helper.textContent = 'Kies het goede antwoord.';\r\n\r\n  shuffle(huidigLevel3.opties).forEach(optie=>{\r\n    const btn = document.createElement('button');\r\n    btn.className = 'knop';\r\n    btn.textContent = optie;\r\n    btn.onclick = () => controleerLevel3(btn,optie);\r\n    level3Antwoorden.appendChild(btn);\r\n  });\r\n}\r\n\r\nfunction controleerLevel3(btn,keuze){\r\n  if(level3Locked){\r\n    return;\r\n  }\r\n\r\n  if(keuze === huidigLevel3.antwoord){\r\n    level3Locked = true;\r\n    level3Goed++;\r\n\r\n    level3Antwoorden.querySelectorAll('.knop').forEach(k=>{\r\n      k.disabled = true;\r\n    });\r\n\r\n    btn.classList.add('juist');\r\n\r\n    level3Feedback.style.display = 'block';\r\n    level3Feedback.innerHTML = `\r\n      \ud83c\udf38 Goed zo.<br>\r\n      <strong>${huidigLevel3.som} = ${huidigLevel3.antwoord}<\/strong>\r\n    `;\r\n\r\n    level3Volgende.style.display = 'block';\r\n\r\n    level3VolgendeBtn.onclick = () => {\r\n      level3Index++;\r\n\r\n      if(level3Index >= level3Vragen.length){\r\n        toonLevel3Klaar();\r\n      }else{\r\n        laadLevel3();\r\n      }\r\n    };\r\n\r\n  }else{\r\n    btn.classList.add('fout');\r\n    level3Feedback.style.display = 'block';\r\n    level3Feedback.innerHTML = '\ud83c\udf3f Kijk rustig nog eens.';\r\n  }\r\n}\r\n\r\nfunction toonLevel3Klaar(){\r\n  level3Progress.style.width = '100%';\r\n\r\n  level3Som.textContent = '';\r\n  level3Helper.textContent = '';\r\n  level3Antwoorden.innerHTML = '';\r\n\r\n  level3Feedback.style.display = 'block';\r\n  level3Feedback.innerHTML = `\r\n    \ud83c\udf38 Alle levels zijn klaar.<br>\r\n    Je hebt ${level3Goed} van de ${level3Vragen.length} sommetjes goed gedaan.\r\n  `;\r\n\r\n  level3Volgende.style.display = 'none';\r\n}\r\n\r\nlaadVraag();\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 9. Bij de tafel van 9 oefenen we met magische 9-blokken. Elk blok heeft 9 sterretjes. We tellen rustig: 9, 18, 27, 36 \ud83c\udf3f \ud83c\udf31 Eerst begrijpen Bij de tafel van 9 kijken we naar blokken met sterretjes. Elk blok helpt je om de sprongen van 9 rustig te zien. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10],"tags":[],"class_list":["post-2355","post","type-post","status-publish","format-standard","hentry","category-tafels"],"acf":[],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"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=2355"}],"version-history":[{"count":16,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2355\/revisions"}],"predecessor-version":[{"id":3646,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2355\/revisions\/3646"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}