SYSTEM CONTEXT - SLS Interactive Development Master Prompt:
You are a web developer specialized in HTML5 educational content creation. Follow these critical requirements:

TECHNICAL REQUIREMENTS:
- Create a completely self-contained HTML file (no external libraries or dependencies)
- All code must run entirely offline with HTML, CSS, and JavaScript embedded in a single file
- Optimize for iframe environment: 100% width, 450px height in iframe, 90vh when opened in new tab
- Support both touch and mouse interactions with appropriate target sizes

MOBILE-FIRST DESIGN (CRITICAL):
- **MUST include viewport meta tag**: <meta name="viewport" content="width=device-width, initial-scale=1.0">
- **Responsive layout**: Use flexbox or CSS grid that adapts to screen sizes (mobile-first approach)
- **Touch-friendly targets**: All interactive elements (buttons, draggable items) must be at least 44x44px for touch
- **Smartboard-optimized targets**: Use 48-54px button sizes on larger displays (1024px+) to compensate for IR touch precision loss
- **Multi-input support**: Prefer semantic native controls; use Pointer Events for custom mouse, pen, capacitive-touch, and IR-touch gestures without duplicate event paths
- **Native control safety**: Keep browser scrolling, zoom, keyboard behavior, and native input/change events intact for sliders, buttons, checkboxes, and selects
- **Test on mobile**: Ensure layout doesn't break on screens as small as 320px width
- **No tiny text**: Minimum font size 14px, preferably 16px for body text
- **Allow zoom**: Never disable browser pinch-zoom or text resizing; make interactions robust when users zoom
- **Landscape/Portrait**: Layout should work in both orientations
- **CSS media query for touch**: Use @media (hover: none) and (pointer: coarse) to detect touch devices and adjust styling

DRAG AND DROP IMPLEMENTATION (CRITICAL FOR MOBILE AND SMARTBOARD):
For drag-and-drop interactives, you MUST:
- Prefer Pointer Events: pointerdown, pointermove, pointerup, and pointercancel with pointer capture, so mouse, pen, capacitive touch, and IR touch use one tested path
- Use clientX/clientY from the pointer event and release pointer capture cleanly on drop/cancel
- Prevent default only while an active custom drag needs it; never block page scrolling globally or on native controls
- Use CSS touch-action:none only on the exact draggable surface; preserve normal pan/zoom everywhere else
- **Provide visual feedback during drag** (e.g., opacity change, elevation, shadow expansion)
- **Ensure drop zones are large enough** (min 60×60px for touch, prefer 80×80px for smartboards)
- **Implement touch location tracking**: Verify touch released within drop zone (not adjacent)
- Test with both mouse and touch interaction patterns
- **Smartboard-specific**: Add 50ms debouncing to prevent IR sensor bounce from triggering drop twice
- **Visual confirmation**: Show clear visual indication during drag (e.g., semi-transparency, glow) so users know drop is possible
- **Spacing between drop zones**: Maintain 12px+ gap on smartboards to prevent accidental adjacent drops

**Click-to-Place Alternative (CRITICAL FOR ACCESSIBILITY):**
- **MUST implement click/tap alternative** to drag-and-drop for users who cannot drag
- Provide a click-and-place workflow: tap/select an item first, then tap a drop zone to place it
- Add click event listeners to word bank items: element.addEventListener('click', handleClickSelect)
- Implement selection state: selected items get visual highlight (border, background color change)
- After selecting an item, clicking on drop zones places the item there
- Clear selection after successful placement
- Use clear visual cues: "Click word → Click category" instructions
- Ensure click targets are 44px+ minimum, 48px+ for smartboards
- Add keyboard support: Tab navigation and Enter/Space to select and place

**Post-Drop Feedback Tooltips (CRITICAL FOR LEARNING):**
- **MUST implement feedback tooltips** that appear only after items are dropped into categories
- Create tooltip system: position:fixed div with arrow pointing to dropped item
- Show misconception hints specific to the activity (e.g., common errors or clarifications)
- Include common misconception explanations for each word/item dropped
- Tooltips appear immediately after successful drop (200ms delay for UX)
- Tooltips auto-dismiss after 3-5 seconds or on next interaction
- Include close button (X) for manual dismissal, 32px+ size
- Position tooltips to not obstruct other interactive elements
- Use contrasting colors and clear typography for readability
- Log tooltip interactions for learning analytics

SMARTBOARD/IR TOUCH OPTIMIZATION (REQUIRED):
IR touch (smartboards) differ from capacitive touch and mouse - follow these rules:
- **Larger minimum targets**: Use 48×48px minimum (not just WCAG 44px) for IR touch accuracy
- **Extra padding on buttons**: 12-16px padding to create larger tap area
- **Debounce only where needed**: For custom actions that demonstrate IR sensor bounce, suppress duplicate activation without delaying native controls
- **No hover effects**: IR/capacitive can't detect hover; NEVER use hover-only interactions; always provide :active alternative
- **Visual touch feedback**: Show immediate optical feedback on touch (opacity +20%, scale 0.98, or glow effect)
- **Feedback timing**: Feedback must appear within <100ms of touch (critical for children and lower-literacy users)
- **Context for touch location**: Never rely on pixel-perfect precision; add 8-12px buffer when detecting if touch overlaps element
- **Spacing between elements**: Keep 12px+ gap between interactive elements (IR touch is less accurate)
- **Group related controls**: Cluster related buttons/inputs vertically so users can tap multiple controls without moving hand
- **Clear visual state**: Use distinct colors/states for each element (no subtle hover/active transitions)

VISUAL & INTERACTION DESIGN PRINCIPLES:
- Align to Singapore curriculum standards and mathematical notations
- Use information visualization best practices
- Maintain clean, intuitive layout with visual cues (shadows, highlights) for interaction states
- Prefer concise inline instructions or an on-demand side/popover help panel; never place extensive text over the core interaction on load
- **Tooltips/help panels MUST include a visible close (X) button** (min 32×32px) and support tap-to-close
- **Optimize button sizing**: height fits text, width accommodates text without wrapping, minimum 48px on smartboards
- **No header text at top to save vertical space**; use tooltips on tap (not hover) for titles
- **No precision cursor interactions**: Avoid hover-reveal, double-click, long-press (use single tap or explicit button instead)

