USER TASK SPECIFICATION:

Create an interactive HTML5 game about Malay Peribahasa.

TARGET AUDIENCE: Secondary 1-2 - Malay Language

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
- **Click/tap placement alternative**: Support selecting an item with click/tap, then placing it in a category box as an alternative to drag-and-drop
- Provide a clear tap-to-select then tap-to-place workflow so users can complete the activity without dragging
- **Post-drop learning tooltips**: After successful placement, show a feedback tooltip with a close button, offering a helpful misconception hint or clarification

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)

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:
Create a game-based recap activity for Secondary 2 students on Peribahasa Menengah 2 Bahagian 1.

Create TWO sections.

SECTION 1: Padankan Peribahasa dengan Maksud

* Include all 13 peribahasa and their meanings.
* Students match each peribahasa to its correct meaning.
* Use a matching or drag-and-drop format.

SECTION 2: Padankan Situasi dengan Peribahasa

* Include all 13 peribahasa.
* Students read a situation first, then choose or match the most suitable peribahasa.
* Use realistic Singapore secondary school situations involving classroom learning, friendship, CCA, leadership and family.

IMPORTANT:
For Section 2, do NOT show the peribahasa and its meaning before students answer.
Do NOT use the format: Peribahasa → Maksud → Situasi.
Instead, use the format: Situasi → Pilih Peribahasa yang Sesuai.

Peribahasa dan Maksud:

1. Masa itu emas
   Waktu sangat berharga dan tidak patut disia-siakan.

2. Pagi tidak dibuang, senja tidak dikejar
   Menggunakan setiap waktu dengan sebaik-baiknya.

3. Berbuat di alang tahun, belayar di luar musim
   Melakukan sesuatu bukan pada waktunya tidak akan membuahkan hasil.

4. Seperti telinga kuali
   Orang yang tidak mahu mendengar nasihat.

5. Umpama orang mengantuk disorongkan bantal
   Mendapat sesuatu yang sangat dikehendaki atau diperlukan.

6. Besar kapal besarlah gelombang
   Semakin tinggi kedudukan seseorang, semakin besar tanggungjawab dan cabarannya.

7. Bayang-bayang sepanjang tubuh, selimut sepanjang badan
   Melakukan sesuatu mengikut kemampuan diri sendiri.

8. Sudah terhantuk baru tengadah
   Baru hendak beringat-ingat setelah ditimpa musibah.

9. Seperti katak di bawah tempurung
   Orang yang sangat cetek pengetahuan atau pengalamannya.

10. Jauh perjalanan, luas pemandangan
    Banyak pengalaman yang diraih jika banyak merantau.

11. Di mana bumi dipijak, di situ langit dijunjung
    Mematuhi peraturan dan adat di tempat kita berada.

12. Hujan emas di negeri orang, hujan batu di negeri sendiri
    Walau bagaimanapun mewah negeri orang, negeri sendiri tetap lebih baik.

13. Seperti kerbau dicucuk hidung
    Orang yang hanya menurut arahan orang lain tanpa usul periksa.

Requirements:

* Test all 13 peribahasa.
* Every peribahasa must appear exactly once in Section 1 and exactly once in Section 2.
* Use simple Bahasa Melayu suitable for Secondary 2 students.
* Ensure all situations clearly match the intended peribahasa.
* Use correct spelling and grammar.
* Do not omit any peribahasa
* Provide immediate feedback after each attempt.

Visual and Design Requirements:

- Use a colourful and cheerful theme suitable for Secondary 2 students.
- Make the activity feel like a fun learning challenge rather than a worksheet.
- Use engaging colours, icons and visuals.
- Ensure all text is clear and easy to read.
- Avoid cluttered layouts.
- Use a consistent design throughout the activity.

LEARNING OUTCOMES:
- Students should be able to explore and understand Malay Peribahasa
- Interactive elements should reveal key concepts through manipulation
- Visual feedback should reinforce learning objectives
- Design should encourage experimentation and discovery
- Add a hideable title control so students can collapse or hide the title for a larger view when embedded in iframes or small-screen contexts

- 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**

- Score tracking or achievement feedback


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.