{"id":2384,"date":"2026-05-13T17:41:27","date_gmt":"2026-05-13T17:41:27","guid":{"rendered":"https:\/\/withifi.muhubonurture.nl\/?p=2384"},"modified":"2026-05-13T17:42:00","modified_gmt":"2026-05-13T17:42:00","slug":"verhaalsommen-erbij","status":"publish","type":"post","link":"https:\/\/withifi.muhubonurture.nl\/?p=2384","title":{"rendered":"Verhaalsommen Erbij"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2384\" class=\"elementor elementor-2384\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-666124c e-con-full e-flex e-con e-parent\" data-id=\"666124c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e9fe809 elementor-widget elementor-widget-html\" data-id=\"e9fe809\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\nbody{\r\n  margin:0;\r\n  font-family:'Inter',sans-serif;\r\n}\r\n\r\n.verhaal-page{\r\n  min-height:100vh;\r\n  padding:7rem 7vw;\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(255,228,196,0.35) 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\/* HERO *\/\r\n\r\n.verhaal-hero{\r\n  max-width:960px;\r\n  padding:3.2rem;\r\n  border-radius:40px;\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  margin-bottom:3.5rem;\r\n}\r\n\r\n.verhaal-label{\r\n  display:inline-block;\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-weight:900;\r\n  margin-bottom:1.3rem;\r\n}\r\n\r\n.verhaal-hero h1{\r\n  font-size:clamp(48px,6vw,76px);\r\n  line-height:1;\r\n  margin:0 0 1.2rem;\r\n  color:#3A2B24;\r\n}\r\n\r\n.verhaal-hero p{\r\n  font-size:20px;\r\n  line-height:1.9;\r\n  color:#7A6455;\r\n  font-weight:650;\r\n  max-width:780px;\r\n}\r\n\r\n\/* GRID *\/\r\n\r\n.verhaal-grid{\r\n  display:grid;\r\n  grid-template-columns:repeat(2,1fr);\r\n  gap:1.5rem;\r\n}\r\n\r\n.verhaal-card{\r\n  background:rgba(255,246,230,0.78);\r\n  border-radius:32px;\r\n  padding:2rem;\r\n  border:1px solid rgba(255,255,255,0.95);\r\n  box-shadow:0 12px 30px rgba(90,70,55,0.07);\r\n}\r\n\r\n.verhaal-card:nth-child(even){\r\n  background:rgba(238,247,243,0.78);\r\n}\r\n\r\n.verhaal-icon{\r\n  width:58px;\r\n  height:58px;\r\n  border-radius:22px;\r\n  background:rgba(255,255,255,0.72);\r\n  display:flex;\r\n  align-items:center;\r\n  justify-content:center;\r\n  font-size:1.8rem;\r\n  margin-bottom:1rem;\r\n}\r\n\r\n.verhaal-text{\r\n  font-size:1.15rem;\r\n  line-height:1.8;\r\n  color:#7A6455;\r\n  font-weight:700;\r\n  margin-bottom:1.3rem;\r\n}\r\n\r\n.verhaal-vraag{\r\n  font-size:1.2rem;\r\n  font-weight:900;\r\n  color:#3A2B24;\r\n  margin-bottom:1rem;\r\n}\r\n\r\n\/* ANTWOORD *\/\r\n\r\n.answer-row{\r\n  display:flex;\r\n  align-items:center;\r\n  gap:.8rem;\r\n  flex-wrap:wrap;\r\n}\r\n\r\n.answer-row input{\r\n  width:90px;\r\n  height:54px;\r\n  border-radius:16px;\r\n  border:none;\r\n  background:white;\r\n  text-align:center;\r\n  font-size:1.4rem;\r\n  font-weight:900;\r\n  color:#3A2B24;\r\n  box-shadow:inset 0 0 0 2px rgba(255,228,196,0.7);\r\n  outline:none;\r\n}\r\n\r\n.answer-row input:focus{\r\n  box-shadow:0 0 0 4px rgba(255,214,168,0.45);\r\n}\r\n\r\n.goed{\r\n  background:#DDF5E4 !important;\r\n}\r\n\r\n.fout{\r\n  background:#FFE3E3 !important;\r\n}\r\n\r\n.correct-answer{\r\n  font-size:.95rem;\r\n  color:#8B6B55;\r\n  font-weight:800;\r\n  line-height:1.5;\r\n}\r\n\r\n.correct-answer strong{\r\n  color:#3A2B24;\r\n}\r\n\r\n\/* BUTTON *\/\r\n\r\n.check-wrap{\r\n  text-align:center;\r\n  margin-top:3rem;\r\n}\r\n\r\n.check-btn{\r\n  padding:1rem 2.6rem;\r\n  border:none;\r\n  border-radius:999px;\r\n  background:#FFD6A8;\r\n  color:#3A2B24;\r\n  font-size:1.05rem;\r\n  font-weight:900;\r\n  cursor:pointer;\r\n  transition:.25s ease;\r\n}\r\n\r\n.check-btn:hover{\r\n  transform:translateY(-2px);\r\n  background:#FFE4C8;\r\n}\r\n\r\n\/* FEEDBACK *\/\r\n\r\n.feedback{\r\n  margin-top:2rem;\r\n  padding:1.8rem;\r\n  border-radius:28px;\r\n  background:rgba(255,255,255,0.62);\r\n  border:1px solid rgba(255,255,255,0.95);\r\n  color:#7A6455;\r\n  font-size:1.1rem;\r\n  line-height:1.8;\r\n  font-weight:750;\r\n  text-align:center;\r\n}\r\n\r\n\/* MOBILE *\/\r\n\r\n@media(max-width:900px){\r\n  .verhaal-page{\r\n    padding:5rem 6vw;\r\n    text-align:center;\r\n  }\r\n\r\n  .verhaal-grid{\r\n    grid-template-columns:1fr;\r\n  }\r\n\r\n  .verhaal-icon{\r\n    margin-left:auto;\r\n    margin-right:auto;\r\n  }\r\n\r\n  .answer-row{\r\n    justify-content:center;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<section class=\"verhaal-page\">\r\n\r\n  <div class=\"verhaal-hero\">\r\n\r\n    <div class=\"verhaal-label\">\r\n      \ud83d\udcd6 Verhaalsommen\r\n    <\/div>\r\n\r\n    <h1>Verhaalsommen erbij.<\/h1>\r\n\r\n    <p>\r\n      Lees het verhaaltje rustig.\r\n      Komt er iets bij?\r\n      Dan tel je erbij.\r\n    <\/p>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"verhaal-grid\" id=\"verhaalGrid\"><\/div>\r\n\r\n  <div class=\"check-wrap\">\r\n    <button class=\"check-btn\" id=\"checkBtn\">\r\n      Nakijken \ud83c\udf3f\r\n    <\/button>\r\n  <\/div>\r\n\r\n  <div class=\"feedback\" id=\"feedback\"><\/div>\r\n\r\n<\/section>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n\r\nconst opdrachten = [\r\n\r\n{\r\nicoon:'\ud83c\udf4e',\r\ntekst:'Sara heeft 2 appels. Ze krijgt er 1 appel bij.',\r\nvraag:'Hoeveel appels heeft Sara nu?',\r\nantwoord:3\r\n},\r\n\r\n{\r\nicoon:'\ud83c\udf38',\r\ntekst:'Lina heeft 3 bloemen. Ze plukt er 2 bloemen bij.',\r\nvraag:'Hoeveel bloemen heeft Lina nu?',\r\nantwoord:5\r\n},\r\n\r\n{\r\nicoon:'\ud83e\uddf8',\r\ntekst:'Adam heeft 1 beer. Hij krijgt er 2 beren bij.',\r\nvraag:'Hoeveel beren heeft Adam nu?',\r\nantwoord:3\r\n},\r\n\r\n{\r\nicoon:'\u2b50',\r\ntekst:'Noor ziet 4 sterren. Daarna ziet zij nog 1 ster.',\r\nvraag:'Hoeveel sterren ziet Noor samen?',\r\nantwoord:5\r\n},\r\n\r\n{\r\nicoon:'\ud83d\udc1d',\r\ntekst:'Er vliegen 2 bijen. Er komen 3 bijen bij.',\r\nvraag:'Hoeveel bijen vliegen er nu?',\r\nantwoord:5\r\n},\r\n\r\n{\r\nicoon:'\ud83c\udf6a',\r\ntekst:'Mila heeft 5 koekjes. Ze krijgt er 2 koekjes bij.',\r\nvraag:'Hoeveel koekjes heeft Mila nu?',\r\nantwoord:7\r\n},\r\n\r\n{\r\nicoon:'\ud83c\udf88',\r\ntekst:'Ali heeft 4 ballonnen. Hij krijgt er 3 ballonnen bij.',\r\nvraag:'Hoeveel ballonnen heeft Ali nu?',\r\nantwoord:7\r\n},\r\n\r\n{\r\nicoon:'\ud83d\ude97',\r\ntekst:'Er staan 6 auto\u2019s. Er komen 2 auto\u2019s bij.',\r\nvraag:'Hoeveel auto\u2019s staan er nu?',\r\nantwoord:8\r\n},\r\n\r\n{\r\nicoon:'\ud83d\udcda',\r\ntekst:'Sam heeft 3 boeken. Hij krijgt er 4 boeken bij.',\r\nvraag:'Hoeveel boeken heeft Sam nu?',\r\nantwoord:7\r\n},\r\n\r\n{\r\nicoon:'\ud83e\udd8b',\r\ntekst:'Er zitten 5 vlinders. Er komen 5 vlinders bij.',\r\nvraag:'Hoeveel vlinders zijn er samen?',\r\nantwoord:10\r\n}\r\n\r\n];\r\n\r\nconst grid = document.getElementById('verhaalGrid');\r\nconst feedback = document.getElementById('feedback');\r\n\r\nopdrachten.forEach((item,index)=>{\r\n\r\ngrid.innerHTML += `\r\n\r\n<div class=\"verhaal-card\">\r\n\r\n  <div class=\"verhaal-icon\">\r\n    ${item.icoon}\r\n  <\/div>\r\n\r\n  <div class=\"verhaal-text\">\r\n    ${item.tekst}\r\n  <\/div>\r\n\r\n  <div class=\"verhaal-vraag\">\r\n    ${item.vraag}\r\n  <\/div>\r\n\r\n  <div class=\"answer-row\">\r\n\r\n    <input\r\n      type=\"number\"\r\n      class=\"answer-box\"\r\n      data-answer=\"${item.antwoord}\"\r\n    >\r\n\r\n    <div class=\"correct-answer\"><\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n`;\r\n\r\n});\r\n\r\ndocument.getElementById('checkBtn').addEventListener('click',()=>{\r\n\r\nconst inputs = document.querySelectorAll('.answer-box');\r\n\r\nlet goed = 0;\r\n\r\ninputs.forEach(input=>{\r\n\r\nconst juist = Number(input.dataset.answer);\r\nconst ingevuld = Number(input.value);\r\nconst correctText = input.parentElement.querySelector('.correct-answer');\r\n\r\ninput.classList.remove('goed','fout');\r\ncorrectText.innerHTML = '';\r\n\r\nif(ingevuld === juist){\r\n\r\ngoed++;\r\ninput.classList.add('goed');\r\n\r\n}else{\r\n\r\ninput.classList.add('fout');\r\n\r\ncorrectText.innerHTML = `\r\n  Jouw antwoord: <strong>${input.value || 'leeg'}<\/strong><br>\r\n  Goed antwoord: <strong>${juist}<\/strong>\r\n`;\r\n\r\n}\r\n\r\n});\r\n\r\nif(goed === inputs.length){\r\n\r\nfeedback.innerHTML = `\r\n\ud83c\udf38 Wat goed gedaan.<br>\r\nJe hebt de verhaalsommen rustig gelezen en opgelost.\r\n`;\r\n\r\n}else{\r\n\r\nfeedback.innerHTML = `\r\n\ud83c\udf3f Je bent aan het leren.<br>\r\nBij de roze vakjes zie je het goede antwoord.<br>\r\nLees rustig opnieuw: wat kwam erbij?\r\n`;\r\n\r\n}\r\n\r\n});\r\n\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83d\udcd6 Verhaalsommen Verhaalsommen erbij. Lees het verhaaltje rustig. Komt er iets bij? Dan tel je erbij. Nakijken \ud83c\udf3f<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-2384","post","type-post","status-publish","format-standard","hentry","category-verhaalsommen"],"_links":{"self":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2384","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=2384"}],"version-history":[{"count":4,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2384\/revisions"}],"predecessor-version":[{"id":2388,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=\/wp\/v2\/posts\/2384\/revisions\/2388"}],"wp:attachment":[{"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/withifi.muhubonurture.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}