USER TASK SPECIFICATION:

Create an interactive HTML5 auto-detect about Law of Reflection Simulation.

TARGET AUDIENCE: Secondary 3-4 - Physics

INTERACTIVE REQUIREMENTS:
- Educational content suitable for Secondary 3-4 students
- User interaction via sliders, buttons, checkboxes, or other appropriate controls
- Include visualizations (2D graphics)
- Display real-time changes in graphs, values, or visual feedback
- Self-contained in one HTML file with embedded CSS and JavaScript
- Add clear labels, legends, and explanations for all elements
- **MOBILE-RESPONSIVE**: Must work on phones (viewport meta tag, touch events, min 44px touch targets)
- **TOUCH-ENABLED**: Drag-and-drop must work with touch (touchstart/touchmove/touchend events)

SPECIFIC REQUIREMENTS:
- Clear variable controls with sensible ranges and units
- Contextual tooltips/glossary for symbols/terms
- Preset scenarios and a Reset to defaults
- Vector arrows, numeric readouts, and optional air resistance toggle
- Design an interactive virtual lab on the Law of Reflection, focused on exploring the relationship between angle of incidence and angle of reflection (i = r).
- Show a clear, labelled diagram with a flat horizontal mirror, a dashed normal line at the point of incidence, an incident ray, and a reflected ray.
- Clearly label and continuously display the angle of incidence (i) and angle of reflection (r) in degrees to one decimal place, both measured from the normal.
- As the user adjusts the incident ray, update both incident and reflected rays dynamically so that the reflected ray always obeys i = r.
- Provide an "Angle of Incidence" slider with range 0.0° to 90.0° and 0.1° step size to control the incident ray.
- Include a "Record" button that logs the current (i, r) pair into a data table, with all values stored to one decimal place.
- Display a data table with two columns: Angle of Incidence i (°) and Angle of Reflection r (°), supporting up to seven recorded rows.
- Include a "Plot Graph" button that, once data exists, generates a graph with i on the x-axis and r on the y-axis, shown side-by-side with the table.
- Ensure the plotted points lie on or very close to a straight line through the origin with slope ~1, visually confirming that i = r.
- Provide a "Reset" button that clears the data table and graph and resets the angle of incidence to a default value (e.g., 45.0°).
- Place the main control panel at the top of the diagram/plotting area to save vertical space, with additional explanatory text revealed using tooltips instead of long static text blocks.
- Use clear, student-friendly language appropriate for science lessons, reinforcing the terms "incident ray", "reflected ray", "normal", and "Law of Reflection".

LEARNING OUTCOMES:
- Students should be able to explore and understand Law of Reflection Simulation
- Interactive elements should reveal key concepts through manipulation
- Visual feedback should reinforce learning objectives
- Design should encourage experimentation and discovery

REAL-TIME DATA ANALYTICS (Critical for Learning Assessment):

FOR SIMULATION/INTERACTIVE TOOLS:
- Implement a real-time action log showing:
  * Timestamp of each action (using relative time: t=0s, t=3s, etc.)
  * Description of action taken (e.g., "Slider moved to 45°", "Reset button clicked")
  * Current state/values after action
  * Sequential log of all interactions
- Display action log in a clear, scrollable panel
- Use Unicode symbols to mark different action types
- Purpose: Allow teachers to understand student exploration patterns and thinking process

ANALYTICS PLACEMENT:
- Position analytics panel at the bottom or side of the interactive
- Make it collapsible/toggleable to not interfere with main interaction
- Ensure analytics update in real-time as student interacts
- Include a "Clear Log" or "Reset Analytics" button

INTERACTION FEATURES TO INCLUDE:
- Input controls (sliders/buttons) with clear labels and units
- Real-time visual updates based on user input
- Graphs or diagrams that respond to changes
- Brief explanatory text or tooltips for context
- Reset functionality to return to default state
- **Real-time analytics panel tracking student actions for learning assessment**




VISUAL DESIGN REQUIREMENTS:
- Use appropriate color schemes for educational content
- Ensure sufficient contrast for readability
- Include visual hierarchy to guide attention
- Use animations judiciously to demonstrate concepts
- Maintain consistency in design elements

Please create a complete, functional HTML5 interactive that meets all requirements above. The output should be a single HTML file ready to be embedded in an LMS or opened directly in a browser.