{"id":2320,"date":"2026-05-13T15:11:06","date_gmt":"2026-05-13T15:11:06","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?p=2320"},"modified":"2026-06-18T02:47:54","modified_gmt":"2026-06-18T02:47:54","slug":"tafel-van-2","status":"publish","type":"post","link":"https:\/\/withifi.muhubonurture.nl\/?p=2320","title":{"rendered":"Tafel Van 2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2320\" class=\"elementor elementor-2320\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b742704 e-con-full e-flex e-con e-parent\" data-id=\"b742704\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c3363f2 elementor-widget elementor-widget-html\" data-id=\"c3363f2\" 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(255,244,228,0.42) 0%, transparent 36%),\r\n    linear-gradient(135deg,#F9FBF8 0%,#EEF7F3 45%,#F7FBF8 100%);\r\n}\r\n\r\n.tafel-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.paren{\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.paar{\r\n  display:flex;\r\n  gap:.5rem;\r\n  padding:1rem;\r\n  border-radius:24px;\r\n  background:rgba(255,255,255,0.78);\r\n  box-shadow:0 8px 18px rgba(90,70,55,0.05);\r\n}\r\n\r\n.item{\r\n  width:42px;\r\n  height:42px;\r\n  border-radius:16px;\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  background:#DDEEFF;\r\n  font-size:1.35rem;\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  display:flex;\r\n  flex-direction:column;\r\n  align-items:center;\r\n  justify-content:center;\r\n  gap:1rem;\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;\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-input{\r\n  width:100%;\r\n  max-width:320px;\r\n  height:58px;\r\n  border-radius:20px;\r\n  border:2px solid #A8D5FF;\r\n  text-align:center;\r\n  font-size:1.35rem;\r\n  font-weight:900;\r\n  background:white;\r\n  color:#3A2B24;\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 2.<\/h1>\r\n\r\n    <p>\r\n      Bij de tafel van 2 oefenen we met tweetallen.\r\n      Twee sokken, twee schoenen, twee ogen.\r\n      We kijken naar maatjes: steeds 2 samen \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 2 kijken we naar tweetallen.\r\n        Elk groepje heeft precies twee dingen.\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\">\ud83e\udde6<\/div>\r\n          <h3>Tweetallen zien<\/h3>\r\n        <\/div>\r\n        <p>We kijken naar groepjes van 2.<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"route-card\">\r\n        <div class=\"card-top\">\r\n          <div class=\"card-icon\">\ud83d\udc5f<\/div>\r\n          <h3>Maatjes tellen<\/h3>\r\n        <\/div>\r\n        <p>Elk maatje telt als 2 erbij.<\/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\udf31<\/div>\r\n          <h3>Rustig springen<\/h3>\r\n        <\/div>\r\n        <p>We springen zachtjes: 2, 4, 6, 8...<\/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 tweetallen<\/h2>\r\n\r\n    <div class=\"uitleg-sub\">\r\n      Hier zie je 3 tweetallen.\r\n      Elk tweetal heeft 2 dingen.\r\n    <\/div>\r\n\r\n    <div class=\"paren\">\r\n      <div class=\"paar\"><div class=\"item\">\ud83e\udde6<\/div><div class=\"item\">\ud83e\udde6<\/div><\/div>\r\n      <div class=\"paar\"><div class=\"item\">\ud83e\udde6<\/div><div class=\"item\">\ud83e\udde6<\/div><\/div>\r\n      <div class=\"paar\"><div class=\"item\">\ud83e\udde6<\/div><div class=\"item\">\ud83e\udde6<\/div><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"somregel\">\r\n      3 tweetallen = 6<br>\r\n      3 \u00d7 2 = 6\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: Tweetallen 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\r\n      <div class=\"vraag\" id=\"vraag\"><\/div>\r\n      <div class=\"helper\" id=\"helper\"><\/div>\r\n\r\n      <div class=\"paren\" id=\"paren\"><\/div>\r\n\r\n      <div class=\"antwoorden\" id=\"antwoorden\"><\/div>\r\n\r\n      <div class=\"feedback\" id=\"feedback\"><\/div>\r\n\r\n      <div class=\"volgende\" id=\"volgende\">\r\n        <button id=\"volgendeBtn\">Volgende vraag \ud83c\udf3f<\/button>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"level2-blok\" id=\"level2Blok\">\r\n\r\n    <div class=\"uitleg-title\">\ud83c\udf38 Level 2: Sprongen van 2<\/div>\r\n\r\n    <div class=\"uitleg-sub\" style=\"text-align:center;margin:auto;\">\r\n      Vul de rij verder aan.\r\n      Denk steeds: er komt 2 bij.\r\n    <\/div>\r\n\r\n    <div class=\"level2-grid\" id=\"level2Grid\"><\/div>\r\n\r\n    <div style=\"margin-top:2rem;text-align:center;\">\r\n      <button class=\"check-btn\" id=\"level2Check\">Nakijken \ud83c\udf3f<\/button>\r\n    <\/div>\r\n\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      Kies rustig het goede antwoord.\r\n    <\/div>\r\n\r\n    <div class=\"vraag-card\" style=\"margin-top:2rem;\">\r\n\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\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 2 gaat steeds met sprongen van 2:<br>\r\n    2, 4, 6, 8, 10...\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:'2', opties:['1','2','3']},\r\n  {aantal:2, antwoord:'4', opties:['2','4','6']},\r\n  {aantal:3, antwoord:'6', opties:['4','6','8']},\r\n  {aantal:4, antwoord:'8', opties:['6','8','10']},\r\n  {aantal:5, antwoord:'10', opties:['8','10','12']},\r\n  {aantal:6, antwoord:'12', opties:['10','12','14']},\r\n  {aantal:7, antwoord:'14', opties:['12','14','16']},\r\n  {aantal:8, antwoord:'16', opties:['14','16','18']},\r\n  {aantal:9, antwoord:'18', opties:['16','18','20']},\r\n  {aantal:10, antwoord:'20', opties:['18','20','22']}\r\n];\r\n\r\nconst level3Vragen = [\r\n  {som:'1 \u00d7 2', antwoord:'2', opties:['1','2','3']},\r\n  {som:'2 \u00d7 2', antwoord:'4', opties:['2','4','6']},\r\n  {som:'3 \u00d7 2', antwoord:'6', opties:['4','6','8']},\r\n  {som:'4 \u00d7 2', antwoord:'8', opties:['6','8','10']},\r\n  {som:'5 \u00d7 2', antwoord:'10', opties:['8','10','12']},\r\n  {som:'6 \u00d7 2', antwoord:'12', opties:['10','12','14']},\r\n  {som:'7 \u00d7 2', antwoord:'14', opties:['12','14','16']},\r\n  {som:'8 \u00d7 2', antwoord:'16', opties:['14','16','18']},\r\n  {som:'9 \u00d7 2', antwoord:'18', opties:['16','18','20']},\r\n  {som:'10 \u00d7 2', antwoord:'20', opties:['18','20','22']}\r\n];\r\n\r\nlet vraagIndex = 0;\r\nlet goedAantal = 0;\r\nlet locked = false;\r\nlet huidigItem = null;\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 parenEl = document.getElementById('paren');\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 level2Check = document.getElementById('level2Check');\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 toonParen(aantal){\r\n  parenEl.innerHTML = '';\r\n\r\n  for(let i = 0; i < aantal; i++){\r\n    const paar = document.createElement('div');\r\n    paar.className = 'paar';\r\n\r\n    paar.innerHTML = `\r\n      <div class=\"item\">\ud83e\udde6<\/div>\r\n      <div class=\"item\">\ud83e\udde6<\/div>\r\n    `;\r\n\r\n    parenEl.appendChild(paar);\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  parenEl.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 sokken zijn het samen?';\r\n\r\n  helperEl.textContent =\r\n  `${huidigItem.aantal} tweetal(len). Tel steeds 2 erbij.`;\r\n\r\n  toonParen(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 2 = ${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 tweetallen.';\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  parenEl.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\r\n  const rijen = [\r\n    {tekst:'2, 4, 6, 8, ...', antwoord:'10'},\r\n    {tekst:'4, 6, 8, 10, ...', antwoord:'12'},\r\n    {tekst:'6, 8, 10, 12, ...', antwoord:'14'},\r\n    {tekst:'8, 10, 12, 14, ...', antwoord:'16'},\r\n    {tekst:'10, 12, 14, 16, ...', antwoord:'18'},\r\n    {tekst:'12, 14, 16, 18, ...', antwoord:'20'},\r\n    {tekst:'2, 4, ..., 8, 10', antwoord:'6'},\r\n    {tekst:'4, ..., 8, 10, 12', antwoord:'6'},\r\n    {tekst:'6, 8, ..., 12, 14', antwoord:'10'},\r\n    {tekst:'10, 12, ..., 16, 18', antwoord:'14'}\r\n  ];\r\n\r\n  rijen.forEach((rij)=>{\r\n    const card = document.createElement('div');\r\n    card.className = 'level2-card';\r\n\r\n    card.innerHTML = `\r\n      <h3>${rij.tekst}<\/h3>\r\n      <input\r\n      type=\"number\"\r\n      class=\"level2-input\"\r\n      data-answer=\"${rij.antwoord}\"\r\n      placeholder=\"?\">\r\n    `;\r\n\r\n    level2Grid.appendChild(card);\r\n  });\r\n}\r\n\r\nlevel2Check.addEventListener('click',()=>{\r\n  const inputs = document.querySelectorAll('.level2-input');\r\n\r\n  let goed = 0;\r\n  let foutenHtml = '';\r\n\r\n  inputs.forEach((input,index)=>{\r\n    const juist = input.dataset.answer.trim();\r\n    const ingevuld = input.value.trim();\r\n\r\n    if(juist === ingevuld){\r\n      goed++;\r\n      input.style.background = '#DDF5E4';\r\n    }else{\r\n      input.style.background = '#FFE3E3';\r\n      foutenHtml += `\r\n        <div>\r\n          Vraag ${index + 1}: het goede antwoord is ${juist}.<br>\r\n          Jouw antwoord: ${ingevuld || 'leeg'}\r\n        <\/div><br>\r\n      `;\r\n    }\r\n  });\r\n\r\n  if(goed === inputs.length){\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 ${goed} van de ${inputs.length} goed.<br><br>\r\n      <strong>Kijk rustig naar deze rijtjes:<\/strong><br><br>\r\n      ${foutenHtml}\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 2. Bij de tafel van 2 oefenen we met tweetallen. Twee sokken, twee schoenen, twee ogen. We kijken naar maatjes: steeds 2 samen \ud83c\udf3f \ud83c\udf31 Eerst begrijpen Bij de tafel van 2 kijken we naar tweetallen. Elk groepje heeft precies twee dingen. \ud83e\udde6 Tweetallen zien We kijken naar groepjes van [&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-2320","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\/2320","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=2320"}],"version-history":[{"count":22,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2320\/revisions"}],"predecessor-version":[{"id":3624,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2320\/revisions\/3624"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}