{"id":1155,"date":"2026-08-21T20:09:38","date_gmt":"2026-08-21T14:39:38","guid":{"rendered":"https:\/\/qsh.in\/boards\/wbbse\/?p=1155"},"modified":"2026-08-21T20:42:23","modified_gmt":"2026-08-21T15:12:23","slug":"bbb","status":"publish","type":"post","link":"https:\/\/qsh.in\/boards\/wbbse\/bbb\/","title":{"rendered":"bbb"},"content":{"rendered":"    <div id=\"qsh-1155-871\" class=\"qsh-sim-frame-wrap\" style=\"--qsh-aspect: 1\/1;\">\n        <div class=\"qsh-sim-bar\">\n            <div class=\"qsh-sim-label\"><span class=\"qsh-dot\"><\/span> Interactive Simulator<\/div>\n            <div class=\"qsh-sim-controls\">\n                <button type=\"button\" class=\"qsh-sim-btn qsh-btn-reload\" onclick=\"document.getElementById('if-qsh-1155-871').srcdoc = document.getElementById('if-qsh-1155-871').srcdoc;\" aria-label=\"Restart\">\n                    <svg viewbox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"currentColor\"><path d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"><\/path><\/svg>\n                <\/button>\n                <button type=\"button\" class=\"qsh-sim-btn qsh-btn-fs\" id=\"fs-btn-qsh-1155-871\" aria-label=\"Fullscreen\">\n                    <svg viewbox=\"0 0 24 24\" width=\"14\" height=\"14\" fill=\"currentColor\"><path d=\"M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z\"><\/path><\/svg>\n                    <span>Expand<\/span>\n                <\/button>\n            <\/div>\n        <\/div>\n        <div class=\"qsh-sim-viewport\">\n            <iframe id=\"if-qsh-1155-871\" srcdoc=\"&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;base href=&quot;https:\/\/qsh.in\/boards\/wbbse\/&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot;&gt;&lt;style&gt;*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;touch-action:manipulation;background:#0b0f19;color:#f8fafc;font-family:system-ui,-apple-system,sans-serif;}&lt;\/style&gt;&lt;style&gt;:root {\r\n    --bg-sky: #020617;\r\n    --road-color: #1e293b;\r\n    --primary: #3b82f6;\r\n    --primary-glow: rgba(59, 130, 246, 0.6);\r\n    --success: #22c55e;\r\n    --danger: #ef4444;\r\n    --warning: #eab308;\r\n    --text-main: #f8fafc;\r\n    --font-ui: system-ui, -apple-system, sans-serif;\r\n    --road-speed: 2s;\r\n}\r\n\r\n* { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\nbody {\r\n    background-color: #000;\r\n    display: flex; justify-content: center; align-items: center;\r\n    min-height: 100vh;\r\n    font-family: var(--font-ui);\r\n}\r\n\r\n#game-container {\r\n    position: relative;\r\n    width: 100%; max-width: 600px;\r\n    height: 100vh; max-height: 900px;\r\n    background: linear-gradient(180deg, var(--bg-sky) 0%, #0f172a 40%, #000 100%);\r\n    overflow: hidden;\r\n    touch-action: none;\r\n    -webkit-tap-highlight-color: transparent;\r\n    user-select: none;\r\n    box-shadow: 0 0 30px rgba(0,0,0,0.8);\r\n}\r\n\r\n\/* --- 3D Road Environment --- *\/\r\n#world {\r\n    position: absolute; top: 0; left: 0;\r\n    width: 100%; height: 100%;\r\n    perspective: 800px; overflow: hidden;\r\n    z-index: 1;\r\n}\r\n\r\n#road {\r\n    position: absolute; bottom: 15%; left: -50%;\r\n    width: 200%; height: 120%;\r\n    background: linear-gradient(90deg, #020617 0%, var(--road-color) 25%, var(--road-color) 75%, #020617 100%);\r\n    transform-origin: bottom center;\r\n    transform: rotateX(75deg);\r\n}\r\n\r\n.lane-line {\r\n    position: absolute; top: 0;\r\n    width: 12px; height: 200%;\r\n    background-image: linear-gradient(to bottom, transparent 50%, #fef08a 50%);\r\n    background-size: 100% 120px;\r\n    animation: scroll-road var(--road-speed) linear infinite;\r\n}\r\n\r\n.line-left { left: 33%; }\r\n.line-right { left: 66%; }\r\n\r\n@keyframes scroll-road {\r\n    0% { background-position: 0 0; }\r\n    100% { background-position: 0 120px; }\r\n}\r\n\r\n\/* --- HUD (Top) --- *\/\r\n#hud {\r\n    position: absolute; top: 0; left: 0; width: 100%;\r\n    padding: clamp(1rem, 2vh, 1.5rem);\r\n    display: flex; justify-content: space-between; align-items: center;\r\n    z-index: 10; pointer-events: none;\r\n    background: linear-gradient(180deg, rgba(2,6,23,0.95) 0%, transparent 100%);\r\n}\r\n\r\n.hud-panel { text-align: center; }\r\n.center-panel { flex-grow: 1; margin: 0 1rem; }\r\n.hud-label { font-size: 0.7rem; color: #94a3b8; font-weight: 700; margin-bottom: 4px; }\r\n.hud-value { font-size: 1.5rem; font-weight: 900; color: var(--warning); text-shadow: 0 0 10px rgba(234,179,8,0.5); }\r\n.gauge-container { width: 100%; }\r\n.bar-bg { width: 100%; height: 12px; background: #334155; border-radius: 6px; overflow: hidden; border: 1px solid #475569; }\r\n.bar-fill { height: 100%; width: 100%; transition: width 0.3s ease, background-color 0.3s ease; }\r\n\r\n\/* --- Car &amp; Animations (Center) --- *\/\r\n#car-container {\r\n    position: absolute; \r\n    bottom: 48%; \r\n    left: 50%;\r\n    width: clamp(70px, 18vw, 100px);\r\n    margin-left: calc(clamp(70px, 18vw, 100px) \/ -2);\r\n    z-index: 30;\r\n}\r\n\r\n.car-rumble { animation: rumble 0.1s infinite alternate linear; }\r\n@keyframes rumble {\r\n    0% { transform: translate(0, 0px); }\r\n    100% { transform: translate(1px, 2px); }\r\n}\r\n\r\n.flame.active { animation: flicker 0.05s infinite alternate; display: block !important; }\r\n@keyframes flicker {\r\n    0% { transform: scaleY(1); fill: #38bdf8; }\r\n    100% { transform: scaleY(1.5); fill: #818cf8; }\r\n}\r\n.brakelight.active { fill: #ef4444; filter: drop-shadow(0 0 15px #ef4444); }\r\n\r\n\/* Fuel\/Score floating text animation *\/\r\n.float-text {\r\n    position: absolute; left: 50%; bottom: 60%; \r\n    transform: translateX(-50%);\r\n    font-size: 1.8rem; font-weight: 900;\r\n    pointer-events: none; z-index: 50;\r\n    animation: floatUp 1s cubic-bezier(0.2, 1, 0.3, 1) forwards;\r\n}\r\n@keyframes floatUp {\r\n    0% { opacity: 1; transform: translate(-50%, 0) scale(0.8); }\r\n    100% { opacity: 0; transform: translate(-50%, -100px) scale(1.2); }\r\n}\r\n.text-success { color: var(--success); text-shadow: 0 0 15px rgba(34,197,94,0.8); }\r\n.text-danger { color: var(--danger); text-shadow: 0 0 15px rgba(239,68,68,0.8); }\r\n\r\n\/* --- Play Zone (Thumb Zone - Bottom) --- *\/\r\n#play-zone {\r\n    position: absolute; bottom: 0; left: 0; width: 100%;\r\n    display: flex; flex-direction: column; align-items: center;\r\n    z-index: 40;\r\n    padding: 2rem 1rem calc(2rem + env(safe-area-inset-bottom)); \r\n    background: linear-gradient(0deg, rgba(2,6,23,0.98) 20%, rgba(2,6,23,0.8) 70%, transparent 100%);\r\n}\r\n\r\n#equation-display {\r\n    background: rgba(15, 23, 42, 0.95);\r\n    border: 2px solid var(--primary);\r\n    box-shadow: 0 0 20px var(--primary-glow), inset 0 0 10px var(--primary-glow);\r\n    border-radius: 20px;\r\n    padding: 0.8rem 2rem;\r\n    font-size: clamp(2.5rem, 8vw, 4rem);\r\n    font-weight: 900; color: var(--text-main);\r\n    display: flex; gap: 0.8rem; align-items: center;\r\n    backdrop-filter: blur(8px);\r\n    margin-bottom: 1.5rem;\r\n    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;\r\n}\r\n\r\n.operator { color: #60a5fa; }\r\n.q-mark { color: var(--warning); border-bottom: 4px solid var(--warning); }\r\n\r\n\/* Floating Orbs *\/\r\n#floating-options {\r\n    display: flex; justify-content: center; gap: 1rem; width: 100%; max-width: 400px;\r\n}\r\n\r\n.orb-btn {\r\n    flex: 1;\r\n    aspect-ratio: 1\/1;\r\n    background: radial-gradient(circle at 30% 30%, #475569, #1e293b);\r\n    border: 3px solid #64748b;\r\n    border-radius: 50%;\r\n    color: white; font-size: 2.2rem; font-weight: 800;\r\n    box-shadow: 0 8px 20px rgba(0,0,0,0.6), inset 0 -5px 15px rgba(0,0,0,0.5);\r\n    cursor: pointer;\r\n    touch-action: manipulation;\r\n    animation: float 3s ease-in-out infinite;\r\n    transition: transform 0.1s, border-color 0.2s;\r\n}\r\n\r\n.orb-btn:nth-child(2) { animation-delay: -1s; }\r\n.orb-btn:nth-child(3) { animation-delay: -2s; }\r\n.orb-btn:active { transform: scale(0.9) !important; border-color: var(--warning); background: radial-gradient(circle at 30% 30%, #64748b, #334155); }\r\n\r\n@keyframes float {\r\n    0%, 100% { transform: translateY(0px); }\r\n    50% { transform: translateY(-10px); }\r\n}\r\n\r\n\/* Overlays *\/\r\n.screen {\r\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n    background: rgba(2, 6, 23, 0.95);\r\n    display: flex; flex-direction: column; justify-content: center; align-items: center;\r\n    z-index: 100; text-align: center; padding: 2rem; backdrop-filter: blur(10px);\r\n}\r\n.screen.hidden { display: none; }\r\n\r\n#overlay-title { color: var(--text-main); font-size: 2.2rem; margin-bottom: 1rem; }\r\n#overlay-desc { color: #cbd5e1; font-size: 1.1rem; line-height: 1.6; margin-bottom: 2rem; }\r\n\r\n.primary-btn {\r\n    background: var(--success); color: white;\r\n    border: none; border-radius: 99px;\r\n    padding: 1.2rem 2.5rem; font-size: 1.2rem; font-weight: 800;\r\n    cursor: pointer; text-transform: uppercase;\r\n    box-shadow: 0 10px 25px rgba(34, 197, 94, 0.4);\r\n    transition: transform 0.1s;\r\n}\r\n.primary-btn:active { transform: scale(0.95); }\r\n\r\n.correct-flash { border-color: var(--success) !important; box-shadow: 0 0 30px var(--success) !important; }\r\n.wrong-flash { border-color: var(--danger) !important; box-shadow: 0 0 30px var(--danger) !important; }\r\n.shake { animation: shake-anim 0.4s ease-in-out; }\r\n@keyframes shake-anim {\r\n    0%, 100% { transform: translateX(0); }\r\n    25% { transform: translateX(-15px); }\r\n    75% { transform: translateX(15px); }\r\n}&lt;\/style&gt;&lt;\/head&gt;&lt;body&gt;&lt;div id=&quot;game-container&quot;&gt;\r\n    <!-- 3D Perspective Environment -->\r\n    &lt;div id=&quot;world&quot;&gt;\r\n        &lt;div id=&quot;road&quot;&gt;\r\n            &lt;div class=&quot;lane-line line-left&quot;&gt;&lt;\/div&gt;\r\n            &lt;div class=&quot;lane-line line-right&quot;&gt;&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n    <!-- Heads Up Display (Top) -->\r\n    &lt;div id=&quot;hud&quot;&gt;\r\n        &lt;div class=&quot;hud-panel&quot;&gt;\r\n            &lt;div class=&quot;hud-label&quot;&gt;\u09a6\u09c2\u09b0\u09a4\u09cd\u09ac (SCORE)&lt;\/div&gt;\r\n            &lt;div class=&quot;hud-value&quot; id=&quot;score-display&quot;&gt;\u09e6&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=&quot;hud-panel center-panel&quot;&gt;\r\n            &lt;div class=&quot;gauge-container&quot;&gt;\r\n                &lt;div class=&quot;hud-label&quot;&gt;\u099c\u09cd\u09ac\u09be\u09b2\u09be\u09a8\u09c0 (FUEL)&lt;\/div&gt;\r\n                &lt;div class=&quot;bar-bg&quot;&gt;&lt;div class=&quot;bar-fill fuel-fill&quot; id=&quot;fuel-bar&quot;&gt;&lt;\/div&gt;&lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n        &lt;div class=&quot;hud-panel&quot;&gt;\r\n            &lt;div class=&quot;hud-label&quot;&gt;\u0997\u09a4\u09bf (SPEED)&lt;\/div&gt;\r\n            &lt;div class=&quot;hud-value&quot; id=&quot;speed-display&quot;&gt;\u09e8\u09e6&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n    <!-- The Player Car (Center Screen) -->\r\n    &lt;div id=&quot;car-container&quot; class=&quot;car-rumble&quot;&gt;\r\n        &lt;svg id=&quot;player-car&quot; viewBox=&quot;0 0 100 200&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\r\n            <!-- Exhaust Flames -->\r\n            &lt;path id=&quot;flame-left&quot; class=&quot;flame hidden&quot; d=&quot;M 30 180 Q 35 230 40 180 Z&quot; fill=&quot;#38bdf8&quot; \/&gt;\r\n            &lt;path id=&quot;flame-right&quot; class=&quot;flame hidden&quot; d=&quot;M 60 180 Q 65 230 70 180 Z&quot; fill=&quot;#38bdf8&quot; \/&gt;\r\n            <!-- Tires -->\r\n            &lt;rect x=&quot;15&quot; y=&quot;30&quot; width=&quot;10&quot; height=&quot;30&quot; rx=&quot;3&quot; fill=&quot;#0f172a&quot;\/&gt;\r\n            &lt;rect x=&quot;75&quot; y=&quot;30&quot; width=&quot;10&quot; height=&quot;30&quot; rx=&quot;3&quot; fill=&quot;#0f172a&quot;\/&gt;\r\n            &lt;rect x=&quot;15&quot; y=&quot;140&quot; width=&quot;12&quot; height=&quot;35&quot; rx=&quot;4&quot; fill=&quot;#020617&quot;\/&gt;\r\n            &lt;rect x=&quot;73&quot; y=&quot;140&quot; width=&quot;12&quot; height=&quot;35&quot; rx=&quot;4&quot; fill=&quot;#020617&quot;\/&gt;\r\n            <!-- Body Main -->\r\n            &lt;path d=&quot;M 25 50 C 25 20, 75 20, 75 50 L 80 160 C 80 185, 20 185, 20 160 Z&quot; fill=&quot;#ef4444&quot; stroke=&quot;#b91c1c&quot; stroke-width=&quot;2&quot;\/&gt;\r\n            <!-- Cockpit \/ Windshield -->\r\n            &lt;path d=&quot;M 32 80 C 32 60, 68 60, 68 80 L 72 110 C 72 125, 28 125, 28 110 Z&quot; fill=&quot;#020617&quot; stroke=&quot;#334155&quot; stroke-width=&quot;2&quot;\/&gt;\r\n            <!-- Headlights -->\r\n            &lt;circle cx=&quot;30&quot; cy=&quot;35&quot; r=&quot;4&quot; fill=&quot;#fef08a&quot; class=&quot;headlight&quot;\/&gt;\r\n            &lt;circle cx=&quot;70&quot; cy=&quot;35&quot; r=&quot;4&quot; fill=&quot;#fef08a&quot; class=&quot;headlight&quot;\/&gt;\r\n            <!-- Brake Lights -->\r\n            &lt;rect id=&quot;brake-left&quot; x=&quot;25&quot; y=&quot;175&quot; width=&quot;12&quot; height=&quot;5&quot; rx=&quot;2&quot; fill=&quot;#7f1d1d&quot; class=&quot;brakelight&quot;\/&gt;\r\n            &lt;rect id=&quot;brake-right&quot; x=&quot;63&quot; y=&quot;175&quot; width=&quot;12&quot; height=&quot;5&quot; rx=&quot;2&quot; fill=&quot;#7f1d1d&quot; class=&quot;brakelight&quot;\/&gt;\r\n            <!-- Spoiler -->\r\n            &lt;path d=&quot;M 12 165 L 88 165 L 80 175 L 20 175 Z&quot; fill=&quot;#1e293b&quot;\/&gt;\r\n        &lt;\/svg&gt;\r\n    &lt;\/div&gt;\r\n\r\n    <!-- Floating Feedback Text Container -->\r\n    &lt;div id=&quot;feedback-anim-container&quot;&gt;&lt;\/div&gt;\r\n\r\n    <!-- Gameplay Area: Equation & Options (Thumb Zone) -->\r\n    &lt;div id=&quot;play-zone&quot;&gt;\r\n        &lt;div id=&quot;equation-display&quot;&gt;\r\n            &lt;span id=&quot;num-a&quot;&gt;\u09e6&lt;\/span&gt; &lt;span class=&quot;operator&quot;&gt;+&lt;\/span&gt; &lt;span id=&quot;num-b&quot;&gt;\u09e6&lt;\/span&gt; &lt;span class=&quot;operator&quot;&gt;=&lt;\/span&gt; &lt;span class=&quot;q-mark&quot;&gt;?&lt;\/span&gt;\r\n        &lt;\/div&gt;\r\n        \r\n        &lt;div id=&quot;floating-options&quot;&gt;\r\n            &lt;button class=&quot;orb-btn&quot; id=&quot;opt-0&quot;&gt;\u09e6&lt;\/button&gt;\r\n            &lt;button class=&quot;orb-btn&quot; id=&quot;opt-1&quot;&gt;\u09e6&lt;\/button&gt;\r\n            &lt;button class=&quot;orb-btn&quot; id=&quot;opt-2&quot;&gt;\u09e6&lt;\/button&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n\r\n    <!-- Screens -->\r\n    &lt;div id=&quot;overlay&quot; class=&quot;screen&quot;&gt;\r\n        &lt;h1 id=&quot;overlay-title&quot;&gt;\u09ae\u09c7\u09a8\u09cd\u099f\u09be\u09b2 \u09ae\u09cd\u09af\u09be\u09a5 \u09b0\u09c7\u09b8\u09bf\u0982&lt;\/h1&gt;\r\n        &lt;p id=&quot;overlay-desc&quot;&gt;\u09b8\u09a0\u09bf\u0995 \u09ad\u09be\u09b8\u09ae\u09be\u09a8 \u0989\u09a4\u09cd\u09a4\u09b0\u09c7 \u099f\u09cd\u09af\u09be\u09aa \u0995\u09b0\u09c1\u09a8\u0964&lt;br&gt;\u09b8\u09a0\u09bf\u0995 \u0989\u09a4\u09cd\u09a4\u09b0 \u099c\u09cd\u09ac\u09be\u09b2\u09be\u09a8\u09c0 \u0993 \u0997\u09a4\u09bf \u09ac\u09be\u09dc\u09be\u09ac\u09c7!&lt;\/p&gt;\r\n        &lt;button id=&quot;btn-start&quot; class=&quot;primary-btn&quot;&gt;\u09b0\u09c7\u09b8 \u09b6\u09c1\u09b0\u09c1 \u0995\u09b0\u09c1\u09a8&lt;\/button&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;&lt;script&gt;\n        window.GameController = {\n            saveScore: function(score, time, extraData) {\n                window.parent.postMessage({\n                    action: 'qsh_save_score',\n                    sim_id: 1155,\n                    score: score,\n                    time: time || 0,\n                    meta: extraData || {}\n                }, 'https:\/\/qsh.in\/boards\/wbbse');\n            }\n        };\n    &lt;\/script&gt;&lt;script&gt;(() =&gt; {\r\n    \/\/ --- Bengali Numerals Utility ---\r\n    const EN_TO_BN = {'0':'\u09e6', '1':'\u09e7', '2':'\u09e8', '3':'\u09e9', '4':'\u09ea', '5':'\u09eb', '6':'\u09ec', '7':'\u09ed', '8':'\u09ee', '9':'\u09ef'};\r\n    function toBn(numStr) {\r\n        return String(numStr).split('').map(c =&gt; EN_TO_BN[c] || c).join('');\r\n    }\r\n\r\n    \/\/ --- Configuration &amp; State (Rebalanced for Kids) ---\r\n    const Config = {\r\n        maxSpeed: 80,         \/\/ Capped lower so it's easier to reach max visual speed\r\n        maxFuel: 100,\r\n        fuelDrainBase: 1.5,   \/\/ Slower drain: gives ~66 seconds of pure thinking time from full\r\n        fuelGain: 20,         \/\/ Big reward for correct answers\r\n        fuelPenalty: 5,       \/\/ Less punishing on mistakes\r\n        speedGain: 20,        \/\/ Good chunk of speed per correct answer\r\n        friction: 2           \/\/ Speed decreases much slower while thinking\r\n    };\r\n\r\n    const State = {\r\n        isPlaying: false,\r\n        lastTime: 0,\r\n        score: 0,\r\n        speed: 20,\r\n        fuel: Config.maxFuel,\r\n        correctAnswer: 0,\r\n        totalAttempts: 0,\r\n        correctAttempts: 0,\r\n        startTime: 0\r\n    };\r\n\r\n    \/\/ --- DOM References ---\r\n    const DOM = {\r\n        root: document.documentElement,\r\n        scoreDisp: document.getElementById('score-display'),\r\n        speedDisp: document.getElementById('speed-display'),\r\n        fuelBar: document.getElementById('fuel-bar'),\r\n        numA: document.getElementById('num-a'),\r\n        numB: document.getElementById('num-b'),\r\n        eqBox: document.getElementById('equation-display'),\r\n        orbs: [\r\n            document.getElementById('opt-0'),\r\n            document.getElementById('opt-1'),\r\n            document.getElementById('opt-2')\r\n        ],\r\n        animContainer: document.getElementById('feedback-anim-container'),\r\n        car: document.getElementById('car-container'),\r\n        flames: document.querySelectorAll('.flame'),\r\n        brakes: document.querySelectorAll('.brakelight'),\r\n        overlay: document.getElementById('overlay'),\r\n        overlayTitle: document.getElementById('overlay-title'),\r\n        overlayDesc: document.getElementById('overlay-desc'),\r\n        btnStart: document.getElementById('btn-start')\r\n    };\r\n\r\n    \/\/ --- Text To Speech (TTS) ---\r\n    const TTS = {\r\n        synth: window.speechSynthesis,\r\n        enabled: false,\r\n        positive: [&quot;Great!&quot;, &quot;Correct!&quot;, &quot;Nice!&quot;, &quot;Wonderful!&quot;, &quot;Awesome!&quot;, &quot;Perfect!&quot;],\r\n        negative: [&quot;Oh no!&quot;, &quot;Oops!&quot;, &quot;Try again!&quot;, &quot;Watch out!&quot;],\r\n        \r\n        init() {\r\n            if ('speechSynthesis' in window) {\r\n                this.enabled = true;\r\n                const u = new SpeechSynthesisUtterance('');\r\n                u.volume = 0;\r\n                this.synth.speak(u);\r\n            }\r\n        },\r\n        speak(isCorrect) {\r\n            if (!this.enabled) return;\r\n            const arr = isCorrect ? this.positive : this.negative;\r\n            const text = arr[Math.floor(Math.random() * arr.length)];\r\n            \r\n            this.synth.cancel(); \r\n            const utterance = new SpeechSynthesisUtterance(text);\r\n            utterance.rate = 1.1; \/\/ Slightly slower speech for kids\r\n            utterance.pitch = isCorrect ? 1.2 : 0.9;\r\n            this.synth.speak(utterance);\r\n        }\r\n    };\r\n\r\n    \/\/ --- Game Logic ---\r\n    function generateProblem() {\r\n        const a = Math.floor(Math.random() * 9) + 1;\r\n        const b = Math.floor(Math.random() * 9) + 1;\r\n        State.correctAnswer = a + b;\r\n\r\n        DOM.numA.textContent = toBn(a);\r\n        DOM.numB.textContent = toBn(b);\r\n\r\n        let options = new Set([State.correctAnswer]);\r\n        while(options.size &lt; 3) {\r\n            let offset = Math.floor(Math.random() * 5) - 2; \r\n            let wrongAns = State.correctAnswer + offset;\r\n            if(wrongAns &gt; 0 &amp;&amp; wrongAns !== State.correctAnswer) {\r\n                options.add(wrongAns);\r\n            } else {\r\n                options.add(State.correctAnswer + Math.floor(Math.random() * 4) + 1);\r\n            }\r\n        }\r\n        \r\n        const optsArray = Array.from(options).sort(() =&gt; Math.random() - 0.5);\r\n        DOM.orbs.forEach((btn, index) =&gt; {\r\n            btn.textContent = toBn(optsArray[index]);\r\n            btn.dataset.val = optsArray[index];\r\n        });\r\n    }\r\n\r\n    function showFloatingText(text, isPositive) {\r\n        const el = document.createElement('div');\r\n        el.className = `float-text ${isPositive ? 'text-success' : 'text-danger'}`;\r\n        el.textContent = text;\r\n        DOM.animContainer.appendChild(el);\r\n        setTimeout(() =&gt; el.remove(), 1000);\r\n    }\r\n\r\n    function handleCorrect() {\r\n        State.correctAttempts++;\r\n        TTS.speak(true);\r\n        \r\n        State.fuel = Math.min(Config.maxFuel, State.fuel + Config.fuelGain);\r\n        State.speed = Math.min(Config.maxSpeed, State.speed + Config.speedGain);\r\n        \r\n        showFloatingText(&quot;+ \u099c\u09cd\u09ac\u09be\u09b2\u09be\u09a8\u09c0&quot;, true);\r\n        DOM.eqBox.classList.add('correct-flash');\r\n        DOM.flames.forEach(f =&gt; f.classList.remove('hidden', 'active'));\r\n        void DOM.eqBox.offsetWidth; \/\/ Force Reflow\r\n        DOM.flames.forEach(f =&gt; f.classList.add('active'));\r\n\r\n        setTimeout(() =&gt; {\r\n            DOM.eqBox.classList.remove('correct-flash');\r\n            DOM.flames.forEach(f =&gt; f.classList.remove('active'));\r\n            DOM.flames.forEach(f =&gt; f.classList.add('hidden'));\r\n            generateProblem();\r\n        }, 400); \/\/ Slightly longer success flash for kids\r\n    }\r\n\r\n    function handleWrong() {\r\n        TTS.speak(false);\r\n        \r\n        State.fuel = Math.max(0, State.fuel - Config.fuelPenalty);\r\n        State.speed = Math.max(10, State.speed - 15); \/\/ Gentler brake penalty\r\n        \r\n        showFloatingText(&quot;- \u099c\u09cd\u09ac\u09be\u09b2\u09be\u09a8\u09c0&quot;, false);\r\n        DOM.eqBox.classList.add('wrong-flash');\r\n        DOM.car.classList.add('shake');\r\n        DOM.brakes.forEach(b =&gt; b.classList.add('active'));\r\n\r\n        setTimeout(() =&gt; {\r\n            DOM.eqBox.classList.remove('wrong-flash');\r\n            DOM.car.classList.remove('shake');\r\n            DOM.brakes.forEach(b =&gt; b.classList.remove('active'));\r\n            generateProblem();\r\n        }, 500);\r\n    }\r\n\r\n    \/\/ --- Physics \/ Rendering Loop ---\r\n    function updatePhysics(dt) {\r\n        \/\/ Apply friction to slow down over time\r\n        if (State.speed &gt; 20) {\r\n            State.speed -= Config.friction * (dt \/ 1000);\r\n        }\r\n\r\n        \/\/ Speed dictates road animation duration.\r\n        \/\/ Formula adjusted so 50km\/h triggers a highly rewarding 0.5s fast visual frame rate.\r\n        const roadAnimDuration = Math.max(0.2, 3.5 - (State.speed * 0.06));\r\n        DOM.root.style.setProperty('--road-speed', `${roadAnimDuration}s`);\r\n\r\n        State.score += (State.speed * (dt \/ 1000)) * 0.1;\r\n        DOM.scoreDisp.textContent = toBn(Math.floor(State.score));\r\n        DOM.speedDisp.textContent = toBn(Math.floor(State.speed)) + &quot; \u0995\u09bf\u09ae\u09bf\/\u0998&quot;;\r\n\r\n        State.fuel -= Config.fuelDrainBase * (dt \/ 1000);\r\n        DOM.fuelBar.style.width = `${State.fuel}%`;\r\n        \r\n        if(State.fuel &gt; 50) DOM.fuelBar.style.backgroundColor = 'var(--success)';\r\n        else if(State.fuel &gt; 20) DOM.fuelBar.style.backgroundColor = 'var(--warning)';\r\n        else DOM.fuelBar.style.backgroundColor = 'var(--danger)';\r\n\r\n        if (State.fuel &lt;= 0) {\r\n            endGame();\r\n        }\r\n    }\r\n\r\n    function gameLoop(timestamp) {\r\n        if (!State.isPlaying) return;\r\n        const dt = timestamp - State.lastTime;\r\n        State.lastTime = timestamp;\r\n        \r\n        if (dt &lt; 100) {\r\n            updatePhysics(dt);\r\n        }\r\n        \r\n        requestAnimationFrame(gameLoop);\r\n    }\r\n\r\n    \/\/ --- Game Lifecycle ---\r\n    function startGame() {\r\n        TTS.init(); \r\n        \r\n        State.isPlaying = true;\r\n        State.score = 0;\r\n        State.speed = 30; \/\/ Start with a decent visual speed\r\n        State.fuel = Config.maxFuel;\r\n        State.totalAttempts = 0;\r\n        State.correctAttempts = 0;\r\n        State.startTime = Date.now();\r\n        \r\n        DOM.overlay.classList.add('hidden');\r\n        State.lastTime = performance.now();\r\n        generateProblem();\r\n        requestAnimationFrame(gameLoop);\r\n    }\r\n\r\n    function endGame() {\r\n        State.isPlaying = false;\r\n        \r\n        const accuracy = State.totalAttempts &gt; 0 \r\n            ? Math.round((State.correctAttempts \/ State.totalAttempts) * 100) \r\n            : 0;\r\n        const timeSpentSeconds = Math.floor((Date.now() - State.startTime) \/ 1000);\r\n        \r\n        DOM.overlayTitle.textContent = &quot;\u0997\u09c7\u09ae \u0993\u09ad\u09be\u09b0! (Game Over)&quot;;\r\n        DOM.overlayDesc.innerHTML = `\u0985\u09a4\u09bf\u0995\u09cd\u09b0\u09be\u09a8\u09cd\u09a4 \u09a6\u09c2\u09b0\u09a4\u09cd\u09ac: &lt;b&gt;${toBn(Math.floor(State.score))} \u09ae\u09bf.&lt;\/b&gt;&lt;br&gt;\u09b8\u09a0\u09bf\u0995\u09a4\u09be\u09b0 \u09b9\u09be\u09b0: &lt;b&gt;${toBn(accuracy)}%&lt;\/b&gt;`;\r\n        DOM.btnStart.textContent = &quot;\u09aa\u09c1\u09a8\u09b0\u09be\u09df \u0996\u09c7\u09b2\u09c1\u09a8&quot;;\r\n        DOM.overlay.classList.remove('hidden');\r\n\r\n        \/\/ Hook into parent QSH LMS Score Protocol\r\n        if (window.GameController &amp;&amp; typeof window.GameController.saveScore === 'function') {\r\n            window.GameController.saveScore(Math.floor(State.score), timeSpentSeconds, { \r\n                level: 'Day1-OrbRacing-Kids', \r\n                accuracy: accuracy \r\n            });\r\n        }\r\n    }\r\n\r\n    \/\/ --- Event Listeners ---\r\n    DOM.orbs.forEach(btn =&gt; {\r\n        btn.addEventListener('pointerdown', (e) =&gt; {\r\n            e.preventDefault();\r\n            if (!State.isPlaying) return;\r\n            \r\n            State.totalAttempts++;\r\n            const selectedVal = parseInt(btn.dataset.val);\r\n            \r\n            if (selectedVal === State.correctAnswer) {\r\n                handleCorrect();\r\n            } else {\r\n                handleWrong();\r\n            }\r\n            \r\n            if(navigator.vibrate) navigator.vibrate(15);\r\n        });\r\n    });\r\n\r\n    DOM.btnStart.addEventListener('pointerdown', (e) =&gt; {\r\n        e.preventDefault();\r\n        startGame();\r\n    });\r\n\r\n})();&lt;\/script&gt;&lt;\/body&gt;&lt;\/html&gt;\" sandbox=\"allow-scripts allow-forms allow-same-origin allow-pointer-lock\" allow=\"fullscreen; accelerometer; gyroscope\" allowfullscreen><\/iframe>\n        <\/div>\n    <\/div>\n    <script data-cfasync=\"false\">\n    (function() {\n        var wrap = document.getElementById('qsh-1155-871');\n        var btn  = document.getElementById('fs-btn-qsh-1155-871');\n        if (!wrap || !btn) return;\n        btn.addEventListener('click', function() {\n            if (!document.fullscreenElement) {\n                if (wrap.requestFullscreen) wrap.requestFullscreen();\n                else if (wrap.webkitRequestFullscreen) wrap.webkitRequestFullscreen();\n            } else {\n                if (document.exitFullscreen) document.exitFullscreen();\n            }\n        });\n        document.addEventListener('fullscreenchange', function() {\n            if (document.fullscreenElement === wrap) {\n                btn.classList.add('is-active');\n                btn.querySelector('span').textContent = 'Exit';\n            } else {\n                btn.classList.remove('is-active');\n                btn.querySelector('span').textContent = 'Expand';\n            }\n        });\n    })();\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1155","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/qsh.in\/boards\/wbbse\/wp-json\/wp\/v2\/posts\/1155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qsh.in\/boards\/wbbse\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qsh.in\/boards\/wbbse\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qsh.in\/boards\/wbbse\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qsh.in\/boards\/wbbse\/wp-json\/wp\/v2\/comments?post=1155"}],"version-history":[{"count":2,"href":"https:\/\/qsh.in\/boards\/wbbse\/wp-json\/wp\/v2\/posts\/1155\/revisions"}],"predecessor-version":[{"id":1157,"href":"https:\/\/qsh.in\/boards\/wbbse\/wp-json\/wp\/v2\/posts\/1155\/revisions\/1157"}],"wp:attachment":[{"href":"https:\/\/qsh.in\/boards\/wbbse\/wp-json\/wp\/v2\/media?parent=1155"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qsh.in\/boards\/wbbse\/wp-json\/wp\/v2\/categories?post=1155"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qsh.in\/boards\/wbbse\/wp-json\/wp\/v2\/tags?post=1155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}