{"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-08-30T05:17:07","modified_gmt":"2026-08-30T05:17:07","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     WITH IFI \u2014 GEZEGDE OEFENEN\r\n     3 levels \u2022 uniforme rustige With Ifi stijl\r\n====================================================== -->\r\n\r\n<style>\r\n\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 6vw 5rem;\r\n\r\n  color:#3A2B24;\r\n\r\n  background:\r\n    radial-gradient(circle at 12% 18%, rgba(255,255,255,.86) 0%, transparent 30%),\r\n    radial-gradient(circle at 88% 22%, rgba(255,234,242,.42) 0%, transparent 32%),\r\n    radial-gradient(circle at 18% 84%, rgba(228,244,237,.48) 0%, transparent 34%),\r\n    linear-gradient(135deg,#FFF9F3 0%,#F3FBF8 48%,#EEF7FE 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\r\n\/* =====================================================\r\n   HERO\r\n===================================================== *\/\r\n\r\n.gz-hero{\r\n  max-width:960px;\r\n\r\n  margin:0 auto 2.2rem;\r\n\r\n  padding:3rem 3.2rem;\r\n\r\n  border-radius:40px;\r\n\r\n  text-align:center;\r\n\r\n  background:rgba(255,255,255,.70);\r\n\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  box-shadow:\r\n    0 16px 42px rgba(90,70,55,.07);\r\n\r\n  backdrop-filter:blur(16px);\r\n  -webkit-backdrop-filter:blur(16px);\r\n}\r\n\r\n.gz-label{\r\n  display:inline-flex;\r\n  align-items:center;\r\n  gap:.45rem;\r\n\r\n  margin-bottom:1.15rem;\r\n\r\n  padding:10px 17px;\r\n\r\n  border-radius:999px;\r\n\r\n  background:rgba(255,255,255,.82);\r\n\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  color:#8B6B55;\r\n\r\n  font-size:.9rem;\r\n\r\n  font-weight:900;\r\n}\r\n\r\n.gz-hero h1{\r\n  margin:0 0 1rem;\r\n\r\n  font-size:clamp(42px,6vw,68px);\r\n\r\n  line-height:1.05;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-weight:950;\r\n}\r\n\r\n.gz-hero p{\r\n  max-width:760px;\r\n\r\n  margin:0 auto;\r\n\r\n  font-size:18px;\r\n\r\n  line-height:1.85;\r\n\r\n  color:#745C4D;\r\n\r\n  font-weight:650;\r\n}\r\n\r\n.gz-tip{\r\n  display:inline-block;\r\n\r\n  margin-top:1.3rem;\r\n\r\n  padding:11px 18px;\r\n\r\n  border-radius:18px;\r\n\r\n  background:#FFF2DF;\r\n\r\n  color:#6B5141;\r\n\r\n  font-size:.95rem;\r\n\r\n  font-weight:900;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LEVEL ROUTE\r\n===================================================== *\/\r\n\r\n.gz-route{\r\n  max-width:960px;\r\n\r\n  margin:0 auto 2rem;\r\n\r\n  display:grid;\r\n\r\n  grid-template-columns:repeat(3,1fr);\r\n\r\n  gap:1rem;\r\n}\r\n\r\n.gz-route-card{\r\n  position:relative;\r\n\r\n  min-height:140px;\r\n\r\n  padding:1.4rem;\r\n\r\n  border-radius:28px;\r\n\r\n  border:1px solid rgba(255,255,255,.95);\r\n\r\n  box-shadow:\r\n    0 10px 26px rgba(90,70,55,.05);\r\n\r\n  overflow:hidden;\r\n\r\n  transition:.25s ease;\r\n}\r\n\r\n.gz-route-card:nth-child(1){\r\n  background:#FFF2DF;\r\n}\r\n\r\n.gz-route-card:nth-child(2){\r\n  background:#EAF7F1;\r\n}\r\n\r\n.gz-route-card:nth-child(3){\r\n  background:#FFEAF2;\r\n}\r\n\r\n.gz-route-card::after{\r\n  content:\"\";\r\n\r\n  position:absolute;\r\n\r\n  width:95px;\r\n  height:95px;\r\n\r\n  right:-30px;\r\n  top:-30px;\r\n\r\n  border-radius:50%;\r\n\r\n  background:rgba(255,255,255,.42);\r\n}\r\n\r\n.gz-route-icon{\r\n  width:46px;\r\n  height:46px;\r\n\r\n  margin-bottom:.85rem;\r\n\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n\r\n  border-radius:16px;\r\n\r\n  background:rgba(255,255,255,.78);\r\n\r\n  font-size:1.3rem;\r\n\r\n  position:relative;\r\n  z-index:2;\r\n}\r\n\r\n.gz-route-card h3{\r\n  position:relative;\r\n  z-index:2;\r\n\r\n  margin:0 0 .35rem;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:1.05rem;\r\n\r\n  font-weight:950;\r\n}\r\n\r\n.gz-route-card p{\r\n  position:relative;\r\n  z-index:2;\r\n\r\n  margin:0;\r\n\r\n  color:#765F50;\r\n\r\n  font-size:.9rem;\r\n\r\n  line-height:1.55;\r\n\r\n  font-weight:650;\r\n}\r\n\r\n.gz-route-card.locked{\r\n  opacity:.5;\r\n  filter:saturate(.65);\r\n}\r\n\r\n.gz-route-card.current{\r\n  transform:translateY(-4px);\r\n\r\n  box-shadow:\r\n    0 16px 34px rgba(90,70,55,.10);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   OEFENOMGEVING\r\n===================================================== *\/\r\n\r\n.gz-stage{\r\n  max-width:960px;\r\n\r\n  margin:0 auto 2.5rem;\r\n\r\n  padding:2.3rem;\r\n\r\n  border-radius:38px;\r\n\r\n  background:rgba(255,255,255,.78);\r\n\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  box-shadow:\r\n    0 18px 44px rgba(90,70,55,.08);\r\n}\r\n\r\n.gz-stage-top{\r\n  display:flex;\r\n\r\n  align-items:center;\r\n  justify-content:space-between;\r\n\r\n  gap:1rem;\r\n\r\n  margin-bottom:1rem;\r\n}\r\n\r\n.gz-level-pill,\r\n.gz-score-pill{\r\n  display:inline-flex;\r\n\r\n  align-items:center;\r\n\r\n  padding:9px 15px;\r\n\r\n  border-radius:999px;\r\n\r\n  background:rgba(255,255,255,.90);\r\n\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:.86rem;\r\n\r\n  font-weight:900;\r\n}\r\n\r\n.gz-progress-wrap{\r\n  width:100%;\r\n\r\n  height:10px;\r\n\r\n  margin-bottom:2rem;\r\n\r\n  border-radius:999px;\r\n\r\n  overflow:hidden;\r\n\r\n  background:#F3ECE7;\r\n}\r\n\r\n.gz-progress{\r\n  width:0%;\r\n\r\n  height:100%;\r\n\r\n  border-radius:999px;\r\n\r\n  background:\r\n    linear-gradient(\r\n      90deg,\r\n      #F5D5BD 0%,\r\n      #BFDCCE 100%\r\n    );\r\n\r\n  transition:width .35s ease;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LEVEL HEADER\r\n===================================================== *\/\r\n\r\n.gz-level-head{\r\n  margin-bottom:1.7rem;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.gz-level-head h2{\r\n  margin:0 0 .45rem;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:clamp(27px,4vw,38px);\r\n\r\n  font-weight:950;\r\n}\r\n\r\n.gz-level-head p{\r\n  max-width:650px;\r\n\r\n  margin:0 auto;\r\n\r\n  color:#765F50;\r\n\r\n  font-size:1rem;\r\n\r\n  line-height:1.7;\r\n\r\n  font-weight:650;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   OEFENGRID\r\n===================================================== *\/\r\n\r\n.gz-grid{\r\n  display:grid;\r\n\r\n  grid-template-columns:repeat(2,minmax(0,1fr));\r\n\r\n  gap:1rem;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   KAART\r\n===================================================== *\/\r\n\r\n.gz-card{\r\n  padding:1.45rem;\r\n\r\n  border-radius:26px;\r\n\r\n  background:#FFF6E8;\r\n\r\n  border:1px solid rgba(255,255,255,.96);\r\n\r\n  box-shadow:\r\n    0 8px 20px rgba(90,70,55,.04);\r\n}\r\n\r\n.gz-card:nth-child(even){\r\n  background:#EEF8F4;\r\n}\r\n\r\n.gz-zin{\r\n  margin-bottom:.65rem;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-size:1.05rem;\r\n\r\n  line-height:1.55;\r\n\r\n  font-weight:900;\r\n}\r\n\r\n.gz-vraag{\r\n  margin-bottom:1rem;\r\n\r\n  color:#7A6455;\r\n\r\n  font-size:.92rem;\r\n\r\n  line-height:1.5;\r\n\r\n  font-weight:800;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   WOORDKNOPPEN\r\n===================================================== *\/\r\n\r\n.gz-options{\r\n  display:flex;\r\n\r\n  flex-wrap:wrap;\r\n\r\n  gap:.65rem;\r\n}\r\n\r\n.gz-btn{\r\n  flex:1;\r\n\r\n  min-width:100px;\r\n\r\n  padding:.8rem 1rem;\r\n\r\n  border-radius:999px;\r\n\r\n  border:1px solid rgba(235,216,202,.75);\r\n\r\n  background:rgba(255,255,255,.76);\r\n\r\n  color:#513C31 !important;\r\n\r\n  font-family:'Inter',sans-serif;\r\n\r\n  font-size:.86rem;\r\n\r\n  font-weight:900;\r\n\r\n  cursor:pointer;\r\n\r\n  transition:.2s ease;\r\n}\r\n\r\n.gz-btn:hover:not(:disabled){\r\n  transform:translateY(-2px);\r\n\r\n  background:#FFFFFF;\r\n}\r\n\r\n.gz-btn.selected{\r\n  background:#FFF0DE;\r\n\r\n  border-color:#E5C8AD;\r\n}\r\n\r\n.gz-btn.correct{\r\n  background:#DDF5E4 !important;\r\n\r\n  border-color:#B7DEC4 !important;\r\n\r\n  color:#2F6A46 !important;\r\n}\r\n\r\n.gz-btn.wrong{\r\n  background:#FFE5E5 !important;\r\n\r\n  border-color:#F0C7C7 !important;\r\n\r\n  color:#985353 !important;\r\n}\r\n\r\n.gz-btn:disabled{\r\n  cursor:default;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CHECK\r\n===================================================== *\/\r\n\r\n.gz-check{\r\n  margin-top:.9rem;\r\n\r\n  padding:.85rem 1.35rem;\r\n\r\n  border:0;\r\n\r\n  border-radius:999px;\r\n\r\n  background:#DDEEFF;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-family:'Inter',sans-serif;\r\n\r\n  font-size:.88rem;\r\n\r\n  font-weight:900;\r\n\r\n  cursor:pointer;\r\n\r\n  transition:.2s ease;\r\n}\r\n\r\n.gz-check:hover{\r\n  transform:translateY(-2px);\r\n\r\n  background:#CFE5F9;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   INPUT\r\n===================================================== *\/\r\n\r\n.gz-input{\r\n  width:100%;\r\n\r\n  padding:1rem 1.1rem;\r\n\r\n  box-sizing:border-box;\r\n\r\n  border-radius:18px;\r\n\r\n  border:1px solid #E6D8CC;\r\n\r\n  outline:none;\r\n\r\n  background:rgba(255,255,255,.82);\r\n\r\n  color:#3A2B24;\r\n\r\n  font-family:'Inter',sans-serif;\r\n\r\n  font-size:.95rem;\r\n\r\n  transition:.2s ease;\r\n}\r\n\r\n.gz-input:focus{\r\n  border-color:#B5D6C5;\r\n\r\n  box-shadow:\r\n    0 0 0 4px rgba(181,214,197,.22);\r\n}\r\n\r\n.gz-input.correct{\r\n  background:#E5F6E9;\r\n\r\n  border-color:#B7DEC4;\r\n}\r\n\r\n.gz-input.wrong{\r\n  background:#FFECEC;\r\n\r\n  border-color:#EDC5C5;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   FEEDBACK\r\n===================================================== *\/\r\n\r\n.gz-feedback{\r\n  display:none;\r\n\r\n  margin-top:.85rem;\r\n\r\n  padding:.8rem 1rem;\r\n\r\n  border-radius:16px;\r\n\r\n  background:rgba(255,255,255,.72);\r\n\r\n  color:#765F50;\r\n\r\n  font-size:.86rem;\r\n\r\n  line-height:1.55;\r\n\r\n  font-weight:750;\r\n}\r\n\r\n.gz-feedback.show{\r\n  display:block;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   LEVEL KLAAR\r\n===================================================== *\/\r\n\r\n.gz-complete{\r\n  display:none;\r\n\r\n  margin-top:1.7rem;\r\n\r\n  padding:1.4rem;\r\n\r\n  border-radius:24px;\r\n\r\n  text-align:center;\r\n\r\n  background:\r\n    linear-gradient(\r\n      135deg,\r\n      #E8F7EE 0%,\r\n      #F7FCF9 100%\r\n    );\r\n\r\n  color:#39674A;\r\n\r\n  font-weight:800;\r\n\r\n  line-height:1.7;\r\n}\r\n\r\n.gz-complete.show{\r\n  display:block;\r\n}\r\n\r\n.gz-next{\r\n  display:inline-flex;\r\n\r\n  margin-top:1rem;\r\n\r\n  padding:.85rem 1.4rem;\r\n\r\n  border:0;\r\n\r\n  border-radius:999px;\r\n\r\n  background:#FFFFFF;\r\n\r\n  color:#3A2B24;\r\n\r\n  font-family:'Inter',sans-serif;\r\n\r\n  font-weight:900;\r\n\r\n  cursor:pointer;\r\n\r\n  box-shadow:\r\n    0 7px 18px rgba(90,70,55,.06);\r\n\r\n  transition:.2s ease;\r\n}\r\n\r\n.gz-next:hover{\r\n  transform:translateY(-2px);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   REMINDER\r\n===================================================== *\/\r\n\r\n.gz-note{\r\n  max-width:720px;\r\n\r\n  margin:0 auto;\r\n\r\n  padding:1.5rem 1.8rem;\r\n\r\n  border-radius:26px;\r\n\r\n  text-align:center;\r\n\r\n  background:\r\n    radial-gradient(circle at 12% 18%, rgba(255,255,255,.90) 0%, transparent 34%),\r\n    radial-gradient(circle at 88% 22%, rgba(255,234,242,.56) 0%, transparent 34%),\r\n    linear-gradient(135deg,#FFF8EF 0%,#F3FBF8 48%,#EEF7FE 100%);\r\n\r\n  border:1px solid rgba(255,255,255,.95);\r\n\r\n  box-shadow:\r\n    0 14px 34px rgba(90,70,55,.06);\r\n\r\n  color:#745C4D;\r\n\r\n  font-size:.95rem;\r\n\r\n  line-height:1.7;\r\n\r\n  font-weight:700;\r\n}\r\n\r\n.gz-note strong{\r\n  color:#3A2B24;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   RESPONSIVE\r\n===================================================== *\/\r\n\r\n@media(max-width:850px){\r\n\r\n  .gz-page{\r\n    padding:5.5rem 5vw 4rem;\r\n  }\r\n\r\n  .gz-hero{\r\n    padding:2.3rem 1.7rem;\r\n  }\r\n\r\n  .gz-route{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .gz-stage{\r\n    padding:1.6rem;\r\n  }\r\n\r\n  .gz-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .gz-stage-top{\r\n    justify-content:center;\r\n    flex-wrap:wrap;\r\n  }\r\n\r\n}\r\n\r\n@media(max-width:520px){\r\n\r\n  .gz-btn{\r\n    width:100%;\r\n    flex-basis:100%;\r\n  }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<section\r\n  class=\"gz-page\"\r\n  data-withifi-world=\"taalwereld\"\r\n  data-withifi-page=\"gezegde\"\r\n>\r\n\r\n  <div class=\"gz-wrap\">\r\n\r\n\r\n    <!-- =================================================\r\n         HERO\r\n    ================================================== -->\r\n\r\n    <div class=\"gz-hero\">\r\n\r\n      <div class=\"gz-label\">\r\n        \ud83e\udde9 Gezegde\r\n      <\/div>\r\n\r\n      <h1>\r\n        Oefenen met het gezegde.\r\n      <\/h1>\r\n\r\n      <p>\r\n        Het gezegde bestaat uit de werkwoorden die samen bij de zin horen.\r\n        Soms is dat \u00e9\u00e9n werkwoord.\r\n        Soms zijn het er meer.\r\n      <\/p>\r\n\r\n      <div class=\"gz-tip\">\r\n        Zoek alle werkwoorden die samen horen.\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =================================================\r\n         ROUTE\r\n    ================================================== -->\r\n\r\n    <div class=\"gz-route\">\r\n\r\n      <div\r\n        class=\"gz-route-card current\"\r\n        id=\"gzRoute1\"\r\n      >\r\n\r\n        <div class=\"gz-route-icon\">\r\n          \ud83c\udf31\r\n        <\/div>\r\n\r\n        <h3>\r\n          Level 1 \u00b7 Werkwoorden zoeken\r\n        <\/h3>\r\n\r\n        <p>\r\n          Klik alle werkwoorden aan die in de zin staan.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"gz-route-card locked\"\r\n        id=\"gzRoute2\"\r\n      >\r\n\r\n        <div class=\"gz-route-icon\">\r\n          \ud83c\udf3f\r\n        <\/div>\r\n\r\n        <h3>\r\n          Level 2 \u00b7 Gezegde herkennen\r\n        <\/h3>\r\n\r\n        <p>\r\n          Kies welke werkwoorden samen het hele gezegde vormen.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"gz-route-card locked\"\r\n        id=\"gzRoute3\"\r\n      >\r\n\r\n        <div class=\"gz-route-icon\">\r\n          \ud83c\udf33\r\n        <\/div>\r\n\r\n        <h3>\r\n          Level 3 \u00b7 Zelf doen\r\n        <\/h3>\r\n\r\n        <p>\r\n          Typ zelf alle werkwoorden van het gezegde.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =================================================\r\n         OEFENOMGEVING\r\n    ================================================== -->\r\n\r\n    <div class=\"gz-stage\">\r\n\r\n      <div class=\"gz-stage-top\">\r\n\r\n        <div\r\n          class=\"gz-level-pill\"\r\n          id=\"gzLevelLabel\"\r\n        >\r\n          \ud83c\udf31 Level 1\r\n        <\/div>\r\n\r\n        <div\r\n          class=\"gz-score-pill\"\r\n          id=\"gzProgressText\"\r\n        >\r\n          0 van 10 goed\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"gz-progress-wrap\">\r\n\r\n        <div\r\n          class=\"gz-progress\"\r\n          id=\"gzProgressBar\"\r\n        ><\/div>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div class=\"gz-level-head\">\r\n\r\n        <h2 id=\"gzLevelTitle\">\r\n          Zoek alle werkwoorden\r\n        <\/h2>\r\n\r\n        <p id=\"gzLevelIntro\">\r\n          Klik alle werkwoorden aan. Ook hulpwerkwoorden tellen mee.\r\n        <\/p>\r\n\r\n      <\/div>\r\n\r\n\r\n      <div\r\n        class=\"gz-grid\"\r\n        id=\"gzGrid\"\r\n      ><\/div>\r\n\r\n\r\n      <div\r\n        class=\"gz-complete\"\r\n        id=\"gzComplete\"\r\n      ><\/div>\r\n\r\n    <\/div>\r\n\r\n\r\n    <!-- =================================================\r\n         REMINDER\r\n    ================================================== -->\r\n\r\n    <div class=\"gz-note\">\r\n\r\n      Kleine reminder \ud83c\udf38<br>\r\n\r\n      Het gezegde bestaat uit\r\n      <strong>alle werkwoorden die samen bij de zin horen<\/strong>.\r\n\r\n      <br>\r\n\r\n      Woorden zoals\r\n      <strong>heeft, gaat, kan, zal<\/strong>\r\n      kunnen dus ook bij het gezegde horen.\r\n\r\n    <\/div>\r\n\r\n\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n\r\ndocument.addEventListener(\r\n  \"DOMContentLoaded\",\r\n  function(){\r\n\r\n    const levels = {\r\n\r\n\r\n      \/* =================================================\r\n         LEVEL 1\r\n      ================================================= *\/\r\n\r\n      1:{\r\n\r\n        icon:\"\ud83c\udf31\",\r\n\r\n        title:\"Zoek alle werkwoorden\",\r\n\r\n        intro:\r\n          \"Klik alle werkwoorden aan. Ook hulpwerkwoorden tellen mee.\",\r\n\r\n        type:\"multi\",\r\n\r\n        questions:[\r\n\r\n          {\r\n            zin:\"Ali heeft een boek gelezen.\",\r\n            answer:[\"heeft\",\"gelezen\"],\r\n            options:[\"Ali\",\"heeft\",\"een\",\"boek\",\"gelezen\"]\r\n          },\r\n\r\n          {\r\n            zin:\"Mama gaat soep koken.\",\r\n            answer:[\"gaat\",\"koken\"],\r\n            options:[\"Mama\",\"gaat\",\"soep\",\"koken\"]\r\n          },\r\n\r\n          {\r\n            zin:\"Noor kan mooi tekenen.\",\r\n            answer:[\"kan\",\"tekenen\"],\r\n            options:[\"Noor\",\"kan\",\"mooi\",\"tekenen\"]\r\n          },\r\n\r\n          {\r\n            zin:\"Papa heeft de auto gewassen.\",\r\n            answer:[\"heeft\",\"gewassen\"],\r\n            options:[\"Papa\",\"heeft\",\"de\",\"auto\",\"gewassen\"]\r\n          },\r\n\r\n          {\r\n            zin:\"Wij gaan morgen zwemmen.\",\r\n            answer:[\"gaan\",\"zwemmen\"],\r\n            options:[\"Wij\",\"gaan\",\"morgen\",\"zwemmen\"]\r\n          },\r\n\r\n          {\r\n            zin:\"Sara zal een brief schrijven.\",\r\n            answer:[\"zal\",\"schrijven\"],\r\n            options:[\"Sara\",\"zal\",\"een\",\"brief\",\"schrijven\"]\r\n          },\r\n\r\n          {\r\n            zin:\"De hond heeft hard gerend.\",\r\n            answer:[\"heeft\",\"gerend\"],\r\n            options:[\"De\",\"hond\",\"heeft\",\"hard\",\"gerend\"]\r\n          },\r\n\r\n          {\r\n            zin:\"Oma gaat een taart bakken.\",\r\n            answer:[\"gaat\",\"bakken\"],\r\n            options:[\"Oma\",\"gaat\",\"een\",\"taart\",\"bakken\"]\r\n          },\r\n\r\n          {\r\n            zin:\"Sam kan goed lezen.\",\r\n            answer:[\"kan\",\"lezen\"],\r\n            options:[\"Sam\",\"kan\",\"goed\",\"lezen\"]\r\n          },\r\n\r\n          {\r\n            zin:\"De kinderen hebben buiten gespeeld.\",\r\n            answer:[\"hebben\",\"gespeeld\"],\r\n            options:[\"De\",\"kinderen\",\"hebben\",\"buiten\",\"gespeeld\"]\r\n          }\r\n\r\n        ]\r\n\r\n      },\r\n\r\n\r\n      \/* =================================================\r\n         LEVEL 2\r\n      ================================================= *\/\r\n\r\n      2:{\r\n\r\n        icon:\"\ud83c\udf3f\",\r\n\r\n        title:\"Herken het hele gezegde\",\r\n\r\n        intro:\r\n          \"Kies welke werkwoorden samen het gezegde vormen.\",\r\n\r\n        type:\"choice\",\r\n\r\n        questions:[\r\n\r\n          {\r\n            zin:\"De vogel heeft hoog gevlogen.\",\r\n            answer:\"heeft gevlogen\",\r\n            options:[\r\n              \"De vogel\",\r\n              \"heeft gevlogen\",\r\n              \"hoog\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"Het meisje gaat bloemen plukken.\",\r\n            answer:\"gaat plukken\",\r\n            options:[\r\n              \"Het meisje\",\r\n              \"gaat plukken\",\r\n              \"bloemen\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"De jongen kan een tas dragen.\",\r\n            answer:\"kan dragen\",\r\n            options:[\r\n              \"De jongen\",\r\n              \"kan dragen\",\r\n              \"een tas\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"De baby heeft hard gelachen.\",\r\n            answer:\"heeft gelachen\",\r\n            options:[\r\n              \"De baby\",\r\n              \"heeft gelachen\",\r\n              \"hard\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"De vis gaat snel zwemmen.\",\r\n            answer:\"gaat zwemmen\",\r\n            options:[\r\n              \"De vis\",\r\n              \"gaat zwemmen\",\r\n              \"snel\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"De juf zal woorden schrijven.\",\r\n            answer:\"zal schrijven\",\r\n            options:[\r\n              \"De juf\",\r\n              \"zal schrijven\",\r\n              \"woorden\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"De bakker heeft brood gemaakt.\",\r\n            answer:\"heeft gemaakt\",\r\n            options:[\r\n              \"De bakker\",\r\n              \"heeft gemaakt\",\r\n              \"brood\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"Het paard kan hoog springen.\",\r\n            answer:\"kan springen\",\r\n            options:[\r\n              \"Het paard\",\r\n              \"kan springen\",\r\n              \"hoog\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"De dokter gaat mensen helpen.\",\r\n            answer:\"gaat helpen\",\r\n            options:[\r\n              \"De dokter\",\r\n              \"gaat helpen\",\r\n              \"mensen\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"De zon heeft fel geschenen.\",\r\n            answer:\"heeft geschenen\",\r\n            options:[\r\n              \"De zon\",\r\n              \"heeft geschenen\",\r\n              \"fel\"\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\n\r\n      3:{\r\n\r\n        icon:\"\ud83c\udf33\",\r\n\r\n        title:\"Zelf het gezegde vinden\",\r\n\r\n        intro:\r\n          \"Lees de zin en typ alle werkwoorden die samen het gezegde vormen.\",\r\n\r\n        type:\"input\",\r\n\r\n        questions:[\r\n\r\n          {\r\n            zin:\"De brandweer heeft het vuur geblust.\",\r\n            answer:\"heeft geblust\"\r\n          },\r\n\r\n          {\r\n            zin:\"De trein gaat bij het station stoppen.\",\r\n            answer:\"gaat stoppen\"\r\n          },\r\n\r\n          {\r\n            zin:\"De clown kan grapjes maken.\",\r\n            answer:\"kan maken\"\r\n          },\r\n\r\n          {\r\n            zin:\"Het kindje heeft zacht gehuild.\",\r\n            answer:\"heeft gehuild\"\r\n          },\r\n\r\n          {\r\n            zin:\"De boer gaat de koe melken.\",\r\n            answer:\"gaat melken\"\r\n          },\r\n\r\n          {\r\n            zin:\"De politie zal een fiets zoeken.\",\r\n            answer:\"zal zoeken\"\r\n          },\r\n\r\n          {\r\n            zin:\"De ober heeft drinken gebracht.\",\r\n            answer:\"heeft gebracht\"\r\n          },\r\n\r\n          {\r\n            zin:\"De leerling gaat zijn boek openen.\",\r\n            answer:\"gaat openen\"\r\n          },\r\n\r\n          {\r\n            zin:\"De schilder heeft de muur geverfd.\",\r\n            answer:\"heeft geverfd\"\r\n          },\r\n\r\n          {\r\n            zin:\"De kok kan groenten snijden.\",\r\n            answer:\"kan snijden\"\r\n          }\r\n\r\n        ]\r\n\r\n      }\r\n\r\n    };\r\n\r\n\r\n    \/* =====================================================\r\n       STATE\r\n    ===================================================== *\/\r\n\r\n    let currentLevel = 1;\r\n\r\n    let unlockedLevel = 1;\r\n\r\n    let scores = {\r\n      1:0,\r\n      2:0,\r\n      3:0\r\n    };\r\n\r\n    let solved = {\r\n      1:new Set(),\r\n      2:new Set(),\r\n      3:new Set()\r\n    };\r\n\r\n\r\n    \/* =====================================================\r\n       ELEMENTEN\r\n    ===================================================== *\/\r\n\r\n    const grid =\r\n      document.getElementById(\"gzGrid\");\r\n\r\n    const levelLabel =\r\n      document.getElementById(\"gzLevelLabel\");\r\n\r\n    const levelTitle =\r\n      document.getElementById(\"gzLevelTitle\");\r\n\r\n    const levelIntro =\r\n      document.getElementById(\"gzLevelIntro\");\r\n\r\n    const progressText =\r\n      document.getElementById(\"gzProgressText\");\r\n\r\n    const progressBar =\r\n      document.getElementById(\"gzProgressBar\");\r\n\r\n    const completeBox =\r\n      document.getElementById(\"gzComplete\");\r\n\r\n\r\n    \/* =====================================================\r\n       TEKST NORMALISEREN\r\n    ===================================================== *\/\r\n\r\n    function cleanText(value){\r\n\r\n      return String(value)\r\n        .trim()\r\n        .toLowerCase()\r\n        .replace(\/\\s+\/g,\" \");\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       ROUTE\r\n    ===================================================== *\/\r\n\r\n    function updateRoute(){\r\n\r\n      for(\r\n        let number = 1;\r\n        number <= 3;\r\n        number++\r\n      ){\r\n\r\n        const card =\r\n          document.getElementById(\r\n            \"gzRoute\" + number\r\n          );\r\n\r\n        card.classList.remove(\r\n          \"current\",\r\n          \"locked\"\r\n        );\r\n\r\n        if(number === currentLevel){\r\n          card.classList.add(\"current\");\r\n        }\r\n\r\n        if(number > unlockedLevel){\r\n          card.classList.add(\"locked\");\r\n        }\r\n\r\n      }\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       PROGRESS\r\n    ===================================================== *\/\r\n\r\n    function updateProgress(){\r\n\r\n      const total =\r\n        levels[currentLevel]\r\n          .questions.length;\r\n\r\n      const score =\r\n        scores[currentLevel];\r\n\r\n      progressText.textContent =\r\n        score +\r\n        \" van \" +\r\n        total +\r\n        \" goed\";\r\n\r\n      progressBar.style.width =\r\n        ((score \/ total) * 100) +\r\n        \"%\";\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       FEEDBACK\r\n    ===================================================== *\/\r\n\r\n    function showFeedback(\r\n      card,\r\n      message\r\n    ){\r\n\r\n      const feedback =\r\n        card.querySelector(\r\n          \".gz-feedback\"\r\n        );\r\n\r\n      feedback.innerHTML =\r\n        message;\r\n\r\n      feedback.classList.add(\r\n        \"show\"\r\n      );\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       LEVEL KLAAR\r\n    ===================================================== *\/\r\n\r\n    function checkLevelComplete(){\r\n\r\n      const total =\r\n        levels[currentLevel]\r\n          .questions.length;\r\n\r\n      if(\r\n        scores[currentLevel] !== total\r\n      ){\r\n        return;\r\n      }\r\n\r\n\r\n      if(currentLevel < 3){\r\n\r\n        const nextLevel =\r\n          currentLevel + 1;\r\n\r\n        unlockedLevel =\r\n          Math.max(\r\n            unlockedLevel,\r\n            nextLevel\r\n          );\r\n\r\n        completeBox.innerHTML = `\r\n\r\n          \ud83c\udf3f Mooi gedaan.\r\n          Je hebt alle opdrachten van dit level goed.\r\n\r\n          <br>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"gz-next\"\r\n            id=\"gzNextLevel\"\r\n          >\r\n            Naar level ${nextLevel} \u2192\r\n          <\/button>\r\n\r\n        `;\r\n\r\n        completeBox.classList.add(\r\n          \"show\"\r\n        );\r\n\r\n\r\n        document\r\n          .getElementById(\r\n            \"gzNextLevel\"\r\n          )\r\n          .addEventListener(\r\n            \"click\",\r\n            function(){\r\n\r\n              currentLevel =\r\n                nextLevel;\r\n\r\n              renderLevel();\r\n\r\n              document\r\n                .querySelector(\r\n                  \".gz-stage\"\r\n                )\r\n                .scrollIntoView({\r\n                  behavior:\"smooth\",\r\n                  block:\"start\"\r\n                });\r\n\r\n            }\r\n          );\r\n\r\n      }\r\n\r\n      else{\r\n\r\n        completeBox.innerHTML = `\r\n\r\n          \ud83c\udf89 Goed gedaan.\r\n\r\n          <br>\r\n\r\n          Je hebt alle drie de levels\r\n          van het gezegde afgerond.\r\n\r\n        `;\r\n\r\n        completeBox.classList.add(\r\n          \"show\"\r\n        );\r\n\r\n      }\r\n\r\n\r\n      updateRoute();\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       LEVEL 1 \u2014 MEERDERE WOORDEN SELECTEREN\r\n    ===================================================== *\/\r\n\r\n    function createMultiCard(\r\n      question,\r\n      index\r\n    ){\r\n\r\n      const card =\r\n        document.createElement(\r\n          \"div\"\r\n        );\r\n\r\n      card.className =\r\n        \"gz-card\";\r\n\r\n\r\n      card.innerHTML = `\r\n\r\n        <div class=\"gz-zin\">\r\n          ${question.zin}\r\n        <\/div>\r\n\r\n        <div class=\"gz-vraag\">\r\n          Klik alle werkwoorden aan.\r\n        <\/div>\r\n\r\n        <div class=\"gz-options\"><\/div>\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"gz-check\"\r\n        >\r\n          Nakijken \ud83c\udf3f\r\n        <\/button>\r\n\r\n        <div class=\"gz-feedback\"><\/div>\r\n\r\n      `;\r\n\r\n\r\n      const options =\r\n        card.querySelector(\r\n          \".gz-options\"\r\n        );\r\n\r\n      const selected =\r\n        new Set();\r\n\r\n\r\n      question.options\r\n        .forEach(\r\n          function(option){\r\n\r\n            const button =\r\n              document.createElement(\r\n                \"button\"\r\n              );\r\n\r\n            button.type =\r\n              \"button\";\r\n\r\n            button.className =\r\n              \"gz-btn\";\r\n\r\n            button.textContent =\r\n              option;\r\n\r\n\r\n            button.addEventListener(\r\n              \"click\",\r\n              function(){\r\n\r\n                if(\r\n                  solved[currentLevel]\r\n                    .has(index)\r\n                ){\r\n                  return;\r\n                }\r\n\r\n\r\n                const normalized =\r\n                  cleanText(option);\r\n\r\n\r\n                if(\r\n                  selected.has(\r\n                    normalized\r\n                  )\r\n                ){\r\n\r\n                  selected.delete(\r\n                    normalized\r\n                  );\r\n\r\n                  button.classList.remove(\r\n                    \"selected\"\r\n                  );\r\n\r\n                }\r\n\r\n                else{\r\n\r\n                  selected.add(\r\n                    normalized\r\n                  );\r\n\r\n                  button.classList.add(\r\n                    \"selected\"\r\n                  );\r\n\r\n                }\r\n\r\n              }\r\n            );\r\n\r\n\r\n            options.appendChild(\r\n              button\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n\r\n      card\r\n        .querySelector(\r\n          \".gz-check\"\r\n        )\r\n        .addEventListener(\r\n          \"click\",\r\n          function(){\r\n\r\n            if(\r\n              solved[currentLevel]\r\n                .has(index)\r\n            ){\r\n              return;\r\n            }\r\n\r\n\r\n            const correct =\r\n              question.answer\r\n                .map(cleanText)\r\n                .sort();\r\n\r\n\r\n            const chosen =\r\n              Array\r\n                .from(selected)\r\n                .sort();\r\n\r\n\r\n            const isCorrect =\r\n              correct.length ===\r\n              chosen.length\r\n              &&\r\n              correct.every(\r\n                function(value,index){\r\n\r\n                  return (\r\n                    value ===\r\n                    chosen[index]\r\n                  );\r\n\r\n                }\r\n              );\r\n\r\n\r\n            if(isCorrect){\r\n\r\n              solved[currentLevel]\r\n                .add(index);\r\n\r\n              scores[currentLevel]++;\r\n\r\n\r\n              card\r\n                .querySelectorAll(\r\n                  \".gz-btn\"\r\n                )\r\n                .forEach(\r\n                  function(button){\r\n\r\n                    const value =\r\n                      cleanText(\r\n                        button.textContent\r\n                      );\r\n\r\n\r\n                    button.disabled =\r\n                      true;\r\n\r\n\r\n                    if(\r\n                      correct.includes(value)\r\n                    ){\r\n\r\n                      button.classList.add(\r\n                        \"correct\"\r\n                      );\r\n\r\n                    }\r\n\r\n                  }\r\n                );\r\n\r\n\r\n              showFeedback(\r\n                card,\r\n                \"\ud83c\udf38 Goed gezien. <strong>\" +\r\n                question.answer.join(\" + \") +\r\n                \"<\/strong> vormt samen het gezegde.\"\r\n              );\r\n\r\n\r\n              updateProgress();\r\n\r\n              checkLevelComplete();\r\n\r\n            }\r\n\r\n            else{\r\n\r\n              showFeedback(\r\n                card,\r\n                \"\ud83c\udf3f Nog niet helemaal. Kijk nog eens: welke woorden zijn werkwoorden?\"\r\n              );\r\n\r\n            }\r\n\r\n          }\r\n        );\r\n\r\n\r\n      return card;\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       LEVEL 2 \u2014 KIEZEN\r\n    ===================================================== *\/\r\n\r\n    function createChoiceCard(\r\n      question,\r\n      index\r\n    ){\r\n\r\n      const card =\r\n        document.createElement(\r\n          \"div\"\r\n        );\r\n\r\n      card.className =\r\n        \"gz-card\";\r\n\r\n\r\n      card.innerHTML = `\r\n\r\n        <div class=\"gz-zin\">\r\n          ${question.zin}\r\n        <\/div>\r\n\r\n        <div class=\"gz-vraag\">\r\n          Kies het hele gezegde.\r\n        <\/div>\r\n\r\n        <div class=\"gz-options\"><\/div>\r\n\r\n        <div class=\"gz-feedback\"><\/div>\r\n\r\n      `;\r\n\r\n\r\n      const options =\r\n        card.querySelector(\r\n          \".gz-options\"\r\n        );\r\n\r\n\r\n      question.options\r\n        .forEach(\r\n          function(option){\r\n\r\n            const button =\r\n              document.createElement(\r\n                \"button\"\r\n              );\r\n\r\n            button.type =\r\n              \"button\";\r\n\r\n            button.className =\r\n              \"gz-btn\";\r\n\r\n            button.textContent =\r\n              option;\r\n\r\n\r\n            button.addEventListener(\r\n              \"click\",\r\n              function(){\r\n\r\n                if(\r\n                  solved[currentLevel]\r\n                    .has(index)\r\n                ){\r\n                  return;\r\n                }\r\n\r\n\r\n                if(\r\n                  cleanText(option) ===\r\n                  cleanText(question.answer)\r\n                ){\r\n\r\n                  button.classList.add(\r\n                    \"correct\"\r\n                  );\r\n\r\n\r\n                  solved[currentLevel]\r\n                    .add(index);\r\n\r\n\r\n                  scores[currentLevel]++;\r\n\r\n\r\n                  card\r\n                    .querySelectorAll(\r\n                      \".gz-btn\"\r\n                    )\r\n                    .forEach(\r\n                      function(btn){\r\n\r\n                        btn.disabled =\r\n                          true;\r\n\r\n                      }\r\n                    );\r\n\r\n\r\n                  showFeedback(\r\n                    card,\r\n                    \"\ud83c\udf38 Klopt. <strong>\" +\r\n                    question.answer +\r\n                    \"<\/strong> is het hele gezegde.\"\r\n                  );\r\n\r\n\r\n                  updateProgress();\r\n\r\n                  checkLevelComplete();\r\n\r\n                }\r\n\r\n                else{\r\n\r\n                  button.classList.add(\r\n                    \"wrong\"\r\n                  );\r\n\r\n\r\n                  showFeedback(\r\n                    card,\r\n                    \"\ud83c\udf3f Kijk nog eens naar de werkwoorden die samen bij de zin horen.\"\r\n                  );\r\n\r\n                }\r\n\r\n              }\r\n            );\r\n\r\n\r\n            options.appendChild(\r\n              button\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n\r\n      return card;\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       LEVEL 3 \u2014 ZELF TYPEN\r\n    ===================================================== *\/\r\n\r\n    function createInputCard(\r\n      question,\r\n      index\r\n    ){\r\n\r\n      const card =\r\n        document.createElement(\r\n          \"div\"\r\n        );\r\n\r\n      card.className =\r\n        \"gz-card\";\r\n\r\n\r\n      card.innerHTML = `\r\n\r\n        <div class=\"gz-zin\">\r\n          ${question.zin}\r\n        <\/div>\r\n\r\n        <div class=\"gz-vraag\">\r\n          Typ het hele gezegde.\r\n        <\/div>\r\n\r\n        <input\r\n          type=\"text\"\r\n          class=\"gz-input\"\r\n          placeholder=\"Typ hier het gezegde...\"\r\n          autocomplete=\"off\"\r\n        >\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"gz-check\"\r\n        >\r\n          Nakijken \ud83c\udf3f\r\n        <\/button>\r\n\r\n        <div class=\"gz-feedback\"><\/div>\r\n\r\n      `;\r\n\r\n\r\n      const input =\r\n        card.querySelector(\r\n          \".gz-input\"\r\n        );\r\n\r\n      const check =\r\n        card.querySelector(\r\n          \".gz-check\"\r\n        );\r\n\r\n\r\n      function checkAnswer(){\r\n\r\n        if(\r\n          solved[currentLevel]\r\n            .has(index)\r\n        ){\r\n          return;\r\n        }\r\n\r\n\r\n        input.classList.remove(\r\n          \"correct\",\r\n          \"wrong\"\r\n        );\r\n\r\n\r\n        if(\r\n          cleanText(input.value) ===\r\n          cleanText(question.answer)\r\n        ){\r\n\r\n          input.classList.add(\r\n            \"correct\"\r\n          );\r\n\r\n\r\n          solved[currentLevel]\r\n            .add(index);\r\n\r\n\r\n          scores[currentLevel]++;\r\n\r\n\r\n          input.disabled =\r\n            true;\r\n\r\n\r\n          check.disabled =\r\n            true;\r\n\r\n\r\n          showFeedback(\r\n            card,\r\n            \"\ud83c\udf38 Precies. <strong>\" +\r\n            question.answer +\r\n            \"<\/strong> is het gezegde.\"\r\n          );\r\n\r\n\r\n          updateProgress();\r\n\r\n          checkLevelComplete();\r\n\r\n        }\r\n\r\n        else{\r\n\r\n          input.classList.add(\r\n            \"wrong\"\r\n          );\r\n\r\n\r\n          showFeedback(\r\n            card,\r\n            \"\ud83c\udf3f Zoek nog eens alle werkwoorden. Soms horen er twee bij elkaar.\"\r\n          );\r\n\r\n        }\r\n\r\n      }\r\n\r\n\r\n      check.addEventListener(\r\n        \"click\",\r\n        checkAnswer\r\n      );\r\n\r\n\r\n      input.addEventListener(\r\n        \"keydown\",\r\n        function(event){\r\n\r\n          if(\r\n            event.key ===\r\n            \"Enter\"\r\n          ){\r\n\r\n            checkAnswer();\r\n\r\n          }\r\n\r\n        }\r\n      );\r\n\r\n\r\n      return card;\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       RENDER\r\n    ===================================================== *\/\r\n\r\n    function renderLevel(){\r\n\r\n      const level =\r\n        levels[currentLevel];\r\n\r\n\r\n      grid.innerHTML =\r\n        \"\";\r\n\r\n\r\n      completeBox.innerHTML =\r\n        \"\";\r\n\r\n\r\n      completeBox.classList.remove(\r\n        \"show\"\r\n      );\r\n\r\n\r\n      levelLabel.textContent =\r\n        level.icon +\r\n        \" Level \" +\r\n        currentLevel;\r\n\r\n\r\n      levelTitle.textContent =\r\n        level.title;\r\n\r\n\r\n      levelIntro.textContent =\r\n        level.intro;\r\n\r\n\r\n      level.questions\r\n        .forEach(\r\n          function(\r\n            question,\r\n            index\r\n          ){\r\n\r\n            let card;\r\n\r\n\r\n            if(\r\n              level.type ===\r\n              \"multi\"\r\n            ){\r\n\r\n              card =\r\n                createMultiCard(\r\n                  question,\r\n                  index\r\n                );\r\n\r\n            }\r\n\r\n            else if(\r\n              level.type ===\r\n              \"choice\"\r\n            ){\r\n\r\n              card =\r\n                createChoiceCard(\r\n                  question,\r\n                  index\r\n                );\r\n\r\n            }\r\n\r\n            else{\r\n\r\n              card =\r\n                createInputCard(\r\n                  question,\r\n                  index\r\n                );\r\n\r\n            }\r\n\r\n\r\n            grid.appendChild(\r\n              card\r\n            );\r\n\r\n          }\r\n        );\r\n\r\n\r\n      updateProgress();\r\n\r\n      updateRoute();\r\n\r\n    }\r\n\r\n\r\n    \/* =====================================================\r\n       START\r\n    ===================================================== *\/\r\n\r\n    renderLevel();\r\n\r\n  }\r\n);\r\n\r\n<\/script>\r\n\r\n\r\n<!--\r\n  Centrale With Ifi navigatie:\r\n  data-withifi-world=\"taalwereld\"\r\n\r\n  Daardoor verschijnt automatisch:\r\n  \u2190 Taalwereld\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 met het gezegde. Het gezegde bestaat uit de werkwoorden die samen bij de zin horen. Soms is dat \u00e9\u00e9n werkwoord. Soms zijn het er meer. Zoek alle werkwoorden die samen horen. \ud83c\udf31 Level 1 \u00b7 Werkwoorden zoeken Klik alle werkwoorden aan die in de zin staan. \ud83c\udf3f Level 2 \u00b7 Gezegde herkennen [&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":34,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2616\/revisions"}],"predecessor-version":[{"id":4526,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2616\/revisions\/4526"}],"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}]}}