MathRacer \u2014 Tellen (eigen, reclamevrij)<\/title>\n<style>\n :root{\n --bg:#eef6ff; --panel:#ffffff; --primary:#0f62fe; --muted:#556; --success:#16a34a;\n }\n *{box-sizing:border-box}\n body{\n margin:0; font-family:Inter,system-ui,Arial; background:linear-gradient(180deg,var(--bg),#ffffff);\n display:flex; justify-content:center; padding:24px;\n }\n .wrap{width:100%;max-width:980px}\n header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}\n h1{margin:0;font-size:20px}\n .controls{display:flex;gap:8px;align-items:center}\n button{background:var(--primary);color:#fff;border:0;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600}\n button.secondary{background:#fff;color:var(--primary);border:1px solid rgba(15,98,254,0.12)}\n .topstats{display:flex;gap:8px;align-items:center}\n .stat{background:var(--panel);padding:8px 10px;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.06);font-size:14px}\n main{display:grid;grid-template-columns:1fr 420px;gap:18px}\n @media (max-width:900px){ main{grid-template-columns:1fr;}}\n \/* left: game area *\/\n .gamecard{background:var(--panel);padding:14px;border-radius:14px;box-shadow:0 8px 30px rgba(2,6,23,0.06)}\n .question-row{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}\n .prompt{font-size:18px;color:var(--muted)}\n .answers{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}\n .ansbtn{background:#f8fafc;border:1px solid rgba(2,6,23,0.04);padding:12px;border-radius:10px;font-size:16px;cursor:pointer}\n .ansbtn.correct{outline:3px solid rgba(22,163,74,0.12);background:linear-gradient(180deg,#ecfdf5,#ffffff)}\n .ansbtn.wrong{outline:3px solid rgba(239,68,68,0.12);background:linear-gradient(180deg,#fff1f2,#ffffff)}\n \/* board showing icons to count *\/\n .board{display:flex;flex-wrap:wrap;gap:8px;padding:8px;background:linear-gradient(180deg,#fff,#fbfdff);border-radius:10px;border:1px solid rgba(2,6,23,0.04)}\n .item{width:48px;height:48px;border-radius:8px;background:linear-gradient(180deg,#fff,#f3f9ff);display:flex;align-items:center;justify-content:center;font-size:26px}\n \/* right: racetrack *\/\n .side{display:flex;flex-direction:column;gap:12px}\n .track{background:linear-gradient(180deg,#e6f0ff,#fff);padding:14px;border-radius:12px;border:1px solid rgba(2,6,23,0.04)}\n .track-inner{height:220px;position:relative;background:repeating-linear-gradient(180deg, rgba(0,0,0,0.03) 0 20px, transparent 20px 40px);border-radius:8px;overflow:hidden}\n .finish{position:absolute;right:0;top:0;bottom:0;width:28px;background:linear-gradient(90deg,#dc2626,#ef4444);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}\n .car{position:absolute;left:6px;bottom:18px;transition:left 600ms cubic-bezier(.2,.9,.3,1);font-size:36px}\n .level{font-weight:700}\n .message{padding:10px;border-radius:10px;background:#f0fdf4;color:#064e3b;display:none}\n .message.show{display:block}\n .footer{margin-top:12px;font-size:13px;color:var(--muted)}\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\" role=\"application\" aria-label=\"MathRacer Tellen\">\n <header>\n <div>\n <h1>MathRacer \u2014 Tellen (eigen versie)<\/h1>\n <div style=\"color:var(--muted);font-size:13px\">Beantwoord hoeveelheden. Iedere juiste antwoord brengt je wagen dichter bij de finish.<\/div>\n <\/div>\n <div class=\"controls\">\n <div class=\"topstats\">\n <div class=\"stat\" id=\"score\">Score: 0<\/div>\n <div class=\"stat\" id=\"streak\">Combo: 0<\/div>\n <div class=\"stat\" id=\"level\">Level: 1<\/div>\n <\/div>\n <button id=\"newBtn\">Nieuw spel<\/button>\n <\/div>\n <\/header>\n\n <main>\n <section class=\"gamecard\" aria-live=\"polite\">\n <div class=\"question-row\">\n <div class=\"prompt\" id=\"promptText\">Hoeveel voertuigen zie je?<\/div>\n <div style=\"display:flex;gap:8px;align-items:center\">\n <div style=\"color:var(--muted);font-size:13px\">Tijd:<\/div>\n <div class=\"stat\" id=\"timer\">00<\/div>\n <\/div>\n <\/div>\n\n <div class=\"board\" id=\"boardArea\" aria-label=\"Voorwerpen om te tellen\"><\/div>\n\n <div style=\"height:12px\"><\/div>\n\n <div class=\"answers\" id=\"answersArea\" role=\"group\" aria-label=\"Antwoord keuzes\"><\/div>\n\n <div style=\"height:12px\"><\/div>\n\n <div class=\"message\" id=\"message\n\n","protected":false},"excerpt":{"rendered":"<p>MathRacer \u2014 Tellen (eigen, reclamevrij) MathRacer \u2014 Tellen (eigen versie) Beantwoord hoeveelheden. Iedere juiste antwoord brengt je wagen dichter bij … <a href=\"https:\/\/test.brandburgservice.nl\/index.php\/cijfers\/\" class=\"more-link\"><span class=\"more-button\">Lees verder<span class=\"screen-reader-text\">Cijfers<\/span><\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":2,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":95,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions\/95"}],"wp:attachment":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/media?parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":61,"date":"2025-11-28T11:35:21","date_gmt":"2025-11-28T11:35:21","guid":{"rendered":"https:\/\/test.brandburgservice.nl\/?page_id=61"},"modified":"2025-11-28T21:15:55","modified_gmt":"2025-11-28T21:15:55","slug":"cijfers","status":"publish","type":"page","link":"https:\/\/test.brandburgservice.nl\/index.php\/cijfers\/","title":{"rendered":"Cijfers"},"content":{"rendered":"\n\n\n\n\n\nMathRacer \u2014 Tellen (eigen, reclamevrij)<\/title>\n<style>\n :root{\n --bg:#eef6ff; --panel:#ffffff; --primary:#0f62fe; --muted:#556; --success:#16a34a;\n }\n *{box-sizing:border-box}\n body{\n margin:0; font-family:Inter,system-ui,Arial; background:linear-gradient(180deg,var(--bg),#ffffff);\n display:flex; justify-content:center; padding:24px;\n }\n .wrap{width:100%;max-width:980px}\n header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}\n h1{margin:0;font-size:20px}\n .controls{display:flex;gap:8px;align-items:center}\n button{background:var(--primary);color:#fff;border:0;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:600}\n button.secondary{background:#fff;color:var(--primary);border:1px solid rgba(15,98,254,0.12)}\n .topstats{display:flex;gap:8px;align-items:center}\n .stat{background:var(--panel);padding:8px 10px;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.06);font-size:14px}\n main{display:grid;grid-template-columns:1fr 420px;gap:18px}\n @media (max-width:900px){ main{grid-template-columns:1fr;}}\n \/* left: game area *\/\n .gamecard{background:var(--panel);padding:14px;border-radius:14px;box-shadow:0 8px 30px rgba(2,6,23,0.06)}\n .question-row{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:12px}\n .prompt{font-size:18px;color:var(--muted)}\n .answers{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}\n .ansbtn{background:#f8fafc;border:1px solid rgba(2,6,23,0.04);padding:12px;border-radius:10px;font-size:16px;cursor:pointer}\n .ansbtn.correct{outline:3px solid rgba(22,163,74,0.12);background:linear-gradient(180deg,#ecfdf5,#ffffff)}\n .ansbtn.wrong{outline:3px solid rgba(239,68,68,0.12);background:linear-gradient(180deg,#fff1f2,#ffffff)}\n \/* board showing icons to count *\/\n .board{display:flex;flex-wrap:wrap;gap:8px;padding:8px;background:linear-gradient(180deg,#fff,#fbfdff);border-radius:10px;border:1px solid rgba(2,6,23,0.04)}\n .item{width:48px;height:48px;border-radius:8px;background:linear-gradient(180deg,#fff,#f3f9ff);display:flex;align-items:center;justify-content:center;font-size:26px}\n \/* right: racetrack *\/\n .side{display:flex;flex-direction:column;gap:12px}\n .track{background:linear-gradient(180deg,#e6f0ff,#fff);padding:14px;border-radius:12px;border:1px solid rgba(2,6,23,0.04)}\n .track-inner{height:220px;position:relative;background:repeating-linear-gradient(180deg, rgba(0,0,0,0.03) 0 20px, transparent 20px 40px);border-radius:8px;overflow:hidden}\n .finish{position:absolute;right:0;top:0;bottom:0;width:28px;background:linear-gradient(90deg,#dc2626,#ef4444);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}\n .car{position:absolute;left:6px;bottom:18px;transition:left 600ms cubic-bezier(.2,.9,.3,1);font-size:36px}\n .level{font-weight:700}\n .message{padding:10px;border-radius:10px;background:#f0fdf4;color:#064e3b;display:none}\n .message.show{display:block}\n .footer{margin-top:12px;font-size:13px;color:var(--muted)}\n<\/style>\n<\/head>\n<body>\n<div class=\"wrap\" role=\"application\" aria-label=\"MathRacer Tellen\">\n <header>\n <div>\n <h1>MathRacer \u2014 Tellen (eigen versie)<\/h1>\n <div style=\"color:var(--muted);font-size:13px\">Beantwoord hoeveelheden. Iedere juiste antwoord brengt je wagen dichter bij de finish.<\/div>\n <\/div>\n <div class=\"controls\">\n <div class=\"topstats\">\n <div class=\"stat\" id=\"score\">Score: 0<\/div>\n <div class=\"stat\" id=\"streak\">Combo: 0<\/div>\n <div class=\"stat\" id=\"level\">Level: 1<\/div>\n <\/div>\n <button id=\"newBtn\">Nieuw spel<\/button>\n <\/div>\n <\/header>\n\n <main>\n <section class=\"gamecard\" aria-live=\"polite\">\n <div class=\"question-row\">\n <div class=\"prompt\" id=\"promptText\">Hoeveel voertuigen zie je?<\/div>\n <div style=\"display:flex;gap:8px;align-items:center\">\n <div style=\"color:var(--muted);font-size:13px\">Tijd:<\/div>\n <div class=\"stat\" id=\"timer\">00<\/div>\n <\/div>\n <\/div>\n\n <div class=\"board\" id=\"boardArea\" aria-label=\"Voorwerpen om te tellen\"><\/div>\n\n <div style=\"height:12px\"><\/div>\n\n <div class=\"answers\" id=\"answersArea\" role=\"group\" aria-label=\"Antwoord keuzes\"><\/div>\n\n <div style=\"height:12px\"><\/div>\n\n <div class=\"message\" id=\"message\n\n","protected":false},"excerpt":{"rendered":"<p>MathRacer \u2014 Tellen (eigen, reclamevrij) MathRacer \u2014 Tellen (eigen versie) Beantwoord hoeveelheden. Iedere juiste antwoord brengt je wagen dichter bij … <a href=\"https:\/\/test.brandburgservice.nl\/index.php\/cijfers\/\" class=\"more-link\"><span class=\"more-button\">Lees verder<span class=\"screen-reader-text\">Cijfers<\/span><\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-61","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages\/61","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/comments?post=61"}],"version-history":[{"count":2,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions"}],"predecessor-version":[{"id":95,"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/pages\/61\/revisions\/95"}],"wp:attachment":[{"href":"https:\/\/test.brandburgservice.nl\/index.php\/wp-json\/wp\/v2\/media?parent=61"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}