Embed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .sim-container {
            width: 100%;
            font-family: 'Segoe UI', system-ui, sans-serif;
            background: #ffffff;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #dee2e6;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
        }
        .header { background: #1e293b; color: white; padding: 15px; text-align: center; }
        .controls {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            padding: 20px;
            background: #f8fafc;
        }
        .control-item { display: flex; flex-direction: column; gap: 8px; }
        label { font-size: 13px; font-weight: 700; color: #475569; }
        input[type=range] { width: 100%; cursor: pointer; }
        
        .results-dash {
            grid-column: span 2;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            background: #f1f5f9;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #cbd5e1;
            text-align: center;
        }
        .result-box { border-right: 1px solid #cbd5e1; }
        .result-box:last-child { border-right: none; }
        .res-label { font-size: 11px; color: #64748b; text-transform: uppercase; font-weight: bold; }
        .res-val { font-size: 18px; font-weight: bold; color: #0f172a; margin-top: 4px; }

        .full-width { grid-column: span 2; display: flex; gap: 10px; }
        button { 
            flex: 1; padding: 14px; border: none; border-radius: 6px; 
            font-weight: 800; cursor: pointer; transition: transform 0.1s;
        }
        #runBtn { background: #2563eb; color: white; }
        #resetBtn { background: #e2e8f0; color: #475569; }
        button:active { transform: scale(0.98); }
        
        canvas { display: block; width: 100%; touch-action: none; background: white; }
    </style>
</head>
<body>

<div class="sim-container">
    <div class="header"><b>Momentum & Collision Lab (A.2)</b></div>
    
    <div class="controls">
        <div class="control-item">
            <label>m1: <span id="m1L">2.0</span> kg</label>
            <input type="range" id="m1S" min="1" max="10" step="0.5" value="2">
            <label>u1: <span id="u1L">4.0</span> m/s</label>
            <input type="range" id="u1S" min="0" max="8" step="0.5" value="4">
        </div>
        <div class="control-item">
            <label>m2: <span id="m2L">4.0</span> kg</label>
            <input type="range" id="m2S" min="1" max="10" step="0.5" value="4">
            <label>u2: <span id="u2L">0.0</span> m/s</label>
            <input type="range" id="u2S" min="-4" max="4" step="0.5" value="0">
        </div>

        <div class="control-item full-width">
            <label>Collision Type</label>
            <select id="type" style="padding: 10px; border-radius: 6px; border: 1px solid #cbd5e1; font-weight: bold;">
                <option value="elastic">Elastic (Kinetic Energy Conserved)</option>
                <option value="inelastic">Perfectly Inelastic (Sticks Together)</option>
            </select>
        </div>

        <div class="results-dash">
            <div class="result-box">
                <div class="res-label">Final Velocity 1 (v1)</div>
                <div class="res-val" id="fv1">--</div>
            </div>
            <div class="result-box">
                <div class="res-label">Final Velocity 2 (v2)</div>
                <div class="res-val" id="fv2">--</div>
            </div>
            <div class="result-box">
                <div class="res-label">Total Momentum (p)</div>
                <div class="res-val" id="totalP">--</div>
            </div>
        </div>

        <div class="full-width">
            <button id="runBtn">START</button>
            <button id="resetBtn">RESET</button>
        </div>
    </div>
    <canvas id="collisionCanvas"></canvas>
</div>

<script>
    const canvas = document.getElementById('collisionCanvas');
    const ctx = canvas.getContext('2d');
    let b1, b2, animation, running = false, collided = false;

    class Block {
        constructor(x, m, v, color, label) {
            this.m = m; this.v = v; this.color = color; this.label = label;
            this.w = 35 + (m * 4); this.h = this.w;
            this.x = x; this.y = 0;
        }
        draw(isCollided) {
            // Draw Box
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, this.y - this.h, this.w, this.h);
            ctx.strokeStyle = "#1e293b"; ctx.lineWidth = 2;
            ctx.strokeRect(this.x, this.y - this.h, this.w, this.h);
            
            // Draw Labels (Mass & Velocity)
            ctx.fillStyle = "#1e293b"; 
            ctx.textAlign = "center";
            
            // Mass Label
            ctx.font = "bold 13px sans-serif";
            ctx.fillText(this.label, this.x + this.w/2, this.y - this.h - 22);
            
            // Velocity Label (u before, v after)
            ctx.font = "14px monospace";
            const velocityPrefix = isCollided ? "v =" : "u =";
            ctx.fillText(`${velocityPrefix} ${this.v.toFixed(2)}`, this.x + this.w/2, this.y - this.h - 6);
        }
        update() { if (running) this.x += this.v; }
    }

    function setup() {
        canvas.width = canvas.parentElement.offsetWidth;
        canvas.height = 200; // slightly taller to fit the new labels
        const ground = canvas.height - 20;
        collided = false;
        document.getElementById('fv1').innerText = "--";
        document.getElementById('fv2').innerText = "--";
        
        const m1 = parseFloat(document.getElementById('m1S').value);
        const u1 = parseFloat(document.getElementById('u1S').value);
        const m2 = parseFloat(document.getElementById('m2S').value);
        const u2 = parseFloat(document.getElementById('u2S').value);

        b1 = new Block(40, m1, u1, "#3b82f6", `m1 (${m1}kg)`);
        b2 = new Block(canvas.width - 160, m2, u2, "#ef4444", `m2 (${m2}kg)`);
        b1.y = b2.y = ground;
        document.getElementById('totalP').innerText = `${(m1*u1 + m2*u2).toFixed(1)} kg·m/s`;
    }

    function drawWatermark() {
        ctx.save();
        const size = Math.floor(canvas.width * 0.1);
        ctx.font = `bold ${size}px sans-serif`;
        ctx.fillStyle = "rgba(0,0,0,0.08)";
        ctx.textAlign = "center"; ctx.textBaseline = "middle";
        ctx.fillText("examinerprep.com", canvas.width/2, canvas.height/2);
        ctx.restore();
    }

    function resolveCollision() {
        if (!collided && b1.x + b1.w >= b2.x) {
            const type = document.getElementById('type').value;
            const m1 = b1.m, m2 = b2.m, u1 = b1.v, u2 = b2.v;

            if (type === 'elastic') {
                b1.v = ((m1 - m2) * u1 + 2 * m2 * u2) / (m1 + m2);
                b2.v = (2 * m1 * u1 + (m2 - m1) * u2) / (m1 + m2);
            } else {
                const vF = (m1 * u1 + m2 * u2) / (m1 + m2);
                b1.v = b2.v = vF;
            }
            collided = true;
            
            // Update Results Dashboard
            document.getElementById('fv1').innerText = `${b1.v.toFixed(2)} m/s`;
            document.getElementById('fv2').innerText = `${b2.v.toFixed(2)} m/s`;
            
            b1.x = b2.x - b1.w; // prevent overlapping visual glitch
        }
    }

    function loop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Draw Ground Line
        ctx.beginPath(); ctx.moveTo(0, canvas.height-20); ctx.lineTo(canvas.width, canvas.height-20); ctx.stroke();
        
        drawWatermark();
        b1.update(); b2.update(); resolveCollision();
        
        // Draw blocks with collision state to update u -> v labels
        b1.draw(collided); 
        b2.draw(collided);
        
        animation = requestAnimationFrame(loop);
    }

    document.querySelectorAll('input').forEach(i => {
        i.oninput = () => {
            document.getElementById(i.id.replace('S','L')).innerText = parseFloat(i.value).toFixed(1);
            if (!running) setup();
        };
    });

    document.getElementById('runBtn').onclick = () => running = true;
    document.getElementById('resetBtn').onclick = () => { 
        running = false; cancelAnimationFrame(animation); setup(); loop(); 
    };
    document.getElementById('type').onchange = () => { if(!running) setup(); };

    window.onresize = setup;
    setup(); loop();
</script>
</body>
</html>

ExaminerPrep

Examiner Prep offers an elite, professionally designed online IB tutoring boutique based in Athens, Greece, targeting high‑achieving DP and MYP students worldwide. Led by award‑winning Physics educator and IB Physics examiner Evan Kotronis, who holds an M.Sc. in Management from UIUC, the brand delivers exclusive, academic‑focused instruction across Physics, Maths, Biology, and Chemistry through a select team of experts. Emphasizing the “Examiner’s Advantage,” the service leverages 20 years of experience, specialized expertise in Internal Assessments and Extended Essays, and internationally recognized mentorship. The site’s premium aesthetic combines navy blue, gold, and white to convey prestige. The business is just starting out.