Note: this text prompt is re-made from the interactive, use as reference only.

USER TASK SPECIFICATION:

Create an interactive HTML5 **“Distance–Time Graph Simulation”** where students control the speed of a car and observe how its motion is represented on a distance–time graph in real time.

TARGET AUDIENCE:
- Lower / Upper Secondary Physics & Mathematics (~13–16 years old)

INTERACTIVE REQUIREMENTS:
- A **split-screen simulation** with:
  - Left: a simple **road scene** showing a car moving horizontally along a road with distance markers (0 m, 50 m, 100 m, 150 m, 200 m).
  - Right: a **distance–time graph** on a `<canvas>` plotting distance (vertical axis, m) vs time (horizontal axis, s).
- Control panel above or beside the simulation with:
  - **Speed slider** (0–20 m/s) showing current speed.
  - **Start Motion** button.
  - **Pause** button.
  - **Reset** button.
- Display of **current time** and **current distance** values.
- An **information panel** highlighting key concepts (e.g., steeper line = faster speed; horizontal line = no motion; straight line = constant speed).
- Self-contained HTML, CSS, JavaScript; no external libraries.
- **MOBILE-FRIENDLY & ACCESSIBLE**:
  - Touch-friendly buttons and slider.
  - Keyboard shortcuts (Space to start/pause, R to reset, Arrow keys for speed) for accessibility.

SPECIFIC REQUIREMENTS:

Simulation model
- Use a simple linear model: `distance = speed × time`.
- State variables:
  - `time` (seconds, starts at 0).
  - `distance` (meters, starts at 0).
  - `speed` (m/s), controlled by slider.
  - `isRunning` flag.
  - `dataPoints`: array of `{ time, distance }` used for plotting.
- Update loop:
  - Use `requestAnimationFrame` to animate.
  - Each frame, compute `deltaTime` in seconds using timestamps.
  - If 0 < `deltaTime` < 0.1 s, update `time += deltaTime` and `distance += speed × deltaTime`.
  - Add data points at regular intervals (e.g., every 0.1 s) for a smooth line.
- Stop conditions:
  - When `distance` reaches or exceeds `maxDistance` (e.g., 200 m), stop the simulation.
  - When `time` reaches `maxTime` (e.g., 20 s), stop as well.

Car animation
- Road section with car icon (`🚗`) absolutely positioned within a road container.
- The car’s `left` position is proportional to `distance / maxDistance` times the road width.
- Reflect speed visually (optional):
  - At speed 0: greyed/parked car.
  - At moderate/high speeds: colour shift or slight scale-up.

Graph drawing
- Use a `<canvas>` with a 2D context for drawing the distance–time graph.
- Configure maximum time (e.g., 20 s) and distance (e.g., 200 m) for axes.
- Drawing steps:
  - Clear canvas each frame.
  - Draw grid lines (optional dashed lines) for both axes.
  - Draw x- and y-axes with thicker lines.
  - Plot the polyline through all `dataPoints`:
    - Map `time` to x: `x = margin + (time / maxTime) × graphWidth`.
    - Map `distance` to y: `y = height−margin − (distance / maxDistance) × graphHeight`.
    - Use a coloured stroke (e.g., blue/purple), rounded line caps.
  - Draw a filled point/glowing marker at the **current** (time, distance) location.
  - Add axis labels and tick values (e.g., 0, 5, 10, 15, 20 s; 0, 50, 100, 150, 200 m).

Controls and behaviour
- **Speed slider**:
  - Range 0–20 m/s, integer steps.
  - On `input`, update `speed` and numeric display.
  - If the simulation is running, the new speed affects subsequent motion instantly.
- **Start Motion** button:
  - Begins or resumes simulation if not already running.
  - Disables itself and enables Pause.
- **Pause** button:
  - Pauses simulation (no time/distance updates; animation frame cancelled).
  - Disables itself and enables Start.
- **Reset** button:
  - Calls a reset routine that:
    - Stops simulation.
    - Resets `time`, `distance`, and `dataPoints`.
    - Moves car to start.
    - Sets displays to 0.0 s, 0.0 m.
    - Redraws empty graph with axes and grid.

Display elements
- Current time display: `Time: X.Xs`.
- Current distance display: `Distance: Y.Ym`.
- Speed value label: numeric, in m/s.

Keyboard and touch support
- Keyboard shortcuts:
  - Space: toggle Start/Pause.
  - R: reset.
  - ArrowUp/ArrowDown: increase/decrease speed slider value by 1, within bounds.
- Touch support:
  - For control buttons, on `touchstart` scale the button slightly; on `touchend`, revert and trigger click.

Educational messaging
- Info panel with concept bullets:
  - “Steeper line = faster speed”.
  - “Horizontal line = no motion”.
  - “Straight line = constant speed”.
- Optionally: console log or tooltip explaining keyboard shortcuts.

LEARNING OUTCOMES:
- Students should be able to:
  - Relate **constant speed** motion to the slope of a distance–time graph.
  - Understand that **steeper lines** represent higher speed.
  - Recognise that a **horizontal line** corresponds to the car being stationary.
  - Interpret numerical values of time and distance from the graph.
- The simulation should support experimentation with different speeds and durations to build intuition about motion graphs.

INTERACTION FEATURES TO INCLUDE:
- Real-time animation of car position.
- Real-time plotting of distance–time graph.
- Start/Pause/Reset controls, slider & keyboard input, and live numeric readouts.
- Clear, labelled axes and concept prompts for self-guided exploration.

Create a complete, functional HTML5 interactive that meets all requirements above.