USER TASK SPECIFICATION:

Create an interactive HTML5 auto-detect about Shadow Formation Virtual Lab.

TARGET AUDIENCE: Primary 5-6 - Science (General)

INTERACTIVE REQUIREMENTS:
- Educational content suitable for Primary 5-6 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
- Create a fully interactive and realistic shadow formation virtual lab for a point/beam light source, opaque object, and screen.
- Refer to a stored "layout picture" of the virtual lab as design knowledge; if this reference image fails to load, show a clear on-screen error log message (for the teacher).
- Layout: on the left, show a point/beam light source; in the centre, an opaque object (selectable via combo box: cube or sphere); on the right, a screen where the shadow is cast.
- From the light source, draw exactly two straight light rays that are mathematically tangent to the top and bottom of the opaque object (edge of cube, or tangents to the circle for the sphere case).
- Ensure the two light rays continue as straight lines until they meet the screen on the right; use correct geometry to compute the intersection points and shadow size on the screen.
- The shadow width on the screen must be mathematically accurate based on similar triangles (point source, object, and screen distances).
- Make the light source, object, and screen draggable along the horizontal (x) direction only; prevent them from overlapping while keeping all light rays and shadows updated in real time.
- Constrain dragging so that the light source always stays to the left of the object, and the screen always stays to the right of the object, within the visible plotting panel.
- Light rays must always stop at the screen; if the screen is moved so that a ray would miss it, allow the ray to extend to the end of the plotting panel to illustrate that the ray continues in a straight line.
- Include a simple top control panel with Play, Pause, and Reset buttons.
- Play button: automatically oscillate the light source left and right, between the left boundary (xmin of view) and a safe distance from the object, while updating the light rays and shadow dynamically.
- Pause button: freeze the animation but keep allowing manual dragging of light source, object, and screen.
- Reset button: restore default positions and sizes of the light source, object, and screen, and clear any animation state.
- Use clear labels and brief explanations suitable for Primary 5–6 Science, emphasizing terms such as "light ray", "opaque object", and "shadow".
- Focus on scientific accuracy (straight-line propagation of light, correct tangents, and similar triangles) while keeping the interface simple and age-appropriate.

LEARNING OUTCOMES:
- Students should be able to explore and understand Shadow Formation Virtual Lab
- 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.