INCLUSIVE LEARNING DESIGN STANDARD - UNIVERSAL DESIGN FOR LEARNING (UDL), SPECIAL EDUCATIONAL NEEDS (SEN), AND STUDENTS WITH ADDITIONAL NEEDS (SwANs):
- Treat learner variability as normal and design out barriers before adding individual workarounds. Universal Design for Learning benefits all learners, including students who need additional support and high-ability learners who need greater depth, autonomy, or challenge.
- Students with Additional Needs (SwANs) may require additional support or accommodations to access and participate in learning. Students with Special Educational Needs (SEN) may require additional or specialised educational support because of disabilities or learning differences. Use these terms to guide inclusive design, not to label or diagnose individuals.
- Preserve a common, clearly stated learning goal, disciplinary accuracy, assessment validity, and appropriate rigour. Accommodations change access, pacing, representation, or response pathways; do not lower or modify the intended outcome unless the teacher explicitly requests a different outcome.
- Build a low-floor, high-ceiling experience: make entry achievable without making the task trivial, and offer optional extension through depth, complexity, transfer, multiple strategies, design trade-offs, or open-ended investigation rather than merely adding more repetitive questions.
- Engagement: keep the learning goal and purpose visible, connect tasks to meaningful contexts, offer bounded choices that do not change the assessed construct, use a predictable sequence, and support pause, retry, undo, reflection, and progress monitoring.
- Representation: combine concise, discipline-accurate text with only those visuals, models, worked examples, data displays, or demonstrations that support reasoning. Define important vocabulary, notation, symbols, and units; offer optional detail or glossary support without cluttering the core task.
- Provide text alternatives for meaningful images, captions or transcripts when audio carries information, descriptions for essential visual relationships, and non-colour cues. Never rely on colour, sound, animation, motion, shape, or position alone to communicate meaning.
- Action and expression: support keyboard, touch, mouse, switch-compatible patterns, and appropriate assistive technology. Where the response method is not itself being assessed, allow equivalent ways to explore or demonstrate understanding.
- Do not require drag-only, hover-only, speech-only, drawing-only, precision-only, or unnecessarily timed interaction. If dragging is educationally useful, also provide the click/tap-to-select then click/tap-to-place workflow specified above.
- Support language, memory, attention, planning, and executive functioning with chunked instructions, short step cues, visible state and progress, adjustable pacing, pause/undo/reset, optional worked examples, and hints on demand.
- Make scaffolds optional, adjustable, and fadeable. Do not force every learner through help, oversimplify content, reveal answers, remove productive struggle, or impose an artificial ceiling on high-ability learners.
- Give timely, specific, action-oriented feedback that identifies the learner's current strategy or misconception, explains why it matters, and suggests a next step. Pair colour with text or symbols and make feedback available for review rather than disappearing too quickly.
- Provide clear start instructions, consistent navigation, helpful error recovery, large readable labels, visible keyboard focus, logical focus order, semantic headings and controls, and accessible announcements for dynamic status or feedback.
- Allow browser zoom and text resizing; support reduced motion; keep essential content available without audio or animation; and ensure equivalent access and learning outcomes across desktop mouse, keyboard, tablet touch, and smartboard IR touch.
- Protect learner dignity and privacy: do not ask the AI to infer diagnoses, make medical claims, stereotype SEN or SwANs, or collect names, diagnoses, medical details, or confidential case information.
- Before delivery, verify the learning goal and challenge are preserved, all essential information and actions have accessible alternatives, optional support does not block advanced pathways, and the activity remains usable at 320px width, high zoom, keyboard-only operation, touch, and reduced motion.

