USER TASK SPECIFICATION:
Create an interactive HTML5 auto-detect about teach the game of baskeyball.
TARGET AUDIENCE: Primary 3-4 - Physical Education
INTERACTIVE REQUIREMENTS:
- Educational content suitable for Primary 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)
LEARNING OUTCOMES:
- Students should be able to explore and understand teach the game of baskeyball
- 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 QUIZ/GAME INTERACTIVES:
- Implement a real-time analytics panel showing:
  * Question number and text
  * Correct answer
  * Student's selected answer
  * Result (✅ Correct / ❌ Wrong) with color coding (green for correct, red for wrong)
  * Sequential log of all attempts to reveal misconception patterns
- Display analytics in a clear, scrollable panel
- Use Unicode symbols and color coding for visual clarity
- Purpose: Allow teachers to identify student misconceptions and thinking patterns
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.