{"id":2844,"date":"2026-05-22T05:27:28","date_gmt":"2026-05-22T05:27:28","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?p=2844"},"modified":"2026-08-30T07:05:18","modified_gmt":"2026-08-30T07:05:18","slug":"aanwijzend-voornaamwoord-2","status":"publish","type":"post","link":"https:\/\/withifi.muhubonurture.nl\/?p=2844","title":{"rendered":"Aanwijzend Voornaamwoord Oefenen"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2844\" class=\"elementor elementor-2844\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-647f549 e-con-full e-flex e-con e-parent\" data-id=\"647f549\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e1afa25 elementor-widget elementor-widget-html\" data-id=\"e1afa25\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =====================================================\r\n     WITH IFI \u2014 AANWIJZEND VOORNAAMWOORD OEFENEN\r\n     3 levels \u2022 herkennen \u2192 zoeken \u2192 zelf kiezen\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\r\n\/* =====================================================\r\n   PAGINA\r\n===================================================== *\/\r\n\r\n.av-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.av-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.av-hero{\r\n  max-width:960px;\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.av-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.av-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.av-hero p{\r\n  max-width:780px;\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\r\n\/* =====================================================\r\n   REGELKAART\r\n===================================================== *\/\r\n\r\n.av-rule{\r\n  max-width:740px;\r\n\r\n  margin:1.5rem auto 0;\r\n\r\n  display:grid;\r\n\r\n  grid-template-columns:repeat(2,1fr);\r\n\r\n  gap:.7rem;\r\n}\r\n\r\n.av-rule-item{\r\n  padding:11px 15px;\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:.9rem;\r\n\r\n  line-height:1.5;\r\n\r\n  font-weight:850;\r\n}\r\n\r\n.av-rule-item:nth-child(2),\r\n.av-rule-item:nth-child(3){\r\n  background:#EAF7F1;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   ROUTE\r\n===================================================== *\/\r\n\r\n.av-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.av-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.av-route-card:nth-child(1){\r\n  background:#FFF2DF;\r\n}\r\n\r\n.av-route-card:nth-child(2){\r\n  background:#EAF7F1;\r\n}\r\n\r\n.av-route-card:nth-child(3){\r\n  background:#FFEAF2;\r\n}\r\n\r\n.av-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.av-route-icon{\r\n  position:relative;\r\n  z-index:2;\r\n\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\r\n.av-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.av-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.av-route-card.locked{\r\n  opacity:.5;\r\n  filter:saturate(.65);\r\n}\r\n\r\n.av-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.av-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.av-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.av-level-pill,\r\n.av-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\r\n\/* =====================================================\r\n   PROGRESS\r\n===================================================== *\/\r\n\r\n.av-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.av-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.av-level-head{\r\n  margin-bottom:1.7rem;\r\n\r\n  text-align:center;\r\n}\r\n\r\n.av-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.av-level-head p{\r\n  max-width:700px;\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   GRID\r\n===================================================== *\/\r\n\r\n.av-grid{\r\n  display:grid;\r\n\r\n  grid-template-columns:\r\n    repeat(2,minmax(0,1fr));\r\n\r\n  gap:1rem;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CARD\r\n===================================================== *\/\r\n\r\n.av-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.av-card:nth-child(even){\r\n  background:#EEF8F4;\r\n}\r\n\r\n.av-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.av-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   CONTEXT LEVEL 3\r\n===================================================== *\/\r\n\r\n.av-context{\r\n  display:flex;\r\n\r\n  flex-wrap:wrap;\r\n\r\n  gap:.45rem;\r\n\r\n  margin-bottom:1rem;\r\n}\r\n\r\n.av-context-pill{\r\n  display:inline-flex;\r\n  align-items:center;\r\n\r\n  padding:7px 11px;\r\n\r\n  border-radius:999px;\r\n\r\n  background:rgba(255,255,255,.80);\r\n\r\n  border:1px solid rgba(235,216,202,.72);\r\n\r\n  color:#765F50;\r\n\r\n  font-size:.78rem;\r\n\r\n  font-weight:850;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   ANTWOORDEN\r\n===================================================== *\/\r\n\r\n.av-options{\r\n  display:flex;\r\n\r\n  flex-wrap:wrap;\r\n\r\n  gap:.65rem;\r\n}\r\n\r\n.av-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:.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.av-btn:hover:not(:disabled){\r\n  transform:translateY(-2px);\r\n\r\n  background:#FFFFFF;\r\n}\r\n\r\n.av-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.av-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.av-btn:disabled{\r\n  cursor:default;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   INPUT\r\n===================================================== *\/\r\n\r\n.av-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.av-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.av-input.correct{\r\n  background:#E5F6E9;\r\n\r\n  border-color:#B7DEC4;\r\n}\r\n\r\n.av-input.wrong{\r\n  background:#FFECEC;\r\n\r\n  border-color:#EDC5C5;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   CHECK\r\n===================================================== *\/\r\n\r\n.av-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.av-check:hover:not(:disabled){\r\n  transform:translateY(-2px);\r\n\r\n  background:#CFE5F9;\r\n}\r\n\r\n.av-check:disabled{\r\n  cursor:default;\r\n\r\n  opacity:.75;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   FEEDBACK\r\n===================================================== *\/\r\n\r\n.av-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.av-feedback.show{\r\n  display:block;\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   COMPLETE\r\n===================================================== *\/\r\n\r\n.av-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.av-complete.show{\r\n  display:block;\r\n}\r\n\r\n.av-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.av-next:hover{\r\n  transform:translateY(-2px);\r\n}\r\n\r\n\r\n\/* =====================================================\r\n   NOTE\r\n===================================================== *\/\r\n\r\n.av-note{\r\n  max-width:780px;\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.av-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  .av-page{\r\n    padding:5.5rem 5vw 4rem;\r\n  }\r\n\r\n  .av-hero{\r\n    padding:2.3rem 1.7rem;\r\n  }\r\n\r\n  .av-rule{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .av-route{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .av-stage{\r\n    padding:1.6rem;\r\n  }\r\n\r\n  .av-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .av-stage-top{\r\n    justify-content:center;\r\n\r\n    flex-wrap:wrap;\r\n  }\r\n\r\n}\r\n\r\n@media(max-width:520px){\r\n\r\n  .av-btn{\r\n    width:100%;\r\n\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=\"av-page\"\r\n  data-withifi-world=\"taalwereld\"\r\n  data-withifi-page=\"aanwijzend-voornaamwoord\"\r\n>\r\n\r\n<div class=\"av-wrap\">\r\n\r\n\r\n<!-- =================================================\r\n     HERO\r\n================================================== -->\r\n\r\n<div class=\"av-hero\">\r\n\r\n  <div class=\"av-label\">\r\n    \ud83d\udc49 Aanwijzend voornaamwoord\r\n  <\/div>\r\n\r\n  <h1>\r\n    Welk woord wijst iets aan?\r\n  <\/h1>\r\n\r\n  <p>\r\n    Een aanwijzend voornaamwoord gebruik je\r\n    wanneer je iets of iemand aanwijst.\r\n\r\n    We oefenen met\r\n    <strong>deze, dit, die<\/strong>\r\n    en\r\n    <strong>dat<\/strong>.\r\n  <\/p>\r\n\r\n\r\n  <div class=\"av-rule\">\r\n\r\n    <div class=\"av-rule-item\">\r\n      \ud83d\udc47 dichtbij + de-woord \u2192 <strong>deze<\/strong>\r\n    <\/div>\r\n\r\n    <div class=\"av-rule-item\">\r\n      \ud83d\udc47 dichtbij + het-woord \u2192 <strong>dit<\/strong>\r\n    <\/div>\r\n\r\n    <div class=\"av-rule-item\">\r\n      \ud83d\udc49 verder weg + de-woord \u2192 <strong>die<\/strong>\r\n    <\/div>\r\n\r\n    <div class=\"av-rule-item\">\r\n      \ud83d\udc49 verder weg + het-woord \u2192 <strong>dat<\/strong>\r\n    <\/div>\r\n\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=\"av-route\">\r\n\r\n  <div\r\n    class=\"av-route-card current\"\r\n    id=\"avRoute1\"\r\n  >\r\n\r\n    <div class=\"av-route-icon\">\r\n      \ud83c\udf31\r\n    <\/div>\r\n\r\n    <h3>\r\n      Level 1 \u00b7 Herkennen\r\n    <\/h3>\r\n\r\n    <p>\r\n      Kijk naar korte woordgroepen en vind het aanwijzende woord.\r\n    <\/p>\r\n\r\n  <\/div>\r\n\r\n\r\n  <div\r\n    class=\"av-route-card locked\"\r\n    id=\"avRoute2\"\r\n  >\r\n\r\n    <div class=\"av-route-icon\">\r\n      \ud83c\udf3f\r\n    <\/div>\r\n\r\n    <h3>\r\n      Level 2 \u00b7 Zoeken in zinnen\r\n    <\/h3>\r\n\r\n    <p>\r\n      Zoek deze, dit, die of dat tussen andere woorden.\r\n    <\/p>\r\n\r\n  <\/div>\r\n\r\n\r\n  <div\r\n    class=\"av-route-card locked\"\r\n    id=\"avRoute3\"\r\n  >\r\n\r\n    <div class=\"av-route-icon\">\r\n      \ud83c\udf33\r\n    <\/div>\r\n\r\n    <h3>\r\n      Level 3 \u00b7 Zelf kiezen\r\n    <\/h3>\r\n\r\n    <p>\r\n      Gebruik dichtbij, verder weg \u00e9n de\/het om zelf het goede woord te kiezen.\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=\"av-stage\">\r\n\r\n  <div class=\"av-stage-top\">\r\n\r\n    <div\r\n      class=\"av-level-pill\"\r\n      id=\"avLevelLabel\"\r\n    >\r\n      \ud83c\udf31 Level 1\r\n    <\/div>\r\n\r\n    <div\r\n      class=\"av-score-pill\"\r\n      id=\"avProgressText\"\r\n    >\r\n      0 van 10 goed\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n  <div class=\"av-progress-wrap\">\r\n\r\n    <div\r\n      class=\"av-progress\"\r\n      id=\"avProgressBar\"\r\n    ><\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n  <div class=\"av-level-head\">\r\n\r\n    <h2 id=\"avLevelTitle\">\r\n      Herken het aanwijzende woord\r\n    <\/h2>\r\n\r\n    <p id=\"avLevelIntro\">\r\n      Welk woord wijst het zelfstandig naamwoord aan?\r\n    <\/p>\r\n\r\n  <\/div>\r\n\r\n\r\n  <div\r\n    class=\"av-grid\"\r\n    id=\"avGrid\"\r\n  ><\/div>\r\n\r\n\r\n  <div\r\n    class=\"av-complete\"\r\n    id=\"avComplete\"\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=\"av-note\">\r\n\r\n  Kleine reminder \ud83c\udf38\r\n\r\n  <br>\r\n\r\n  <strong>deze \/ die<\/strong>\r\n  horen bij de-woorden.\r\n\r\n  <br>\r\n\r\n  <strong>dit \/ dat<\/strong>\r\n  horen bij het-woorden.\r\n\r\n  <br><br>\r\n\r\n  En dan kijk je ook:\r\n\r\n  <strong>is het dichtbij of verder weg?<\/strong>\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 \u2014 HERKENNEN\r\n      ================================================= *\/\r\n\r\n      1:{\r\n\r\n        icon:\"\ud83c\udf31\",\r\n\r\n        title:\r\n          \"Herken het aanwijzende woord\",\r\n\r\n        intro:\r\n          \"Welk woord wijst het zelfstandig naamwoord aan?\",\r\n\r\n        type:\"choice\",\r\n\r\n        questions:[\r\n\r\n          {\r\n            zin:\"deze stoel\",\r\n            vraag:\"Welk woord wijst iets aan?\",\r\n            answer:\"deze\",\r\n            options:[\r\n              \"deze\",\r\n              \"stoel\",\r\n              \"de\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"dit huis\",\r\n            vraag:\"Welk woord wijst iets aan?\",\r\n            answer:\"dit\",\r\n            options:[\r\n              \"huis\",\r\n              \"dit\",\r\n              \"het\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"die jas\",\r\n            vraag:\"Welk woord wijst iets aan?\",\r\n            answer:\"die\",\r\n            options:[\r\n              \"die\",\r\n              \"jas\",\r\n              \"de\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"dat boek\",\r\n            vraag:\"Welk woord wijst iets aan?\",\r\n            answer:\"dat\",\r\n            options:[\r\n              \"boek\",\r\n              \"dat\",\r\n              \"het\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"deze fiets\",\r\n            vraag:\"Welk woord wijst iets aan?\",\r\n            answer:\"deze\",\r\n            options:[\r\n              \"fiets\",\r\n              \"deze\",\r\n              \"een\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"dit kind\",\r\n            vraag:\"Welk woord wijst iets aan?\",\r\n            answer:\"dit\",\r\n            options:[\r\n              \"dit\",\r\n              \"kind\",\r\n              \"het\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"die hond\",\r\n            vraag:\"Welk woord wijst iets aan?\",\r\n            answer:\"die\",\r\n            options:[\r\n              \"hond\",\r\n              \"die\",\r\n              \"de\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"dat raam\",\r\n            vraag:\"Welk woord wijst iets aan?\",\r\n            answer:\"dat\",\r\n            options:[\r\n              \"dat\",\r\n              \"raam\",\r\n              \"het\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"deze bloem\",\r\n            vraag:\"Welk woord wijst iets aan?\",\r\n            answer:\"deze\",\r\n            options:[\r\n              \"bloem\",\r\n              \"deze\",\r\n              \"de\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"dit cadeau\",\r\n            vraag:\"Welk woord wijst iets aan?\",\r\n            answer:\"dit\",\r\n            options:[\r\n              \"dit\",\r\n              \"cadeau\",\r\n              \"een\"\r\n            ]\r\n          }\r\n\r\n        ]\r\n\r\n      },\r\n\r\n\r\n      \/* =================================================\r\n         LEVEL 2 \u2014 IN ZINNEN\r\n      ================================================= *\/\r\n\r\n      2:{\r\n\r\n        icon:\"\ud83c\udf3f\",\r\n\r\n        title:\r\n          \"Zoek het in de hele zin\",\r\n\r\n        intro:\r\n          \"Nu staat het aanwijzend voornaamwoord tussen meer woorden.\",\r\n\r\n        type:\"choice\",\r\n\r\n        questions:[\r\n\r\n          {\r\n            zin:\"Deze stoel staat naast de tafel.\",\r\n            vraag:\"Wat is het aanwijzend voornaamwoord?\",\r\n            answer:\"Deze\",\r\n            options:[\r\n              \"Deze\",\r\n              \"stoel\",\r\n              \"tafel\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"Dit boek ligt op mijn bureau.\",\r\n            vraag:\"Wat is het aanwijzend voornaamwoord?\",\r\n            answer:\"Dit\",\r\n            options:[\r\n              \"boek\",\r\n              \"Dit\",\r\n              \"bureau\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"Die jas hangt aan de kapstok.\",\r\n            vraag:\"Wat is het aanwijzend voornaamwoord?\",\r\n            answer:\"Die\",\r\n            options:[\r\n              \"jas\",\r\n              \"hangt\",\r\n              \"Die\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"Dat huis staat aan het water.\",\r\n            vraag:\"Wat is het aanwijzend voornaamwoord?\",\r\n            answer:\"Dat\",\r\n            options:[\r\n              \"Dat\",\r\n              \"huis\",\r\n              \"water\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"Deze hond blaft hard.\",\r\n            vraag:\"Wat is het aanwijzend voornaamwoord?\",\r\n            answer:\"Deze\",\r\n            options:[\r\n              \"hond\",\r\n              \"Deze\",\r\n              \"blaft\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"Dit meisje lacht vrolijk.\",\r\n            vraag:\"Wat is het aanwijzend voornaamwoord?\",\r\n            answer:\"Dit\",\r\n            options:[\r\n              \"Dit\",\r\n              \"meisje\",\r\n              \"lacht\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"Die fiets is van Sam.\",\r\n            vraag:\"Wat is het aanwijzend voornaamwoord?\",\r\n            answer:\"Die\",\r\n            options:[\r\n              \"fiets\",\r\n              \"Sam\",\r\n              \"Die\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"Dat raam staat open.\",\r\n            vraag:\"Wat is het aanwijzend voornaamwoord?\",\r\n            answer:\"Dat\",\r\n            options:[\r\n              \"Dat\",\r\n              \"raam\",\r\n              \"open\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"Deze bloem ruikt lekker.\",\r\n            vraag:\"Wat is het aanwijzend voornaamwoord?\",\r\n            answer:\"Deze\",\r\n            options:[\r\n              \"bloem\",\r\n              \"Deze\",\r\n              \"ruikt\"\r\n            ]\r\n          },\r\n\r\n          {\r\n            zin:\"Dit cadeau is voor jou.\",\r\n            vraag:\"Wat is het aanwijzend voornaamwoord?\",\r\n            answer:\"Dit\",\r\n            options:[\r\n              \"cadeau\",\r\n              \"jou\",\r\n              \"Dit\"\r\n            ]\r\n          }\r\n\r\n        ]\r\n\r\n      },\r\n\r\n\r\n      \/* =================================================\r\n         LEVEL 3 \u2014 ZELF KIEZEN\r\n      ================================================= *\/\r\n\r\n      3:{\r\n\r\n        icon:\"\ud83c\udf33\",\r\n\r\n        title:\r\n          \"Kies het nu helemaal zelf\",\r\n\r\n        intro:\r\n          \"Kijk of het dichtbij of verder weg is. Kijk daarna of het woord bij de of het hoort.\",\r\n\r\n        type:\"input\",\r\n\r\n        questions:[\r\n\r\n          {\r\n            zin:\"___ stoel staat hier naast mij.\",\r\n            vraag:\"De stoel is dichtbij. Het is: de stoel.\",\r\n            hint1:\"\ud83d\udccd dichtbij\",\r\n            hint2:\"de stoel\",\r\n            answer:\"deze\"\r\n          },\r\n\r\n          {\r\n            zin:\"___ huis hier is van mijn oma.\",\r\n            vraag:\"Het huis is dichtbij. Het is: het huis.\",\r\n            hint1:\"\ud83d\udccd dichtbij\",\r\n            hint2:\"het huis\",\r\n            answer:\"dit\"\r\n          },\r\n\r\n          {\r\n            zin:\"___ jas daar aan de overkant is van Sara.\",\r\n            vraag:\"De jas is verder weg. Het is: de jas.\",\r\n            hint1:\"\ud83d\udc40 verder weg\",\r\n            hint2:\"de jas\",\r\n            answer:\"die\"\r\n          },\r\n\r\n          {\r\n            zin:\"___ boek daar op de kast is van mij.\",\r\n            vraag:\"Het boek is verder weg. Het is: het boek.\",\r\n            hint1:\"\ud83d\udc40 verder weg\",\r\n            hint2:\"het boek\",\r\n            answer:\"dat\"\r\n          },\r\n\r\n          {\r\n            zin:\"___ fiets hier naast mij is nieuw.\",\r\n            vraag:\"De fiets is dichtbij. Het is: de fiets.\",\r\n            hint1:\"\ud83d\udccd dichtbij\",\r\n            hint2:\"de fiets\",\r\n            answer:\"deze\"\r\n          },\r\n\r\n          {\r\n            zin:\"___ kind hier naast mij heet Amir.\",\r\n            vraag:\"Het kind is dichtbij. Het is: het kind.\",\r\n            hint1:\"\ud83d\udccd dichtbij\",\r\n            hint2:\"het kind\",\r\n            answer:\"dit\"\r\n          },\r\n\r\n          {\r\n            zin:\"___ hond daar bij het hek blaft.\",\r\n            vraag:\"De hond is verder weg. Het is: de hond.\",\r\n            hint1:\"\ud83d\udc40 verder weg\",\r\n            hint2:\"de hond\",\r\n            answer:\"die\"\r\n          },\r\n\r\n          {\r\n            zin:\"___ raam daar boven staat open.\",\r\n            vraag:\"Het raam is verder weg. Het is: het raam.\",\r\n            hint1:\"\ud83d\udc40 verder weg\",\r\n            hint2:\"het raam\",\r\n            answer:\"dat\"\r\n          },\r\n\r\n          {\r\n            zin:\"___ bloem hier in mijn hand ruikt lekker.\",\r\n            vraag:\"De bloem is dichtbij. Het is: de bloem.\",\r\n            hint1:\"\ud83d\udccd dichtbij\",\r\n            hint2:\"de bloem\",\r\n            answer:\"deze\"\r\n          },\r\n\r\n          {\r\n            zin:\"___ cadeau daar op tafel is voor jou.\",\r\n            vraag:\"Het cadeau is verder weg. Het is: het cadeau.\",\r\n            hint1:\"\ud83d\udc40 verder weg\",\r\n            hint2:\"het cadeau\",\r\n            answer:\"dat\"\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(\r\n        \"avGrid\"\r\n      );\r\n\r\n    const levelLabel =\r\n      document.getElementById(\r\n        \"avLevelLabel\"\r\n      );\r\n\r\n    const levelTitle =\r\n      document.getElementById(\r\n        \"avLevelTitle\"\r\n      );\r\n\r\n    const levelIntro =\r\n      document.getElementById(\r\n        \"avLevelIntro\"\r\n      );\r\n\r\n    const progressText =\r\n      document.getElementById(\r\n        \"avProgressText\"\r\n      );\r\n\r\n    const progressBar =\r\n      document.getElementById(\r\n        \"avProgressBar\"\r\n      );\r\n\r\n    const completeBox =\r\n      document.getElementById(\r\n        \"avComplete\"\r\n      );\r\n\r\n\r\n    \/* =====================================================\r\n       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(\/[.,!?]\/g,\"\")\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            \"avRoute\" + number\r\n          );\r\n\r\n\r\n        card.classList.remove(\r\n          \"current\",\r\n          \"locked\"\r\n        );\r\n\r\n\r\n        if(\r\n          number === currentLevel\r\n        ){\r\n\r\n          card.classList.add(\r\n            \"current\"\r\n          );\r\n\r\n        }\r\n\r\n\r\n        if(\r\n          number > unlockedLevel\r\n        ){\r\n\r\n          card.classList.add(\r\n            \"locked\"\r\n          );\r\n\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\r\n      const score =\r\n        scores[currentLevel];\r\n\r\n\r\n      progressText.textContent =\r\n        score +\r\n        \" van \" +\r\n        total +\r\n        \" goed\";\r\n\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          \".av-feedback\"\r\n        );\r\n\r\n\r\n      feedback.innerHTML =\r\n        message;\r\n\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\r\n      if(\r\n        scores[currentLevel] !==\r\n        total\r\n      ){\r\n        return;\r\n      }\r\n\r\n\r\n      if(\r\n        currentLevel < 3\r\n      ){\r\n\r\n        const nextLevel =\r\n          currentLevel + 1;\r\n\r\n\r\n        unlockedLevel =\r\n          Math.max(\r\n            unlockedLevel,\r\n            nextLevel\r\n          );\r\n\r\n\r\n        completeBox.innerHTML = `\r\n\r\n          \ud83c\udf3f Mooi gedaan.\r\n          Je hebt dit level afgerond.\r\n\r\n          <br>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"av-next\"\r\n            id=\"avNextLevel\"\r\n          >\r\n            Naar level ${nextLevel} \u2192\r\n          <\/button>\r\n\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            \"avNextLevel\"\r\n          )\r\n          .addEventListener(\r\n            \"click\",\r\n            function(){\r\n\r\n              currentLevel =\r\n                nextLevel;\r\n\r\n\r\n              renderLevel();\r\n\r\n\r\n              document\r\n                .querySelector(\r\n                  \".av-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\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 aanwijzend voornaamwoord afgerond.\r\n\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       KEUZEKAART\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\r\n      card.className =\r\n        \"av-card\";\r\n\r\n\r\n      card.innerHTML = `\r\n\r\n        <div class=\"av-zin\">\r\n          ${question.zin}\r\n        <\/div>\r\n\r\n        <div class=\"av-vraag\">\r\n          ${question.vraag}\r\n        <\/div>\r\n\r\n        <div class=\"av-options\"><\/div>\r\n\r\n        <div class=\"av-feedback\"><\/div>\r\n\r\n      `;\r\n\r\n\r\n      const options =\r\n        card.querySelector(\r\n          \".av-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\r\n            button.type =\r\n              \"button\";\r\n\r\n\r\n            button.className =\r\n              \"av-btn\";\r\n\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                      \".av-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> wijst iets aan.\"\r\n                  );\r\n\r\n\r\n                  updateProgress();\r\n\r\n                  checkLevelComplete();\r\n\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 Nog niet. Zoek het woord dat iets of iemand aanwijst.\"\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 INPUTKAART\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\r\n      card.className =\r\n        \"av-card\";\r\n\r\n\r\n      card.innerHTML = `\r\n\r\n        <div class=\"av-zin\">\r\n          ${question.zin}\r\n        <\/div>\r\n\r\n        <div class=\"av-context\">\r\n\r\n          <span class=\"av-context-pill\">\r\n            ${question.hint1}\r\n          <\/span>\r\n\r\n          <span class=\"av-context-pill\">\r\n            ${question.hint2}\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"av-vraag\">\r\n          ${question.vraag}\r\n        <\/div>\r\n\r\n        <input\r\n          type=\"text\"\r\n          class=\"av-input\"\r\n          placeholder=\"Typ deze, dit, die of dat...\"\r\n          autocomplete=\"off\"\r\n        >\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"av-check\"\r\n        >\r\n          Nakijken \ud83c\udf3f\r\n        <\/button>\r\n\r\n        <div class=\"av-feedback\"><\/div>\r\n\r\n      `;\r\n\r\n\r\n      const input =\r\n        card.querySelector(\r\n          \".av-input\"\r\n        );\r\n\r\n\r\n      const check =\r\n        card.querySelector(\r\n          \".av-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. Hier hoort <strong>\" +\r\n            question.answer +\r\n            \"<\/strong>.\"\r\n          );\r\n\r\n\r\n          updateProgress();\r\n\r\n          checkLevelComplete();\r\n\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 Kijk naar twee dingen: is het een <strong>de-woord of het-woord<\/strong>, en is het <strong>dichtbij of verder weg<\/strong>?\"\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              \"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\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\r\n  data-withifi-world=\"taalwereld\"\r\n\r\n  zorgt ervoor dat jullie centrale\r\n  Custom Code automatisch toont:\r\n\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>\ud83d\udc49 Aanwijzend voornaamwoord Welk woord wijst iets aan? Een aanwijzend voornaamwoord gebruik je wanneer je iets of iemand aanwijst. We oefenen met deze, dit, die en dat. \ud83d\udc47 dichtbij + de-woord \u2192 deze \ud83d\udc47 dichtbij + het-woord \u2192 dit \ud83d\udc49 verder weg + de-woord \u2192 die \ud83d\udc49 verder weg + het-woord \u2192 dat \ud83c\udf31 Level [&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-2844","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\/2844","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=2844"}],"version-history":[{"count":14,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2844\/revisions"}],"predecessor-version":[{"id":4581,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2844\/revisions\/4581"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2844"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2844"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2844"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}