USER TASK SPECIFICATION:

Create an interactive HTML5 auto-detect about Projectile Motion.

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
- Real-time graphing + data logging (CSV export); pause/reset
- “Predict → Test → Explain” prompts to structure inquiry
- Preset scenarios and a Reset to defaults
- Contextual tooltips/glossary for symbols/terms
- Vector arrows, numeric readouts, and optional air resistance toggle
- Controls: initial speed, launch angle, and gravity; optional air resistance
- Decompose velocity into horizontal/vertical components with vector overlays
- Multiple representations: y–t, vᵧ–t, and aᵧ–t graphs only (as in Tracker); snap to integer axes/ticks with gridlines; show exact values at key events (launch, apex, landing)
- Live graphs: y–t, vᵧ–t, and aᵧ–t only; show time of flight and max height
- Snap & presets: angle slider with 1° steps and quick presets (30°, 45°, 60°); optionally snap initial speed to 1 m/s steps
- Trajectory options: toggle path trace/breadcrumbs; compare mode to display two trajectories concurrently
- Data tools: real-time data table (t, x, y, vₓ, vᵧ); export CSV; “Clear Log” button
- UI/layout: control panel + canvas layout optimized for iframe (100% width, ~450px height) and mobile; minimal header similar to the reference design
- Design reference: follow interaction affordances similar to https://iwant2study.org/lookangejss/02_newtonianmechanics_7energyworkpower/ejss_model_projectileprimary/index.html (no external dependencies)
- “Predict → Test → Explain” prompts; freeze/step-through at apex; show symmetry about apex
- Misconceptions: 45° not always max range with drag; horizontal and vertical motions independent

LEARNING OUTCOMES:
- Students should be able to explore and understand Projectile Motion
- 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.