Embed

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        :root {
            --bg-color: #2c3e50;
            --panel-color: #34495e;
            --accent: #2ecc71;
            --text: #ecf0f1;
            --timer-color: #f1c40f;
        }
        body { font-family: 'Segoe UI', sans-serif; margin: 0; background: var(--bg-color); color: var(--text); }
        
        #sim-container { 
            width: 100%; 
            max-width: 850px; 
            margin: 20px auto; 
            border-radius: 12px; 
            overflow: hidden; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
            border: 1px solid #444;
        }

        canvas { display: block; width: 100%; background-color: #ffffff; touch-action: none; }

        #stats-bar { 
            background: #1a252f; 
            display: flex; 
            justify-content: space-around; 
            padding: 15px; 
            font-family: 'Courier New', monospace; 
            font-weight: bold;
            border-bottom: 2px solid var(--panel-color);
            font-size: 14px;
        }

        #ui-panel { 
            padding: 25px; 
            background: var(--panel-color); 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
            gap: 20px; 
        }

        .control-group { 
            background: rgba(0,0,0,0.2); 
            padding: 15px; 
            border-radius: 8px;
            display: flex;
            flex-direction: column;
        }

        label { font-size: 0.9rem; margin-bottom: 8px; color: #bdc3c7; display: flex; justify-content: space-between; }
        label span { color: var(--accent); font-weight: bold; }

        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            height: 6px;
            background: #555;
            border-radius: 5px;
            outline: none;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            background: var(--accent);
            border-radius: 50%;
            cursor: pointer;
        }

        .btn-group { grid-column: 1/-1; display: flex; gap: 15px; justify-content: center; margin-top: 10px; }
        
        button { 
            padding: 12px 30px; 
            border: none; 
            border-radius: 6px; 
            cursor: pointer; 
            font-weight: bold; 
            text-transform: uppercase;
            transition: 0.3s;
        }
        #btnPlay { background: var(--accent); color: #1a252f; }
        #btnPlay:hover { background: #27ae60; }
        #btnReset { background: #e74c3c; color: white; }
        #btnReset:hover { background: #c0392b; }

        .stat-label { color: #95a5a6; font-size: 11px; display: block; margin-bottom: 2px; }
        .stat-val { font-size: 16px; }
    </style>
</head>
<body>

<div id="sim-container">
    <canvas id="simCanvas" width="850" height="450"></canvas>
    
    <div id="stats-bar">
        <div><span class="stat-label">TIME</span><span id="valT" style="color:var(--timer-color)" class="stat-val">0.00</span> s</div>
        <div><span class="stat-label">ACCELERATION</span><span id="valA" style="color:#e67e22" class="stat-val">0.00</span> m/s²</div>
        <div><span class="stat-label">VELOCITY</span><span id="valV" style="color:#3498db" class="stat-val">0.00</span> m/s</div>
        <div><span class="stat-label">DISPLACEMENT</span><span id="valS" style="color:#2ecc71" class="stat-val">0.00</span> m</div>
    </div>

    <div id="ui-panel">
        <div class="control-group">
            <label>Inclination Angle (θ): <span id="lblAngle">30</span>°</label>
            <input type="range" id="rangeAngle" min="0" max="75" value="30">
        </div>
        
        <div class="control-group">
            <label>Friction Coeff (μ): <span id="lblMu">0.20</span></label>
            <input type="range" id="rangeMu" min="0" max="1" step="0.01" value="0.20">
        </div>

        <div class="control-group">
            <label>Mass (m): <span id="lblMass">5.0</span> kg</label>
            <input type="range" id="rangeMass" min="1" max="15" step="0.5" value="5">
        </div>

        <div class="btn-group">
            <button id="btnPlay">Start Simulation</button>
            <button id="btnReset">Reset</button>
        </div>
    </div>
</div>

<script>
(function() {
    const canvas = document.getElementById('simCanvas');
    const ctx = canvas.getContext('2d');
    
    let state = {
        running: false,
        angle: 30 * Math.PI / 180,
        mu: 0.20,
        m: 5,
        g: 9.81,
        dist: 0,
        vel: 0,
        acc: 0,
        timer: 0
    };

    function drawVector(x, y, angle, mag, color, label, extraOffset = 15) {
        if (mag < 5) return;
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        
        // Arrow Line
        ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(mag, 0);
        ctx.strokeStyle = color;
        ctx.lineWidth = 3;
        ctx.stroke();

        // Arrow Head
        ctx.beginPath();
        ctx.moveTo(mag, 0);
        ctx.lineTo(mag-12, -6);
        ctx.lineTo(mag-12, 6);
        ctx.fillStyle = color;
        ctx.fill();
        
        // Text Label
        ctx.restore();
        ctx.save();
        const labelX = x + Math.cos(angle) * (mag + extraOffset);
        const labelY = y + Math.sin(angle) * (mag + extraOffset);
        ctx.translate(labelX, labelY);
        ctx.fillStyle = color;
        ctx.font = "bold 18px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillText(label, 0, 0);
        ctx.restore();
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        const groundY = 380;
        const startX = 80;
        const slopeLen = 700;
        const endX = startX + slopeLen * Math.cos(state.angle);
        const endY = groundY - slopeLen * Math.sin(state.angle);

        // Draw Slope
        ctx.beginPath();
        ctx.moveTo(startX, groundY);
        ctx.lineTo(endX, groundY);
        ctx.lineTo(startX, endY);
        ctx.closePath();
        ctx.fillStyle = "#f8f9fa";
        ctx.fill();
        ctx.strokeStyle = "#a4b0be";
        ctx.lineWidth = 2;
        ctx.stroke();

        // Draw Base Floor
        ctx.beginPath();
        ctx.moveTo(0, groundY);
        ctx.lineTo(canvas.width, groundY);
        ctx.strokeStyle = "#2f3542";
        ctx.lineWidth = 4;
        ctx.stroke();

        const p = state.dist * 40; 
        const bx = startX + p * Math.cos(state.angle);
        const by = endY + p * Math.sin(state.angle);

        // Block
        ctx.save();
        ctx.translate(bx, by);
        ctx.rotate(state.angle);
        ctx.fillStyle = "#e67e22";
        ctx.fillRect(-25, -40, 50, 40);
        ctx.strokeStyle = "#d35400";
        ctx.lineWidth = 2;
        ctx.strokeRect(-25, -40, 50, 40);
        ctx.restore();

        // Physics Forces
        const scale = 1.5 + (state.m * 0.2); 
        const weight = state.m * state.g;
        const normal = weight * Math.cos(state.angle);
        const friction = state.mu * normal;

        // Normal Force (N)
        drawVector(bx, by - 20, state.angle - Math.PI/2, normal * scale, "#2ecc71", "N", 15);
        
        // Friction (f)
        if (state.dist < 16.5) {
            drawVector(bx, by - 20, state.angle + Math.PI, friction * scale, "#e74c3c", "f", 35);
        }

        // Weight (W)
        drawVector(bx, by - 20, Math.PI/2, weight * scale, "#3498db", "W", 15);

        // Watermark
        ctx.save();
        ctx.fillStyle = "rgba(44, 62, 80, 0.25)";
        ctx.font = "bold 16px Arial";
        ctx.textAlign = "right";
        ctx.fillText("examinerprep.com", canvas.width - 20, canvas.height - 20);
        ctx.restore();
    }

    function update() {
        if (!state.running) return;
        
        const dt = 0.016; 
        const sin = Math.sin(state.angle);
        const cos = Math.cos(state.angle);
        
        let acc = state.g * (sin - state.mu * cos);
        if (acc < 0 && state.vel <= 0) acc = 0; 
        
        state.acc = acc;
        state.vel += state.acc * dt;
        state.dist += state.vel * dt;
        state.timer += dt;

        if (state.dist > 17) { 
            state.running = false; 
            state.vel = 0; 
            document.getElementById('btnPlay').innerText = "Start Simulation";
        }

        document.getElementById('valT').innerText = state.timer.toFixed(2);
        document.getElementById('valA').innerText = state.acc.toFixed(2);
        document.getElementById('valV').innerText = state.vel.toFixed(2);
        document.getElementById('valS').innerText = state.dist.toFixed(2);
    }

    function animate() {
        update();
        draw();
        requestAnimationFrame(animate);
    }

    document.getElementById('btnPlay').onclick = function() {
        state.running = !state.running;
        this.innerText = state.running ? "Pause" : "Start Simulation";
    };

    document.getElementById('btnReset').onclick = function() {
        state.running = false;
        state.dist = 0; state.vel = 0; state.acc = 0; state.timer = 0;
        document.getElementById('btnPlay').innerText = "Start Simulation";
        document.getElementById('valT').innerText = "0.00";
    };

    document.getElementById('rangeAngle').oninput = function() {
        state.angle = this.value * Math.PI / 180;
        document.getElementById('lblAngle').innerText = this.value;
        document.getElementById('btnReset').click();
    };

    document.getElementById('rangeMu').oninput = function() {
        state.mu = parseFloat(this.value);
        document.getElementById('lblMu').innerText = state.mu.toFixed(2);
        document.getElementById('btnReset').click();
    };

    document.getElementById('rangeMass').oninput = function() {
        state.m = parseFloat(this.value);
        document.getElementById('lblMass').innerText = state.m.toFixed(1);
        document.getElementById('btnReset').click();
    };

    animate();
})();
</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.