{"id":2616,"date":"2026-05-19T03:03:09","date_gmt":"2026-05-19T03:03:09","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?p=2616"},"modified":"2026-06-19T18:09:10","modified_gmt":"2026-06-19T18:09:10","slug":"gezegde-oefenen","status":"publish","type":"post","link":"https:\/\/withifi.muhubonurture.nl\/?p=2616","title":{"rendered":"Gezegde Oefenen"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2616\" class=\"elementor elementor-2616\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-58589a8 e-con-full e-flex e-con e-parent\" data-id=\"58589a8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aa26acc elementor-widget elementor-widget-html\" data-id=\"aa26acc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\r\n<!-- 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.gz-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.gz-wrap{\r\n  max-width:1120px;\r\n  margin:0 auto;\r\n}\r\n\r\n\/* HERO *\/\r\n\r\n.gz-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.gz-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.gz-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.gz-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:780px;\r\n  margin:0 auto;\r\n}\r\n\r\n\/* UITLEGKAARTEN *\/\r\n\r\n.uitleg-blok{\r\n  margin:0 auto 4rem;\r\n}\r\n\r\n.uitleg-kop{\r\n  text-align:center;\r\n  margin-bottom:1.7rem;\r\n}\r\n\r\n.uitleg-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.uitleg-text{\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 auto;\r\n}\r\n\r\n.uitleg-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(3,1fr);\r\n  gap:1.4rem;\r\n}\r\n\r\n.uitleg-card{\r\n  position:relative;\r\n  overflow:hidden;\r\n  padding:1.8rem;\r\n  border-radius:34px;\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  transition:.25s ease;\r\n}\r\n\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.uitleg-card:nth-child(1){\r\n  background:linear-gradient(135deg,#FFF4E3 0%,#FFF9EF 100%);\r\n}\r\n\r\n.uitleg-card:nth-child(2){\r\n  background:linear-gradient(135deg,#EAF7F1 0%,#F7FFFB 100%);\r\n}\r\n\r\n.uitleg-card:nth-child(3){\r\n  background:linear-gradient(135deg,#FFEAF1 0%,#FFF7FA 100%);\r\n}\r\n\r\n.uitleg-card:hover{\r\n  transform:translateY(-6px) scale(1.01);\r\n  box-shadow:0 18px 38px rgba(90,70,55,0.11);\r\n}\r\n\r\n.uitleg-icon{\r\n  position:relative;\r\n  z-index:2;\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  margin-bottom:1.1rem;\r\n}\r\n\r\n.uitleg-card h3{\r\n  position:relative;\r\n  z-index:2;\r\n  margin:0 0 .8rem;\r\n  color:#3A2B24;\r\n  font-size:1.22rem;\r\n  font-weight:900;\r\n}\r\n\r\n.uitleg-card p{\r\n  position:relative;\r\n  z-index:2;\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}\r\n\r\n\/* LEVEL BOX *\/\r\n\r\n.level-box{\r\n  max-width:980px;\r\n  margin:0 auto 4rem;\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.level-header{\r\n  text-align:center;\r\n  margin-bottom:2.2rem;\r\n}\r\n\r\n.level-title{\r\n  font-size:clamp(30px,4vw,44px);\r\n  margin:0 0 1rem;\r\n  color:#3A2B24;\r\n  font-weight:900;\r\n}\r\n\r\n.level-sub{\r\n  max-width:760px;\r\n  margin:0 auto;\r\n  color:#7A6455;\r\n  line-height:1.8;\r\n  font-size:18px;\r\n  font-weight:650;\r\n}\r\n\r\n\/* OEFENINGEN *\/\r\n\r\n.oefening{\r\n  padding:2rem;\r\n  border-radius:34px;\r\n  margin-bottom:1.6rem;\r\n  background:linear-gradient(135deg,#FFF4E3 0%,#FFF9EF 100%);\r\n  border:1px solid rgba(255,255,255,0.94);\r\n  box-shadow:0 10px 26px rgba(90,70,55,0.06);\r\n}\r\n\r\n.oefening:nth-child(2n){\r\n  background:linear-gradient(135deg,#EAF7F1 0%,#F7FFFB 100%);\r\n}\r\n\r\n.zin{\r\n  font-size:clamp(1.7rem,3vw,2.4rem);\r\n  font-weight:950;\r\n  line-height:1.4;\r\n  margin-bottom:1rem;\r\n  color:#3A2B24;\r\n}\r\n\r\n.helper{\r\n  color:#7A6455;\r\n  font-weight:800;\r\n  margin-bottom:1.5rem;\r\n  line-height:1.7;\r\n}\r\n\r\n.woorden{\r\n  display:flex;\r\n  flex-wrap:wrap;\r\n  gap:1rem;\r\n  margin-bottom:1.5rem;\r\n}\r\n\r\n.woord-btn{\r\n  border:2px solid rgba(232,205,188,0.65);\r\n  padding:1rem 1.4rem;\r\n  border-radius:999px;\r\n  background:#FFFFFF;\r\n  color:#3A2B24 !important;\r\n  font-size:1rem;\r\n  font-weight:950;\r\n  cursor:pointer;\r\n  transition:.25s ease;\r\n  box-shadow:0 8px 20px rgba(90,70,55,0.06);\r\n}\r\n\r\n.woord-btn:hover{\r\n  transform:translateY(-3px);\r\n  background:#FFF0DE;\r\n}\r\n\r\n.feedback{\r\n  margin-top:1.5rem;\r\n  padding:1rem;\r\n  border-radius:22px;\r\n  background:rgba(255,255,255,0.74);\r\n  font-weight:850;\r\n  line-height:1.8;\r\n  color:#7A6455;\r\n}\r\n\r\n.check-btn{\r\n  margin-top:1.8rem;\r\n  border:none;\r\n  padding:1rem 2rem;\r\n  border-radius:999px;\r\n  background:#FFD6A8;\r\n  color:#3A2B24;\r\n  font-size:1rem;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n  transition:.25s ease;\r\n  box-shadow:0 8px 20px rgba(90,70,55,0.08);\r\n}\r\n\r\n.check-btn:hover{\r\n  transform:translateY(-3px);\r\n  background:#FFF0DE;\r\n}\r\n\r\n.goed{\r\n  background:#DDF5E4 !important;\r\n  color:#2F6A46 !important;\r\n  border-color:#B9DEC5 !important;\r\n}\r\n\r\n.fout{\r\n  background:#FFE3E3 !important;\r\n  color:#9A4B4B !important;\r\n  border-color:#F3C4C4 !important;\r\n}\r\n\r\n.level2-lock,\r\n.level3-lock{\r\n  display:none;\r\n}\r\n\r\n.level2-lock.active,\r\n.level3-lock.active{\r\n  display:block;\r\n  animation:fadeIn .45s ease;\r\n}\r\n\r\n@keyframes fadeIn{\r\n  from{\r\n    opacity:0;\r\n    transform:translateY(12px);\r\n  }\r\n  to{\r\n    opacity:1;\r\n    transform:translateY(0);\r\n  }\r\n}\r\n\r\n\/* INPUT *\/\r\n\r\n.input-zin{\r\n  width:100%;\r\n  box-sizing:border-box;\r\n  margin-top:1rem;\r\n  padding:1.1rem 1.2rem;\r\n  border-radius:24px;\r\n  border:2px solid rgba(232,205,188,0.75);\r\n  font-size:1.1rem;\r\n  background:#FFFFFF;\r\n  color:#3A2B24;\r\n  font-weight:800;\r\n  outline:none;\r\n  font-family:'Inter',sans-serif;\r\n}\r\n\r\n.input-zin:focus{\r\n  border-color:#FFD6A8;\r\n  box-shadow:0 0 0 4px rgba(255,214,168,0.42);\r\n}\r\n\r\n\/* REMINDER *\/\r\n\r\n.reminder-box{\r\n  max-width:780px;\r\n  margin:0 auto;\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\/* MOBILE *\/\r\n\r\n@media(max-width:900px){\r\n  .gz-page{\r\n    padding:5rem 6vw 3rem;\r\n  }\r\n\r\n  .gz-hero,\r\n  .level-box{\r\n    padding:2.4rem;\r\n  }\r\n\r\n  .uitleg-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .uitleg-card,\r\n  .uitleg-kop,\r\n  .level-header,\r\n  .oefening{\r\n    text-align:center;\r\n  }\r\n\r\n  .uitleg-icon{\r\n    margin-left:auto;\r\n    margin-right:auto;\r\n  }\r\n\r\n  .woorden{\r\n    justify-content:center;\r\n  }\r\n\r\n  .woord-btn{\r\n    width:100%;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"gz-page\">\r\n\r\n  <div class=\"gz-wrap\">\r\n\r\n    <div class=\"gz-hero\">\r\n      <div class=\"gz-label\">\ud83e\udde9 Gezegde oefenen<\/div>\r\n\r\n      <h1>Laten we rustig oefenen.<\/h1>\r\n\r\n      <p>\r\n        Het gezegde bestaat uit alle werkwoorden in de zin.\r\n        Ook hulpwerkwoorden horen erbij, zoals:\r\n        <strong>heeft<\/strong>, <strong>gaat<\/strong>, <strong>kan<\/strong> en <strong>zal<\/strong>.\r\n        We oefenen stap voor stap \ud83c\udf3f\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <div class=\"uitleg-blok\">\r\n\r\n      <div class=\"uitleg-kop\">\r\n        <h2 class=\"uitleg-title\">\ud83c\udf31 Zo zoek je het gezegde<\/h2>\r\n        <p class=\"uitleg-text\">\r\n          Het gezegde kan uit \u00e9\u00e9n werkwoord bestaan.\r\n          Maar soms horen meerdere werkwoorden samen.\r\n          We zoeken ze rustig op.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div class=\"uitleg-grid\">\r\n\r\n        <div class=\"uitleg-card\">\r\n          <div class=\"uitleg-icon\">\ud83d\udc40<\/div>\r\n          <h3>Lees de zin<\/h3>\r\n          <p>\r\n            Kijk eerst rustig naar de hele zin.\r\n            Wat gebeurt er?\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"uitleg-card\">\r\n          <div class=\"uitleg-icon\">\u26a1<\/div>\r\n          <h3>Zoek werkwoorden<\/h3>\r\n          <p>\r\n            Zoek woorden zoals heeft, gaat, kan, zal,\r\n            gelezen, koken of zwemmen.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"uitleg-card\">\r\n          <div class=\"uitleg-icon\">\ud83e\udde9<\/div>\r\n          <h3>Zet ze samen<\/h3>\r\n          <p>\r\n            Alle werkwoorden samen vormen het gezegde.\r\n          <\/p>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"level-box\">\r\n\r\n      <div class=\"level-header\">\r\n        <h2 class=\"level-title\">\ud83c\udf31 Level 1 \u2014 Klik alle werkwoorden<\/h2>\r\n        <p class=\"level-sub\">\r\n          Klik op alle werkwoorden. Ook hulpwerkwoorden tellen mee.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div id=\"level1\"><\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"level-box level2-lock\" id=\"level2Box\">\r\n\r\n      <div class=\"level-header\">\r\n        <h2 class=\"level-title\">\ud83c\udf38 Level 2 \u2014 Kies het hele gezegde<\/h2>\r\n        <p class=\"level-sub\">\r\n          Kies alle werkwoorden samen.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div id=\"level2\"><\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"level-box level3-lock\" id=\"level3Box\">\r\n\r\n      <div class=\"level-header\">\r\n        <h2 class=\"level-title\">\ud83c\udf3f Level 3 \u2014 Typ zelf het gezegde<\/h2>\r\n        <p class=\"level-sub\">\r\n          Typ alle werkwoorden samen.\r\n        <\/p>\r\n      <\/div>\r\n\r\n      <div id=\"level3\"><\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"reminder-box\">\r\n      Kleine reminder \ud83c\udf38<br>\r\n      Het gezegde bestaat uit alle werkwoorden.\r\n      Ook hulpwerkwoorden horen erbij.\r\n      Zoek rustig en neem \u00e9\u00e9n zin tegelijk.\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded',()=>{\r\n\r\nconst level1Data = [\r\n{zin:'Ali heeft een boek gelezen.', antwoorden:['heeft','gelezen']},\r\n{zin:'Mama gaat soep koken.', antwoorden:['gaat','koken']},\r\n{zin:'Noor kan mooi tekenen.', antwoorden:['kan','tekenen']},\r\n{zin:'Papa heeft de auto gewassen.', antwoorden:['heeft','gewassen']},\r\n{zin:'Wij gaan morgen zwemmen.', antwoorden:['gaan','zwemmen']},\r\n{zin:'Sara zal een brief schrijven.', antwoorden:['zal','schrijven']},\r\n{zin:'De hond heeft hard gerend.', antwoorden:['heeft','gerend']},\r\n{zin:'Oma gaat een taart bakken.', antwoorden:['gaat','bakken']},\r\n{zin:'Sam kan goed lezen.', antwoorden:['kan','lezen']},\r\n{zin:'De kinderen hebben buiten gespeeld.', antwoorden:['hebben','gespeeld']}\r\n];\r\n\r\nconst level2Data = [\r\n{zin:'De vogel heeft hoog gevlogen.', antwoord:'heeft gevlogen', opties:['De vogel','heeft gevlogen','hoog']},\r\n{zin:'Het meisje gaat bloemen plukken.', antwoord:'gaat plukken', opties:['Het meisje','gaat plukken','bloemen']},\r\n{zin:'De jongen kan een tas dragen.', antwoord:'kan dragen', opties:['De jongen','kan dragen','een tas']},\r\n{zin:'De baby heeft hard gelachen.', antwoord:'heeft gelachen', opties:['De baby','heeft gelachen','hard']},\r\n{zin:'De vis gaat snel zwemmen.', antwoord:'gaat zwemmen', opties:['De vis','gaat zwemmen','snel']},\r\n{zin:'De juf zal woorden schrijven.', antwoord:'zal schrijven', opties:['De juf','zal schrijven','woorden']},\r\n{zin:'De bakker heeft brood gemaakt.', antwoord:'heeft gemaakt', opties:['De bakker','heeft gemaakt','brood']},\r\n{zin:'Het paard kan hoog springen.', antwoord:'kan springen', opties:['Het paard','kan springen','hoog']},\r\n{zin:'De dokter gaat mensen helpen.', antwoord:'gaat helpen', opties:['De dokter','gaat helpen','mensen']},\r\n{zin:'De zon heeft fel geschenen.', antwoord:'heeft geschenen', opties:['De zon','heeft geschenen','fel']}\r\n];\r\n\r\nconst level3Data = [\r\n{zin:'De brandweer heeft het vuur geblust.', antwoord:'heeft geblust'},\r\n{zin:'De trein gaat bij het station stoppen.', antwoord:'gaat stoppen'},\r\n{zin:'De clown kan grapjes maken.', antwoord:'kan maken'},\r\n{zin:'Het kindje heeft zacht gehuild.', antwoord:'heeft gehuild'},\r\n{zin:'De boer gaat de koe melken.', antwoord:'gaat melken'},\r\n{zin:'De politie zal een fiets zoeken.', antwoord:'zal zoeken'},\r\n{zin:'De ober heeft drinken gebracht.', antwoord:'heeft gebracht'},\r\n{zin:'De leerling gaat zijn boek openen.', antwoord:'gaat openen'},\r\n{zin:'De schilder heeft de muur geverfd.', antwoord:'heeft geverfd'},\r\n{zin:'De kok kan groenten snijden.', antwoord:'kan snijden'}\r\n];\r\n\r\nconst level1 = document.getElementById('level1');\r\nconst level2 = document.getElementById('level2');\r\nconst level3 = document.getElementById('level3');\r\n\r\nlet level1Goed = 0;\r\nlet level2Goed = 0;\r\n\r\nfunction schoon(tekst){\r\n  return String(tekst).trim().toLowerCase();\r\n}\r\n\r\n\/* LEVEL 1 *\/\r\n\r\nlevel1Data.forEach(item=>{\r\n\r\nconst woorden = item.zin.replace('.','').split(' ');\r\nconst oefening = document.createElement('div');\r\noefening.className = 'oefening';\r\noefening.dataset.done = 'false';\r\n\r\nlet gekozen = [];\r\n\r\nlet buttons = '';\r\nwoorden.forEach(woord=>{\r\n  buttons += `<button type=\"button\" class=\"woord-btn\">${woord}<\/button>`;\r\n});\r\n\r\noefening.innerHTML = `\r\n  <div class=\"zin\">${item.zin}<\/div>\r\n  <div class=\"helper\">Klik op alle werkwoorden.<\/div>\r\n  <div class=\"woorden\">${buttons}<\/div>\r\n  <button type=\"button\" class=\"check-btn\">Nakijken \ud83c\udf3f<\/button>\r\n  <div class=\"feedback\"><\/div>\r\n`;\r\n\r\nlevel1.appendChild(oefening);\r\n\r\nconst feedback = oefening.querySelector('.feedback');\r\n\r\noefening.querySelectorAll('.woord-btn').forEach(btn=>{\r\n\r\nbtn.addEventListener('click',()=>{\r\n\r\nconst woord = schoon(btn.textContent);\r\n\r\nbtn.classList.toggle('goed');\r\n\r\nif(gekozen.includes(woord)){\r\n  gekozen = gekozen.filter(w=>w !== woord);\r\n}else{\r\n  gekozen.push(woord);\r\n}\r\n\r\n});\r\n\r\n});\r\n\r\noefening.querySelector('.check-btn').addEventListener('click',()=>{\r\n\r\nconst gekozenSchoon = gekozen.map(w=>schoon(w)).sort();\r\nconst antwoordenSchoon = item.antwoorden.map(w=>schoon(w)).sort();\r\n\r\nconst goed =\r\nJSON.stringify(gekozenSchoon) === JSON.stringify(antwoordenSchoon);\r\n\r\nfeedback.classList.remove('goed','fout');\r\n\r\nif(goed){\r\n\r\n  feedback.classList.add('goed');\r\n  feedback.innerHTML =\r\n  `\ud83c\udf38 Goed gezien. <strong>${item.antwoorden.join(' ')}<\/strong> is het gezegde.`;\r\n\r\n  if(oefening.dataset.done === 'false'){\r\n    oefening.dataset.done = 'true';\r\n    level1Goed++;\r\n  }\r\n\r\n  if(level1Goed >= level1Data.length){\r\n    document.getElementById('level2Box').classList.add('active');\r\n\r\n    setTimeout(()=>{\r\n      document.getElementById('level2Box').scrollIntoView({\r\n        behavior:'smooth',\r\n        block:'start'\r\n      });\r\n    },400);\r\n  }\r\n\r\n}else{\r\n\r\n  feedback.classList.add('fout');\r\n  feedback.innerHTML =\r\n  `\ud83c\udf3f Kijk rustig opnieuw. Het gezegde is: <strong>${item.antwoorden.join(' ')}<\/strong>.`;\r\n\r\n}\r\n\r\n});\r\n\r\n});\r\n\r\n\/* LEVEL 2 *\/\r\n\r\nlevel2Data.forEach(item=>{\r\n\r\nconst oefening = document.createElement('div');\r\noefening.className = 'oefening';\r\noefening.dataset.done = 'false';\r\n\r\nlet buttons = '';\r\nitem.opties.forEach(optie=>{\r\n  buttons += `<button type=\"button\" class=\"woord-btn\">${optie}<\/button>`;\r\n});\r\n\r\noefening.innerHTML = `\r\n  <div class=\"zin\">${item.zin}<\/div>\r\n  <div class=\"helper\">Kies het hele gezegde.<\/div>\r\n  <div class=\"woorden\">${buttons}<\/div>\r\n  <div class=\"feedback\"><\/div>\r\n`;\r\n\r\nlevel2.appendChild(oefening);\r\n\r\nconst feedback = oefening.querySelector('.feedback');\r\n\r\noefening.querySelectorAll('.woord-btn').forEach(btn=>{\r\n\r\nbtn.addEventListener('click',()=>{\r\n\r\nconst keuze = schoon(btn.textContent);\r\nconst antwoord = schoon(item.antwoord);\r\n\r\noefening.querySelectorAll('.woord-btn').forEach(b=>{\r\n  b.classList.remove('goed','fout');\r\n});\r\n\r\nfeedback.classList.remove('goed','fout');\r\n\r\nif(keuze === antwoord){\r\n\r\n  btn.classList.add('goed');\r\n  feedback.classList.add('goed');\r\n  feedback.innerHTML =\r\n  `\ud83c\udf38 Juist. <strong>${item.antwoord}<\/strong> is het gezegde.`;\r\n\r\n  if(oefening.dataset.done === 'false'){\r\n    oefening.dataset.done = 'true';\r\n    level2Goed++;\r\n  }\r\n\r\n  if(level2Goed >= level2Data.length){\r\n    document.getElementById('level3Box').classList.add('active');\r\n\r\n    setTimeout(()=>{\r\n      document.getElementById('level3Box').scrollIntoView({\r\n        behavior:'smooth',\r\n        block:'start'\r\n      });\r\n    },400);\r\n  }\r\n\r\n}else{\r\n\r\n  btn.classList.add('fout');\r\n  feedback.classList.add('fout');\r\n  feedback.innerHTML =\r\n  `\ud83c\udf3f Kijk rustig opnieuw. Het gezegde is: <strong>${item.antwoord}<\/strong>.`;\r\n\r\n}\r\n\r\n});\r\n\r\n});\r\n\r\n});\r\n\r\n\/* LEVEL 3 *\/\r\n\r\nlevel3Data.forEach(item=>{\r\n\r\nconst oefening = document.createElement('div');\r\noefening.className = 'oefening';\r\n\r\noefening.innerHTML = `\r\n  <div class=\"zin\">${item.zin}<\/div>\r\n  <div class=\"helper\">Typ het gezegde.<\/div>\r\n\r\n  <input\r\n    type=\"text\"\r\n    class=\"input-zin\"\r\n    placeholder=\"Typ hier het gezegde...\"\r\n  >\r\n\r\n  <button type=\"button\" class=\"check-btn\">Nakijken \ud83c\udf3f<\/button>\r\n\r\n  <div class=\"feedback\"><\/div>\r\n`;\r\n\r\nlevel3.appendChild(oefening);\r\n\r\nconst input = oefening.querySelector('.input-zin');\r\nconst feedback = oefening.querySelector('.feedback');\r\n\r\noefening.querySelector('.check-btn').addEventListener('click',()=>{\r\n\r\ninput.classList.remove('goed','fout');\r\nfeedback.classList.remove('goed','fout');\r\n\r\nconst waarde = schoon(input.value);\r\nconst antwoord = schoon(item.antwoord);\r\n\r\nif(waarde === antwoord){\r\n\r\n  input.classList.add('goed');\r\n  feedback.classList.add('goed');\r\n  feedback.innerHTML =\r\n  `\ud83c\udf38 Goed gedaan. <strong>${item.antwoord}<\/strong> is het gezegde.`;\r\n\r\n}else{\r\n\r\n  input.classList.add('fout');\r\n  feedback.classList.add('fout');\r\n  feedback.innerHTML =\r\n  `\ud83c\udf3f Het goede antwoord is: <strong>${item.antwoord}<\/strong>.`;\r\n\r\n}\r\n\r\n});\r\n\r\n});\r\n\r\n});\r\n<\/script>\r\n\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>\ud83e\udde9 Gezegde oefenen Laten we rustig oefenen. Het gezegde bestaat uit alle werkwoorden in de zin. Ook hulpwerkwoorden horen erbij, zoals: heeft, gaat, kan en zal. We oefenen stap voor stap \ud83c\udf3f \ud83c\udf31 Zo zoek je het gezegde Het gezegde kan uit \u00e9\u00e9n werkwoord bestaan. Maar soms horen meerdere werkwoorden samen. We zoeken ze rustig [&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":[1],"tags":[],"class_list":["post-2616","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2616","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=2616"}],"version-history":[{"count":22,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2616\/revisions"}],"predecessor-version":[{"id":3715,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2616\/revisions\/3715"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}