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

USER TASK SPECIFICATION:

Create an interactive HTML5 **“Angle of Elevation and Depression Simulator”** that lets students explore how the angle between an observer and an object changes as the observer moves, for both angles of elevation and angles of depression.

TARGET AUDIENCE:
- Lower / Upper Secondary Mathematics (trigonometry introduction, ~13–16 years old)

INTERACTIVE REQUIREMENTS:
- A central **canvas-based diagram** showing:
  - Ground line.
  - A chosen object (building / tree / lighthouse) at a fixed horizontal position.
  - An observer either on the ground or in a helicopter.
  - A **sight line** from the observer to the top of the object.
  - A horizontal reference line from the observer.
  - A highlighted **angle arc** with label θ indicating angle of elevation (ground view) or angle of depression (helicopter view).
- Control panel on the side with:
  - Object selection buttons: **Building**, **Tree**, **Lighthouse**.
  - View mode buttons: **Ground View** (elevation) and **Helicopter View** (depression).
  - **Observer position** controls: left/right arrow buttons and a range slider.
  - Reset and Help buttons.
- A **results panel** showing:
  - Current angle (numeric, in degrees).
  - Angle type (Elevation / Depression).
  - Horizontal distance between observer and object.
  - Object height.
- A **help modal** explaining definitions and usage instructions.
- A feedback overlay that occasionally displays short tips.
- Self-contained HTML, CSS, JavaScript, using `<canvas>` for drawing.
- **MOBILE-FRIENDLY**:
  - Click/tap on the canvas to move the observer horizontally.
  - Buttons and slider are touch-friendly.

SPECIFIC REQUIREMENTS:

Geometry & physics model
- Fix the object’s horizontal position (e.g., `objectX`) and let the **observer’s x-position** vary (slider/arrow/canvas click).
- For ground view (angle of elevation):
  - Observer is on the ground line (with an eye-level offset above ground).
  - Object top is at height `H` above ground.
  - Compute angle θ via `tan(θ) = opposite / adjacent = (H) / |objectX − observerX|`.
- For helicopter view (angle of depression):
  - Observer is above ground at a fixed **helicopter height**.
  - Object appears scaled in height for perspective but logical calculations still respect its defined height.
  - Angle of depression measured from observer’s horizontal line down to line of sight.
- Display angle θ in degrees (rounded) in **Angle** overlay and **Current Angle** in results.

Canvas drawing
- Background:
  - Sky gradient above the ground line.
  - Ground rectangle below ground line.
  - Optional decorative clouds.
- Objects:
  - Draw **building**, **tree**, or **lighthouse** with simple shapes and colours.
  - For helicopter view, render object smaller (scaled down) to show different perspective.
- Observer:
  - In ground view: draw a small person at `observerX`, on the ground, with head at eye level.
  - In helicopter view: draw a small helicopter hovering above the scene.
- Sight line & angle arc:
  - Red dashed line from observer to top of object.
  - Blue horizontal reference line from observer.
  - Orange arc between horizontal and sight line, with “θ” label near the arc.

Controls
- **Object buttons** (`data-object="building|tree|lighthouse"`):
  - Selecting a button sets the current object, updates active button styling, and redraws.
- **View mode buttons** (`data-mode="ground|helicopter"`):
  - Switching mode updates `viewMode` and re-renders using elevation or depression angle definitions.
- **Position slider** (`#positionSlider`):
  - Range (e.g., 50–750 in canvas coordinates) controls `observerX`.
  - On input change: update observerX and redraw.
- **Move Left/Right** buttons:
  - Adjust `observerX` in steps (e.g., ±20), clamped to slider range.
  - Sync slider value and redraw.
- **Reset Simulation**:
  - Reset to defaults: object = building, view = ground, observerX = default value.
  - Reset active button styling and slider.
  - Show a brief feedback message (“Simulation reset to initial state”).
- **Show Help**:
  - Opens a modal explaining:
    - Definitions of angle of elevation and depression.
    - How to move observer & change objects.
    - How changing position affects the angle.

User interaction with canvas
- Clicking on the canvas:
  - Determine x-coordinate relative to canvas and map to internal coordinate (accounting for canvas scaling).
  - If x is within allowed range, set `observerX` to that value, update slider, and redraw.

Results & feedback
- Results panel values:
  - Current Angle (e.g., `17°`).
  - Angle Type (Elevation or Depression based on viewMode).
  - Distance: horizontal distance `|objectX − observerX|` with units (e.g., m).
  - Object Height: display base height or scaled height for viewMode.
- Feedback overlay (`#feedbackOverlay`):
  - Reused as a small message area for:
    - Object or mode change notifications.
    - Periodic **educational tips** (e.g., “Move closer to increase angle of elevation”).
- Periodic tips:
  - Array of tip strings.
  - `setInterval` shows a tip every ~10 seconds if help modal is not open.

Responsive behaviour
- On window resize:
  - Resize canvas to match parent container.
  - Recalculate ground line position and re-render environment, object, observer, angle.
- Keep visual proportions appropriate on different aspect ratios.

LEARNING OUTCOMES:
- Students should be able to:
  - Distinguish between **angle of elevation** and **angle of depression**.
  - Understand the relationship between **horizontal distance** and **angle size** (closer → larger angle).
  - Connect the visual model to right-angle trigonometry (tan θ = opposite/adjacent).
- The simulator should encourage exploration: changing objects, moving the observer, and switching viewpoints to observe how angles change.

INTERACTION FEATURES TO INCLUDE:
- Real-time angle updates when moving the observer.
- Object switching and view mode toggling with immediate visual changes.
- Contextual help and periodic tips reinforcing key mathematical ideas.
- Reset function to go back to a standard starting scenario.

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