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

USER TASK SPECIFICATION:

Create an interactive HTML5 **“Linear Function Explorer”** that lets students investigate how the slope (m) and y-intercept (c) in the equation **y = mx + c** affect the graph of a straight line.

TARGET AUDIENCE:
- Upper Primary / Lower Secondary Mathematics (approx. ages 11–14)

INTERACTIVE REQUIREMENTS:
- A central **Cartesian coordinate grid** rendered on an HTML5 `<canvas>`.
- Visualisation of a **single linear function** `y = mx + c` that updates in real time when parameters change.
- User controls:
  - Slider for **slope m** (e.g., from −5 to 5 with step 0.1).
  - Slider for **y-intercept c** (e.g., from −10 to 10 with step 0.5).
  - **Reset** button to return to a default line (e.g., `y = 1x + 0`).
- Live displays:
  - Current values of `m` and `c` beside each slider.
  - Equation display overlay showing the current equation in simplified form (e.g., `y = x + 2`, `y = -1.5x - 3.0`).
- Visual features on the graph:
  - Grid lines.
  - x- and y-axes with arrows and tick labels.
  - The line for `y = mx + c` drawn clearly.
  - A highlighted **y-intercept point** if it lies within the visible region, with coordinate label `(0, c)`.
- An **info tooltip** that appears when hovering over the graph, giving brief instructions or tips; this tooltip can also show rotating educational tips.
- **MOBILE-RESPONSIVE & TOUCH-ENABLED**:
  - Canvas resizes with the container or window.
  - Sliders work smoothly with touch (visual feedback on touch start/end).

SPECIFIC REQUIREMENTS:

Canvas and coordinate system
- The canvas should:
  - Fill the available width of its container while keeping a reasonable aspect ratio.
  - Adjust its internal width/height on window resize to maintain crisp drawing.
- Coordinate system:
  - Place the **origin at the centre** of the canvas.
  - Use a fixed **grid size** (pixels per unit) that adapts to canvas size so that about ±10 units are visible in both directions.
  - Draw:
    - Light grey grid lines at each unit step.
    - Darker axes (x and y) through the origin with arrowheads.
- Axis labels:
  - Numbers along x- and y-axes (e.g., from −10 to 10, skipping 0 at the origin).
  - Label the axes with `x` and `y` near the arrowheads.

Line plotting
- Given **slope `m`** and **intercept `c`**:
  - Compute the line’s y-values at the left and right edges of the canvas in coordinate units.
  - Convert these to pixel coordinates using the origin and grid size.
  - Draw a single line segment across the canvas representing the infinite line.
- Style:
  - Use a contrasting colour (e.g., red) and slightly thicker stroke so the line stands out.
- Highlight y-intercept:
  - Compute where the line crosses the y-axis (x = 0 → y = c).
  - If this point is on-screen, draw a small filled circle (e.g., green) at that point and label it `(0, c)`.

Controls and displays
- Slope slider:
  - Range: at least from −5 to 5 with step size 0.1.
  - Labeled “Slope (m)”.
  - Display current value with one decimal place next to the label.
  - Tooltip explaining “Slope controls steepness; positive slopes rise, negative slopes fall.”
- Y-intercept slider:
  - Range: at least from −10 to 10 with step size ∼0.5.
  - Labeled “Y-intercept (c)”.
  - Display value with one decimal place.
  - Tooltip explaining that y-intercept is where the line crosses the y-axis.
- Equation display:
  - Text showing the current equation `y = mx + c` with formatting rules:
    - If m = 1, show `y = x + ...`; if m = −1, show `y = -x + ...`.
    - If c = 0, omit the + c term.
    - If c > 0, show `+ c`; if c < 0, show `- |c|`.
- Reset button:
  - Resets slope and intercept to default (e.g. m = 1, c = 0).
  - Brief visual feedback (e.g., button colour change and “Reset ✓” text) then returns to normal state.

Tooltips and educational tips
- Info tooltip panel near the graph:
  - On graph hover / mouseenter, show a short message (e.g., “Click and drag the sliders to see how the line changes!”); hide on mouseleave.
  - Additionally, cycle through a list of **educational tips** every ~10 seconds when the tooltip is not currently visible, e.g.:
    - “Try setting the slope to 0 – what happens to the line?”
    - “Make the slope negative – notice how the line tilts the other way!”
    - “The y-intercept is where the line crosses the y-axis.”
    - “Steeper slopes make the line more vertical.”
    - “When slope = 1, the line goes up 1 unit for every 1 unit right.”

Touch and accessibility
- Sliders must support touch:
  - Prevent unintended scrolling/zooming when adjusting sliders.
  - Provide subtle visual feedback on touch start/end (e.g., slight scale-up).
- Keyboard accessibility:
  - Add a handler such that when the **slope slider** has focus, pressing ↑/↓ adjusts the slope up/down by the slider step, updates the display, and redraws the graph.
  - Optionally support a keyboard shortcut (e.g., Ctrl+R or Cmd+R) to trigger reset without reloading the entire page (prevent default browser refresh in that case).

Responsive behaviour
- On window resize:
  - Recompute canvas dimensions and origin.
  - Adjust grid size if necessary.
  - Redraw grid, axes, labels, and line.
- Ensure text and controls remain readable on smaller screens.

LEARNING OUTCOMES:
- Students should be able to:
  - Understand visually what the **slope** of a linear function represents.
  - Understand the role of the **y-intercept** in positioning the line.
  - Relate the symbolic form `y = mx + c` to the graph of the function.
  - Explore how changing `m` and `c` affects the line’s steepness and position.
- The interactive should encourage **exploration** and **sense-making** rather than just static viewing.

INTERACTION FEATURES TO INCLUDE:
- Real-time updates of the graph as sliders move.
- Clear display of numerical values and equation form.
- Highlight of the y-intercept point for visual emphasis.
- Tooltip and rotating tips to guide students’ exploration.
- Reset control for returning to a standard reference line.

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