USER TASK SPECIFICATION:
Create an interactive HTML5 auto-detect about build automaticity in math facts.
TARGET AUDIENCE: Primary 1-2 - Mathematics
INTERACTIVE REQUIREMENTS:
- Educational content suitable for Primary 1-2 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:
I want to design a game-based learning interactive for my students.
Grade level: [e.g., "Primary 2"]
Student readiness level: [choose one: "Lower Progress (need more support)"]
The game is based on: [e.g., "rapid multiplication practice with rewards]
The objective of the game is to: [e.g., "build automaticity in math facts,"]
While playing the game, students should experience: [e.g., "quick-fire questions with immediate feedback and increasing difficulty" ]
The interface should include: [e.g., "score counter, timer, level progress display, celebration messages"
LEARNING OUTCOMES:
- Students should be able to explore and understand build automaticity in math facts
- 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.