USER TASK SPECIFICATION:

Create an interactive HTML5 auto-detect about P5 Triangle Area – Refined Interactive  Base:   units Height:   units Area:   square units Submit Next.

TARGET AUDIENCE: Primary 5-6 - Mathematics

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)
- Tooltips/help panels must include a visible close (X) button

PEDAGOGICAL APPROACH (RAT): AMPLIFY
- Use hands-on manipulation/simulation/game mechanics to deepen understanding (not just Q&A).
- Include parameters/controls, live visual updates, and “Try a scenario” presets.
- Add challenge levels, goals, and reflection prompts (“What changed? Why?”).



SPECIFIC REQUIREMENTS:
- Step-by-step solution reveal with hints and “Why?” explanations
- Randomized problem generator (seeded) for varied practice
- Equation input with on-screen math keyboard and LaTeX rendering
- Unit handling/validation and clear messages for common mistakes
- Dynamic graphs/diagrams with draggable points and live readouts

SCREEN RECORDING FEATURE:
- Create a screen recording feature where students can record their screen and save the recording in WebM format only.
- Include Start Recording and Stop Recording buttons.
- Provide a Download Recording button that lets students download the saved WebM file.

LEARNING OUTCOMES:
- Students should be able to explore and understand P5 Triangle Area – Refined Interactive  Base:   units Height:   units Area:   square units Submit Next
- Interactive elements should reveal key concepts through manipulation
- Visual feedback should reinforce learning objectives
- Design should encourage experimentation and discovery

- Progressive difficulty: begin with scaffolded questions, then steadily reduce hints until full-difficulty questions are presented
REAL-TIME DATA ANALYTICS (Critical for Learning Assessment):
- 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
If the interactive includes quiz/assessment mode, ALSO log:
- Question number and full question text
- Task/instruction prompt shown to the student
- Student's selected answer or input
- Correct answer
- Result (✅ Correct / ❌ Wrong) with color coding
- Attempt number (first try, second try, etc.)
- Show a sequential, scrollable quiz analytics panel to reveal misconception patterns
- Use Unicode symbols and color coding for visual clarity
- Purpose: Allow teachers to diagnose misunderstandings and learning gaps
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.