USER TASK SPECIFICATION:

Create an interactive HTML5 auto-detect about Bimetallic Strip A bimetallic strip is a device that makes use of expansion and contraction of solids.   It consists of two strips of different metals joined together.   The metals expand or contract to different extents when they are heated or cooled.   For example:   Brass expands more than iron when heated. Brass contracts more than iron when cooled..

TARGET AUDIENCE: Secondary 1-2 - Science (General)

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
- **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): TRANSFORM
- Create a novel experience that’s hard/impossible on paper (open exploration, emergent patterns, generative cases).
- Include compare mode, logging/analytics, and guided discovery hints to avoid aimless clicking.
- Provide “investigation tasks” (mini-missions) + explainable outcomes.



LEARNING OUTCOMES:
- Students should be able to explore and understand Bimetallic Strip A bimetallic strip is a device that makes use of expansion and contraction of solids.   It consists of two strips of different metals joined together.   The metals expand or contract to different extents when they are heated or cooled.   For example:   Brass expands more than iron when heated. Brass contracts more than iron when cooled.
- 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.