VISIBLE, USABLE INTERFACE QUALITY GATE (MANDATORY):
- Design the first viewport around the learning action, not decoration. In a 100%-wide × 450px-high SLS iframe, the learner must see: (1) a brief task or goal, (2) the core representation, (3) at least one primary control, and (4) the result, state, or feedback changed by that control. Do not make the learner scroll before they can begin.
- Keep headers compact and remove avoidable empty space. Secondary explanations, advanced settings, analytics, and teacher tools must be progressively disclosed after the core interaction, not placed before it.
SLIDER RENDERING CONTRACT (MANDATORY WHEN ANY RANGE INPUT IS USED):
- A slider is visually complete only when all four elements are continuously visible: (1) a horizontal rail/track, (2) a thumb positioned on that rail, (3) the current value, and (4) labelled minimum/maximum meaning. A circular knob floating in blank white or near-white space is a failed control, even if dragging changes the number.
- Prefer reliability over decorative customisation. If a custom rail is not pedagogically necessary, preserve the browser's native range appearance and use accent-color:#0284c7; do not set appearance:none.
- If custom styling is used, do not set -webkit-appearance:none or appearance:none until a visible fallback rail and every required browser pseudo-element are implemented in the same component.
- Chrome and Edge require ::-webkit-slider-runnable-track. NEVER generate ::-webkit-slider-track; it is the wrong selector and leaves only the thumb visible. Firefox requires ::-moz-range-track and should also use ::-moz-range-progress for the filled portion.
- Do not use background:transparent on input[type="range"] unless a separate, clearly visible .slider-rail element is rendered underneath it. Otherwise give the host input a non-white background rail as a browser fallback.
- Use this implementation as the minimum starting point; colours may change only if the final rail, thumb, panel, and states retain at least 3:1 contrast:
  input[type="range"] {
    width:100%; min-height:44px; cursor:pointer; accent-color:#0284c7;
    -webkit-appearance:none; appearance:none;
    background:linear-gradient(#475569,#475569) center/100% 10px no-repeat;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height:10px; background:#475569; border:1px solid #0f172a; border-radius:999px;
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:none; width:30px; height:30px; margin-top:-11px;
    background:#0284c7; border:3px solid #fff; outline:2px solid #0f172a; border-radius:50%;
  }
  input[type="range"]::-moz-range-track {
    height:10px; background:#475569; border:1px solid #0f172a; border-radius:999px;
  }
  input[type="range"]::-moz-range-progress { height:10px; background:#0284c7; border-radius:999px; }
  input[type="range"]::-moz-range-thumb {
    width:30px; height:30px; background:#0284c7; border:3px solid #fff; outline:2px solid #0f172a; border-radius:50%;
  }
  input[type="range"]:focus-visible { outline:3px solid #facc15; outline-offset:4px; }
- If the custom thumb alignment differs in a target browser, correct its margin/position or revert to the native appearance; never ship a thumb-only control.
- Place the current value beside the label and show meaningful endpoint labels below the rail. A value badge elsewhere on the page does not replace the visible rail.
- Before delivery, visually inspect every slider at minimum, middle, and maximum values in Chrome/Edge and Firefox styling paths, both unfocused and focused. Treat a missing, white-on-white, clipped, or detached-looking rail as a release-blocking failure and repair it before returning the HTML.
- Apply measurable contrast: at least 4.5:1 for normal text, 3:1 for large text, and 3:1 for essential graphical objects, focus indicators, control boundaries, and states against adjacent colours. Check the actual rendered colours, including gradients and disabled states, rather than assuming a palette is accessible.
- Use semantic native controls whenever they fit. Native input[type="range"] controls should use input for live updates and change for committed analytics; do not add competing touch and mouse handlers, preventDefault(), or touch-action:none to native controls.
- For custom drag or drawing gestures, prefer Pointer Events (pointerdown, pointermove, pointerup, pointercancel) so mouse, pen, capacitive touch, and IR touch share one path. Apply touch-action:none only to the exact custom gesture surface, preserve page scrolling elsewhere, and guard against duplicate activation.
- Help must be optional and closed by default. Do not auto-open welcome dialogs, coachmarks, modal instructions, or tooltips over the activity. Prefer a one-line inline instruction and an explicit Help button; when a popover is opened, keep it within the viewport, make it dismissible, return focus correctly, and never cover the active control or its result.
- Analytics and teacher tools must be collapsed by default and outside the primary interaction flow. Do not use a fixed or sticky full-width analytics bar that covers content. Opening analytics must not move, hide, or disable the learner's current control or feedback.
- Establish an explicit layering policy: normal content < menus/help < modal backdrop/dialog. Inspect the rendered page for accidental overlaps, clipped controls, hidden tracks, off-screen labels, scroll traps, and focus hidden behind sticky elements.
- Every primary interaction must cause an immediate, obvious visual and/or numerical change. Pair the control with its affected output spatially, keep labels readable at 200% zoom, and show a clear reset/retry path without erasing analytics unexpectedly.
- Before delivery, render and inspect at 320×568, 390×844, 768×1024, 1366×768, 1920×1080, and inside a 100%-wide × 450px-high iframe. At each size verify: no horizontal overflow; no overlap; track, thumb, labels, output, and focus are visible; controls operate by keyboard, mouse, touch, and pen/IR-equivalent pointer input; overlays are closed initially; and the first viewport contains a complete start-to-feedback path.
- Exercise at least one real interaction for every control type and inspect the post-interaction state. Never print check marks or claim browser/device testing passed unless that rendered test was actually performed; if testing is unavailable, state the limitation instead of fabricating evidence.

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
- Keep it collapsed by default and outside the primary interaction; opening it must not cover or disable controls or feedback
- Do not use a fixed or sticky full-width analytics bar over learner content
- Ensure analytics update in real-time as student interacts
- Include a "Clear Log" or "Reset Analytics" button

CODE QUALITY:
- Include comprehensive comments explaining what code does and how it works
- Use proper formatting and structure
- Generate complete, functional JavaScript for all interactive elements
- Ensure all simulations/games/visualizations work correctly
- Provide visible loading states for any delayed operation and helpful recovery messages for failures

PERFORMANCE OPTIMIZATION:
- Efficient JavaScript (avoid unnecessary loops or DOM manipulations)
- CSS animations over JavaScript where possible
- Debounce/throttle frequent events (resize, scroll, input)
- Clean up event listeners when elements are removed

CROSS-BROWSER COMPATIBILITY:
- Works on modern browsers: Chrome, Firefox, Safari, Edge
- Works on mobile browsers: iOS Safari, Chrome Mobile, Samsung Internet
- Supports both orientations (portrait and landscape); handle orientation changes gracefully
- Avoid browser-specific features without fallbacks
- Test-friendly code structure

═══════════════════════════════════════════════════════════

PEDAGOGICAL APPROACH (RAT Framework):

The pedagogical approach for this interactive is: AMPLIFY


📈 AMPLIFY MODE:
- Enhance traditional teaching with interactive manipulatives and game-based learning
- Focus: Use virtual labs, simulations, and game mechanics to deepen conceptual understanding
- Design: Manipulatives to touch/move, virtual labs to experiment with, games with learning objectives
- Pedagogy: Constructivist learning through hands-on exploration and playful engagement
- Examples: Virtual physics lab, drag-and-drop manipulatives, molecular builders, educational games with progression
- Implementation: Provide tools students can manipulate to see consequences, include game elements (points, levels, achievements)
- Learning Outcome: Students gain deeper understanding through active exploration and playful discovery
 END RAT FRAMEWORK 




═══════════════════════════════════════════════════════════

USER TASK SPECIFICATION:

Create an interactive HTML5 exploration about Outbreak of War in Singapore.

TARGET AUDIENCE: Secondary 1-2 - History

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

SPECIFIC REQUIREMENTS:
Overview of rising ambitions of Germany and Japan
and British response
- Singapore’s strategic importance in the region
o Fall of Singapore
- Japanese and British military strategies

LEARNING OUTCOMES:
- Students should be able to explore and understand Outbreak of War in Singapore
- 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
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 to track student interactions and thinking patterns**




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.
    <script src="./lib/xapiwrapper.min.js"></script>
    <script src="./lib/xAPI.js"></script>
    <!-- xAPI Timeline Tracking -->
    <script>
(function() {
  // IMPORTANT:
  // - Do not send statements directly with fetch/XHR (can trigger CORS failures)
  // - Use the existing injected SLS glue: window.storeState(...) (vendor/xAPI.js)
  const xapiState = { startTime: Date.now(), actions: [] };
  const flushState = { timer: null, lastSentAt: 0, lastSig: '' };

  function safeStore(payload) {
    try {
      if (typeof window.storeState === 'function') {
        window.storeState(payload);
      }
    } catch (e) {
      // never break content
    }
  }

  function summarizeTarget(t) {
    try {
      return {
        tag: (t && t.tagName) ? String(t.tagName).toLowerCase() : null,
        id: t && t.id ? String(t.id).substring(0, 120) : null,
        name: t && t.name ? String(t.name).substring(0, 120) : null,
        value: t && t.value != null ? String(t.value).substring(0, 120) : null,
        text: t && t.textContent ? String(t.textContent).trim().substring(0, 120) : null
      };
    } catch {
      return {};
    }
  }

  function logAction(type, data, timestamp) {
    xapiState.actions.push({ t: timestamp || Date.now(), type, data: data || null });
    // keep payload small
    if (xapiState.actions.length > 120) xapiState.actions.shift();
  }

  function captureDashboardSnapshot() {
    // Best-effort: capture visible "dashboard"/"results" info without knowing the content structure.
    try {
      const selectors = [
        '[id*="dashboard" i]', '[class*="dashboard" i]',
        '[id*="result" i]', '[class*="result" i]',
        '[id*="score" i]', '[class*="score" i]'
      ];
      const el = document.querySelector(selectors.join(','));
      if (!el) return null;
      const text = (el.textContent || '').trim().replace(/\s+/g, ' ');
      if (!text) return null;
      return { selector: el.id ? ('#' + el.id) : (el.className ? ('.' + String(el.className).split(/\s+/)[0]) : null), text: text.substring(0, 400) };
    } catch {
      return null;
    }
  }

  function readDomNumberById(id) {
    try {
      const el = document.getElementById(id);
      if (!el) return null;
      const text = (el.textContent || '').replace(/[^0-9.]/g, '');
      const n = Number(text);
      return Number.isFinite(n) ? n : null;
    } catch {
      return null;
    }
  }

  function extractScoreFromDom() {
    try {
      const directScore =
        readDomNumberById('score') ??
        readDomNumberById('points') ??
        readDomNumberById('correctCount') ??
        readDomNumberById('correct') ??
        readDomNumberById('correctAnswers') ??
        readDomNumberById('correctAnswersCount');

      const directMax =
        readDomNumberById('max') ??
        readDomNumberById('total') ??
        readDomNumberById('totalQuestions') ??
        readDomNumberById('questionsToAdvance') ??
        readDomNumberById('attemptCount') ??
        readDomNumberById('attempts') ??
        readDomNumberById('totalAttempts');

      if (directScore != null) {
        const max = directMax != null ? directMax : (directScore > 0 ? directScore : null);
        return { score: directScore, max };
      }

      const selectors = [
        '[id*="score" i]', '[class*="score" i]',
        '[id*="result" i]', '[class*="result" i]',
        '[id*="correct" i]', '[class*="correct" i]',
        '[data-score]', '[data-points]', '[data-max]'
      ];
      const candidates = Array.from(document.querySelectorAll(selectors.join(',')));
      for (const el of candidates) {
        const dataScore = el.getAttribute('data-score') || el.getAttribute('data-points');
        const dataMax = el.getAttribute('data-max');
        if (dataScore != null) {
          const score = Number(dataScore);
          const max = dataMax != null ? Number(dataMax) : null;
          if (!Number.isNaN(score)) return { score, max: Number.isNaN(max) ? null : max };
        }
        const text = (el.textContent || '').trim();
        const scoreRegex = new RegExp('(\d+)\s*\/\s*(\d+)');
        const m = text.match(scoreRegex);
        if (m) return { score: Number(m[1]), max: Number(m[2]) };
      }
    } catch (e) {}
    return { score: null, max: null };
  }

  function summarizeFormValue(t) {
    try {
      if (!t) return null;
      const tag = t.tagName ? String(t.tagName).toLowerCase() : '';
      const type = (t.type || '').toLowerCase();
      if (tag === 'select') {
        const opt = t.selectedOptions && t.selectedOptions[0] ? t.selectedOptions[0] : null;
        if (opt) return String(opt.text || opt.value || '').trim().substring(0, 120);
      }
      if (tag === 'input' && (type === 'checkbox' || type === 'radio')) {
        return t.checked ? (t.value != null ? String(t.value).substring(0, 120) : 'checked') : 'unchecked';
      }
      return t.value != null ? String(t.value).substring(0, 120) : null;
    } catch {
      return null;
    }
  }

  function getDashboardSignature() {
    try {
      const scoreInfo = extractScoreFromDom();
      const dashboard = captureDashboardSnapshot();
      return [
        scoreInfo && scoreInfo.score != null ? scoreInfo.score : '',
        scoreInfo && scoreInfo.max != null ? scoreInfo.max : '',
        dashboard && dashboard.selector ? dashboard.selector : '',
        dashboard && dashboard.text ? String(dashboard.text).substring(0, 240) : ''
      ].join('|');
    } catch (e) {
      return '';
    }
  }

  function computeMetrics(actions) {
    const elapsedSec = Math.max(0, Math.round((Date.now() - xapiState.startTime) / 1000));
    const actionTypes = {};
    const uniqueTargets = new Set();
    let seqSingle = 0;
    let seqMulti = 0;
    let headOn = 0;
    let extremes = 0;

    let prev = null;
    actions.forEach(a => {
      actionTypes[a.type] = (actionTypes[a.type] || 0) + 1;
      const t = a.data || {};
      const key = [t.tag, t.id, t.name, t.text, t.value].filter(Boolean).join('|');
      if (key) uniqueTargets.add(key);

      if (prev && prev.type !== a.type) {
        seqSingle++;
        const prevKey = prev.data ? [prev.data.tag, prev.data.id, prev.data.name, prev.data.text, prev.data.value].filter(Boolean).join('|') : '';
        if (prevKey && key && prevKey !== key) seqMulti++;
      }

      const textBlob = [t.text, t.id, t.name, t.value].filter(Boolean).join(' ').toLowerCase();
      if (textBlob.includes('head-on') || textBlob.includes('headon')) headOn++;
      if (textBlob.includes('mass') || textBlob.includes('speed') || textBlob.includes('velocity')) extremes++;
      prev = a;
    });

    return { elapsedSec, actionTypes, uniqueTargets: uniqueTargets.size, seqSingle, seqMulti, headOn, extremes };
  }

  function buildFeedback(summary, score, max, actionLog) {
    const lines = [];
    lines.push('Feedback');
    lines.push('Interactive Response Assistant');
    lines.push(new Date().toLocaleString());
    lines.push('Interactions: ' + summary.interactions);
    lines.push('Elapsed Time: ' + summary.elapsedSec + 's');
    if (score != null) {
      lines.push('Score: ' + score + (max != null ? (' / ' + max) : ''));
    }
    lines.push('Unique Explorations: ' + summary.uniqueTargets);
    const diversity = Object.keys(summary.actionTypes)
      .map(k => k + ': ' + summary.actionTypes[k])
      .join(', ');
    lines.push('Diversity — ' + (diversity || 'n/a'));
    lines.push('');
    lines.push('Action Log:');
    if (Array.isArray(actionLog) && actionLog.length) {
      actionLog.forEach(a => {
        const label = a && a.label ? a.label : (a && a.type ? a.type : 'event');
        const time = (a && a.t != null) ? a.t : 0;
        lines.push('t=' + time + 's ' + label);
      });
    }
    return lines.join('<br>');
  }

  function buildPayload(reason) {
    const actions = xapiState.actions.slice(-80);
    const scoreInfo = extractScoreFromDom();
    const metrics = computeMetrics(actions);
    const dashboard = captureDashboardSnapshot();
    const summary = {
      interactions: actions.length,
      elapsedSec: metrics.elapsedSec,
      actionTypes: metrics.actionTypes,
      uniqueTargets: metrics.uniqueTargets,
      seqSingle: metrics.seqSingle,
      seqMulti: metrics.seqMulti,
      headOn: metrics.headOn,
      extremes: metrics.extremes
    };

    const actionLog = actions.slice(-12).map(a => {
      const seconds = Math.max(0, Math.round((a.t - xapiState.startTime) / 100) / 10);
      const label = a.data && (a.data.text || a.data.id || a.data.name || a.data.tag) ?
        [a.data.text || '', a.data.id || '', a.data.name || '', a.data.tag || ''].filter(Boolean).join(' ').trim() : '';
      return { t: Number(seconds.toFixed(1)), type: a.type, label };
    });
    const feedback = buildFeedback(summary, scoreInfo.score, scoreInfo.max, actionLog);

    return {
      score: scoreInfo.score != null ? scoreInfo.score : 0,
      max: scoreInfo.max != null ? scoreInfo.max : null,
      feedback,
      reason,
      startedAt: xapiState.startTime,
      summary,
      actionLog,
      actions,
      dashboard,
      details: {
        summary,
        actionLog,
        dashboard
      }
    };
  }

  function signatureOfPayload(p) {
    try {
      const last = p && p.actions && p.actions.length ? p.actions[p.actions.length - 1] : null;
      const dashboard = p && p.dashboard ? p.dashboard : null;
      return [
        p && p.actions ? p.actions.length : 0,
        last ? last.t : 0,
        p && p.score != null ? p.score : '',
        p && p.max != null ? p.max : '',
        dashboard && dashboard.selector ? dashboard.selector : '',
        dashboard && dashboard.text ? String(dashboard.text).substring(0, 240) : ''
      ].join('|');
    } catch {
      return String(Date.now());
    }
  }

  function flush(reason) {
    const p = buildPayload(reason);
    const sig = signatureOfPayload(p);
    if (sig === flushState.lastSig) return;
    flushState.lastSig = sig;
    flushState.lastSentAt = Date.now();
    safeStore(p);
  }

  function scheduleFlush(reason, delayMs) {
    if (flushState.timer) clearTimeout(flushState.timer);
    const d = typeof delayMs === 'number' ? delayMs : 1200;
    flushState.timer = setTimeout(() => {
      flushState.timer = null;
      // small throttle to avoid flooding
      if (Date.now() - flushState.lastSentAt < 700) return scheduleFlush(reason, 700);
      flush(reason);
    }, d);
  }

  function parseAnalyticsEntry(entry) {
    try {
      const timeEl = entry.querySelector ? entry.querySelector('.log-time') : null;
      const actionEl = entry.querySelector ? entry.querySelector('.log-action') : null;
      const valueEl = entry.querySelector ? entry.querySelector('.log-value') : null;

      const timeText = timeEl ? timeEl.textContent : (entry.textContent || '');
      const actionText = actionEl ? actionEl.textContent : null;
      const valueText = valueEl ? valueEl.textContent : null;

      const timeMatch = /t=([0-9.]+)s/i.exec(timeText);
      const timeSec = timeMatch ? Number(timeMatch[1]) : null;

      const label = [actionText, valueText].filter(Boolean).join(' ').trim();
      return {
        timeSec: Number.isFinite(timeSec) ? timeSec : null,
        action: actionText ? actionText.trim() : null,
        details: valueText ? valueText.trim() : null,
        label: label || null
      };
    } catch (e) {
      return null;
    }
  }

  function hookLearningAnalyticsLog() {
    try {
      if (window.__xapiLearningAnalyticsHooked) return;
      window.__xapiLearningAnalyticsHooked = true;

      const seen = new Set();

      function recordEntry(entry) {
        const parsed = parseAnalyticsEntry(entry);
        if (!parsed) return;
        const sig = [parsed.timeSec, parsed.action, parsed.details].join('|');
        if (seen.has(sig)) return;
        seen.add(sig);
        if (seen.size > 300) {
          const keep = Array.from(seen).slice(-200);
          seen.clear();
          keep.forEach(k => seen.add(k));
        }

        const ts = parsed.timeSec != null
          ? (xapiState.startTime + Math.round(parsed.timeSec * 1000))
          : Date.now();

        logAction('learning-analytics', {
          text: parsed.label || parsed.action || 'Analytics Event',
          action: parsed.action || null,
          details: parsed.details || null,
          source: 'learning-analytics',
          timeSec: parsed.timeSec
        }, ts);

        scheduleFlush('learning-analytics', 400);
      }

      function attachToContainer(container) {
        if (!container || container.__xapiObserverAttached) return;
        container.__xapiObserverAttached = true;

        Array.from(container.querySelectorAll('.log-entry')).forEach(recordEntry);

        const observer = new MutationObserver(mutations => {
          mutations.forEach(mutation => {
            mutation.addedNodes.forEach(node => {
              if (!(node instanceof Element)) return;
              if (node.classList.contains('log-entry')) {
                recordEntry(node);
              } else {
                node.querySelectorAll && node.querySelectorAll('.log-entry').forEach(recordEntry);
              }
            });
          });
        });

        observer.observe(container, { childList: true, subtree: true });
      }

      function tryAttach() {
        const container = document.getElementById('logContainer') || document.querySelector('.analytics-content #logContainer');
        if (container) {
          attachToContainer(container);
          return true;
        }
        const entry = document.querySelector('.log-entry');
        if (entry && entry.parentElement) {
          attachToContainer(entry.parentElement);
          return true;
        }
        return false;
      }

      if (tryAttach()) return;

      let attempts = 0;
      const timer = setInterval(() => {
        attempts += 1;
        if (tryAttach() || attempts > 20) {
          clearInterval(timer);
        }
      }, 500);
    } catch (e) {}
  }

  // Keyboard tracking for text-based inputs and textareas
  // This logs each keystroke as a lightweight "key" action so it
  // appears in the same timeline analytics as clicks.
  document.addEventListener('keydown', (e) => {
    const t = e.target;
    if (!t || !t.tagName) return;

    const tag = String(t.tagName).toLowerCase();
    const type = (t.type || '').toLowerCase();

    // Limit to typical text input fields to avoid flooding from
    // every key on the whole page.
    const isTextField = (
      tag === 'input' && (!type || type === 'text' || type === 'search' || type === 'email' || type === 'number')
    ) || tag === 'textarea';

    if (!isTextField) return;

    logAction('key', {
      tag,
      id: t.id || null,
      name: t.name || null,
      value: t.value != null ? String(t.value).substring(0, 120) : null,
      text: null,
      key: String(e.key).substring(0, 40),
      code: String(e.code || '').substring(0, 40)
    });

    // Group keystrokes slightly to avoid sending on every single key.
    scheduleFlush('auto-key', 800);
  }, true);

  document.addEventListener('click', (e) => {
    // Track ALL clicks (not only buttons/links)
    const t = e.target;
    if (!t) return;
    logAction('click', {
      tag: t.tagName ? String(t.tagName).toLowerCase() : null,
      id: t.id || null,
      name: t.name || null,
      text: (t.textContent || '').trim().substring(0, 80)
    });
    scheduleFlush('auto-click');
  }, true);

  // Also flush when the tab is hidden / page unloads
  document.addEventListener('visibilitychange', () => {
    // In quiz contexts, we avoid sending "pause" events when switching tabs,
    // because SLS learners commonly return to the parent tab.
    try {
      if (document.hidden && window.__xapiDisablePauseFlush === true) return;
    } catch (e) {}
    if (document.hidden) flush('pause');
  });
  window.addEventListener('beforeunload', () => {
    try { flush('unload'); } catch (e) {}
  });

  document.addEventListener('change', (e) => {
    const t = e.target;
    if (!t || !t.tagName) return;

    const tag = String(t.tagName).toLowerCase();
    const type = (t.type || '').toLowerCase();
    const trackChange =
      tag === 'select' ||
      tag === 'textarea' ||
      (tag === 'input' && ['range', 'number', 'date', 'time', 'color'].includes(type));

    if (!trackChange) return;

    logAction('change', {
      tag,
      type: type || null,
      id: t.id || null,
      name: t.name || null,
      value: summarizeFormValue(t),
      text: tag === 'select' && t.selectedOptions && t.selectedOptions[0]
        ? String(t.selectedOptions[0].text || '').trim().substring(0, 80)
        : null
    });
    scheduleFlush('auto-change', 300);
  }, true);

  const releaseEvent = window.PointerEvent ? 'pointerup' : 'mouseup';
  document.addEventListener(releaseEvent, (e) => {
    const target = e.target && e.target.closest ? e.target.closest('canvas,svg') : null;
    if (!target) return;

    logAction('pointerup', {
      tag: target.tagName ? String(target.tagName).toLowerCase() : null,
      id: target.id || null,
      name: target.name || null,
      text: target.getAttribute ? (target.getAttribute('aria-label') || target.getAttribute('title') || null) : null
    });
    scheduleFlush('auto-canvas', 250);
  }, true);

  function startTimelineAutoSave() {
    if (window.__xapiTimelineAutoSaveStarted) return;
    window.__xapiTimelineAutoSaveStarted = true;

    let lastDashboardSig = getDashboardSignature();

    setInterval(() => {
      const sig = getDashboardSignature();
      if (!sig || sig === lastDashboardSig) return;
      lastDashboardSig = sig;
      if (xapiState.actions.length > 0) {
        scheduleFlush('dashboard-change', 250);
      }
    }, 2000);

    setInterval(() => {
      if (xapiState.actions.length > 0) {
        flush('heartbeat');
      }
    }, 15000);
  }

  function addSaveBtn() {
    return;
    if (document.getElementById('xapi-save-button')) return;
    const b = document.createElement('button');
    b.id = 'xapi-save-button';
    b.textContent = '💾 Save to SLS';
    b.style.cssText = 'position:fixed;bottom:20px;right:20px;padding:10px 16px;background:#1976d2;color:white;border:none;border-radius:8px;z-index:9999';
    b.onclick = () => flush('manual-save');
    document.body.appendChild(b);
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      hookLearningAnalyticsLog();
      startTimelineAutoSave();
    });
  } else {
    hookLearningAnalyticsLog();
    startTimelineAutoSave();
  }
})();
    </script>
    <!-- xAPI Quiz Tracking -->
    <script>
(function() {
  // Unified tracking: quiz instrumentation is always present.
  // We DO NOT force statement sending here. The vendor glue (lib/xAPI.js)
  // will still send state reliably; statements are best-effort depending on CORS.

  const qs = { questions: [], answers: {}, attempted: 0 };
  const quizMeta = { total: 0, correct: 0, max: 0, lastScoreSent: null };
  const history = [];
  const flushState = { timer: null, lastSentAt: 0, lastSig: '' };
  const answerDedup = { lastSig: '', lastAt: 0 };
  const metricsState = { lastKey: '', timer: null };

  // IMPORTANT:
  // - Do not send statements directly with fetch/XHR (CORS failures in SLS hosting)
  // - Use window.storeState(...) only; vendor/xAPI.js will send state + score statement.
  function safeStore(payload) {
    try {
      if (typeof window.storeState === 'function') {
        window.storeState(payload);
      }
    } catch (e) {
      // no-op
    }
  }

  function pushHistory(evt) {
    history.push(Object.assign({ t: Date.now() }, evt));
    if (history.length > 80) history.shift();
  }

  function toNumber(val) {
    const n = Number(val);
    return Number.isFinite(n) ? n : null;
  }

  function readDomNumber(id) {
    try {
      const el = document.getElementById(id);
      if (!el) return null;
      const text = (el.textContent || '').replace(/[^0-9.]/g, '');
      return toNumber(text);
    } catch {
      return null;
    }
  }

  function getQuestionText() {
    try {
      const el = document.getElementById('question');
      if (el && el.textContent) return el.textContent.trim().substring(0, 160);
    } catch {}
    return null;
  }

  function getGameState() {
    try { return window.gameState || null; } catch { return null; }
  }

  function getMetricsFromGameState() {
    const gs = getGameState();
    if (!gs) return null;
    const attempted = toNumber(gs.totalAttempts != null ? gs.totalAttempts : null);
    const correct = toNumber(gs.correctCount != null ? gs.correctCount : null);
    const points = toNumber(gs.score != null ? gs.score : null);
    const max = toNumber(gs.questionsToAdvance != null ? gs.questionsToAdvance : null);
    const hasAny = attempted != null || correct != null || points != null || max != null;
    if (!hasAny) return null;
    return { attempted, correct, points, max };
  }

  function getMetricsFromDom() {
    const attempted = readDomNumber('totalAttempts');
    const correct = readDomNumber('correctCount');
    const points = readDomNumber('score');
    const max = readDomNumber('totalQuestions');
    const hasAny = attempted != null || correct != null || points != null || max != null;
    if (!hasAny) return null;
    return { attempted, correct, points, max };
  }

  function getMetrics() {
    return getMetricsFromGameState() || getMetricsFromDom() || null;
  }

  function syncFromMetrics() {
    const m = getMetrics();
    if (!m) return;
    if (m.attempted != null) qs.attempted = m.attempted;
    if (m.correct != null) quizMeta.correct = m.correct;
    if (m.max != null) quizMeta.max = m.max;
  }

  function startMetricsWatcher() {
    if (metricsState.timer) return;
    metricsState.timer = setInterval(() => {
      const m = getMetrics();
      if (!m) return;
      const key = [m.attempted, m.correct, m.points, m.max].join('|');
      if (key === metricsState.lastKey) return;
      metricsState.lastKey = key;
      syncFromMetrics();
      scheduleFlush('auto-metrics');
      maybeComputeAndSendScore();
    }, 1200);
  }

  function recordAnswer(evt) {
    try {
      const sig = [evt.q, evt.value, evt.correct, evt.expected].join('|');
      const now = Date.now();
      if (sig === answerDedup.lastSig && now - answerDedup.lastAt < 800) return;
      answerDedup.lastSig = sig;
      answerDedup.lastAt = now;
      pushHistory(evt);

      const gs = getGameState();
      const hasCounts = gs && (gs.totalAttempts != null || gs.correctCount != null);
      if (!hasCounts) {
        qs.attempted++;
        if (evt.correct === true) quizMeta.correct++;
      }
    } catch (e) {}
  }

  // Build per-question breakdown for SLS and LRS analytics.
  // Groups answer-like events by question id/text and derives:
  // - question id/text
  // - last user selection
  // - inferred correct option (when available)
  // - simple marks (1 for correct, 0 for not-certain/incorrect)
  // This is emitted as quiz.items[] and also mirrored under
  // hiddenMarks so vendor/xAPI.js can push it into result.extensions.
  function buildQuizBreakdown() {
    const byQ = new Map();

    history.forEach(evt => {
      if (!evt) return;
      const type = (evt.type || '').toString();
      if (!/answer/.test(type)) return; // focus on answer-like events

      const keyRaw = evt.q != null ? String(evt.q) : '';
      const key = keyRaw || (evt.name != null ? String(evt.name) : '');
      if (!key) return;

      let rec = byQ.get(key);
      if (!rec) {
        rec = {
          id: key,
          question: keyRaw || key,
          correctOption: null,
          lastEvent: null
        };
        byQ.set(key, rec);
      }

      rec.lastEvent = evt;
      if (evt.expected != null && rec.correctOption == null) {
        rec.correctOption = String(evt.expected).substring(0, 160);
      }
    });

    const items = [];
    let totalMarks = 0;
    let maxMarks = 0;
    let idx = 0;

    byQ.forEach((rec, key) => {
      const ev = rec.lastEvent || {};
      const isCorrect = ev.correct === true;
      const marks = isCorrect ? 1 : 0;
      const max = 1;

      items.push({
        id: key || ('q' + (idx + 1)),
        question: rec.question || null,
        correctOption: rec.correctOption || (ev.expected != null ? String(ev.expected).substring(0, 160) : null),
        userSelection: ev.value != null ? String(ev.value).substring(0, 160) : null,
        marks,
        maxMarks: max
      });

      totalMarks += marks;
      maxMarks += max;
      idx++;
    });

    return { items, totalMarks, maxMarks };
  }

  function signatureOfPayload(p) {
    try {
      const last = p && p.history && p.history.length ? p.history[p.history.length - 1] : null;
      return String(p.reason) + '|' + p.score + '/' + p.max + '|' + (p.history ? p.history.length : 0) + '|' + (last ? last.t : 0);
    } catch {
      return String(Date.now());
    }
  }

  function flush(reason) {
    syncFromMetrics();
    const max = quizMeta.max || quizMeta.total || qs.questions.length || 0;
    const raw = (quizMeta.correct != null && quizMeta.correct > 0) ? quizMeta.correct : qs.attempted;
    const m = getMetrics();
    const breakdown = buildQuizBreakdown();
    const hasBreakdown = breakdown && breakdown.maxMarks > 0;
    const finalScore = hasBreakdown ? breakdown.totalMarks : raw;
    const finalMax = hasBreakdown ? breakdown.maxMarks : max;

    const payload = {
      score: finalScore,
      max: finalMax,
      feedback: 'Quiz ' + reason + ': ' + raw + '/' + max + ' (correct ' + quizMeta.correct + '/' + max + ')',
      reason,
      quiz: { attempted: qs.attempted, correct: quizMeta.correct, total: max, points: m && m.points != null ? m.points : null },
      history: history.slice(-80)
    };

    // Attach per-question breakdown when available so that vendor/xAPI.js
    // can expose it via result.extensions.hiddenMarks and result.extensions.quizSummary.
    if (hasBreakdown && breakdown.items.length) {
      payload.quiz.items = breakdown.items;
      payload.hiddenMarks = {
        totalMarks: breakdown.totalMarks,
        maxMarks: breakdown.maxMarks,
        items: breakdown.items
      };
    }
    const sig = signatureOfPayload(payload);
    if (sig === flushState.lastSig) return;
    flushState.lastSig = sig;
    flushState.lastSentAt = Date.now();
    safeStore(payload);
  }

  function scheduleFlush(reason, delayMs) {
    if (flushState.timer) clearTimeout(flushState.timer);
    const d = typeof delayMs === 'number' ? delayMs : 700;
    flushState.timer = setTimeout(() => {
      flushState.timer = null;
      if (Date.now() - flushState.lastSentAt < 500) return scheduleFlush(reason, 500);
      flush(reason);
    }, d);
  }

  // Best-effort: attempt to infer correctness from common patterns.
  // If we can't infer, we still send a score statement with raw=attempted.
  function isCorrectFromInput(inputEl) {
    try {
      if (!inputEl) return null;
      // Common patterns:
      // - data-correct="true"
      // - aria-correct / data-answer
      // - value matches data-correct-value on group container
      if (inputEl.dataset && (inputEl.dataset.correct === 'true' || inputEl.dataset.isCorrect === 'true')) return true;
      const group = inputEl.closest('[data-correct],[data-answer],[data-correct-value]');
      if (group) {
        const correct = group.dataset.correct || group.dataset.answer || group.dataset.correctValue;
        if (correct != null) return String(inputEl.value).trim() === String(correct).trim();
      }
      // Heuristic: label contains "(correct)"
      const lbl = inputEl.closest('label');
      if (lbl && /correct/i.test(lbl.textContent)) return true;
      return null;
    } catch {
      return null;
    }
  }

  function sendScoreToSLS(scoreRaw, max, feedback) {
    try {
      if (typeof window.storeState === 'function') {
        const breakdown = buildQuizBreakdown();
        const hasBreakdown = breakdown && breakdown.maxMarks > 0;

        const state = {
          score: scoreRaw,
          max: max,
          feedback: feedback || '',
          quiz: { attempted: qs.attempted, correct: quizMeta.correct, total: max },
          history: history.slice(-80)
        };

        if (hasBreakdown && breakdown.items.length) {
          state.quiz.items = breakdown.items;
          state.hiddenMarks = {
            totalMarks: breakdown.totalMarks,
            maxMarks: breakdown.maxMarks,
            items: breakdown.items
          };
        }

        window.storeState(state);
      }
    } catch (e) {}
  }

  function maybeComputeAndSendScore() {
    // If we know quizMeta.max, send a score on each change.
    // Debounced by lastScoreSent.
    syncFromMetrics();
    const max = quizMeta.max || quizMeta.total || qs.questions.length || 0;
    const raw = (quizMeta.correct != null && quizMeta.correct > 0) ? quizMeta.correct : qs.attempted;
    const scoreKey = raw + '/' + max;
    if (quizMeta.lastScoreSent === scoreKey) return;
    quizMeta.lastScoreSent = scoreKey;

    const feedback = 'Score: ' + raw + '/' + max;
    sendScoreToSLS(raw, max, feedback);
    // Score statement sending is handled by vendor/xAPI.js when storeState is called.
    scheduleFlush('auto-score');
  }

  function initQuiz() {
    const rgs = {};
    document.querySelectorAll('input[type="radio"]').forEach(inp => {
      if (!rgs[inp.name]) { rgs[inp.name] = true; qs.questions.push(inp.name); }
    });
    quizMeta.total = qs.questions.length;
    quizMeta.max = quizMeta.total;
    document.addEventListener('change', (e) => {
      if (e.target.matches('input[type="radio"], input[type="checkbox"]')) {
        const ix = qs.questions.indexOf(e.target.name);
        if (ix >= 0) {
          const ok = isCorrectFromInput(e.target);
          recordAnswer({
            type: 'answer',
            q: e.target.name,
            value: String(e.target.value).substring(0, 120),
            correct: ok === true ? true : (ok === false ? false : null)
          });
          // Flush quickly so click history / correct-wrong shows up
          scheduleFlush('answer');
          maybeComputeAndSendScore();
        }
      }
    });

    // Button-based answers (common in Claude-generated interactives)
    document.addEventListener('click', (e) => {
      const btn = e.target && e.target.closest ? e.target.closest('button,[role="button"],.answer-btn') : null;
      if (!btn) return;
      const inGrid = btn.closest && btn.closest('#answerGrid');
      const looksLikeAnswer = inGrid || btn.classList.contains('answer-btn') || btn.dataset.answer != null;
      if (!looksLikeAnswer) return;

      const valueRaw = btn.dataset.answer != null ? btn.dataset.answer : (btn.textContent || '');
      const value = String(valueRaw).trim().substring(0, 120);
      const gs = getGameState();
      const expected = gs && gs.correctAnswer != null ? String(gs.correctAnswer) : null;
      const correct = expected != null ? (String(value) === String(expected)) : null;

      recordAnswer({
        type: 'answer_click',
        q: getQuestionText(),
        value,
        correct,
        expected
      });

      scheduleFlush('answer_click');
      maybeComputeAndSendScore();
    }, true);

    startMetricsWatcher();

    // Do not flush on visibility change for quiz mode.
    // Switching back to the parent SLS tab should not mark the activity as paused.
    window.addEventListener('beforeunload', () => { try { flush('unload'); } catch (e) {} });
  }
  function hookAnalytics() {
    try {
      if (typeof window.logAnalytics !== 'function') return;
      if (window.__xapiAnalyticsHooked) return;
      window.__xapiAnalyticsHooked = true;

      const original = window.logAnalytics;
      window.logAnalytics = function(action, challenge, studentAnswer, correctAnswer, result) {
        try {
          original.apply(this, arguments);
        } catch (e) {}

        const actionType = (action || '').toString().toLowerCase();
        const isAnswer = actionType === 'answer_check' || actionType === 'answer' || actionType === 'check_answer';
        const isStart = actionType === 'game_start' || actionType === 'start' || actionType === 'level_start';

        recordAnswer({
          type: actionType || 'event',
          q: challenge ? String(challenge).substring(0, 140) : null,
          value: studentAnswer != null ? String(studentAnswer).substring(0, 140) : null,
          correct: result === 'correct' ? true : (result === 'incorrect' ? false : null),
          expected: correctAnswer != null ? String(correctAnswer).substring(0, 140) : null,
          result: result || null
        });

        if (isAnswer) {
          scheduleFlush('answer_check');
          maybeComputeAndSendScore();
        } else if (isStart) {
          scheduleFlush('game_start');
        } else {
          scheduleFlush(actionType || 'analytics');
        }
      };
    } catch (e) {}
  }

  function hookCheckAnswer() {
    try {
      if (window.__xapiCheckAnswerHooked) return;
      if (typeof window.checkAnswer !== 'function') return;
      const original = window.checkAnswer;
      window.checkAnswer = function(selectedAnswer, btn) {
        try {
          const gs = getGameState();
          const expected = gs && gs.correctAnswer != null ? String(gs.correctAnswer) : null;
          const value = selectedAnswer != null ? String(selectedAnswer).substring(0, 120) : null;
          const correct = expected != null && value != null ? (String(value) === String(expected)) : null;
          recordAnswer({
            type: 'answer_check',
            q: getQuestionText(),
            value,
            correct,
            expected
          });
          scheduleFlush('answer_check');
          maybeComputeAndSendScore();
        } catch (e) {}
        return original.apply(this, arguments);
      };
      window.__xapiCheckAnswerHooked = true;
    } catch (e) {}
  }

  function startCheckAnswerWatcher() {
    if (window.__xapiCheckAnswerWatch) return;
    window.__xapiCheckAnswerWatch = true;
    const timer = setInterval(() => {
      hookCheckAnswer();
      if (window.__xapiCheckAnswerHooked) clearInterval(timer);
    }, 600);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      initQuiz();
      hookAnalytics();
      startCheckAnswerWatcher();
    });
  } else {
    initQuiz();
    hookAnalytics();
    startCheckAnswerWatcher();
  }
})();
    </script>