{"id":2345,"date":"2026-05-13T15:42:10","date_gmt":"2026-05-13T15:42:10","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?p=2345"},"modified":"2026-06-18T03:50:22","modified_gmt":"2026-06-18T03:50:22","slug":"tafel-van-7","status":"publish","type":"post","link":"https:\/\/withifi.muhubonurture.nl\/?p=2345","title":{"rendered":"Tafel Van 7"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2345\" class=\"elementor elementor-2345\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-258c95c e-con-full e-flex e-con e-parent\" data-id=\"258c95c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4f59873 elementor-widget elementor-widget-html\" data-id=\"4f59873\" 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(210,235,255,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%,#EEF7F3 45%,#F7FBF8 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.weken{\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.week{\r\n  width:150px;\r\n  border-radius:26px;\r\n  background:rgba(255,255,255,0.78);\r\n  box-shadow:0 8px 18px rgba(90,70,55,0.05);\r\n  padding:.9rem;\r\n}\r\n\r\n.week-title{\r\n  font-weight:900;\r\n  color:#8B6B55;\r\n  margin-bottom:.65rem;\r\n  text-align:center;\r\n}\r\n\r\n.dagen-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(7,1fr);\r\n  gap:.28rem;\r\n}\r\n\r\n.dag{\r\n  width:14px;\r\n  height:14px;\r\n  border-radius:50%;\r\n  background:#A8D5FF;\r\n  margin:0 auto;\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:#A8D5FF;\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:#DDEEFF;\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:#DDEEFF;\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:#A8D5FF;\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:#DDEEFF;\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 7.<\/h1>\r\n\r\n    <p>\r\n      Bij de tafel van 7 oefenen we met weken.\r\n      E\u00e9n week heeft 7 dagen.\r\n      We tellen rustig: 7, 14, 21, 28 \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 7 kijken we naar weken.\r\n        Elke week helpt je om de sprongen van 7 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\">\ud83d\udcc5<\/div>\r\n          <h3>Weken zien<\/h3>\r\n        <\/div>\r\n        <p>Elke week heeft precies 7 dagen.<\/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>7 erbij<\/h3>\r\n        <\/div>\r\n        <p>Elke stap wordt 7 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\udde0<\/div>\r\n          <h3>Kalenderdenken<\/h3>\r\n        <\/div>\r\n        <p>We rekenen rustig met dagen.<\/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 weken<\/h2>\r\n\r\n    <div class=\"uitleg-sub\">\r\n      Hier zie je 3 weken.\r\n      Elke week heeft 7 dagen.\r\n    <\/div>\r\n\r\n    <div class=\"weken\">\r\n      <div class=\"week\"><div class=\"week-title\">Week 1<\/div><div class=\"dagen-grid\"><span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span><\/div><\/div>\r\n      <div class=\"week\"><div class=\"week-title\">Week 2<\/div><div class=\"dagen-grid\"><span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span><\/div><\/div>\r\n      <div class=\"week\"><div class=\"week-title\">Week 3<\/div><div class=\"dagen-grid\"><span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span><\/div><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"somregel\">\r\n      3 weken van 7 dagen = 21<br>\r\n      3 \u00d7 7 = 21\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: Weken 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=\"weken\" id=\"weken\"><\/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 kalenderroute<\/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: 7 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 7 gaat steeds met sprongen van 7:<br>\r\n    7, 14, 21, 28, 35...\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:'7', opties:['5','7','9']},\r\n  {aantal:2, antwoord:'14', opties:['12','14','16']},\r\n  {aantal:3, antwoord:'21', opties:['14','21','28']},\r\n  {aantal:4, antwoord:'28', opties:['21','28','35']},\r\n  {aantal:5, antwoord:'35', opties:['28','35','42']},\r\n  {aantal:6, antwoord:'42', opties:['35','42','49']},\r\n  {aantal:7, antwoord:'49', opties:['42','49','56']},\r\n  {aantal:8, antwoord:'56', opties:['49','56','63']},\r\n  {aantal:9, antwoord:'63', opties:['56','63','70']},\r\n  {aantal:10, antwoord:'70', opties:['63','70','77']}\r\n];\r\n\r\nconst level2Vragen = [\r\n  {tekst:'7, 14, 21, 28, ...', antwoord:'35', opties:['28','35','42']},\r\n  {tekst:'14, 21, 28, 35, ...', antwoord:'42', opties:['35','42','49']},\r\n  {tekst:'21, 28, 35, 42, ...', antwoord:'49', opties:['42','49','56']},\r\n  {tekst:'28, 35, 42, 49, ...', antwoord:'56', opties:['49','56','63']},\r\n  {tekst:'35, 42, 49, 56, ...', antwoord:'63', opties:['56','63','70']},\r\n  {tekst:'42, 49, 56, 63, ...', antwoord:'70', opties:['63','70','77']},\r\n  {tekst:'7, 14, ..., 28, 35', antwoord:'21', opties:['14','21','28']},\r\n  {tekst:'14, ..., 28, 35, 42', antwoord:'21', opties:['21','28','35']},\r\n  {tekst:'21, 28, ..., 42, 49', antwoord:'35', opties:['28','35','42']},\r\n  {tekst:'35, 42, ..., 56, 63', antwoord:'49', opties:['42','49','56']}\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 7', antwoord:'7', opties:['5','7','9']},\r\n  {som:'2 \u00d7 7', antwoord:'14', opties:['12','14','16']},\r\n  {som:'3 \u00d7 7', antwoord:'21', opties:['14','21','28']},\r\n  {som:'4 \u00d7 7', antwoord:'28', opties:['21','28','35']},\r\n  {som:'5 \u00d7 7', antwoord:'35', opties:['28','35','42']},\r\n  {som:'6 \u00d7 7', antwoord:'42', opties:['35','42','49']},\r\n  {som:'7 \u00d7 7', antwoord:'49', opties:['42','49','56']},\r\n  {som:'8 \u00d7 7', antwoord:'56', opties:['49','56','63']},\r\n  {som:'9 \u00d7 7', antwoord:'63', opties:['56','63','70']},\r\n  {som:'10 \u00d7 7', antwoord:'70', opties:['63','70','77']}\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 wekenEl = document.getElementById('weken');\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 maakWeek(nummer){\r\n  const week = document.createElement('div');\r\n  week.className = 'week';\r\n\r\n  week.innerHTML = `\r\n    <div class=\"week-title\">Week ${nummer}<\/div>\r\n    <div class=\"dagen-grid\">\r\n      <span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span>\r\n      <span class=\"dag\"><\/span><span class=\"dag\"><\/span><span class=\"dag\"><\/span>\r\n      <span class=\"dag\"><\/span>\r\n    <\/div>\r\n  `;\r\n\r\n  return week;\r\n}\r\n\r\nfunction toonWeken(aantal){\r\n  wekenEl.innerHTML = '';\r\n\r\n  for(let i = 1; i <= aantal; i++){\r\n    wekenEl.appendChild(maakWeek(i));\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  wekenEl.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 dagen zijn het samen?';\r\n\r\n  helperEl.textContent =\r\n  `${huidigItem.aantal} week\/weken. Elke week heeft 7 dagen.`;\r\n\r\n  toonWeken(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 7 = ${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 weken.';\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  wekenEl.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 7. Bij de tafel van 7 oefenen we met weken. E\u00e9n week heeft 7 dagen. We tellen rustig: 7, 14, 21, 28 \ud83c\udf3f \ud83c\udf31 Eerst begrijpen Bij de tafel van 7 kijken we naar weken. Elke week helpt je om de sprongen van 7 rustig te zien. \ud83d\udcc5 Weken 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-2345","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\/2345","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=2345"}],"version-history":[{"count":19,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2345\/revisions"}],"predecessor-version":[{"id":3640,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2345\/revisions\/3640"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}