USER TASK SPECIFICATION:
Create an interactive HTML5 auto-detect about Express Fractions as Single Fraction.
TARGET AUDIENCE: Secondary 1-2 - Mathematics
INTERACTIVE REQUIREMENTS:
- Educational content suitable for Secondary 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
RESPONSIVE DESIGN (CRITICAL FOR DESKTOP, TABLET, AND SMARTBOARD):
- **VIEWPORT META TAG** (Required): <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- **MOBILE-RESPONSIVE**: Must work on phones, tablets, and smartboards from 320px to 1920px+ width
- **Touch-friendly targets**: ALL interactive elements must be at least 44×44px (WCAG AAA standard)
- **Smartboard-optimized targets**: Use 48-54px for buttons on large displays to compensate for IR touch precision loss
COMPREHENSIVE TOUCH EVENT HANDLING (CRITICAL):
- **Implement native touch events**: touchstart, touchmove, touchend (not just mouse events)
- **Drag-and-drop on touch**: Use event.touches[0].clientX/clientY for accurate touch location tracking
- **Prevent ghost clicks**: Add 50ms debouncing to prevent IR touch bouncing on smartboards
- **Touch location verification**: Only trigger clicks if touch released within element bounds (prevent accidental adjacent taps)
- **Avoid click delays**: Don't rely on 300ms tap delay; use touchend immediately for better responsiveness
- **No hover-dependent interactions**: Use :active pseudo-class for touch feedback (never hover-only UI)
- **Visual touch feedback**: Show immediate opacity/scale/glow feedback when element is touched
- **Detectable active state**: Use CSS [data-touch-active="true"] or .touch-active classes for touch indication
SMARTBOARD/IR TOUCH SPECIFIC OPTIMIZATIONS:
- **Larger button padding**: Use 12px+ padding for easier tapping on IR touch interfaces
- **Inter-element spacing**: Maintain 12px+ gap between interactive elements (IR touch is less precise than capacitive)
- **No hover effects on touch**: IR/capacitive devices can't detect hover; use :active instead
- **Prevent text selection during drag**: Add user-select: none during touchmove operations
- **CSS for touch detection**: Use @media (hover: none) and (pointer: coarse) to auto-detect touch devices
- **Debouncing requirement**: Implement 50ms debounce for IR touch to prevent duplicate triggers from sensor bouncing
- **Visual glow on tap**: Add box-shadow glow to confirm which element user is about to activate (critical for children/lower accuracy)
- **Touch feedback must be instant**: No delays; visual feedback within <100ms of touch
TOOLTIP/HELP PANEL REQUIREMENTS:
- **Visible close button (X)**: All floating popovers/tooltips MUST have a tappable close button (min 32×32px)
- **Touch-outside detection**: Popovers should close when user taps outside (smartboard users need this for closing)
- **No hover popovers**: Popovers must be triggered by click/tap, not hover
- **Position awareness**: Check viewport bounds and reposition popover if it would overflow screen edge
- **Clear button styling**: Make close button obvious (high contrast, clear icon)
 
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
- Guided steps: find LCM of denominators, convert to equivalent fractions, operate, then simplify
- Visual models (bars/pies) synchronized with numeric steps
- Error-detection for common mistakes (e.g., adding denominators directly) with corrective hints
LEARNING OUTCOMES:
- Students should be able to explore and understand Express Fractions as Single Fraction
- 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
  * **Touch device type detected** (mouse/capacitive/IR - helps teachers identify which device was used)
- 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.)
- **Input method used** (important for smartboards - helps diagnose precision issues)
- 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
- **Analytics buttons must be 44px+ for touch** (if user wants to clear log on smartboard)
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**
 

ACCESSIBILITY & INCLUSIVE DESIGN:
- High contrast colors (WCAG AA minimum, AAA preferred for smartboards)
- **Test on ALL input methods**: Ensure identical experience on desktop (mouse), tablet (capacitive touch), and smartboard (IR touch)
- **No precision-dependent interactions**: Avoid features that require exact pixel-perfect cursor positioning
- **Keyboard navigation**: Ensure all interactive elements accessible via Tab and Enter keys (for accessibility devices)
- Clear error messages with suggestions (not just "invalid")
- Loading states for any delayed operations
- Alt text for any meaningful images or icons
- Clear instructions visible at start
- **Smartboard-friendly colors**: Avoid thin strokes or tiny text that IR may struggle with; use solid fills
TESTING REQUIREMENTS (FOR DEVELOPERS):
- Test on desktop (mouse) ✓
- Test on tablet (capacitive touch) ✓
- **Test on smartboard (IR touch)** ✓ - Critical for classroom deployment
- Test both portrait and landscape orientations
- Test from 320px (mobile) to 1920px+ (smartboard) widths
- Verify all buttons respond to single tap (not double-tap)
- Verify all controls are 44px+ minimum, 48px+ preferred for smartboards
- Verify no hover-only interactions exist
- Verify tooltips have working close buttons
VISUAL DESIGN REQUIREMENTS:
- Use appropriate color schemes for educational content
- Ensure sufficient contrast for readability (especially on smartboards with non-uniform lighting)
- Include visual hierarchy to guide attention
- Use animations judiciously to demonstrate concepts (no excessive animations)
- Maintain consistency in design elements
- Use solid button backgrounds (easier to tap on smartboards than gradient/transparent buttons)
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, with full smartboard/touch support tested.