{"id":995,"date":"2026-02-22T15:06:57","date_gmt":"2026-02-22T09:36:57","guid":{"rendered":"https:\/\/factandformula.com\/?page_id=995"},"modified":"2026-02-22T15:10:42","modified_gmt":"2026-02-22T09:40:42","slug":"games","status":"publish","type":"page","link":"https:\/\/factandformula.com\/index.php\/games\/","title":{"rendered":"Games"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nFACTANDFORMULA\ud83c\udf1f Fun Math Games for Kids<\/title>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Fredoka+One&family=Nunito:wght@400;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<style>\r\n :root {\r\n --bg: #f0f4ff;\r\n --card-bg: #ffffff;\r\n --shadow: 0 8px 32px rgba(80,80,200,0.10);\r\n --green: #22c55e;\r\n --red: #ef4444;\r\n --yellow: #facc15;\r\n --purple: #a855f7;\r\n --blue: #3b82f6;\r\n --orange: #f97316;\r\n --pink: #ec4899;\r\n --teal: #14b8a6;\r\n --radius: 24px;\r\n --transition: 0.3s cubic-bezier(.4,0,.2,1);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n body {\r\n font-family: 'Nunito', sans-serif;\r\n background: linear-gradient(135deg, #e0e7ff 0%, #f0fdf4 40%, #fdf4ff 100%);\r\n min-height: 100vh;\r\n color: #1e1b4b;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 HEADER \u2500\u2500\u2500 *\/\r\n header {\r\n text-align: center;\r\n padding: 40px 20px 20px;\r\n }\r\n header h1 {\r\n font-family: 'Fredoka One', cursive;\r\n font-size: clamp(2.4rem, 6vw, 4rem);\r\n background: linear-gradient(135deg, #6366f1, #ec4899, #f97316);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n letter-spacing: 1px;\r\n }\r\n header p {\r\n color: #6366f1;\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n margin-top: 8px;\r\n opacity: 0.85;\r\n }\r\n .header-stars { font-size: 1.5rem; letter-spacing: 4px; }\r\n\r\n \/* \u2500\u2500\u2500 STATS BAR \u2500\u2500\u2500 *\/\r\n .stats-bar {\r\n display: flex;\r\n justify-content: center;\r\n gap: 16px;\r\n flex-wrap: wrap;\r\n padding: 0 20px 24px;\r\n }\r\n .stat-pill {\r\n background: white;\r\n border-radius: 50px;\r\n padding: 8px 20px;\r\n font-weight: 800;\r\n font-size: 0.95rem;\r\n box-shadow: 0 4px 16px rgba(99,102,241,0.12);\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n }\r\n .stat-pill span { font-size: 1.1rem; }\r\n\r\n \/* \u2500\u2500\u2500 HOME GRID \u2500\u2500\u2500 *\/\r\n #home {\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n padding: 0 20px 60px;\r\n }\r\n .grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\r\n gap: 24px;\r\n }\r\n\r\n .game-card {\r\n background: white;\r\n border-radius: var(--radius);\r\n padding: 32px 24px 28px;\r\n box-shadow: var(--shadow);\r\n cursor: pointer;\r\n transition: transform var(--transition), box-shadow var(--transition);\r\n position: relative;\r\n overflow: hidden;\r\n border: 2px solid transparent;\r\n }\r\n .game-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: 0; right: 0;\r\n height: 6px;\r\n border-radius: var(--radius) var(--radius) 0 0;\r\n }\r\n .game-card:hover {\r\n transform: translateY(-8px) scale(1.02);\r\n box-shadow: 0 20px 48px rgba(80,80,200,0.18);\r\n }\r\n .game-card.c1::before { background: linear-gradient(90deg, #6366f1, #818cf8); }\r\n .game-card.c2::before { background: linear-gradient(90deg, #ec4899, #f9a8d4); }\r\n .game-card.c3::before { background: linear-gradient(90deg, #f97316, #fbbf24); }\r\n .game-card.c4::before { background: linear-gradient(90deg, #14b8a6, #6ee7b7); }\r\n .game-card.c5::before { background: linear-gradient(90deg, #a855f7, #c084fc); }\r\n .game-card.c6::before { background: linear-gradient(90deg, #3b82f6, #93c5fd); }\r\n\r\n .card-icon {\r\n font-size: 3rem;\r\n margin-bottom: 12px;\r\n display: block;\r\n filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08));\r\n }\r\n .game-card h2 {\r\n font-family: 'Fredoka One', cursive;\r\n font-size: 1.45rem;\r\n margin-bottom: 8px;\r\n color: #1e1b4b;\r\n }\r\n .game-card p {\r\n font-size: 0.92rem;\r\n color: #6b7280;\r\n font-weight: 600;\r\n line-height: 1.5;\r\n }\r\n .card-badges {\r\n display: flex;\r\n gap: 8px;\r\n margin-top: 16px;\r\n flex-wrap: wrap;\r\n }\r\n .badge {\r\n background: #f3f4f6;\r\n border-radius: 50px;\r\n padding: 4px 12px;\r\n font-size: 0.78rem;\r\n font-weight: 800;\r\n color: #6b7280;\r\n }\r\n .badge.score-badge {\r\n background: linear-gradient(90deg, #fef3c7, #fde68a);\r\n color: #92400e;\r\n }\r\n .card-arrow {\r\n position: absolute;\r\n right: 20px;\r\n bottom: 24px;\r\n font-size: 1.4rem;\r\n opacity: 0.4;\r\n transition: all var(--transition);\r\n }\r\n .game-card:hover .card-arrow { opacity: 1; transform: translateX(6px); }\r\n\r\n \/* \u2500\u2500\u2500 GAME SCREEN \u2500\u2500\u2500 *\/\r\n .game-screen {\r\n display: none;\r\n max-width: 700px;\r\n margin: 0 auto;\r\n padding: 20px 20px 60px;\r\n }\r\n .game-screen.active { display: block; }\r\n\r\n .game-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n margin-bottom: 24px;\r\n flex-wrap: wrap;\r\n }\r\n .back-btn {\r\n background: white;\r\n border: none;\r\n border-radius: 50px;\r\n padding: 10px 20px;\r\n font-family: 'Nunito', sans-serif;\r\n font-weight: 800;\r\n font-size: 0.95rem;\r\n cursor: pointer;\r\n box-shadow: 0 4px 16px rgba(0,0,0,0.08);\r\n transition: all var(--transition);\r\n color: #1e1b4b;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n }\r\n .back-btn:hover { transform: translateX(-4px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }\r\n .game-title-bar {\r\n flex: 1;\r\n font-family: 'Fredoka One', cursive;\r\n font-size: 1.6rem;\r\n color: #1e1b4b;\r\n }\r\n\r\n \/* Level Selector *\/\r\n .level-selector {\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 20px;\r\n background: white;\r\n padding: 8px;\r\n border-radius: 50px;\r\n box-shadow: 0 4px 16px rgba(0,0,0,0.06);\r\n width: fit-content;\r\n }\r\n .level-btn {\r\n border: none;\r\n border-radius: 50px;\r\n padding: 8px 20px;\r\n font-family: 'Nunito', sans-serif;\r\n font-weight: 800;\r\n font-size: 0.88rem;\r\n cursor: pointer;\r\n transition: all var(--transition);\r\n background: transparent;\r\n color: #9ca3af;\r\n }\r\n .level-btn.active { background: linear-gradient(135deg, #6366f1, #a855f7); color: white; }\r\n .level-btn:hover:not(.active) { color: #6366f1; }\r\n\r\n \/* Progress & Score *\/\r\n .game-meta {\r\n display: flex;\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n }\r\n .meta-pill {\r\n background: white;\r\n border-radius: 50px;\r\n padding: 7px 18px;\r\n font-weight: 800;\r\n font-size: 0.9rem;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.06);\r\n }\r\n .meta-pill.timer { color: #ef4444; }\r\n .meta-pill.score-display { color: #6366f1; }\r\n .progress-wrap {\r\n background: #e5e7eb;\r\n border-radius: 50px;\r\n height: 10px;\r\n flex: 1;\r\n min-width: 120px;\r\n overflow: hidden;\r\n }\r\n .progress-bar {\r\n height: 100%;\r\n border-radius: 50px;\r\n background: linear-gradient(90deg, #6366f1, #a855f7);\r\n transition: width 0.6s ease;\r\n }\r\n\r\n \/* Question Card *\/\r\n .question-card {\r\n background: white;\r\n border-radius: var(--radius);\r\n padding: 40px 32px 32px;\r\n box-shadow: var(--shadow);\r\n text-align: center;\r\n margin-bottom: 20px;\r\n animation: slideUp 0.4s ease;\r\n }\r\n @keyframes slideUp {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n .question-text {\r\n font-family: 'Fredoka One', cursive;\r\n font-size: clamp(2rem, 6vw, 3rem);\r\n color: #1e1b4b;\r\n margin-bottom: 8px;\r\n line-height: 1.2;\r\n }\r\n .question-sub {\r\n font-size: 0.95rem;\r\n color: #9ca3af;\r\n font-weight: 700;\r\n margin-bottom: 8px;\r\n }\r\n\r\n \/* Choices *\/\r\n .choices {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n }\r\n .choice-btn {\r\n background: white;\r\n border: 3px solid #e5e7eb;\r\n border-radius: 16px;\r\n padding: 16px 12px;\r\n font-family: 'Fredoka One', cursive;\r\n font-size: 1.5rem;\r\n cursor: pointer;\r\n transition: all var(--transition);\r\n color: #1e1b4b;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.04);\r\n }\r\n .choice-btn:hover:not(:disabled) {\r\n border-color: #6366f1;\r\n background: #f5f3ff;\r\n transform: scale(1.04);\r\n box-shadow: 0 8px 20px rgba(99,102,241,0.18);\r\n }\r\n .choice-btn.correct {\r\n border-color: var(--green);\r\n background: #f0fdf4;\r\n color: #16a34a;\r\n animation: pop 0.4s ease;\r\n }\r\n .choice-btn.wrong {\r\n border-color: var(--red);\r\n background: #fef2f2;\r\n color: #dc2626;\r\n animation: shake 0.4s ease;\r\n }\r\n @keyframes pop {\r\n 0% { transform: scale(1); }\r\n 50% { transform: scale(1.12); }\r\n 100% { transform: scale(1); }\r\n }\r\n @keyframes shake {\r\n 0%,100% { transform: translateX(0); }\r\n 25% { transform: translateX(-8px); }\r\n 75% { transform: translateX(8px); }\r\n }\r\n\r\n \/* Feedback *\/\r\n .feedback {\r\n text-align: center;\r\n padding: 16px;\r\n border-radius: 16px;\r\n font-family: 'Fredoka One', cursive;\r\n font-size: 1.4rem;\r\n margin-bottom: 16px;\r\n display: none;\r\n }\r\n .feedback.show { display: block; animation: slideUp 0.3s ease; }\r\n .feedback.correct { background: #f0fdf4; color: #16a34a; }\r\n .feedback.wrong { background: #fef2f2; color: #dc2626; }\r\n\r\n .next-btn {\r\n width: 100%;\r\n border: none;\r\n border-radius: 16px;\r\n padding: 16px;\r\n font-family: 'Fredoka One', cursive;\r\n font-size: 1.2rem;\r\n cursor: pointer;\r\n background: linear-gradient(135deg, #6366f1, #a855f7);\r\n color: white;\r\n transition: all var(--transition);\r\n box-shadow: 0 6px 20px rgba(99,102,241,0.3);\r\n display: none;\r\n margin-top: 12px;\r\n }\r\n .next-btn:hover { transform: scale(1.02); box-shadow: 0 8px 28px rgba(99,102,241,0.4); }\r\n .next-btn.show { display: block; }\r\n\r\n \/* Results *\/\r\n .results-card {\r\n background: white;\r\n border-radius: var(--radius);\r\n padding: 48px 32px;\r\n box-shadow: var(--shadow);\r\n text-align: center;\r\n display: none;\r\n animation: slideUp 0.4s ease;\r\n }\r\n .results-card.show { display: block; }\r\n .results-emoji { font-size: 4rem; margin-bottom: 12px; }\r\n .results-title {\r\n font-family: 'Fredoka One', cursive;\r\n font-size: 2.2rem;\r\n color: #1e1b4b;\r\n margin-bottom: 8px;\r\n }\r\n .results-score {\r\n font-size: 1.1rem;\r\n font-weight: 800;\r\n color: #6366f1;\r\n margin-bottom: 8px;\r\n }\r\n .results-hi {\r\n font-size: 0.95rem;\r\n font-weight: 700;\r\n color: #9ca3af;\r\n margin-bottom: 28px;\r\n }\r\n .play-again-btn {\r\n border: none;\r\n border-radius: 50px;\r\n padding: 14px 36px;\r\n font-family: 'Fredoka One', cursive;\r\n font-size: 1.2rem;\r\n cursor: pointer;\r\n background: linear-gradient(135deg, #6366f1, #a855f7);\r\n color: white;\r\n transition: all var(--transition);\r\n box-shadow: 0 6px 20px rgba(99,102,241,0.3);\r\n }\r\n .play-again-btn:hover { transform: scale(1.05); }\r\n\r\n \/* \u2500\u2500\u2500 CLOCK GAME \u2500\u2500\u2500 *\/\r\n #clock-canvas { display: block; margin: 0 auto 24px; }\r\n .clock-wrap {\r\n background: white;\r\n border-radius: var(--radius);\r\n padding: 32px;\r\n box-shadow: var(--shadow);\r\n text-align: center;\r\n margin-bottom: 20px;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 COUNTING GAME \u2500\u2500\u2500 *\/\r\n .counting-display {\r\n background: white;\r\n border-radius: var(--radius);\r\n padding: 24px;\r\n box-shadow: var(--shadow);\r\n margin-bottom: 20px;\r\n text-align: center;\r\n }\r\n .emoji-grid {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 8px;\r\n margin: 16px 0;\r\n font-size: clamp(1.8rem, 5vw, 2.8rem);\r\n line-height: 1;\r\n min-height: 80px;\r\n }\r\n .emoji-item {\r\n display: inline-block;\r\n transition: transform 0.2s;\r\n animation: popIn 0.3s ease forwards;\r\n opacity: 0;\r\n }\r\n @keyframes popIn {\r\n from { opacity: 0; transform: scale(0); }\r\n to { opacity: 1; transform: scale(1); }\r\n }\r\n\r\n \/* \u2500\u2500\u2500 COLOR SUBTRACTION \u2500\u2500\u2500 *\/\r\n .color-sub-wrap {\r\n background: white;\r\n border-radius: var(--radius);\r\n padding: 28px;\r\n box-shadow: var(--shadow);\r\n margin-bottom: 20px;\r\n text-align: center;\r\n }\r\n .color-boxes {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n margin: 16px 0;\r\n }\r\n .color-box-group {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 6px;\r\n max-width: 200px;\r\n justify-content: center;\r\n }\r\n .color-dot {\r\n width: 36px;\r\n height: 36px;\r\n border-radius: 50%;\r\n display: inline-block;\r\n box-shadow: 0 3px 8px rgba(0,0,0,0.18);\r\n transition: all 0.3s;\r\n }\r\n .color-dot.removed {\r\n opacity: 0.15;\r\n transform: scale(0.7);\r\n }\r\n .op-symbol {\r\n font-family: 'Fredoka One', cursive;\r\n font-size: 2.5rem;\r\n color: #6366f1;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 MULTIPLICATION TABLE \u2500\u2500\u2500 *\/\r\n .mult-display {\r\n font-size: 1rem;\r\n color: #6b7280;\r\n font-weight: 700;\r\n margin-bottom: 4px;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 PUZZLE GAME \u2500\u2500\u2500 *\/\r\n .puzzle-eq {\r\n font-family: 'Fredoka One', cursive;\r\n font-size: clamp(1.8rem, 5vw, 2.8rem);\r\n color: #1e1b4b;\r\n margin-bottom: 8px;\r\n }\r\n .puzzle-blank {\r\n display: inline-block;\r\n width: 60px;\r\n height: 52px;\r\n border-radius: 12px;\r\n background: linear-gradient(135deg, #fef3c7, #fde68a);\r\n border: 3px dashed #f59e0b;\r\n vertical-align: middle;\r\n line-height: 48px;\r\n font-size: 1.8rem;\r\n }\r\n\r\n \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\r\n @media (max-width: 500px) {\r\n .choices { grid-template-columns: 1fr 1fr; }\r\n .question-card { padding: 28px 18px 24px; }\r\n .game-header { gap: 10px; }\r\n .choice-btn { font-size: 1.2rem; padding: 14px 8px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HOME \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div id=\"home-view\">\r\n <header>\r\n <div class=\"header-stars\">\u2b50 \ud83c\udf1f \u2728 \ud83c\udf1f \u2b50<\/div>\r\n <h1>MathLand<\/h1>\r\n <p>Fun Math Games for Super Kids! \ud83d\ude80<\/p>\r\n <\/header>\r\n\r\n <div class=\"stats-bar\">\r\n <div class=\"stat-pill\"><span>\ud83c\udfc6<\/span> Total Score: <b id=\"total-score-display\">0<\/b><\/div>\r\n <div class=\"stat-pill\"><span>\ud83c\udfae<\/span> Games Played: <b id=\"games-played-display\">0<\/b><\/div>\r\n <div class=\"stat-pill\"><span>\u2b50<\/span> Best Streak: <b id=\"best-streak-display\">0<\/b><\/div>\r\n <\/div>\r\n\r\n <div id=\"home\">\r\n <div class=\"grid\">\r\n <div class=\"game-card c1\" onclick=\"openGame('addition')\">\r\n <span class=\"card-icon\">\u2795<\/span>\r\n <h2>Addition & Subtraction<\/h2>\r\n <p>Practice adding and subtracting numbers with timed challenges!<\/p>\r\n <div class=\"card-badges\">\r\n <span class=\"badge\">\u23f1 Timed<\/span>\r\n <span class=\"badge\">3 Levels<\/span>\r\n <span class=\"badge score-badge\" id=\"badge-addition\">Best: 0<\/span>\r\n <\/div>\r\n <div class=\"card-arrow\">\u2192<\/div>\r\n <\/div>\r\n\r\n <div class=\"game-card c2\" onclick=\"openGame('colorSub')\">\r\n <span class=\"card-icon\">\ud83c\udfa8<\/span>\r\n <h2>Color Subtraction<\/h2>\r\n <p>See colorful dots disappear and figure out what's left!<\/p>\r\n <div class=\"card-badges\">\r\n <span class=\"badge\">\ud83d\udc41 Visual<\/span>\r\n <span class=\"badge\">3 Levels<\/span>\r\n <span class=\"badge score-badge\" id=\"badge-colorSub\">Best: 0<\/span>\r\n <\/div>\r\n <div class=\"card-arrow\">\u2192<\/div>\r\n <\/div>\r\n\r\n <div class=\"game-card c3\" onclick=\"openGame('multiply')\">\r\n <span class=\"card-icon\">\u2716\ufe0f<\/span>\r\n <h2>Multiplication Tables<\/h2>\r\n <p>Master your times tables from 1\u00d71 all the way up!<\/p>\r\n <div class=\"card-badges\">\r\n <span class=\"badge\">\u23f1 Timed<\/span>\r\n <span class=\"badge\">3 Levels<\/span>\r\n <span class=\"badge score-badge\" id=\"badge-multiply\">Best: 0<\/span>\r\n <\/div>\r\n <div class=\"card-arrow\">\u2192<\/div>\r\n <\/div>\r\n\r\n <div class=\"game-card c4\" onclick=\"openGame('puzzle')\">\r\n <span class=\"card-icon\">\ud83e\udde9<\/span>\r\n <h2>Math Puzzle<\/h2>\r\n <p>Find the missing number to complete the equation!<\/p>\r\n <div class=\"card-badges\">\r\n <span class=\"badge\">\ud83e\udde0 Logic<\/span>\r\n <span class=\"badge\">3 Levels<\/span>\r\n <span class=\"badge score-badge\" id=\"badge-puzzle\">Best: 0<\/span>\r\n <\/div>\r\n <div class=\"card-arrow\">\u2192<\/div>\r\n <\/div>\r\n\r\n <div class=\"game-card c5\" onclick=\"openGame('clock')\">\r\n <span class=\"card-icon\">\ud83d\udd50<\/span>\r\n <h2>Time Learning<\/h2>\r\n <p>Read analog clocks and learn to tell time like a pro!<\/p>\r\n <div class=\"card-badges\">\r\n <span class=\"badge\">\u23f0 Clock<\/span>\r\n <span class=\"badge\">3 Levels<\/span>\r\n <span class=\"badge score-badge\" id=\"badge-clock\">Best: 0<\/span>\r\n <\/div>\r\n <div class=\"card-arrow\">\u2192<\/div>\r\n <\/div>\r\n\r\n <div class=\"game-card c6\" onclick=\"openGame('counting')\">\r\n <span class=\"card-icon\">\ud83c\udf4e<\/span>\r\n <h2>Counting Game<\/h2>\r\n <p>Count fruits, animals & objects \u2014 how many can you see?<\/p>\r\n <div class=\"card-badges\">\r\n <span class=\"badge\">\ud83d\udc3e Fun<\/span>\r\n <span class=\"badge\">3 Levels<\/span>\r\n <span class=\"badge score-badge\" id=\"badge-counting\">Best: 0<\/span>\r\n <\/div>\r\n <div class=\"card-arrow\">\u2192<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 GAME SCREENS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n\r\n<!-- GAME 1: Addition & Subtraction -->\r\n<div class=\"game-screen\" id=\"game-addition\">\r\n <div class=\"game-header\">\r\n <button class=\"back-btn\" onclick=\"goHome()\">\u2190 Home<\/button>\r\n <div class=\"game-title-bar\">\u2795 Addition & Subtraction<\/div>\r\n <\/div>\r\n <div class=\"level-selector\">\r\n <button class=\"level-btn active\" onclick=\"setLevel('addition',1,this)\">\ud83c\udf31 Easy<\/button>\r\n <button class=\"level-btn\" onclick=\"setLevel('addition',2,this)\">\ud83d\udd25 Medium<\/button>\r\n <button class=\"level-btn\" onclick=\"setLevel('addition',3,this)\">\u26a1 Hard<\/button>\r\n <\/div>\r\n <div class=\"game-meta\">\r\n <div class=\"meta-pill score-display\">Score: <b id=\"addition-score\">0<\/b><\/div>\r\n <div class=\"meta-pill timer\">\u23f1 <b id=\"addition-timer\">15<\/b>s<\/div>\r\n <div class=\"progress-wrap\"><div class=\"progress-bar\" id=\"addition-progress\" style=\"width:0%\"><\/div><\/div>\r\n <\/div>\r\n <div id=\"addition-question\" class=\"question-card\">\r\n <div class=\"question-sub\">What is the answer?<\/div>\r\n <div class=\"question-text\" id=\"addition-q\"><\/div>\r\n <div style=\"height:16px\"><\/div>\r\n <div class=\"choices\" id=\"addition-choices\"><\/div>\r\n <\/div>\r\n <div class=\"feedback\" id=\"addition-feedback\"><\/div>\r\n <button class=\"next-btn\" id=\"addition-next\" onclick=\"nextQ('addition')\">Next Question \u2192<\/button>\r\n <div class=\"results-card\" id=\"addition-results\"><\/div>\r\n<\/div>\r\n\r\n<!-- GAME 2: Color Subtraction -->\r\n<div class=\"game-screen\" id=\"game-colorSub\">\r\n <div class=\"game-header\">\r\n <button class=\"back-btn\" onclick=\"goHome()\">\u2190 Home<\/button>\r\n <div class=\"game-title-bar\">\ud83c\udfa8 Color Subtraction<\/div>\r\n <\/div>\r\n <div class=\"level-selector\">\r\n <button class=\"level-btn active\" onclick=\"setLevel('colorSub',1,this)\">\ud83c\udf31 Easy<\/button>\r\n <button class=\"level-btn\" onclick=\"setLevel('colorSub',2,this)\">\ud83d\udd25 Medium<\/button>\r\n <button class=\"level-btn\" onclick=\"setLevel('colorSub',3,this)\">\u26a1 Hard<\/button>\r\n <\/div>\r\n <div class=\"game-meta\">\r\n <div class=\"meta-pill score-display\">Score: <b id=\"colorSub-score\">0<\/b><\/div>\r\n <div class=\"progress-wrap\"><div class=\"progress-bar\" id=\"colorSub-progress\" style=\"width:0%\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"color-sub-wrap\" id=\"colorSub-question\">\r\n <div class=\"question-sub\">How many dots are LEFT?<\/div>\r\n <div class=\"color-boxes\" id=\"colorSub-dots\"><\/div>\r\n <div class=\"question-text\" id=\"colorSub-eq\" style=\"font-size:1.6rem; margin-top:8px;\"><\/div>\r\n <div style=\"height:16px\"><\/div>\r\n <div class=\"choices\" id=\"colorSub-choices\"><\/div>\r\n <\/div>\r\n <div class=\"feedback\" id=\"colorSub-feedback\"><\/div>\r\n <button class=\"next-btn\" id=\"colorSub-next\" onclick=\"nextQ('colorSub')\">Next Question \u2192<\/button>\r\n <div class=\"results-card\" id=\"colorSub-results\"><\/div>\r\n<\/div>\r\n\r\n<!-- GAME 3: Multiplication -->\r\n<div class=\"game-screen\" id=\"game-multiply\">\r\n <div class=\"game-header\">\r\n <button class=\"back-btn\" onclick=\"goHome()\">\u2190 Home<\/button>\r\n <div class=\"game-title-bar\">\u2716\ufe0f Multiplication Tables<\/div>\r\n <\/div>\r\n <div class=\"level-selector\">\r\n <button class=\"level-btn active\" onclick=\"setLevel('multiply',1,this)\">\ud83c\udf31 Easy (1-5)<\/button>\r\n <button class=\"level-btn\" onclick=\"setLevel('multiply',2,this)\">\ud83d\udd25 Medium (1-10)<\/button>\r\n <button class=\"level-btn\" onclick=\"setLevel('multiply',3,this)\">\u26a1 Hard (1-12)<\/button>\r\n <\/div>\r\n <div class=\"game-meta\">\r\n <div class=\"meta-pill score-display\">Score: <b id=\"multiply-score\">0<\/b><\/div>\r\n <div class=\"meta-pill timer\">\u23f1 <b id=\"multiply-timer\">20<\/b>s<\/div>\r\n <div class=\"progress-wrap\"><div class=\"progress-bar\" id=\"multiply-progress\" style=\"width:0%\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"question-card\" id=\"multiply-question\">\r\n <div class=\"mult-display\" id=\"multiply-hint\"><\/div>\r\n <div class=\"question-text\" id=\"multiply-q\"><\/div>\r\n <div style=\"height:16px\"><\/div>\r\n <div class=\"choices\" id=\"multiply-choices\"><\/div>\r\n <\/div>\r\n <div class=\"feedback\" id=\"multiply-feedback\"><\/div>\r\n <button class=\"next-btn\" id=\"multiply-next\" onclick=\"nextQ('multiply')\">Next Question \u2192<\/button>\r\n <div class=\"results-card\" id=\"multiply-results\"><\/div>\r\n<\/div>\r\n\r\n<!-- GAME 4: Puzzle -->\r\n<div class=\"game-screen\" id=\"game-puzzle\">\r\n <div class=\"game-header\">\r\n <button class=\"back-btn\" onclick=\"goHome()\">\u2190 Home<\/button>\r\n <div class=\"game-title-bar\">\ud83e\udde9 Math Puzzle<\/div>\r\n <\/div>\r\n <div class=\"level-selector\">\r\n <button class=\"level-btn active\" onclick=\"setLevel('puzzle',1,this)\">\ud83c\udf31 Easy<\/button>\r\n <button class=\"level-btn\" onclick=\"setLevel('puzzle',2,this)\">\ud83d\udd25 Medium<\/button>\r\n <button class=\"level-btn\" onclick=\"setLevel('puzzle',3,this)\">\u26a1 Hard<\/button>\r\n <\/div>\r\n <div class=\"game-meta\">\r\n <div class=\"meta-pill score-display\">Score: <b id=\"puzzle-score\">0<\/b><\/div>\r\n <div class=\"progress-wrap\"><div class=\"progress-bar\" id=\"puzzle-progress\" style=\"width:0%\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"question-card\" id=\"puzzle-question\">\r\n <div class=\"question-sub\">Find the missing number! \ud83e\udd14<\/div>\r\n <div class=\"puzzle-eq\" id=\"puzzle-q\"><\/div>\r\n <div style=\"height:16px\"><\/div>\r\n <div class=\"choices\" id=\"puzzle-choices\"><\/div>\r\n <\/div>\r\n <div class=\"feedback\" id=\"puzzle-feedback\"><\/div>\r\n <button class=\"next-btn\" id=\"puzzle-next\" onclick=\"nextQ('puzzle')\">Next Question \u2192<\/button>\r\n <div class=\"results-card\" id=\"puzzle-results\"><\/div>\r\n<\/div>\r\n\r\n<!-- GAME 5: Clock -->\r\n<div class=\"game-screen\" id=\"game-clock\">\r\n <div class=\"game-header\">\r\n <button class=\"back-btn\" onclick=\"goHome()\">\u2190 Home<\/button>\r\n <div class=\"game-title-bar\">\ud83d\udd50 Time Learning<\/div>\r\n <\/div>\r\n <div class=\"level-selector\">\r\n <button class=\"level-btn active\" onclick=\"setLevel('clock',1,this)\">\ud83c\udf31 Hours Only<\/button>\r\n <button class=\"level-btn\" onclick=\"setLevel('clock',2,this)\">\ud83d\udd25 Half Hours<\/button>\r\n <button class=\"level-btn\" onclick=\"setLevel('clock',3,this)\">\u26a1 Minutes<\/button>\r\n <\/div>\r\n <div class=\"game-meta\">\r\n <div class=\"meta-pill score-display\">Score: <b id=\"clock-score\">0<\/b><\/div>\r\n <div class=\"progress-wrap\"><div class=\"progress-bar\" id=\"clock-progress\" style=\"width:0%\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"clock-wrap\" id=\"clock-question\">\r\n <div class=\"question-sub\">What time does the clock show?<\/div>\r\n <canvas id=\"clock-canvas\" width=\"200\" height=\"200\"><\/canvas>\r\n <div class=\"choices\" id=\"clock-choices\"><\/div>\r\n <\/div>\r\n <div class=\"feedback\" id=\"clock-feedback\"><\/div>\r\n <button class=\"next-btn\" id=\"clock-next\" onclick=\"nextQ('clock')\">Next Question \u2192<\/button>\r\n <div class=\"results-card\" id=\"clock-results\"><\/div>\r\n<\/div>\r\n\r\n<!-- GAME 6: Counting -->\r\n<div class=\"game-screen\" id=\"game-counting\">\r\n <div class=\"game-header\">\r\n <button class=\"back-btn\" onclick=\"goHome()\">\u2190 Home<\/button>\r\n <div class=\"game-title-bar\">\ud83c\udf4e Counting Game<\/div>\r\n <\/div>\r\n <div class=\"level-selector\">\r\n <button class=\"level-btn active\" onclick=\"setLevel('counting',1,this)\">\ud83c\udf31 Easy (1-5)<\/button>\r\n <button class=\"level-btn\" onclick=\"setLevel('counting',2,this)\">\ud83d\udd25 Medium (5-10)<\/button>\r\n <button class=\"level-btn\" onclick=\"setLevel('counting',3,this)\">\u26a1 Hard (10-20)<\/button>\r\n <\/div>\r\n <div class=\"game-meta\">\r\n <div class=\"meta-pill score-display\">Score: <b id=\"counting-score\">0<\/b><\/div>\r\n <div class=\"progress-wrap\"><div class=\"progress-bar\" id=\"counting-progress\" style=\"width:0%\"><\/div><\/div>\r\n <\/div>\r\n <div class=\"counting-display\" id=\"counting-question\">\r\n <div class=\"question-sub\">How many can you count?<\/div>\r\n <div class=\"emoji-grid\" id=\"counting-emojis\"><\/div>\r\n <div class=\"choices\" id=\"counting-choices\"><\/div>\r\n <\/div>\r\n <div class=\"feedback\" id=\"counting-feedback\"><\/div>\r\n <button class=\"next-btn\" id=\"counting-next\" onclick=\"nextQ('counting')\">Next Question \u2192<\/button>\r\n <div class=\"results-card\" id=\"counting-results\"><\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 JAVASCRIPT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script>\r\n\/\/ \u2500\u2500\u2500 AUDIO \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst AudioCtx = window.AudioContext || window.webkitAudioContext;\r\nlet audioCtx;\r\n\r\nfunction initAudio() {\r\n if (!audioCtx) audioCtx = new AudioCtx();\r\n}\r\n\r\nfunction playCorrect() {\r\n try {\r\n initAudio();\r\n const o = audioCtx.createOscillator();\r\n const g = audioCtx.createGain();\r\n o.connect(g); g.connect(audioCtx.destination);\r\n o.type = 'sine';\r\n o.frequency.setValueAtTime(523, audioCtx.currentTime);\r\n o.frequency.setValueAtTime(659, audioCtx.currentTime + 0.1);\r\n o.frequency.setValueAtTime(784, audioCtx.currentTime + 0.2);\r\n g.gain.setValueAtTime(0.3, audioCtx.currentTime);\r\n g.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.5);\r\n o.start(); o.stop(audioCtx.currentTime + 0.5);\r\n } catch(e) {}\r\n}\r\n\r\nfunction playWrong() {\r\n try {\r\n initAudio();\r\n const o = audioCtx.createOscillator();\r\n const g = audioCtx.createGain();\r\n o.connect(g); g.connect(audioCtx.destination);\r\n o.type = 'sawtooth';\r\n o.frequency.setValueAtTime(200, audioCtx.currentTime);\r\n o.frequency.setValueAtTime(150, audioCtx.currentTime + 0.15);\r\n g.gain.setValueAtTime(0.2, audioCtx.currentTime);\r\n g.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.4);\r\n o.start(); o.stop(audioCtx.currentTime + 0.4);\r\n } catch(e) {}\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 STORAGE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction getData() {\r\n return JSON.parse(localStorage.getItem('mathland') || '{\"scores\":{},\"gamesPlayed\":0,\"bestStreak\":0}');\r\n}\r\nfunction saveData(d) { localStorage.setItem('mathland', JSON.stringify(d)); }\r\nfunction updateHomeStats() {\r\n const d = getData();\r\n let total = 0;\r\n ['addition','colorSub','multiply','puzzle','clock','counting'].forEach(k => {\r\n const best = d.scores[k] || 0;\r\n total += best;\r\n const el = document.getElementById('badge-' + k);\r\n if (el) el.textContent = 'Best: ' + best;\r\n });\r\n document.getElementById('total-score-display').textContent = total;\r\n document.getElementById('games-played-display').textContent = d.gamesPlayed || 0;\r\n document.getElementById('best-streak-display').textContent = d.bestStreak || 0;\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 GAME STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst TOTAL_Q = 10;\r\nconst state = {};\r\nconst timers = {};\r\n\r\nfunction initState(game) {\r\n state[game] = {\r\n score: 0, qNum: 0, level: 1,\r\n answer: null, streak: 0, maxStreak: 0, answered: false\r\n };\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 NAVIGATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction openGame(game) {\r\n document.getElementById('home-view').style.display = 'none';\r\n document.querySelectorAll('.game-screen').forEach(s => s.classList.remove('active'));\r\n document.getElementById('game-' + game).classList.add('active');\r\n initState(game);\r\n startGame(game);\r\n}\r\n\r\nfunction goHome() {\r\n clearAllTimers();\r\n document.querySelectorAll('.game-screen').forEach(s => s.classList.remove('active'));\r\n document.getElementById('home-view').style.display = 'block';\r\n updateHomeStats();\r\n}\r\n\r\nfunction setLevel(game, lvl, btn) {\r\n btn.closest('.level-selector').querySelectorAll('.level-btn').forEach(b => b.classList.remove('active'));\r\n btn.classList.add('active');\r\n clearAllTimers();\r\n initState(game);\r\n state[game].level = lvl;\r\n startGame(game);\r\n}\r\n\r\nfunction clearAllTimers() {\r\n Object.values(timers).forEach(t => clearInterval(t));\r\n}\r\n\r\nfunction startGame(game) {\r\n \/\/ reset UI\r\n document.getElementById(game + '-score').textContent = 0;\r\n document.getElementById(game + '-progress').style.width = '0%';\r\n const fb = document.getElementById(game + '-feedback');\r\n if(fb) { fb.className = 'feedback'; fb.textContent = ''; }\r\n const next = document.getElementById(game + '-next');\r\n if(next) next.className = 'next-btn';\r\n const res = document.getElementById(game + '-results');\r\n if(res) res.className = 'results-card';\r\n const qCard = document.getElementById(game + '-question');\r\n if(qCard) qCard.style.display = 'block';\r\n\r\n generateQ(game);\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 QUESTION GENERATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction generateQ(game) {\r\n if (!state[game]) initState(game);\r\n const s = state[game];\r\n s.answered = false;\r\n s.qNum++;\r\n\r\n if (s.qNum > TOTAL_Q) { showResults(game); return; }\r\n\r\n updateProgress(game);\r\n\r\n if (game === 'addition') genAddition();\r\n else if (game === 'colorSub') genColorSub();\r\n else if (game === 'multiply') genMultiply();\r\n else if (game === 'puzzle') genPuzzle();\r\n else if (game === 'clock') genClock();\r\n else if (game === 'counting') genCounting();\r\n\r\n if (game === 'addition' || game === 'multiply') startTimer(game);\r\n}\r\n\r\nfunction nextQ(game) {\r\n clearAllTimers();\r\n const fb = document.getElementById(game + '-feedback');\r\n fb.className = 'feedback';\r\n document.getElementById(game + '-next').className = 'next-btn';\r\n generateQ(game);\r\n}\r\n\r\nfunction updateProgress(game) {\r\n const pct = ((state[game].qNum - 1) \/ TOTAL_Q) * 100;\r\n document.getElementById(game + '-progress').style.width = pct + '%';\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 TIMER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction startTimer(game) {\r\n clearInterval(timers[game]);\r\n const timeMap = { addition: [15, 12, 8], multiply: [20, 15, 10] };\r\n const times = timeMap[game] || [15, 12, 8];\r\n let t = times[(state[game].level || 1) - 1];\r\n const el = document.getElementById(game + '-timer');\r\n if (!el) return;\r\n el.textContent = t;\r\n timers[game] = setInterval(() => {\r\n t--;\r\n el.textContent = t;\r\n el.style.color = t <= 5 ? '#ef4444' : '#ef4444';\r\n if (t <= 0) {\r\n clearInterval(timers[game]);\r\n if (!state[game].answered) {\r\n state[game].answered = true;\r\n showFeedback(game, false, 'Time\\'s up! \u23f0');\r\n document.getElementById(game + '-next').className = 'next-btn show';\r\n disableChoices(game);\r\n }\r\n }\r\n }, 1000);\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 ANSWER HANDLING \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction handleAnswer(game, chosen, btn) {\r\n if (state[game].answered) return;\r\n state[game].answered = true;\r\n clearInterval(timers[game]);\r\n\r\n const correct = chosen === state[game].answer;\r\n\r\n \/\/ Highlight\r\n document.querySelectorAll(`#${game}-choices .choice-btn`).forEach(b => {\r\n if (parseInt(b.dataset.val) === state[game].answer) b.classList.add('correct');\r\n });\r\n\r\n if (correct) {\r\n btn.classList.add('correct');\r\n state[game].score += 10;\r\n state[game].streak++;\r\n state[game].maxStreak = Math.max(state[game].maxStreak, state[game].streak);\r\n document.getElementById(game + '-score').textContent = state[game].score;\r\n playCorrect();\r\n const msgs = ['Awesome! \ud83c\udf1f', 'Correct! \ud83c\udf89', 'Brilliant! \ud83d\udcab', 'Great job! \ud83d\ude80', 'Super! \u2b50'];\r\n showFeedback(game, true, msgs[Math.floor(Math.random() * msgs.length)]);\r\n } else {\r\n btn.classList.add('wrong');\r\n state[game].streak = 0;\r\n playWrong();\r\n showFeedback(game, false, `Oops! The answer was ${state[game].answer} \ud83d\ude48`);\r\n }\r\n\r\n disableChoices(game);\r\n document.getElementById(game + '-next').className = 'next-btn show';\r\n}\r\n\r\nfunction showFeedback(game, correct, msg) {\r\n const fb = document.getElementById(game + '-feedback');\r\n fb.textContent = msg;\r\n fb.className = 'feedback show ' + (correct ? 'correct' : 'wrong');\r\n}\r\n\r\nfunction disableChoices(game) {\r\n document.querySelectorAll(`#${game}-choices .choice-btn`).forEach(b => b.disabled = true);\r\n}\r\n\r\nfunction renderChoices(game, answer, wrongPool, isText) {\r\n state[game].answer = answer;\r\n const choices = shuffle([answer, ...getWrong(answer, wrongPool, 3)]);\r\n const cont = document.getElementById(game + '-choices');\r\n cont.innerHTML = '';\r\n choices.forEach(c => {\r\n const btn = document.createElement('button');\r\n btn.className = 'choice-btn';\r\n btn.dataset.val = c;\r\n btn.textContent = isText ? c : c;\r\n btn.onclick = () => handleAnswer(game, c, btn);\r\n cont.appendChild(btn);\r\n });\r\n}\r\n\r\nfunction getWrong(answer, pool, n) {\r\n const wrongs = [];\r\n const tries = new Set();\r\n tries.add(answer);\r\n let attempts = 0;\r\n while (wrongs.length < n && attempts < 100) {\r\n attempts++;\r\n let w;\r\n if (pool && pool.length) {\r\n w = pool[Math.floor(Math.random() * pool.length)];\r\n } else {\r\n w = answer + Math.floor(Math.random() * 10) - 5;\r\n }\r\n if (!tries.has(w)) { tries.add(w); wrongs.push(w); }\r\n }\r\n return wrongs;\r\n}\r\n\r\nfunction shuffle(a) {\r\n for (let i = a.length - 1; i > 0; i--) {\r\n const j = Math.floor(Math.random() * (i + 1));\r\n [a[i], a[j]] = [a[j], a[i]];\r\n }\r\n return a;\r\n}\r\n\r\nfunction rnd(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }\r\n\r\n\/\/ \u2500\u2500\u2500 GAME 1: ADDITION & SUBTRACTION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction genAddition() {\r\n const lvl = state.addition.level;\r\n const maxN = lvl === 1 ? 10 : lvl === 2 ? 50 : 100;\r\n let a, b, op, answer, q;\r\n op = Math.random() > 0.5 ? '+' : '-';\r\n a = rnd(1, maxN);\r\n b = rnd(1, a);\r\n if (op === '+') { answer = a + b; q = `${a} + ${b} = ?`; }\r\n else { answer = a - b; q = `${a} - ${b} = ?`; }\r\n document.getElementById('addition-q').textContent = q;\r\n renderChoices('addition', answer, null, false);\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 GAME 2: COLOR SUBTRACTION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst DOT_COLORS = ['#ef4444','#f97316','#facc15','#22c55e','#3b82f6','#a855f7','#ec4899','#14b8a6'];\r\n\r\nfunction genColorSub() {\r\n const lvl = state.colorSub.level;\r\n const maxN = lvl === 1 ? 6 : lvl === 2 ? 10 : 15;\r\n const total = rnd(3, maxN);\r\n const sub = rnd(1, total - 1);\r\n const answer = total - sub;\r\n const color = DOT_COLORS[rnd(0, DOT_COLORS.length - 1)];\r\n\r\n document.getElementById('colorSub-eq').textContent = `${total} - ${sub} = ?`;\r\n\r\n const dotsCont = document.getElementById('colorSub-dots');\r\n dotsCont.innerHTML = '';\r\n\r\n \/\/ Left group\r\n const leftGroup = document.createElement('div');\r\n leftGroup.className = 'color-box-group';\r\n for (let i = 0; i < total; i++) {\r\n const d = document.createElement('div');\r\n d.className = 'color-dot';\r\n d.style.background = color;\r\n if (i < sub) d.classList.add('removed');\r\n leftGroup.appendChild(d);\r\n }\r\n dotsCont.appendChild(leftGroup);\r\n\r\n renderChoices('colorSub', answer, null, false);\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 GAME 3: MULTIPLICATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction genMultiply() {\r\n const lvl = state.multiply.level;\r\n const maxN = lvl === 1 ? 5 : lvl === 2 ? 10 : 12;\r\n const a = rnd(1, maxN), b = rnd(1, maxN);\r\n const answer = a * b;\r\n document.getElementById('multiply-q').textContent = `${a} \u00d7 ${b} = ?`;\r\n document.getElementById('multiply-hint').textContent = `${a} groups of ${b}`;\r\n renderChoices('multiply', answer, null, false);\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 GAME 4: PUZZLE (MISSING NUMBER) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction genPuzzle() {\r\n const lvl = state.puzzle.level;\r\n const maxN = lvl === 1 ? 10 : lvl === 2 ? 30 : 50;\r\n const type = rnd(0, 2);\r\n let a, b, c, q, answer;\r\n\r\n if (type === 0) { \/\/ ? + b = c\r\n b = rnd(1, maxN); c = rnd(b + 1, maxN + b);\r\n answer = c - b; q = `? + ${b} = ${c}`;\r\n } else if (type === 1) { \/\/ a - ? = c\r\n a = rnd(2, maxN); c = rnd(1, a - 1);\r\n answer = a - c; q = `${a} - ? = ${c}`;\r\n } else { \/\/ a + b = ? (easy variant - just check = sign position)\r\n a = rnd(1, maxN); b = rnd(1, maxN);\r\n answer = a + b; q = `${a} + ${b} = ?`;\r\n }\r\n\r\n document.getElementById('puzzle-q').innerHTML = q.replace('?', '<span class=\"puzzle-blank\">?<\/span>');\r\n renderChoices('puzzle', answer, null, false);\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 GAME 5: CLOCK \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction genClock() {\r\n const lvl = state.clock.level;\r\n let h = rnd(1, 12), m = 0;\r\n if (lvl === 1) m = 0;\r\n else if (lvl === 2) m = rnd(0, 1) * 30;\r\n else m = rnd(0, 11) * 5;\r\n\r\n drawClock(h, m);\r\n\r\n const fmt = t => t < 10 ? '0' + t : '' + t;\r\n const answer = `${h}:${fmt(m)}`;\r\n\r\n \/\/ Generate wrong answers\r\n const wrongs = new Set();\r\n wrongs.add(answer);\r\n while (wrongs.size < 4) {\r\n let wh = rnd(1, 12), wm;\r\n if (lvl === 1) wm = 0;\r\n else if (lvl === 2) wm = rnd(0, 1) * 30;\r\n else wm = rnd(0, 11) * 5;\r\n wrongs.add(`${wh}:${fmt(wm)}`);\r\n }\r\n\r\n const choices = shuffle([...wrongs].slice(0, 4));\r\n state.clock.answer = answer;\r\n const cont = document.getElementById('clock-choices');\r\n cont.innerHTML = '';\r\n choices.forEach(c => {\r\n const btn = document.createElement('button');\r\n btn.className = 'choice-btn';\r\n btn.dataset.val = c;\r\n btn.textContent = c;\r\n btn.style.fontSize = '1.3rem';\r\n btn.onclick = () => {\r\n if (state.clock.answered) return;\r\n state.clock.answered = true;\r\n const correct = c === state.clock.answer;\r\n document.querySelectorAll('#clock-choices .choice-btn').forEach(b => {\r\n if (b.dataset.val === state.clock.answer) b.classList.add('correct');\r\n });\r\n if (correct) {\r\n btn.classList.add('correct');\r\n state.clock.score += 10;\r\n state.clock.streak++;\r\n state.clock.maxStreak = Math.max(state.clock.maxStreak, state.clock.streak);\r\n document.getElementById('clock-score').textContent = state.clock.score;\r\n playCorrect();\r\n showFeedback('clock', true, 'Correct time! \ud83d\udd50\u2728');\r\n } else {\r\n btn.classList.add('wrong');\r\n state.clock.streak = 0;\r\n playWrong();\r\n showFeedback('clock', false, `Time was ${state.clock.answer} \ud83d\udd50`);\r\n }\r\n disableChoices('clock');\r\n document.getElementById('clock-next').className = 'next-btn show';\r\n };\r\n cont.appendChild(btn);\r\n });\r\n}\r\n\r\nfunction drawClock(h, m) {\r\n const canvas = document.getElementById('clock-canvas');\r\n const ctx = canvas.getContext('2d');\r\n const cx = 100, cy = 100, r = 90;\r\n\r\n ctx.clearRect(0, 0, 200, 200);\r\n\r\n \/\/ Face\r\n const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);\r\n grad.addColorStop(0, '#ffffff');\r\n grad.addColorStop(1, '#f0f4ff');\r\n ctx.beginPath(); ctx.arc(cx, cy, r, 0, Math.PI*2);\r\n ctx.fillStyle = grad; ctx.fill();\r\n ctx.strokeStyle = '#6366f1'; ctx.lineWidth = 4; ctx.stroke();\r\n\r\n \/\/ Hour markers\r\n for (let i = 1; i <= 12; i++) {\r\n const angle = (i \/ 12) * Math.PI * 2 - Math.PI \/ 2;\r\n const x = cx + Math.cos(angle) * 72;\r\n const y = cy + Math.sin(angle) * 72;\r\n ctx.fillStyle = '#1e1b4b';\r\n ctx.font = 'bold 13px Nunito, sans-serif';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillText(i, x, y);\r\n }\r\n\r\n \/\/ Tick marks\r\n for (let i = 0; i < 60; i++) {\r\n const angle = (i \/ 60) * Math.PI * 2 - Math.PI \/ 2;\r\n const len = i % 5 === 0 ? 10 : 5;\r\n ctx.beginPath();\r\n ctx.moveTo(cx + Math.cos(angle) * (r - len - 4), cy + Math.sin(angle) * (r - len - 4));\r\n ctx.lineTo(cx + Math.cos(angle) * (r - 4), cy + Math.sin(angle) * (r - 4));\r\n ctx.strokeStyle = i % 5 === 0 ? '#6366f1' : '#cbd5e1';\r\n ctx.lineWidth = i % 5 === 0 ? 2 : 1;\r\n ctx.stroke();\r\n }\r\n\r\n \/\/ Hour hand\r\n const hAngle = ((h % 12 + m \/ 60) \/ 12) * Math.PI * 2 - Math.PI \/ 2;\r\n drawHand(ctx, cx, cy, hAngle, 50, 6, '#1e1b4b');\r\n\r\n \/\/ Minute hand\r\n const mAngle = (m \/ 60) * Math.PI * 2 - Math.PI \/ 2;\r\n drawHand(ctx, cx, cy, mAngle, 70, 4, '#6366f1');\r\n\r\n \/\/ Center dot\r\n ctx.beginPath(); ctx.arc(cx, cy, 6, 0, Math.PI * 2);\r\n ctx.fillStyle = '#ec4899'; ctx.fill();\r\n}\r\n\r\nfunction drawHand(ctx, cx, cy, angle, len, width, color) {\r\n ctx.beginPath();\r\n ctx.moveTo(cx, cy);\r\n ctx.lineTo(cx + Math.cos(angle) * len, cy + Math.sin(angle) * len);\r\n ctx.strokeStyle = color;\r\n ctx.lineWidth = width;\r\n ctx.lineCap = 'round';\r\n ctx.stroke();\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 GAME 6: COUNTING \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst EMOJIS = [\r\n ['\ud83c\udf4e','\ud83c\udf4a','\ud83c\udf4b','\ud83c\udf47','\ud83c\udf53','\ud83c\udf51','\ud83c\udf52','\ud83c\udf49','\ud83c\udf4c','\ud83c\udf4d'],\r\n ['\ud83d\udc31','\ud83d\udc36','\ud83d\udc38','\ud83d\udc3c','\ud83d\udc28','\ud83e\udd8a','\ud83d\udc3b','\ud83d\udc2f','\ud83e\udd81','\ud83d\udc3a'],\r\n ['\u2b50','\ud83c\udf19','\ud83c\udf08','\u2764\ufe0f','\ud83d\udc8e','\ud83d\udd14','\ud83c\udf88','\ud83c\udfc0','\ud83d\ude80','\ud83c\udfb5']\r\n];\r\n\r\nfunction genCounting() {\r\n const lvl = state.counting.level;\r\n const [min, max] = lvl === 1 ? [1, 5] : lvl === 2 ? [5, 10] : [10, 20];\r\n const count = rnd(min, max);\r\n const emojiSet = EMOJIS[rnd(0, EMOJIS.length - 1)];\r\n const emoji = emojiSet[rnd(0, emojiSet.length - 1)];\r\n\r\n const grid = document.getElementById('counting-emojis');\r\n grid.innerHTML = '';\r\n for (let i = 0; i < count; i++) {\r\n const span = document.createElement('span');\r\n span.className = 'emoji-item';\r\n span.textContent = emoji;\r\n span.style.animationDelay = (i * 0.05) + 's';\r\n grid.appendChild(span);\r\n }\r\n\r\n renderChoices('counting', count, null, false);\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 RESULTS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction showResults(game) {\r\n document.getElementById(game + '-question').style.display = 'none';\r\n const fb = document.getElementById(game + '-feedback');\r\n if(fb) { fb.className = 'feedback'; }\r\n document.getElementById(game + '-next').className = 'next-btn';\r\n\r\n const s = state[game];\r\n const pct = Math.round((s.score \/ (TOTAL_Q * 10)) * 100);\r\n\r\n let emoji, title;\r\n if (pct >= 90) { emoji = '\ud83c\udfc6'; title = 'Outstanding!'; }\r\n else if (pct >= 70) { emoji = '\ud83c\udf1f'; title = 'Great job!'; }\r\n else if (pct >= 50) { emoji = '\ud83d\udc4d'; title = 'Good work!'; }\r\n else { emoji = '\ud83c\udfaf'; title = 'Keep practicing!'; }\r\n\r\n \/\/ Save to localStorage\r\n const data = getData();\r\n const prevBest = data.scores[game] || 0;\r\n if (s.score > prevBest) data.scores[game] = s.score;\r\n data.gamesPlayed = (data.gamesPlayed || 0) + 1;\r\n data.bestStreak = Math.max(data.bestStreak || 0, s.maxStreak || 0);\r\n saveData(data);\r\n\r\n const res = document.getElementById(game + '-results');\r\n res.innerHTML = `\r\n <div class=\"results-emoji\">${emoji}<\/div>\r\n <div class=\"results-title\">${title}<\/div>\r\n <div class=\"results-score\">You scored ${s.score} out of ${TOTAL_Q * 10} (${pct}%)<\/div>\r\n <div class=\"results-hi\">\ud83c\udfc6 Best score: ${Math.max(prevBest, s.score)} | \ud83d\udd25 Best streak: ${s.maxStreak}<\/div>\r\n <button class=\"play-again-btn\" onclick=\"startGame('${game}');document.getElementById('${game}-question').style.display='block';initState('${game}');state['${game}'].level=${s.level};\">\r\n Play Again \ud83d\ude80\r\n <\/button>\r\n `;\r\n res.className = 'results-card show';\r\n}\r\n\r\n\/\/ \u2500\u2500\u2500 INIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nupdateHomeStats();\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\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>FACTANDFORMULA\ud83c\udf1f Fun Math Games for Kids \u2b50 \ud83c\udf1f \u2728 \ud83c\udf1f \u2b50 MathLand Fun Math Games for Super Kids! \ud83d\ude80 \ud83c\udfc6 Total Score: 0 \ud83c\udfae Games Played: 0 \u2b50 Best Streak: 0 \u2795 Addition & Subtraction Practice adding and subtracting numbers with timed challenges! \u23f1 Timed 3 Levels Best: 0 \u2192 \ud83c\udfa8 Color Subtraction See colorful […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","omw_enable_modal_window":"enable","footnotes":""},"class_list":["post-995","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/factandformula.com\/index.php\/wp-json\/wp\/v2\/pages\/995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/factandformula.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/factandformula.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/factandformula.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/factandformula.com\/index.php\/wp-json\/wp\/v2\/comments?post=995"}],"version-history":[{"count":5,"href":"https:\/\/factandformula.com\/index.php\/wp-json\/wp\/v2\/pages\/995\/revisions"}],"predecessor-version":[{"id":1001,"href":"https:\/\/factandformula.com\/index.php\/wp-json\/wp\/v2\/pages\/995\/revisions\/1001"}],"wp:attachment":[{"href":"https:\/\/factandformula.com\/index.php\/wp-json\/wp\/v2\/media?parent=995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}