<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
    }

    /* Top Equation Banner */
    .equation-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      font-size: 20px;
      font-weight: 700;
      padding: 8px 12px;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
    }
    .eq-part {
      padding: 3px 8px;
      border-radius: 6px;
      transition: all 0.25s ease;
      cursor: pointer;
      user-select: none;
    }
    .eq-part.part-m { color: #2563eb; background: #eff6ff; }
    .eq-part.part-op { color: #d97706; background: #fffbeb; }
    .eq-part.part-res { color: #16a34a; background: #f0fdf4; }
    .eq-part.active {
      box-shadow: 0 0 0 2px currentColor;
      transform: translateY(-1px);
    }

    /* Cards Grid */
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .step-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
      transition: all 0.25s ease;
      cursor: pointer;
      position: relative;
    }
    .step-card.active {
      border-color: #94a3b8;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
      background: #ffffff;
    }
    .step-card.inactive {
      opacity: 0.55;
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 6px;
      border-radius: 4px;
    }
    .badge-m { background: #dbeafe; color: #1d4ed8; }
    .badge-op { background: #fef3c7; color: #b45309; }
    .badge-res { background: #dcfce7; color: #15803d; }

    .icon-box {
      font-size: 28px;
      line-height: 1;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card-math {
      font-size: 15px;
      font-weight: 700;
    }
    .math-m { color: #2563eb; }
    .math-op { color: #d97706; }
    .math-res { color: #16a34a; }

    .card-label {
      font-size: 12px;
      color: #475569;
      line-height: 1.25;
      font-weight: 500;
    }

    /* Story Card */
    .story-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .story-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }
    .story-text {
      font-size: 14px;
      line-height: 1.45;
      color: #1e2945;
    }
    .hl-m {
      background: #dbeafe;
      color: #1d4ed8;
      font-weight: 600;
      padding: 1px 4px;
      border-radius: 4px;
      transition: all 0.2s ease;
    }
    .hl-op {
      background: #fef3c7;
      color: #b45309;
      font-weight: 600;
      padding: 1px 4px;
      border-radius: 4px;
      transition: all 0.2s ease;
    }
    .hl-res {
      background: #dcfce7;
      color: #15803d;
      font-weight: 600;
      padding: 1px 4px;
      border-radius: 4px;
      transition: all 0.2s ease;
    }
    .hl-dim {
      opacity: 0.35;
      background: transparent;
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin-top: auto;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s ease;
    }
    .btn:hover { background: #f1f5f9; }
    .btn.active-btn {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }

    @media (max-width: 420px) {
      .equation-bar { font-size: 17px; }
      .icon-box { font-size: 24px; }
      .card-math { font-size: 13px; }
      .card-label { font-size: 11px; }
      .story-text { font-size: 13px; }
    }
  </style>
</head>
<body>

  
  <div class="equation-bar">
    <span class="eq-part part-m" id="eqM" onclick="setStep(0)">m</span>
    <span class="eq-part part-op" id="eqOp" onclick="setStep(1)">− 12.50</span>
    <span class="eq-part part-res" id="eqRes" onclick="setStep(2)">= 35.00</span>
  </div>

  
  <div class="cards-grid">
    <div class="step-card" id="card0" onclick="setStep(0)">
      <span class="badge badge-m">Step 1</span>
      <div class="icon-box">👛</div>
      <div class="card-math math-m">m</div>
      <div class="card-label">Starting<br>money</div>
    </div>

    <div class="step-card" id="card1" onclick="setStep(1)">
      <span class="badge badge-op">Step 2</span>
      <div class="icon-box">📖🏷️</div>
      <div class="card-math math-op">− $12.50</div>
      <div class="card-label">Bought<br>a book</div>
    </div>

    <div class="step-card" id="card2" onclick="setStep(2)">
      <span class="badge badge-res">Step 3</span>
      <div class="icon-box">💵</div>
      <div class="card-math math-res">= $35.00</div>
      <div class="card-label">Amount<br>left</div>
    </div>
  </div>

  
  <div class="story-card">
    <div class="story-title">Real-World Story Problem</div>
    <div class="story-text" id="storyBox">
      <span class="hl-m" id="hl0">Sam had some money (m).</span>
      <span class="hl-op" id="hl1">He bought a book for $12.50</span>
      <span class="hl-res" id="hl2">and had $35.00 left.</span>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="btn0" onclick="setStep(0)">1. Variable</button>
    <button class="btn" id="btn1" onclick="setStep(1)">2. Action</button>
    <button class="btn" id="btn2" onclick="setStep(2)">3. Result</button>
    <button class="btn" id="btnAll" onclick="setStep(3)">Show All</button>
    <button class="btn" id="btnPlay" onclick="togglePlay()">⏸</button>
  </div>

  <script>
    let currentStep = 0;
    let playing = true;
    let timer = null;

    const cards = [document.getElementById('card0'), document.getElementById('card1'), document.getElementById('card2')];
    const eqParts = [document.getElementById('eqM'), document.getElementById('eqOp'), document.getElementById('eqRes')];
    const hls = [document.getElementById('hl0'), document.getElementById('hl1'), document.getElementById('hl2')];
    const btns = [document.getElementById('btn0'), document.getElementById('btn1'), document.getElementById('btn2'), document.getElementById('btnAll')];
    const playBtn = document.getElementById('btnPlay');

    function updateUI() {
      // Step buttons
      btns.forEach((b, i) => {
        b.classList.toggle('active-btn', i === currentStep);
      });

      if (currentStep === 3) {
        // Show all
        cards.forEach(c => { c.classList.remove('inactive'); c.classList.add('active'); });
        eqParts.forEach(e => e.classList.add('active'));
        hls.forEach(h => { h.classList.remove('hl-dim'); });
      } else {
        // Highlight active step only
        cards.forEach((c, i) => {
          c.classList.toggle('active', i === currentStep);
          c.classList.toggle('inactive', i !== currentStep);
        });
        eqParts.forEach((e, i) => {
          e.classList.toggle('active', i === currentStep);
        });
        hls.forEach((h, i) => {
          h.classList.toggle('hl-dim', i !== currentStep);
        });
      }
    }

    function setStep(idx, userAction = true) {
      currentStep = idx;
      if (userAction && playing) {
        pause();
      }
      updateUI();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 4;
      updateUI();
    }

    function startTimer() {
      timer = setInterval(nextStep, 3200);
    }

    function pause() {
      playing = false;
      clearInterval(timer);
      playBtn.textContent = '▶';
    }

    function play() {
      playing = true;
      playBtn.textContent = '⏸';
      startTimer();
    }

    function togglePlay() {
      if (playing) pause();
      else play();
    }

    // Initialize
    updateUI();
    startTimer();
  </script>
</body>
</html>

Creating Real-World Problems from Equations

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-wrap {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    /* Model Container */
    .model-box {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .equation {
      font-size: 20px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: 0.5px;
    }

    .equation span {
      color: #0284c7;
    }

    /* 4 Equal Groups */
    .groups-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 380px;
    }

    .group-item {
      background: #e0f2fe;
      border: 2px solid #38bdf8;
      border-radius: 8px;
      padding: 10px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
    }

    .group-icon {
      font-size: 20px;
      line-height: 1;
    }

    .group-label {
      font-size: 15px;
      font-weight: 700;
      color: #0369a1;
    }

    /* Total Bracket Bar */
    .total-bar {
      width: 100%;
      max-width: 380px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .bracket-line {
      width: 100%;
      height: 8px;
      border-left: 2px solid #64748b;
      border-right: 2px solid #64748b;
      border-bottom: 2px solid #64748b;
      border-radius: 0 0 4px 4px;
    }

    .total-badge {
      font-size: 14px;
      font-weight: 700;
      background: #f1f5f9;
      color: #334155;
      padding: 3px 10px;
      border-radius: 12px;
      border: 1px solid #cbd5e1;
    }

    /* Context Cards Grid */
    .contexts-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

    .context-btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .context-btn:hover {
      border-color: #94a3b8;
    }

    .context-btn.active {
      border-color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 0 0 1px #0284c7;
    }

    .ctx-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
    }

    .ctx-unit {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
    }

    .context-btn.active .ctx-unit {
      color: #0369a1;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="model-box">
      <div class="equation" id="eqText">4 · <span>p</span> = 26</div>

      <div class="groups-row">
        <div class="group-item">
          <span class="group-icon" id="icon1">🎟️</span>
          <span class="group-label" id="lbl1">$p</span>
        </div>
        <div class="group-item">
          <span class="group-icon" id="icon2">🎟️</span>
          <span class="group-label" id="lbl2">$p</span>
        </div>
        <div class="group-item">
          <span class="group-icon" id="icon3">🎟️</span>
          <span class="group-label" id="lbl3">$p</span>
        </div>
        <div class="group-item">
          <span class="group-icon" id="icon4">🎟️</span>
          <span class="group-label" id="lbl4">$p</span>
        </div>
      </div>

      <div class="total-bar">
        <div class="bracket-line"></div>
        <div class="total-badge" id="totalLbl">Total: $26</div>
      </div>
    </div>

    
    <div class="contexts-grid">
      <button class="context-btn active" id="btnA" onclick="setContext('tickets')">
        <div class="ctx-header"><span>🎟️</span> Tickets</div>
        <div class="ctx-unit">4 × $p = $26</div>
      </button>

      <button class="context-btn" id="btnB" onclick="setContext('baking')">
        <div class="ctx-header"><span>🌾</span> Flour</div>
        <div class="ctx-unit">4 × p lb = 26 lb</div>
      </button>
    </div>
  </div>

  <script>
    function setContext(type) {
      const isTickets = type === 'tickets';
      
      document.getElementById('btnA').classList.toggle('active', isTickets);
      document.getElementById('btnB').classList.toggle('active', !isTickets);

      const icon = isTickets ? '🎟️' : '🌾';
      const label = isTickets ? '$p' : 'p lb';
      const total = isTickets ? 'Total: $26' : 'Total: 26 lb';

      for (let i = 1; i <= 4; i++) {
        document.getElementById('icon' + i).textContent = icon;
        document.getElementById('lbl' + i).textContent = label;
      }
      document.getElementById('totalLbl').textContent = total;
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      background: transparent;
      padding: 10px;
      line-height: 1.35;
    }

    .header-banner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      text-align: center;
    }

    .equation-display {
      font-size: 22px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      padding: 6px 18px;
      border-radius: 12px;
      border: 1.5px solid #cbd5e1;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .frac-box {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      padding: 0 3px;
      font-family: "Cambria Math", "KaTeX_Math", "Times New Roman", serif;
    }

    .frac-num {
      border-bottom: 2.5px solid #1e293b;
      padding-bottom: 1px;
      line-height: 1;
    }

    .frac-den {
      padding-top: 2px;
      line-height: 1;
    }

    .math-sym {
      font-family: "Cambria Math", "KaTeX_Math", "Times New Roman", serif;
      font-style: italic;
    }

    .role-pills {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 600;
    }

    .pill {
      padding: 3px 10px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .pill-blue { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
    .pill-purple { background: #f3e8ff; color: #6b21a8; border: 1px solid #e9d5ff; }
    .pill-amber { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }

    .color-x { color: #2563eb; }
    .color-3 { color: #7c3aed; }
    .color-8 { color: #d97706; }

    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 10px;
    }

    @media (max-width: 540px) {
      .grid-container {
        grid-template-columns: 1fr;
      }
    }

    .column-card {
      border-radius: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .card-error {
      background: #fef2f2;
      border: 1.5px solid #fecaca;
    }

    .card-correct {
      background: #f0fdf4;
      border: 1.5px solid #bbf7d0;
    }

    .status-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      width: fit-content;
    }

    .status-error { background: #fee2e2; color: #dc2626; }
    .status-correct { background: #dcfce7; color: #16a34a; }

    .story-box {
      font-size: 12.5px;
      font-weight: 500;
      color: #334155;
      background: rgba(255, 255, 255, 0.85);
      padding: 7px 9px;
      border-radius: 6px;
      border: 1px solid rgba(0,0,0,0.06);
    }

    .token {
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 4px;
      white-space: nowrap;
    }
    .tok-blue { background: #bfdbfe; color: #1e40af; }
    .tok-purple { background: #e9d5ff; color: #581c87; }
    .tok-amber { background: #fde68a; color: #92400e; }

    .visual-flow {
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: #ffffff;
      padding: 8px 6px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      min-height: 56px;
      text-align: center;
    }

    .vis-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1px;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }

    .vis-icon {
      font-size: 17px;
      line-height: 1.2;
    }

    .arrow {
      color: #94a3b8;
      font-weight: 700;
      font-size: 14px;
    }

    .math-result {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .math-error { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
    .math-correct { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }

    .callout {
      font-size: 11.5px;
      padding: 7px 9px;
      border-radius: 6px;
      border-left: 3.5px solid transparent;
      color: #475569;
      background: #ffffff;
    }
    .callout-error {
      border-left-color: #ef4444;
      background: #fff8f8;
    }
    .callout-correct {
      border-left-color: #22c55e;
      background: #f8fdf9;
    }

    .math-inline {
      font-family: "Cambria Math", "KaTeX_Math", "Times New Roman", serif;
      font-weight: 700;
      color: #0f172a;
    }

    .rule-bar {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 7px 11px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #1e293b;
      font-weight: 500;
    }

    .rule-icon {
      font-size: 15px;
      color: #2563eb;
      flex-shrink: 0;
    }
  </style>
</head>
<body>

  
  <div class="header-banner">
    <div class="equation-display">
      <div class="frac-box">
        <span class="frac-num math-sym color-x">x</span>
        <span class="frac-den math-sym color-3">3</span>
      </div>
      <span>=</span>
      <span class="math-sym color-8">8</span>
    </div>
    <div class="role-pills">
      <span class="pill pill-blue">Numerator <b class="math-sym">x</b>: Unknown Total</span>
      <span class="pill pill-purple">Denominator <b class="math-sym">3</b>: Number of Groups</span>
      <span class="pill pill-amber">Quotient <b class="math-sym">8</b>: Amount per Group</span>
    </div>
  </div>

  
  <div class="grid-container">
    
    <div class="column-card card-error">
      <div class="status-badge status-error">✕ Common Trap: Reversing Quantities</div>
      
      <div class="story-box">
        "Marcus has <span class="token tok-purple">3 cookies</span> and divides them among <span class="token tok-amber">8 friends</span>."
      </div>

      <div class="visual-flow">
        <div class="vis-item">
          <span class="vis-icon">🍪🍪🍪</span>
          <span>3 Cookies</span>
        </div>
        <span class="arrow">→</span>
        <div class="vis-item">
          <span class="vis-icon">👥×8</span>
          <span>8 Friends</span>
        </div>
        <span class="arrow">→</span>
        <div class="math-result math-error">
          <span class="frac-box" style="font-size: 13px;">
            <span class="frac-num">3</span>
            <span class="frac-den">8</span>
          </span>
          <span style="margin-left: 4px;">= <i class="math-sym">x</i></span>
        </div>
      </div>

      <div class="callout callout-error">
        <b>Role Mismatch:</b> Here, 3 is the total being split and 8 is the group count (<span class="math-inline">3 ÷ 8 = 0.375</span> cookies each). This creates <span class="math-inline"><sup>3</sup>&frasl;<sub>8</sub> = x</span>, NOT <span class="math-inline"><sup>x</sup>&frasl;<sub>3</sub> = 8</span>.
      </div>
    </div>

    
    <div class="column-card card-correct">
      <div class="status-badge status-correct">✓ Correct Structure: Unknown Total</div>
      
      <div class="story-box">
        "Marcus splits a box of <span class="token tok-blue">x cookies</span> equally among <span class="token tok-purple">3 friends</span>, and each receives <span class="token tok-amber">8 cookies</span>."
      </div>

      <div class="visual-flow">
        <div class="vis-item">
          <span class="vis-icon">📦</span>
          <span><i>x</i> Cookies</span>
        </div>
        <span class="arrow">→</span>
        <div class="vis-item">
          <span class="vis-icon">👤👤👤</span>
          <span>3 Groups</span>
        </div>
        <span class="arrow">→</span>
        <div class="math-result math-correct">
          <span class="frac-box" style="font-size: 13px;">
            <span class="frac-num"><i>x</i></span>
            <span class="frac-den">3</span>
          </span>
          <span style="margin-left: 4px;">= 8</span>
        </div>
      </div>

      <div class="callout callout-correct">
        <b>Valid Translation:</b> The unknown total (<i class="math-sym">x</i>) is partitioned into 3 equal shares, resulting in 8 per share (<span class="math-inline">x ÷ 3 = 8</span>). Solving gives <span class="math-inline">x = 24</span> total cookies.
      </div>
    </div>
  </div>

  
  <div class="rule-bar">
    <span class="rule-icon">💡</span>
    <span><b>Self-Check Rule:</b> Identify your total first. The total always goes in the <b>numerator</b> (dividend) when dividing into groups.</span>
  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Dissecting an Equation into a Story</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .diagram-content {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Header title / hint */
    .hint-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      color: #64748b;
      font-weight: 600;
      padding: 0 4px;
    }

    .tap-hint {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #f1f5f9;
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 12px;
    }

    /* Equation dissection row */
    .equation-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .eq-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
      min-height: 105px;
      position: relative;
    }

    .eq-symbol {
      font-size: 24px;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 38px;
      width: 100%;
      border-radius: 8px;
    }

    .eq-badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .eq-meaning {
      font-size: 12px;
      font-weight: 600;
      line-height: 1.25;
      color: #475569;
    }

    /* Color themes for the 4 parts */
    /* Blue - Unknown */
    .part-blue .eq-symbol {
      background: #eff6ff;
      color: #2563eb;
      border: 1.5px solid #bfdbfe;
    }
    .part-blue .eq-badge { color: #2563eb; }
    .part-blue.active, .part-blue:hover {
      border-color: #2563eb;
      background: #f8faff;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
    }

    /* Green - Action */
    .part-green .eq-symbol {
      background: #f0fdf4;
      color: #16a34a;
      border: 1.5px solid #bbf7d0;
      border-radius: 50%;
      width: 38px;
    }
    .part-green .eq-badge { color: #16a34a; }
    .part-green.active, .part-green:hover {
      border-color: #16a34a;
      background: #f9fefb;
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.15);
    }

    /* Orange - Known */
    .part-orange .eq-symbol {
      background: #fffbeb;
      color: #d97706;
      border: 1.5px solid #fde68a;
    }
    .part-orange .eq-badge { color: #d97706; }
    .part-orange.active, .part-orange:hover {
      border-color: #d97706;
      background: #fffdf5;
      box-shadow: 0 4px 12px rgba(217, 119, 6, 0.15);
    }

    /* Purple - Total */
    .part-purple .eq-symbol {
      background: #faf5ff;
      color: #9333ea;
      border: 1.5px solid #e9d5ff;
    }
    .part-purple .eq-badge { color: #9333ea; }
    .part-purple.active, .part-purple:hover {
      border-color: #9333ea;
      background: #fdfaff;
      box-shadow: 0 4px 12px rgba(147, 51, 234, 0.15);
    }

    /* Story Card / Speech Bubble */
    .story-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 16px 18px;
      position: relative;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    }

    .story-header {
      font-size: 11px;
      font-weight: 700;
      color: #94a3b8;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .story-text {
      font-size: 16px;
      line-height: 1.6;
      color: #1e293b;
      font-weight: 500;
    }

    /* Highlight tokens in story */
    .story-tag {
      display: inline;
      padding: 2px 6px;
      border-radius: 6px;
      font-weight: 700;
      cursor: pointer;
      transition: background-color 0.2s, box-shadow 0.2s;
    }

    .story-tag.tag-blue {
      color: #1d4ed8;
      background: #eff6ff;
      border-bottom: 2px solid #93c5fd;
    }
    .story-tag.tag-green {
      color: #15803d;
      background: #f0fdf4;
      border-bottom: 2px solid #86efac;
    }
    .story-tag.tag-orange {
      color: #b45309;
      background: #fffbeb;
      border-bottom: 2px solid #fcd34d;
    }
    .story-tag.tag-purple {
      color: #7e22ce;
      background: #faf5ff;
      border-bottom: 2px solid #d8b4fe;
    }

    .story-tag.highlighted {
      box-shadow: 0 0 0 2px currentColor;
    }

    /* Controls */
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      margin-top: 2px;
    }

    .btn-step {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .btn-step:hover {
      background: #f8fafc;
      border-color: #94a3b8;
    }

    .btn-step.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    @media (max-width: 440px) {
      .equation-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
      }
      .eq-card {
        min-height: 90px;
        padding: 8px 4px;
      }
      .eq-symbol {
        font-size: 20px;
        height: 32px;
      }
      .story-text {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>
  <div class="diagram-content">
    <div class="hint-bar">
      <span>MATCH EQUATION TO STORY</span>
      <span class="tap-hint">✦ Tap any part</span>
    </div>

    
    <div class="equation-grid">
      <div class="eq-card part-blue" data-index="0" onclick="selectPart(0)">
        <div class="eq-symbol">x</div>
        <div class="eq-badge">Unknown</div>
        <div class="eq-meaning">Sandwich 🥪</div>
      </div>

      <div class="eq-card part-green" data-index="1" onclick="selectPart(1)">
        <div class="eq-symbol">+</div>
        <div class="eq-badge">Action</div>
        <div class="eq-meaning">Added on ➕</div>
      </div>

      <div class="eq-card part-orange" data-index="2" onclick="selectPart(2)">
        <div class="eq-symbol">4.50</div>
        <div class="eq-badge">Known</div>
        <div class="eq-meaning">Juice box 🧃</div>
      </div>

      <div class="eq-card part-purple" data-index="3" onclick="selectPart(3)">
        <div class="eq-symbol">= 10.00</div>
        <div class="eq-badge">Total</div>
        <div class="eq-meaning">Total spent 💵</div>
      </div>
    </div>

    
    <div class="story-card">
      <div class="story-header">
        <span>💬 Real-World Word Problem</span>
      </div>
      <div class="story-text">
        Leo bought a <span class="story-tag tag-blue" data-index="0" onclick="selectPart(0)">sandwich</span>
        <span class="story-tag tag-green" data-index="1" onclick="selectPart(1)">and</span> a
        <span class="story-tag tag-orange" data-index="2" onclick="selectPart(2)">$4.50 juice box</span>.
        He spent <span class="story-tag tag-purple" data-index="3" onclick="selectPart(3)">$10.00 in total</span>.
      </div>
    </div>

    
    <div class="controls">
      <button class="btn-step" id="autoBtn" onclick="toggleAuto()">▶ Auto Walkthrough</button>
      <button class="btn-step" onclick="showAll()">Show All</button>
    </div>
  </div>

  <script>
    let activeIndex = -1;
    let autoInterval = null;

    const cards = document.querySelectorAll('.eq-card');
    const tags = document.querySelectorAll('.story-tag');
    const autoBtn = document.getElementById('autoBtn');

    function selectPart(index) {
      stopAuto();
      if (activeIndex === index) {
        showAll();
        return;
      }
      activeIndex = index;
      updateUI();
    }

    function showAll() {
      stopAuto();
      activeIndex = -1;
      cards.forEach(card => card.classList.add('active'));
      tags.forEach(tag => tag.classList.remove('highlighted'));
    }

    function updateUI() {
      cards.forEach((card, i) => {
        if (activeIndex === -1 || activeIndex === i) {
          card.classList.add('active');
          card.style.opacity = '1';
        } else {
          card.classList.remove('active');
          card.style.opacity = '0.45';
        }
      });

      tags.forEach((tag) => {
        const idx = parseInt(tag.getAttribute('data-index'), 10);
        if (activeIndex === idx) {
          tag.classList.add('highlighted');
          tag.style.opacity = '1';
        } else if (activeIndex === -1) {
          tag.classList.remove('highlighted');
          tag.style.opacity = '1';
        } else {
          tag.classList.remove('highlighted');
          tag.style.opacity = '0.35';
        }
      });
    }

    function toggleAuto() {
      if (autoInterval) {
        stopAuto();
      } else {
        autoBtn.textContent = '⏸ Pause';
        autoBtn.classList.add('active');
        if (activeIndex < 0) activeIndex = 0;
        updateUI();
        autoInterval = setInterval(() => {
          activeIndex = (activeIndex + 1) % 4;
          updateUI();
        }, 2200);
      }
    }

    function stopAuto() {
      if (autoInterval) {
        clearInterval(autoInterval);
        autoInterval = null;
        autoBtn.textContent = '▶ Auto Walkthrough';
        autoBtn.classList.remove('active');
      }
    }

    // Initialize in All-Active overview state
    showAll();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <title>Operation Clue Words</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      width: 100%;
      background: #ffffff;
      color: #1e2945;
      padding: 8px;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      padding: 0 4px;
    }

    .title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }

    .hint {
      font-size: 12px;
      color: #64748b;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .quadrant {
      background: #fafafa;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .q-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding-bottom: 4px;
      border-bottom: 1px solid #f1f5f9;
    }

    .sym-badge {
      width: 24px;
      height: 24px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      flex-shrink: 0;
    }

    .q-title {
      font-size: 13px;
      font-weight: 700;
    }

    /* Addition Theme */
    .q-add .sym-badge { background: #dcfce7; color: #15803d; }
    .q-add .q-title { color: #15803d; }
    .q-add .chip.active { background: #15803d; color: #ffffff; border-color: #15803d; }

    /* Subtraction Theme */
    .q-sub .sym-badge { background: #ffedd5; color: #c2410c; }
    .q-sub .q-title { color: #c2410c; }
    .q-sub .chip.active { background: #c2410c; color: #ffffff; border-color: #c2410c; }

    /* Multiplication Theme */
    .q-mul .sym-badge { background: #dbeafe; color: #1d4ed8; }
    .q-mul .q-title { color: #1d4ed8; }
    .q-mul .chip.active { background: #1d4ed8; color: #ffffff; border-color: #1d4ed8; }

    /* Division Theme */
    .q-div .sym-badge { background: #f3e8ff; color: #7e22ce; }
    .q-div .q-title { color: #7e22ce; }
    .q-div .chip.active { background: #7e22ce; color: #ffffff; border-color: #7e22ce; }

    .chip-list {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    .chip {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 4px 6px;
      font-size: 11.5px;
      font-weight: 500;
      color: #334155;
      cursor: pointer;
      line-height: 1.2;
      transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
      user-select: none;
    }

    .chip:hover {
      border-color: #94a3b8;
    }

    /* Live Preview Banner */
    .preview-box {
      margin-top: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 44px;
    }

    .preview-label {
      font-size: 12px;
      color: #64748b;
    }

    .preview-phrase {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
    }

    .preview-arrow {
      font-size: 14px;
      color: #94a3b8;
      margin: 0 6px;
    }

    .preview-math {
      font-size: 14px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 6px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
    }

    @media (max-width: 340px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .title {
        font-size: 14px;
      }
      .chip {
        font-size: 11px;
        padding: 3px 5px;
      }
    }
  </style>
</head>
<body>
  <div class="header">
    <span class="title">Operation Clue Words</span>
    <span class="hint">Tap a clue</span>
  </div>

  <div class="grid">
    
    <div class="quadrant q-add">
      <div class="q-header">
        <div class="sym-badge">+</div>
        <span class="q-title">Addition</span>
      </div>
      <div class="chip-list">
        <button class="chip active" data-phrase="sum of x and 4" data-math="x + 4" data-color="#15803d" data-bg="#dcfce7">sum</button>
        <button class="chip" data-phrase="k increased by 7" data-math="k + 7" data-color="#15803d" data-bg="#dcfce7">increased by</button>
        <button class="chip" data-phrase="5 more than n" data-math="n + 5" data-color="#15803d" data-bg="#dcfce7">more than</button>
        <button class="chip" data-phrase="total of a and b" data-math="a + b" data-color="#15803d" data-bg="#dcfce7">total</button>
      </div>
    </div>

    
    <div class="quadrant q-sub">
      <div class="q-header">
        <div class="sym-badge">−</div>
        <span class="q-title">Subtraction</span>
      </div>
      <div class="chip-list">
        <button class="chip" data-phrase="difference of y and 3" data-math="y − 3" data-color="#c2410c" data-bg="#ffedd5">difference</button>
        <button class="chip" data-phrase="m decreased by 6" data-math="m − 6" data-color="#c2410c" data-bg="#ffedd5">decreased by</button>
        <button class="chip" data-phrase="4 less than p" data-math="p − 4" data-color="#c2410c" data-bg="#ffedd5">less than</button>
        <button class="chip" data-phrase="t minus 8" data-math="t − 8" data-color="#c2410c" data-bg="#ffedd5">minus</button>
      </div>
    </div>

    
    <div class="quadrant q-mul">
      <div class="q-header">
        <div class="sym-badge">×</div>
        <span class="q-title">Multiplication</span>
      </div>
      <div class="chip-list">
        <button class="chip" data-phrase="product of 6 and x" data-math="6x" data-color="#1d4ed8" data-bg="#dbeafe">product</button>
        <button class="chip" data-phrase="3 times w" data-math="3w" data-color="#1d4ed8" data-bg="#dbeafe">times</button>
        <button class="chip" data-phrase="twice a number n" data-math="2n" data-color="#1d4ed8" data-bg="#dbeafe">twice (2x)</button>
        <button class="chip" data-phrase="half of y" data-math="½y" data-color="#1d4ed8" data-bg="#dbeafe">of</button>
      </div>
    </div>

    
    <div class="quadrant q-div">
      <div class="q-header">
        <div class="sym-badge">÷</div>
        <span class="q-title">Division</span>
      </div>
      <div class="chip-list">
        <button class="chip" data-phrase="quotient of x and 5" data-math="x / 5" data-color="#7e22ce" data-bg="#f3e8ff">quotient</button>
        <button class="chip" data-phrase="d divided by 2" data-math="d / 2" data-color="#7e22ce" data-bg="#f3e8ff">divided by</button>
        <button class="chip" data-phrase="12 shared equally by c" data-math="12 / c" data-color="#7e22ce" data-bg="#f3e8ff">shared equally</button>
        <button class="chip" data-phrase="split per group g" data-math="t / g" data-color="#7e22ce" data-bg="#f3e8ff">split per</button>
      </div>
    </div>
  </div>

  
  <div class="preview-box" id="previewBox">
    <div>
      <div class="preview-label">Phrase</div>
      <div class="preview-phrase" id="previewPhrase">sum of x and 4</div>
    </div>
    <div style="display: flex; align-items: center;">
      <span class="preview-arrow">→</span>
      <span class="preview-math" id="previewMath" style="color: #15803d; background: #dcfce7; border-color: #bbf7d0;">x + 4</span>
    </div>
  </div>

  <script>
    const chips = document.querySelectorAll('.chip');
    const previewPhrase = document.getElementById('previewPhrase');
    const previewMath = document.getElementById('previewMath');

    chips.forEach(chip => {
      chip.addEventListener('click', () => {
        chips.forEach(c => c.classList.remove('active'));
        chip.classList.add('active');

        const phrase = chip.getAttribute('data-phrase');
        const math = chip.getAttribute('data-math');
        const color = chip.getAttribute('data-color');
        const bg = chip.getAttribute('data-bg');

        previewPhrase.textContent = phrase;
        previewMath.textContent = math;
        previewMath.style.color = color;
        previewMath.style.backgroundColor = bg;
        previewMath.style.borderColor = color + '40';
      });
    });
  </script>
</body>
</html>

Writing Algebraic Expressions from Word Descriptions

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Turnaround Phrase Diagram</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      min-height: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }
    .grid-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      width: 100%;
      max-width: 620px;
    }
    .panel-card {
      flex: 1 1 260px;
      background: #f8f9fa;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
    }
    .panel-card.correct {
      border-color: #86efac;
      background: #f0fdf4;
    }
    .panel-card.mistake {
      border-color: #fca5a5;
      background: #fef2f2;
    }
    .tag {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.5px;
      padding: 3px 10px;
      border-radius: 999px;
      margin-bottom: 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .tag.correct {
      background: #dcfce7;
      color: #15803d;
    }
    .tag.mistake {
      background: #fee2e2;
      color: #b91c1c;
    }
    .phrase-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-bottom: 8px;
      font-weight: 700;
      font-size: 16px;
    }
    .chip {
      padding: 4px 8px;
      border-radius: 6px;
      font-family: ui-monospace, monospace;
      font-size: 15px;
      font-weight: bold;
    }
    .chip-num {
      background: #e0e7ff;
      color: #3730a3;
    }
    .chip-op {
      background: #fed7aa;
      color: #9a3412;
      font-family: inherit;
      font-size: 13px;
    }
    .chip-var {
      background: #ccfbf1;
      color: #115e59;
    }
    .arrow-box {
      width: 100%;
      height: 48px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .result-box {
      font-size: 24px;
      font-weight: 800;
      font-family: ui-monospace, monospace;
      padding: 8px 16px;
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      margin-top: 4px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .result-box.correct {
      color: #15803d;
      border: 2px solid #86efac;
    }
    .result-box.mistake {
      color: #b91c1c;
      border: 2px solid #fca5a5;
    }
    .label-note {
      font-size: 12px;
      font-weight: 600;
      color: #991b1b;
      margin-top: 8px;
    }
    .interactive-bar {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .btn {
      background: #1e2945;
      color: #ffffff;
      border: none;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: opacity 0.2s;
    }
    .btn:active {
      opacity: 0.8;
    }
  </style>
</head>
<body>

  <div class="grid-wrap">
    
    <div class="panel-card correct">
      <div class="tag correct">✓ TURNAROUND</div>
      
      <div class="phrase-row">
        <span class="chip chip-num" id="chip-8-l">8</span>
        <span class="chip chip-op">less than</span>
        <span class="chip chip-var" id="chip-n-l">n</span>
      </div>

      <div class="arrow-box">
        <svg viewBox="0 0 200 48">
          <defs>
            <marker id="arrow-green" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
              <path d="M0,0 L6,3 L0,6 Z" fill="#16a34a" />
            </marker>
          </defs>
          
          
          <path d="M 45 6 Q 100 36 150 40" fill="none" stroke="#16a34a" stroke-width="2.5" stroke-dasharray="4 2" marker-end="url(#arrow-green)" />
          
          <path d="M 155 6 Q 100 -12 50 40" fill="none" stroke="#16a34a" stroke-width="2.5" stroke-dasharray="4 2" marker-end="url(#arrow-green)" />
        </svg>
      </div>

      <div class="result-box correct">
        n − 8
      </div>
    </div>

    
    <div class="panel-card mistake">
      <div class="tag mistake">✗ COMMON TRAP</div>
      
      <div class="phrase-row">
        <span class="chip chip-num">8</span>
        <span class="chip chip-op">less than</span>
        <span class="chip chip-var">n</span>
      </div>

      <div class="arrow-box">
        <svg viewBox="0 0 200 48">
          <defs>
            <marker id="arrow-red" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
              <path d="M0,0 L6,3 L0,6 Z" fill="#dc2626" />
            </marker>
          </defs>
          
          <line x1="45" y1="8" x2="45" y2="40" stroke="#dc2626" stroke-width="2" marker-end="url(#arrow-red)" />
          <line x1="100" y1="8" x2="100" y2="40" stroke="#dc2626" stroke-width="2" marker-end="url(#arrow-red)" />
          <line x1="155" y1="8" x2="155" y2="40" stroke="#dc2626" stroke-width="2" marker-end="url(#arrow-red)" />
        </svg>
      </div>

      <div class="result-box mistake">
        8 − n
      </div>
      <div class="label-note">Means: n subtracted from 8!</div>
    </div>
  </div>

  <div class="interactive-bar">
    <button class="btn" id="swapBtn" onclick="animateTurnaround()">
      <span>🔄</span> Turn Around
    </button>
  </div>

  <script>
    let isSwapped = false;
    function animateTurnaround() {
      const chip8 = document.getElementById('chip-8-l');
      const chipN = document.getElementById('chip-n-l');
      isSwapped = !isSwapped;
      
      chip8.style.transition = 'transform 0.4s ease';
      chipN.style.transition = 'transform 0.4s ease';
      
      if (isSwapped) {
        chip8.style.transform = 'translateX(110px)';
        chipN.style.transform = 'translateX(-110px)';
      } else {
        chip8.style.transform = 'translateX(0)';
        chipN.style.transform = 'translateX(0)';
      }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }
    body {
      width: 100%;
      height: 100%;
      background: transparent;
      color: #1e2945;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 8px;
    }
    .visualizer {
      width: 100%;
      max-width: 340px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* Step Selector Tabs */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
    }
    .step-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 10px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      user-select: none;
    }
    .step-btn:hover {
      background: #f1f5f9;
      color: #334155;
    }
    .step-btn.active {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
    }
    .play-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      border-radius: 10px;
      font-size: 13px;
      color: #1e2945;
      cursor: pointer;
      flex-shrink: 0;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }
    .play-btn:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
    }

    /* Diagram Canvas */
    .canvas {
      width: 100%;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }

    /* Tape Bars Row */
    .tape-container {
      width: 100%;
      height: 52px;
      display: flex;
      gap: 6px;
      align-items: center;
      justify-content: flex-start;
      position: relative;
    }
    .bar {
      height: 48px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 16px;
      color: #ffffff;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
    }
    .bar-c {
      background: #2563eb;
      flex: 1;
    }
    .bar-five {
      background: #ea580c;
      width: 0;
      opacity: 0;
      overflow: hidden;
      transform: scaleX(0);
      transform-origin: left center;
      padding: 0;
    }
    .step-2-active .bar-five {
      width: 68px;
      opacity: 1;
      transform: scaleX(1);
      flex-shrink: 0;
    }

    /* Dimension Bracket & Label */
    .bracket-area {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .bracket-svg {
      width: 100%;
      height: 18px;
      overflow: visible;
    }
    .bracket-line {
      stroke: #64748b;
      stroke-width: 1.5;
      fill: none;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .expression-tag {
      font-size: 19px;
      font-weight: 800;
      color: #1e2945;
      letter-spacing: -0.02em;
    }
    .expression-tag .hl-blue { color: #2563eb; }
    .expression-tag .hl-orange { color: #ea580c; }

    /* Bottom Subtext Note */
    .caption-pill {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      background: #f1f5f9;
      padding: 6px 14px;
      border-radius: 20px;
      text-align: center;
      line-height: 1.3;
      transition: all 0.3s ease;
    }
  </style>
</head>
<body>

  <div class="visualizer" id="visualizer">
    
    <div class="controls">
      <button class="step-btn active" id="btnStep1">1: Duplicate <i>c</i></button>
      <button class="step-btn" id="btnStep2">2: Add +5</button>
      <button class="play-btn" id="playToggle" title="Play/Pause" aria-label="Play or Pause Animation">⏸</button>
    </div>

    
    <div class="canvas" id="canvas">
      <div class="tape-container">
        <div class="bar bar-c">c</div>
        <div class="bar bar-c">c</div>
        <div class="bar bar-five" id="barFive">+5</div>
      </div>

      
      <div class="bracket-area">
        <svg class="bracket-svg" viewBox="0 0 300 18" preserveAspectRatio="none">
          <path id="bracketPath" class="bracket-line" d="M 4 2 L 4 10 L 146 10 L 150 16 L 154 10 L 296 10 L 296 2" />
        </svg>
        <div class="expression-tag" id="exprLabel">
          <span class="hl-blue">2c</span>
        </div>
      </div>

      
      <div class="caption-pill" id="captionText">
        2 equal bars → 2c (twice the cost)
      </div>
    </div>
  </div>

  <script>
    const canvas = document.getElementById('canvas');
    const btn1 = document.getElementById('btnStep1');
    const btn2 = document.getElementById('btnStep2');
    const playToggle = document.getElementById('playToggle');
    const exprLabel = document.getElementById('exprLabel');
    const captionText = document.getElementById('captionText');

    let currentStep = 0;
    let autoInterval = null;

    function renderStep(step) {
      currentStep = step;
      if (step === 0) {
        canvas.classList.remove('step-2-active');
        btn1.classList.add('active');
        btn2.classList.remove('active');
        exprLabel.innerHTML = '<span class="hl-blue">2c</span>';
        captionText.textContent = '2 equal bars → 2c (twice the cost)';
      } else {
        canvas.classList.add('step-2-active');
        btn1.classList.remove('active');
        btn2.classList.add('active');
        exprLabel.innerHTML = '<span class="hl-blue">2c</span> + <span class="hl-orange">5</span>';
        captionText.textContent = 'Attach constant +5 → Total length 2c + 5';
      }
    }

    function startAuto() {
      if (autoInterval) clearInterval(autoInterval);
      autoInterval = setInterval(() => {
        renderStep(currentStep === 0 ? 1 : 0);
      }, 3500);
      playToggle.textContent = '⏸';
    }

    function pauseAuto() {
      if (autoInterval) {
        clearInterval(autoInterval);
        autoInterval = null;
      }
      playToggle.textContent = '▶';
    }

    btn1.addEventListener('click', () => {
      pauseAuto();
      renderStep(0);
    });

    btn2.addEventListener('click', () => {
      pauseAuto();
      renderStep(1);
    });

    playToggle.addEventListener('click', () => {
      if (autoInterval) {
        pauseAuto();
      } else {
        renderStep(currentStep === 0 ? 1 : 0);
        startAuto();
      }
    });

    // Start auto loop on mount
    startAuto();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #f8f9fa;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .diagram-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 600px;
    }
    @media (max-width: 480px) {
      .diagram-grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }
    .rule-card {
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .rule-header {
      font-size: 15px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 8px;
      letter-spacing: -0.2px;
    }
    .additive .rule-header {
      background: #e0f2fe;
      color: #0284c7;
      border: 1px solid #bae6fd;
    }
    .multiplicative .rule-header {
      background: #f3e8ff;
      color: #7c3aed;
      border: 1px solid #ddd6fe;
    }
    .ladder {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }
    .row-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 10px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid transparent;
      transition: background 0.25s ease, border-color 0.25s ease;
      cursor: pointer;
    }
    .row-item.active {
      background: #ffffff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    .additive .row-item.active {
      border-color: #22b7ff;
    }
    .multiplicative .row-item.active {
      border-color: #8b5cf6;
    }
    .val-box {
      font-size: 15px;
      font-weight: 700;
      width: 26px;
      text-align: center;
    }
    .op-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 12px;
    }
    .additive .op-badge {
      background: #e0f2fe;
      color: #0284c7;
    }
    .multiplicative .op-badge {
      background: #f3e8ff;
      color: #7c3aed;
    }
    .footer-pill {
      font-size: 13px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 20px;
      text-align: center;
      margin-top: 2px;
    }
    .additive .footer-pill {
      background: #f0f9ff;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }
    .multiplicative .footer-pill {
      background: #faf5ff;
      color: #6b21a8;
      border: 1px solid #e9d5ff;
    }
    .step-controls {
      display: flex;
      gap: 6px;
      margin-top: 10px;
    }
    .step-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .step-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
  </style>
</head>
<body>

  <div class="diagram-grid">
    
    <div class="rule-card additive">
      <div class="rule-header">y = x + 3</div>
      <div class="ladder">
        <div class="row-item active" data-index="0">
          <div class="val-box">1</div>
          <div class="op-badge">+3 →</div>
          <div class="val-box">4</div>
        </div>
        <div class="row-item" data-index="1">
          <div class="val-box">2</div>
          <div class="op-badge">+3 →</div>
          <div class="val-box">5</div>
        </div>
        <div class="row-item" data-index="2">
          <div class="val-box">3</div>
          <div class="op-badge">+3 →</div>
          <div class="val-box">6</div>
        </div>
      </div>
      <div class="footer-pill">Difference is +3</div>
    </div>

    
    <div class="rule-card multiplicative">
      <div class="rule-header">y = 3x</div>
      <div class="ladder">
        <div class="row-item active" data-index="0">
          <div class="val-box">1</div>
          <div class="op-badge">×3 →</div>
          <div class="val-box">3</div>
        </div>
        <div class="row-item" data-index="1">
          <div class="val-box">2</div>
          <div class="op-badge">×3 →</div>
          <div class="val-box">6</div>
        </div>
        <div class="row-item" data-index="2">
          <div class="val-box">3</div>
          <div class="op-badge">×3 →</div>
          <div class="val-box">9</div>
        </div>
      </div>
      <div class="footer-pill">Ratio is ×3</div>
    </div>
  </div>

  <div class="step-controls">
    <button class="step-btn active" data-step="0">x = 1</button>
    <button class="step-btn" data-step="1">x = 2</button>
    <button class="step-btn" data-step="2">x = 3</button>
  </div>

  <script>
    const buttons = document.querySelectorAll('.step-btn');
    const rows = document.querySelectorAll('.row-item');
    let currentIndex = 0;
    let autoInterval;

    function setStep(index) {
      currentIndex = index;
      buttons.forEach((btn, i) => {
        btn.classList.toggle('active', i === index);
      });
      rows.forEach(row => {
        row.classList.toggle('active', parseInt(row.getAttribute('data-index'), 10) === index);
      });
    }

    buttons.forEach((btn, i) => {
      btn.addEventListener('click', () => {
        clearInterval(autoInterval);
        setStep(i);
        startAutoCycle();
      });
    });

    rows.forEach(row => {
      row.addEventListener('click', () => {
        clearInterval(autoInterval);
        const idx = parseInt(row.getAttribute('data-index'), 10);
        setStep(idx);
        startAutoCycle();
      });
    });

    function startAutoCycle() {
      autoInterval = setInterval(() => {
        currentIndex = (currentIndex + 1) % 3;
        setStep(currentIndex);
      }, 3500);
    }

    startAutoCycle();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .nav-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 12px;
      width: 100%;
      max-width: 420px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .tab-btn {
      appearance: none;
      background: #f8f9fa;
      border: 1px solid #e6e6e6;
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .tab-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }

    .expression-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 18px;
      background: #f8f9fa;
      border-radius: 16px;
      border: 1px solid #e6e6e6;
      margin-bottom: 12px;
      width: 100%;
      max-width: 340px;
    }

    .token {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      font-weight: 800;
      font-family: "Cambria Math", "KaTeX_Main", "Times New Roman", serif;
      min-width: 44px;
      height: 52px;
      padding: 0 6px;
      border-radius: 10px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .token.active {
      background: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.25);
    }

    .token.dimmed {
      opacity: 0.35;
    }

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 420px;
    }

    .part-card {
      background: #f8f9fa;
      border: 1.5px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    }

    .part-card.active {
      background: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 3px 10px rgba(34, 183, 255, 0.18);
    }

    .part-card.dimmed {
      opacity: 0.35;
    }

    .card-header {
      display: flex;
      align-items: center;
      gap: 6px;
      width: 100%;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 800;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      color: #1e2945;
    }

    .part-card.active .badge {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }

    .card-title {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
    }

    .card-sub {
      font-size: 12px;
      font-weight: 500;
      color: #64748b;
      margin-left: 28px;
    }
  </style>
</head>
<body>

  <div class="nav-tabs">
    <button class="tab-btn active" data-index="all">All</button>
    <button class="tab-btn" data-index="0">3</button>
    <button class="tab-btn" data-index="1">w</button>
    <button class="tab-btn" data-index="2">+</button>
    <button class="tab-btn" data-index="3">10</button>
  </div>

  <div class="expression-container">
    <div class="token active" data-index="0">3</div>
    <div class="token active" data-index="1">w</div>
    <div class="token active" data-index="2">+</div>
    <div class="token active" data-index="3">10</div>
  </div>

  <div class="cards-grid">
    <div class="part-card active" data-index="0">
      <div class="card-header">
        <span class="badge">3</span>
        <span class="card-title">Coefficient</span>
      </div>
      <span class="card-sub">Multiplier</span>
    </div>

    <div class="part-card active" data-index="1">
      <div class="card-header">
        <span class="badge">w</span>
        <span class="card-title">Variable</span>
      </div>
      <span class="card-sub">Unknown wins</span>
    </div>

    <div class="part-card active" data-index="2">
      <div class="card-header">
        <span class="badge">+</span>
        <span class="card-title">Operator</span>
      </div>
      <span class="card-sub">Addition</span>
    </div>

    <div class="part-card active" data-index="3">
      <div class="card-header">
        <span class="badge">10</span>
        <span class="card-title">Constant</span>
      </div>
      <span class="card-sub">Fixed value</span>
    </div>
  </div>

  <script>
    const tokens = document.querySelectorAll('.token');
    const cards = document.querySelectorAll('.part-card');
    const tabBtns = document.querySelectorAll('.tab-btn');

    function setActive(targetIndex) {
      tabBtns.forEach(btn => {
        btn.classList.toggle('active', btn.dataset.index === targetIndex);
      });

      if (targetIndex === 'all') {
        tokens.forEach(el => {
          el.classList.add('active');
          el.classList.remove('dimmed');
        });
        cards.forEach(el => {
          el.classList.add('active');
          el.classList.remove('dimmed');
        });
      } else {
        tokens.forEach(el => {
          const match = el.dataset.index === targetIndex;
          el.classList.toggle('active', match);
          el.classList.toggle('dimmed', !match);
        });
        cards.forEach(el => {
          const match = el.dataset.index === targetIndex;
          el.classList.toggle('active', match);
          el.classList.toggle('dimmed', !match);
        });
      }
    }

    tabBtns.forEach(btn => {
      btn.addEventListener('click', () => setActive(btn.dataset.index));
    });

    tokens.forEach(token => {
      token.addEventListener('click', () => {
        const idx = token.dataset.index;
        const currentActive = document.querySelector('.tab-btn.active').dataset.index;
        setActive(currentActive === idx ? 'all' : idx);
      });
    });

    cards.forEach(card => {
      card.addEventListener('click', () => {
        const idx = card.dataset.index;
        const currentActive = document.querySelector('.tab-btn.active').dataset.index;
        setActive(currentActive === idx ? 'all' : idx);
      });
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
      user-select: none;
    }
    .plot-container {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .title {
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 8px;
      text-align: center;
    }
    .info-badge {
      min-height: 32px;
      padding: 4px 14px;
      background: #f0fdfa;
      border: 1px solid #99f6e4;
      border-radius: 20px;
      color: #0f766e;
      font-size: 13.5px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 12px;
      transition: all 0.2s ease;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .axis-line {
      stroke: #334155;
      stroke-width: 2.5;
      stroke-linecap: round;
    }
    .tick-line {
      stroke: #334155;
      stroke-width: 2;
    }
    .axis-label {
      font-size: 13px;
      font-weight: 600;
      fill: #475569;
      text-anchor: middle;
    }
    .col-highlight {
      fill: #ccfbf1;
      opacity: 0;
      rx: 8;
      transition: opacity 0.2s ease;
      cursor: pointer;
    }
    .col-highlight.active {
      opacity: 0.6;
    }
    .dot {
      fill: #0d9488;
      stroke: #115e59;
      stroke-width: 1.5;
      transition: transform 0.2s ease, fill 0.2s ease;
      cursor: pointer;
    }
    .col-group.active .dot {
      fill: #14b8a6;
      stroke: #042f2e;
      stroke-width: 2;
    }
    .hit-area {
      fill: transparent;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div class="plot-container">
    <div class="title">Daily Practice Time (Hours)</div>
    <div id="infoBadge" class="info-badge">
      <span>👆 Tap a stack to inspect</span>
    </div>

    <svg viewBox="0 0 500 220" aria-label="Dot plot of practice hours">
      <defs>
        
        <marker id="arrow-left" viewBox="0 0 10 10" refX="2" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
          <path d="M 8 1.5 L 2 5 L 8 8.5 z" fill="#334155" />
        </marker>
        <marker id="arrow-right" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
          <path d="M 2 1.5 L 8 5 L 2 8.5 z" fill="#334155" />
        </marker>
      </defs>

      
      
      <g class="col-group" data-val="0.5" data-count="0">
        <rect class="col-highlight" x="25" y="20" width="50" height="150" />
        <rect class="hit-area" x="25" y="20" width="50" height="150" />
      </g>

      
      <g class="col-group" data-val="1.0" data-count="1">
        <rect class="col-highlight" x="105" y="20" width="50" height="150" />
        <circle class="dot" cx="130" cy="152" r="12" />
        <rect class="hit-area" x="105" y="20" width="50" height="150" />
      </g>

      
      <g class="col-group active" data-val="1.5" data-count="3">
        <rect class="col-highlight active" x="185" y="20" width="50" height="150" />
        <circle class="dot" cx="210" cy="152" r="12" />
        <circle class="dot" cx="210" cy="122" r="12" />
        <circle class="dot" cx="210" cy="92" r="12" />
        <rect class="hit-area" x="185" y="20" width="50" height="150" />
      </g>

      
      <g class="col-group" data-val="2.0" data-count="2">
        <rect class="col-highlight" x="265" y="20" width="50" height="150" />
        <circle class="dot" cx="290" cy="152" r="12" />
        <circle class="dot" cx="290" cy="122" r="12" />
        <rect class="hit-area" x="265" y="20" width="50" height="150" />
      </g>

      
      <g class="col-group" data-val="2.5" data-count="1">
        <rect class="col-highlight" x="345" y="20" width="50" height="150" />
        <circle class="dot" cx="370" cy="152" r="12" />
        <rect class="hit-area" x="345" y="20" width="50" height="150" />
      </g>

      
      <g class="col-group" data-val="3.0" data-count="0">
        <rect class="col-highlight" x="425" y="20" width="50" height="150" />
        <rect class="hit-area" x="425" y="20" width="50" height="150" />
      </g>

      
      <line class="axis-line" x1="20" y1="172" x2="480" y2="172" marker-start="url(#arrow-left)" marker-end="url(#arrow-right)" />

      
      <line class="tick-line" x1="50" y1="172" x2="50" y2="180" />
      <text class="axis-label" x="50" y="198">0.5</text>

      <line class="tick-line" x1="130" y1="172" x2="130" y2="180" />
      <text class="axis-label" x="130" y="198">1.0</text>

      <line class="tick-line" x1="210" y1="172" x2="210" y2="180" />
      <text class="axis-label" x="210" y="198">1.5</text>

      <line class="tick-line" x1="290" y1="172" x2="290" y2="180" />
      <text class="axis-label" x="290" y="198">2.0</text>

      <line class="tick-line" x1="370" y1="172" x2="370" y2="180" />
      <text class="axis-label" x="370" y="198">2.5</text>

      <line class="tick-line" x1="450" y1="172" x2="450" y2="180" />
      <text class="axis-label" x="450" y="198">3.0</text>
    </svg>
  </div>

  <script>
    const badge = document.getElementById('infoBadge');
    const groups = document.querySelectorAll('.col-group');

    function updateSelection(group) {
      groups.forEach(g => {
        g.classList.remove('active');
        const hl = g.querySelector('.col-highlight');
        if (hl) hl.classList.remove('active');
      });

      group.classList.add('active');
      const hl = group.querySelector('.col-highlight');
      if (hl) hl.classList.add('active');

      const val = group.getAttribute('data-val');
      const count = group.getAttribute('data-count');
      const label = count === '1' ? 'student' : 'students';

      badge.innerHTML = `<strong>${val} hours:</strong> ${count} ${label}`;
    }

    // Set initial active state
    updateSelection(document.querySelector('.col-group[data-val="1.5"]'));

    groups.forEach(group => {
      group.addEventListener('click', () => updateSelection(group));
      group.addEventListener('touchstart', (e) => {
        e.preventDefault();
        updateSelection(group);
      }, { passive: false });
    });
  </script>
</body>
</html>

111.26(b)(1)(E)

Aligned learning resources

Related diagrams