<!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="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: #ffffff;
      color: #1e2945;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }
    .diagram-area {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    /* Tape Diagram */
    .tape-container {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }
    .bar-row {
      width: 100%;
      height: 48px;
      display: flex;
      border-radius: 8px;
      overflow: hidden;
      font-weight: 600;
      font-size: 15px;
    }
    .total-bar {
      width: 100%;
      background: #f1f5f9;
      border: 2px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #334155;
    }
    .split-row {
      display: flex;
      width: 100%;
      gap: 4px;
    }
    .segment-m {
      width: 69.6%; /* 8.7 / 12.5 */
      background: #e0f2fe;
      border: 2px solid #38bdf8;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0369a1;
      transition: all 0.3s ease;
    }
    .segment-part {
      width: 30.4%; /* 3.8 / 12.5 */
      background: #f8fafc;
      border: 2px solid #cbd5e1;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #475569;
      transition: all 0.3s ease;
    }
    .segment-part.faded {
      opacity: 0.3;
      border-style: dashed;
    }

    /* Equation Section */
    .calc-box {
      width: 100%;
      min-height: 120px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
      font-size: 18px;
      font-weight: 600;
    }
    .eq-line {
      display: flex;
      align-items: center;
      gap: 6px;
      transition: opacity 0.3s ease;
    }
    .var {
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 8px;
      border-radius: 4px;
    }
    .sub {
      color: #dc2626;
      background: #fee2e2;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 16px;
    }
    .solved {
      font-size: 22px;
      color: #0f172a;
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 520px;
      justify-content: center;
      margin-top: 12px;
    }
    .btn {
      flex: 1;
      padding: 10px 12px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    
    <div class="tape-container">
      <div class="bar-row total-bar">
        Total: 12.5 mi
      </div>
      <div class="bar-row split-row">
        <div class="segment-m" id="barM">m</div>
        <div class="segment-part" id="barPart">3.8 mi</div>
      </div>
    </div>

    
    <div class="calc-box">
      <div class="eq-line" id="line1">
        <span class="var">m</span> + 3.8 = 12.5
      </div>
      <div class="eq-line" id="line2" style="display: none;">
        <span class="var">m</span> + 3.8 <span class="sub">− 3.8</span> = 12.5 <span class="sub">− 3.8</span>
      </div>
      <div class="eq-line solved" id="line3" style="display: none;">
        <span class="var">m</span> = 8.7 mi
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn active" onclick="setStep(0)">1. Model</button>
    <button class="btn" onclick="setStep(1)">2. Subtract 3.8</button>
    <button class="btn" onclick="setStep(2)">3. Solve</button>
  </div>

  <script>
    const btns = document.querySelectorAll('.btn');
    const barPart = document.getElementById('barPart');
    const line1 = document.getElementById('line1');
    const line2 = document.getElementById('line2');
    const line3 = document.getElementById('line3');

    let currentStep = 0;
    let timer = null;

    function renderStep(step) {
      currentStep = step;
      btns.forEach((b, i) => b.classList.toggle('active', i === step));

      if (step === 0) {
        barPart.classList.remove('faded');
        line1.style.display = 'flex';
        line2.style.display = 'none';
        line3.style.display = 'none';
      } else if (step === 1) {
        barPart.classList.add('faded');
        line1.style.display = 'none';
        line2.style.display = 'flex';
        line3.style.display = 'none';
      } else if (step === 2) {
        barPart.classList.add('faded');
        line1.style.display = 'none';
        line2.style.display = 'none';
        line3.style.display = 'flex';
      }
    }

    function setStep(step) {
      clearInterval(timer);
      renderStep(step);
      startAuto();
    }

    function startAuto() {
      timer = setInterval(() => {
        currentStep = (currentStep + 1) % 3;
        renderStep(currentStep);
      }, 4000);
    }

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

Writing and Solving Equations from Real-World Scenarios

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>b20 - Solving Division Equations</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: transparent;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100vh;
      gap: 12px;
    }

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

    /* Top Model Section */
    .model-section {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.2s ease;
    }

    .total-box {
      background: #eff6ff;
      border: 2px solid #0284c7;
      border-radius: 8px;
      padding: 8px 18px;
      font-size: 15px;
      font-weight: 700;
      color: #0369a1;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.12);
      transition: all 0.25s ease;
      text-align: center;
    }

    .total-box .var-t {
      font-style: italic;
      font-family: "Times New Roman", Times, serif;
      font-size: 17px;
      color: #0284c7;
    }

    /* Connecting Arrows SVG */
    .arrows-svg {
      width: 100%;
      height: 32px;
      display: block;
      margin: -2px 0;
    }

    .arrow-path {
      stroke: #94a3b8;
      stroke-width: 2;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* 4 Wallet Cards */
    .cards-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
    }

    .wallet-card {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 4px;
      text-align: center;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: border-color 0.25s, box-shadow 0.25s;
    }

    .card-icon {
      font-size: 16px;
      line-height: 1;
    }

    .card-val {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
    }

    /* Math fraction formatting */
    .math-expr {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: "Times New Roman", Times, serif;
      font-size: 16px;
      color: #1e293b;
      gap: 3px;
    }

    .var-math {
      font-style: italic;
    }

    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 14px;
      line-height: 1;
      padding: 0 2px;
    }

    .frac .num {
      border-bottom: 1.5px solid #334155;
      padding-bottom: 2px;
    }

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

    /* Bottom Solve & Check Grid */
    .bottom-row {
      display: grid;
      grid-template-columns: 1.25fr 1fr;
      gap: 10px;
      width: 100%;
    }

    .panel {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      transition: border-color 0.25s, box-shadow 0.25s;
      min-height: 130px;
    }

    .panel-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #64748b;
      align-self: flex-start;
      border-bottom: 1px solid #f1f5f9;
      width: 100%;
      padding-bottom: 4px;
      margin-bottom: 2px;
    }

    .solve-steps {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      width: 100%;
    }

    .math-step {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      color: #334155;
    }

    .highlight-result {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 6px;
      padding: 3px 10px;
      color: #166534;
      font-weight: 700;
      font-size: 15px;
    }

    .check-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex: 1;
      width: 100%;
    }

    .check-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      background: #dcfce7;
      border: 1px solid #86efac;
      color: #15803d;
      font-size: 11px;
      font-weight: 700;
      padding: 5px 8px;
      border-radius: 6px;
      text-align: center;
      line-height: 1.2;
      width: 100%;
    }

    /* Active Step Focus Rings */
    .focus-ring {
      border-color: #0284c7 !important;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25) !important;
    }

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

    .step-btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    .step-btn:hover {
      background: #e2e8f0;
      color: #1e293b;
    }

    .step-btn.active {
      background: #0284c7;
      border-color: #0369a1;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.3);
    }

    @media (max-width: 440px) {
      body {
        padding: 8px;
        gap: 8px;
      }
      .total-box {
        font-size: 13px;
        padding: 6px 12px;
      }
      .card-val {
        font-size: 12px;
      }
      .bottom-row {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .panel {
        min-height: auto;
      }
      .math-step {
        font-size: 14px;
      }
      .step-btn {
        padding: 5px 10px;
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    
    <div class="model-section" id="modelSec">
      <div class="total-box" id="totalBox">
        Total Package Cost: <span class="var-t">t</span>
      </div>

      
      <svg class="arrows-svg" viewBox="0 0 400 32" preserveAspectRatio="none">
        <defs>
          <marker id="arrow" viewBox="0 0 6 6" refX="4" refY="3" markerWidth="4" markerHeight="4" orient="auto">
            <path d="M 0 0 L 6 3 L 0 6 z" fill="#94a3b8"/>
          </marker>
        </defs>
        <path class="arrow-path" d="M 200,0 L 200,8 C 200,16 50,14 50,26" marker-end="url(#arrow)"/>
        <path class="arrow-path" d="M 200,0 L 200,8 C 200,16 150,14 150,26" marker-end="url(#arrow)"/>
        <path class="arrow-path" d="M 200,0 L 200,8 C 200,16 250,14 250,26" marker-end="url(#arrow)"/>
        <path class="arrow-path" d="M 200,0 L 200,8 C 200,16 350,14 350,26" marker-end="url(#arrow)"/>
      </svg>

      
      <div class="cards-row" id="cardsRow">
        <div class="wallet-card">
          <span class="card-icon">💳</span>
          <span class="card-val">$18.50</span>
        </div>
        <div class="wallet-card">
          <span class="card-icon">💳</span>
          <span class="card-val">$18.50</span>
        </div>
        <div class="wallet-card">
          <span class="card-icon">💳</span>
          <span class="card-val">$18.50</span>
        </div>
        <div class="wallet-card">
          <span class="card-icon">💳</span>
          <span class="card-val">$18.50</span>
        </div>
      </div>
    </div>

    
    <div class="bottom-row">
      
      <div class="panel" id="solvePanel">
        <span class="panel-title">Solve (Multiply both sides by 4)</span>
        <div class="solve-steps">
          <div class="math-step">
            <span class="math-expr">
              <span class="frac"><span class="num"><span class="var-math">t</span></span><span class="den">4</span></span>
              <span>=</span>
              <span>18.50</span>
            </span>
          </div>
          <div class="math-step">
            <span class="math-expr">
              <span>4</span>
              <span>×</span>
              <span class="frac"><span class="num"><span class="var-math">t</span></span><span class="den">4</span></span>
              <span>=</span>
              <span>18.50</span>
              <span>×</span>
              <span>4</span>
            </span>
          </div>
          <div class="math-step highlight-result">
            <span class="math-expr">
              <span class="var-math">t</span>
              <span>=</span>
              <span>$74.00</span>
            </span>
          </div>
        </div>
      </div>

      
      <div class="panel" id="checkPanel">
        <span class="panel-title">Check</span>
        <div class="check-content">
          <div class="math-step">
            <span class="math-expr">
              <span class="frac"><span class="num">74.00</span><span class="den">4</span></span>
              <span>=</span>
              <span>18.50</span>
            </span>
          </div>
          <div class="check-badge">
            <span>✓ Solution is reasonable &amp; correct</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="stepper-nav">
    <button class="step-btn active" id="btn-step1" type="button">1. Model</button>
    <button class="step-btn" id="btn-step2" type="button">2. Solve</button>
    <button class="step-btn" id="btn-step3" type="button">3. Check</button>
  </div>

  <script>
    const totalBox = document.getElementById('totalBox');
    const cardsRow = document.getElementById('cardsRow');
    const solvePanel = document.getElementById('solvePanel');
    const checkPanel = document.getElementById('checkPanel');

    const btns = [
      document.getElementById('btn-step1'),
      document.getElementById('btn-step2'),
      document.getElementById('btn-step3')
    ];

    function setStep(idx) {
      btns.forEach((b, i) => b.classList.toggle('active', i === idx));
      
      // Clear focus outlines
      totalBox.classList.remove('focus-ring');
      solvePanel.classList.remove('focus-ring');
      checkPanel.classList.remove('focus-ring');

      if (idx === 0) {
        totalBox.classList.add('focus-ring');
      } else if (idx === 1) {
        solvePanel.classList.add('focus-ring');
      } else if (idx === 2) {
        checkPanel.classList.add('focus-ring');
      }
    }

    btns.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        clearInterval(autoInterval);
        setStep(idx);
      });
    });

    // Auto-advance stepper smoothly
    let currentStep = 0;
    let autoInterval = setInterval(() => {
      currentStep = (currentStep + 1) % 3;
      setStep(currentStep);
    }, 3800);

    // Initial state
    setStep(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">
  <title>Writing Equations from Scenarios</title>
  <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;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 10px;
      user-select: none;
    }

    .diagram-area {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
    }

    /* Top: Receipt Box */
    .receipt {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 4px;
    }

    .receipt-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 5px 4px;
      border-radius: 8px;
      border: 1.5px solid transparent;
      cursor: pointer;
      transition: background-color 0.2s, border-color 0.2s, opacity 0.2s;
    }

    .receipt-item:hover {
      background: #f8fafc;
    }

    .receipt-item.part-book.active { border-color: #0284c7; background: #e0f2fe; }
    .receipt-item.part-change.active { border-color: #059669; background: #d1fae5; }
    .receipt-item.part-total.active { border-color: #7c3aed; background: #ede9fe; }

    .receipt-label {
      font-size: clamp(9px, 2.5vw, 11px);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      color: #64748b;
      white-space: nowrap;
      text-align: center;
    }

    .receipt-val {
      font-size: clamp(13px, 3.5vw, 15px);
      font-weight: 800;
      margin-top: 2px;
    }

    .math-symbol {
      font-size: 15px;
      color: #94a3b8;
      font-weight: 700;
      padding: 0 2px;
    }

    /* Middle: SVG Scale */
    .scale-container {
      width: 100%;
      height: 150px;
      position: relative;
    }

    svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .pan-item {
      cursor: pointer;
      transition: opacity 0.2s ease, filter 0.2s ease;
    }

    .pan-item:hover {
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
    }

    /* Bottom: Equation Box */
    .equation-card {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e6e6e6;
      border-radius: 10px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

    .equation-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: clamp(18px, 5vw, 22px);
      font-weight: 800;
      font-family: "Courier New", Courier, monospace;
    }

    .eq-term {
      padding: 3px 8px;
      border-radius: 6px;
      border: 2px solid transparent;
      cursor: pointer;
      transition: background-color 0.2s, border-color 0.2s, opacity 0.2s, box-shadow 0.2s;
    }

    .eq-term.part-book {
      color: #0284c7;
      background: #e0f2fe;
    }
    .eq-term.part-book.active {
      border-color: #0284c7;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
    }

    .eq-term.part-change {
      color: #059669;
      background: #d1fae5;
    }
    .eq-term.part-change.active {
      border-color: #059669;
      box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.25);
    }

    .eq-term.part-total {
      color: #7c3aed;
      background: #ede9fe;
    }
    .eq-term.part-total.active {
      border-color: #7c3aed;
      box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
    }

    .eq-op {
      color: #94a3b8;
      font-weight: 700;
    }

    .hint-text {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      min-height: 16px;
      text-align: center;
      transition: color 0.2s ease;
    }
  </style>
</head>
<body>

  <div class="diagram-area">
    
    <div class="receipt">
      <div class="receipt-item part-book" data-part="book" title="Book Cost">
        <span class="receipt-label">Spent on Book</span>
        <span class="receipt-val" style="color: #0284c7;">$b</span>
      </div>
      <div class="math-symbol">+</div>
      <div class="receipt-item part-change" data-part="change" title="Change Left">
        <span class="receipt-label">Change Left</span>
        <span class="receipt-val" style="color: #059669;">$6.25</span>
      </div>
      <div class="math-symbol">=</div>
      <div class="receipt-item part-total" data-part="total" title="Started With">
        <span class="receipt-label">Started With</span>
        <span class="receipt-val" style="color: #7c3aed;">$20.00</span>
      </div>
    </div>

    
    <div class="scale-container">
      <svg viewBox="0 0 400 150">
        
        <polygon points="200,60 185,138 215,138" fill="#94a3b8" />
        <rect x="160" y="138" width="80" height="7" rx="3.5" fill="#64748b" />
        <circle cx="200" cy="60" r="5" fill="#475569" />

        
        <line x1="200" y1="60" x2="200" y2="34" stroke="#22b7ff" stroke-width="2" stroke-dasharray="2,2" />
        <polygon points="200,30 196,37 204,37" fill="#22b7ff" />

        
        <line x1="65" y1="60" x2="335" y2="60" stroke="#475569" stroke-width="4" stroke-linecap="round" />

        
        
        <line x1="65" y1="60" x2="22" y2="122" stroke="#94a3b8" stroke-width="1.5" />
        <line x1="65" y1="60" x2="108" y2="122" stroke="#94a3b8" stroke-width="1.5" />
        
        <path d="M 18 122 Q 65 136 112 122 Z" fill="#e2e8f0" stroke="#94a3b8" stroke-width="1.5" />

        
        <g class="pan-item part-book" data-part="book">
          <rect x="26" y="86" width="28" height="32" rx="3" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5" />
          <path d="M 31 91 L 31 113 M 35 91 L 35 113" stroke="#ffffff" stroke-width="1.5" opacity="0.7" />
          <text x="43" y="108" font-size="16" font-weight="bold" fill="#ffffff" text-anchor="middle" font-family="monospace">b</text>
        </g>

        
        <g class="pan-item part-change" data-part="change">
          
          <rect x="61" y="73" width="38" height="15" rx="4" fill="#d1fae5" stroke="#059669" stroke-width="1" />
          <text x="80" y="84" font-size="10" font-weight="bold" fill="#065f46" text-anchor="middle">$6.25</text>
          
          <circle cx="68" cy="116" r="6" fill="#34d399" stroke="#059669" stroke-width="1.2" />
          <circle cx="80" cy="117" r="6" fill="#6ee7b7" stroke="#059669" stroke-width="1.2" />
          <circle cx="92" cy="116" r="6" fill="#34d399" stroke="#059669" stroke-width="1.2" />
          <circle cx="74" cy="107" r="6" fill="#a7f3d0" stroke="#059669" stroke-width="1.2" />
          <circle cx="86" cy="107" r="6" fill="#6ee7b7" stroke="#059669" stroke-width="1.2" />
          <circle cx="80" cy="98" r="5.5" fill="#34d399" stroke="#059669" stroke-width="1.2" />
        </g>

        
        
        <line x1="335" y1="60" x2="292" y2="122" stroke="#94a3b8" stroke-width="1.5" />
        <line x1="335" y1="60" x2="378" y2="122" stroke="#94a3b8" stroke-width="1.5" />
        
        <path d="M 288 122 Q 335 136 382 122 Z" fill="#e2e8f0" stroke="#94a3b8" stroke-width="1.5" />

        
        <g class="pan-item part-total" data-part="total">
          <rect x="306" y="94" width="58" height="24" rx="3" fill="#c4b5fd" stroke="#7c3aed" stroke-width="1.5" />
          <rect x="310" y="97" width="50" height="18" rx="2" fill="none" stroke="#7c3aed" stroke-width="1" stroke-dasharray="2,2" />
          <text x="335" y="110" font-size="11" font-weight="bold" fill="#5b21b6" text-anchor="middle">$20.00</text>
        </g>
      </svg>
    </div>

    
    <div class="equation-card">
      <div class="equation-row">
        <span class="eq-term part-book" data-part="book">b</span>
        <span class="eq-op">+</span>
        <span class="eq-term part-change" data-part="change">6.25</span>
        <span class="eq-op">=</span>
        <span class="eq-term part-total" data-part="total">20.00</span>
      </div>
      <div class="hint-text" id="hint">Tap any part to highlight its relationship</div>
    </div>
  </div>

  <script>
    const hints = {
      book: "Book Cost ($b) is the unknown quantity on the left pan",
      change: "Remaining Change ($6.25) added to the book balances the total",
      total: "Starting Cash ($20.00) equals the sum on the left side"
    };

    let activePart = null;

    function selectPart(part) {
      if (activePart === part) {
        activePart = null;
      } else {
        activePart = part;
      }

      document.querySelectorAll('[data-part]').forEach(el => {
        if (!activePart) {
          el.classList.remove('active');
          el.style.opacity = '1';
        } else if (el.dataset.part === activePart) {
          el.classList.add('active');
          el.style.opacity = '1';
        } else {
          el.classList.remove('active');
          el.style.opacity = '0.35';
        }
      });

      const hintEl = document.getElementById('hint');
      if (activePart) {
        hintEl.textContent = hints[activePart];
        if (activePart === 'book') hintEl.style.color = '#0284c7';
        else if (activePart === 'change') hintEl.style.color = '#059669';
        else if (activePart === 'total') hintEl.style.color = '#7c3aed';
      } else {
        hintEl.textContent = "Tap any part to highlight its relationship";
        hintEl.style.color = '#64748b';
      }
    }

    document.querySelectorAll('[data-part]').forEach(el => {
      el.addEventListener('click', (e) => {
        e.stopPropagation();
        selectPart(el.dataset.part);
      });
    });

    document.body.addEventListener('click', (e) => {
      if (!e.target.closest('[data-part]')) {
        selectPart(activePart);
      }
    });
  </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; }
    :root {
      --primary: #22b7ff;
      --primary-dark: #0098df;
      --primary-light: #e6f7ff;
      --text: #1e2945;
      --muted: #64748b;
      --border: #e2e8f0;
      --bg: #f8fafc;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      color: var(--text);
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }

    /* Steps Badges Grid */
    .steps-nav {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    @media (max-width: 480px) {
      .steps-nav {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    .step-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      text-align: left;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
    }
    .step-btn.active {
      background: var(--primary-light);
      border-color: var(--primary);
      box-shadow: 0 0 0 1px var(--primary);
    }
    .badge-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #e2e8f0;
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
    }
    .step-btn.active .badge-num {
      background: var(--primary);
      color: #fff;
    }
    .badge-content {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    .badge-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .badge-sub {
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Stage Area */
    .stage-container {
      position: relative;
      height: 230px;
      background: var(--bg);
      border-radius: 12px;
      border: 1px solid var(--border);
      overflow: hidden;
    }
    .stage-panel {
      position: absolute;
      inset: 0;
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .stage-panel.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Visual Content per Step */
    .visual-card {
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px 18px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      max-width: 380px;
      width: 100%;
    }
    .icon-hero {
      font-size: 28px;
      line-height: 1;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--primary-light);
      color: var(--primary-dark);
      padding: 4px 10px;
      border-radius: 6px;
      font-weight: 700;
      font-size: 15px;
      letter-spacing: 0.5px;
    }
    .math-expr {
      font-family: 'Cambria Math', 'Times New Roman', serif;
      font-size: 20px;
      font-weight: 600;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ops-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
    }
    .op-chip {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 6px 4px;
      text-align: center;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
    }
    .op-chip.highlight {
      border-color: var(--primary);
      background: var(--primary-light);
      color: var(--primary-dark);
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .btn:active {
      background: var(--bg);
    }
    .dots-container {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background-color 0.2s ease, width 0.2s ease;
    }
    .dot.active {
      width: 18px;
      border-radius: 4px;
      background: var(--primary);
    }
  </style>
</head>
<body>

  
  <div class="steps-nav" id="stepsNav">
    <button class="step-btn active" data-step="0">
      <div class="badge-num">1</div>
      <div class="badge-content">
        <span class="badge-title">Identify Unknown</span>
        <span class="badge-sub">Variable (x)</span>
      </div>
    </button>
    <button class="step-btn" data-step="1">
      <div class="badge-num">2</div>
      <div class="badge-content">
        <span class="badge-title">Relationship</span>
        <span class="badge-sub">+, −, ×, ÷</span>
      </div>
    </button>
    <button class="step-btn" data-step="2">
      <div class="badge-num">3</div>
      <div class="badge-content">
        <span class="badge-title">Write &amp; Solve</span>
        <span class="badge-sub">Inverse Op</span>
      </div>
    </button>
    <button class="step-btn" data-step="3">
      <div class="badge-num">4</div>
      <div class="badge-content">
        <span class="badge-title">Evaluate</span>
        <span class="badge-sub">Check &amp; Verify</span>
      </div>
    </button>
  </div>

  
  <div class="stage-container">
    
    <div class="stage-panel active" id="panel0">
      <div class="visual-card">
        <span class="icon-hero">🔍</span>
        <div class="tag">let c = cost of item</div>
        <span style="font-size: 13px; color: var(--muted); font-weight: 500;">Name the target quantity</span>
      </div>
    </div>

    
    <div class="stage-panel" id="panel1">
      <div class="visual-card">
        <span class="icon-hero">⚖️</span>
        <div class="ops-grid">
          <div class="op-chip highlight">＋ Combine</div>
          <div class="op-chip highlight">− Remove</div>
          <div class="op-chip">× Groups</div>
          <div class="op-chip">÷ Share</div>
        </div>
        <span style="font-size: 13px; color: var(--muted); font-weight: 500;">Match scenario to operation</span>
      </div>
    </div>

    
    <div class="stage-panel" id="panel2">
      <div class="visual-card">
        <span class="icon-hero">⚡</span>
        <div class="math-expr">
          <span>c + 6.25 = 20</span>
        </div>
        <div class="tag" style="background: #f0fdf4; color: #16a34a;">
          c = 20 − 6.25 = 13.75
        </div>
      </div>
    </div>

    
    <div class="stage-panel" id="panel3">
      <div class="visual-card">
        <span class="icon-hero">✓</span>
        <div class="math-expr">
          <span>13.75 + 6.25 = 20</span>
        </div>
        <div class="tag" style="background: #ecfdf5; color: #059669;">
          Sensible &amp; Exact ✓
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn">← Prev</button>
    <div class="dots-container" id="dots">
      <div class="dot active" data-step="0"></div>
      <div class="dot" data-step="1"></div>
      <div class="dot" data-step="2"></div>
      <div class="dot" data-step="3"></div>
    </div>
    <div style="display: flex; gap: 6px;">
      <button class="btn" id="playBtn">⏸</button>
      <button class="btn" id="nextBtn">Next →</button>
    </div>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 4;
    let isPlaying = true;
    let timer = null;

    const stepBtns = document.querySelectorAll('.step-btn');
    const panels = document.querySelectorAll('.stage-panel');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');

    function showStep(idx) {
      currentStep = (idx + totalSteps) % totalSteps;
      stepBtns.forEach((btn, i) => btn.classList.toggle('active', i === currentStep));
      panels.forEach((p, i) => p.classList.toggle('active', i === currentStep));
      dots.forEach((dot, i) => dot.classList.toggle('active', i === currentStep));
    }

    function nextStep() {
      showStep(currentStep + 1);
    }

    function prevStep() {
      showStep(currentStep - 1);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
      playBtn.textContent = '⏸';
      isPlaying = true;
    }

    function pauseAutoPlay() {
      if (timer) clearInterval(timer);
      timer = null;
      playBtn.textContent = '▶';
      isPlaying = false;
    }

    function toggleAutoPlay() {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    }

    // Event Listeners
    stepBtns.forEach((btn) => {
      btn.addEventListener('click', () => {
        pauseAutoPlay();
        showStep(parseInt(btn.getAttribute('data-step'), 10));
      });
    });

    dots.forEach((dot) => {
      dot.addEventListener('click', () => {
        pauseAutoPlay();
        showStep(parseInt(dot.getAttribute('data-step'), 10));
      });
    });

    playBtn.addEventListener('click', toggleAutoPlay);
    nextBtn.addEventListener('click', () => { pauseAutoPlay(); nextStep(); });
    prevBtn.addEventListener('click', () => { pauseAutoPlay(); prevStep(); });

    // Start on step 0
    startAutoPlay();
  </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">
  <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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 8px;
    }

    .visual-area {
      width: 100%;
      max-width: 420px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .svg-container {
      width: 100%;
      max-width: 280px;
      height: 160px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .side-label {
      font-size: 15px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .unknown-label {
      fill: #ea580c;
      font-weight: 800;
      font-size: 16px;
    }

    .badge-perimeter {
      background-color: #fff7ed;
      border: 2px solid #f97316;
      color: #c2410c;
      font-size: 14px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(249, 115, 22, 0.12);
    }

    /* Equation Steps Display */
    .steps-card {
      width: 100%;
      max-width: 400px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 140px;
      justify-content: center;
    }

    .step-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      color: #64748b;
      background: transparent;
      transition: all 0.25s ease;
      opacity: 0.45;
    }

    .step-row.active {
      background: #ffffff;
      color: #1e2945;
      opacity: 1;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
      border-left: 4px solid #f97316;
    }

    .step-row.done {
      opacity: 0.85;
      color: #334155;
    }

    .step-tag {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .step-math {
      font-family: "Cambria Math", "KaTeX_Math", "Times New Roman", serif;
      font-size: 17px;
      letter-spacing: 0.5px;
    }

    .highlight-sub {
      color: #ea580c;
      font-weight: 700;
    }

    .highlight-res {
      color: #16a34a;
      font-weight: 700;
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 400px;
      margin-top: 4px;
    }

    .step-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      user-select: none;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }

    .step-btn:hover {
      background: #e2e8f0;
    }

    .step-btn.active {
      background: #f97316;
      color: #ffffff;
      border-color: #f97316;
      box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
    }

    .play-btn {
      flex: 0 0 38px;
      height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #1e2945;
      color: #ffffff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
    }

    .play-btn:hover {
      background: #334155;
    }
  </style>
</head>
<body>

  <div class="visual-area">
    
    <div class="svg-container">
      <svg viewBox="0 0 260 140">
        
        <polygon points="130,20 25,120 235,120" 
                 fill="#fff7ed" 
                 stroke="#f97316" 
                 stroke-width="3" 
                 stroke-linejoin="round" />
        
        
        <text x="60" y="60" class="side-label">7 cm</text>
        
        
        <text x="200" y="60" class="side-label">9 cm</text>
        
        
        <rect id="baseBadge" x="98" y="106" width="64" height="26" rx="6" fill="#ffffff" stroke="#f97316" stroke-width="1.5" />
        <text id="baseLabel" x="130" y="120" class="side-label unknown-label">x cm</text>
      </svg>
    </div>

    
    <div class="badge-perimeter">
      <span>Total Perimeter = 24 cm</span>
    </div>
  </div>

  
  <div class="steps-card">
    <div class="step-row active" id="stepRow0">
      <span class="step-tag">Step 1</span>
      <span class="step-math">x + 7 + 9 = 24</span>
    </div>
    <div class="step-row" id="stepRow1">
      <span class="step-tag">Step 2</span>
      <span class="step-math">x + 16 = 24</span>
    </div>
    <div class="step-row" id="stepRow2">
      <span class="step-tag">Step 3</span>
      <span class="step-math">x + 16 <span class="highlight-sub">− 16</span> = 24 <span class="highlight-sub">− 16</span></span>
    </div>
    <div class="step-row" id="stepRow3">
      <span class="step-tag">Step 4</span>
      <span class="step-math"><span class="highlight-res">x = 8 cm</span></span>
    </div>
  </div>

  
  <div class="controls">
    <button class="play-btn" id="togglePlay" aria-label="Play/Pause">⏸</button>
    <button class="step-btn active" data-step="0">1</button>
    <button class="step-btn" data-step="1">2</button>
    <button class="step-btn" data-step="2">3</button>
    <button class="step-btn" data-step="3">4</button>
  </div>

  <script>
    const rows = [
      document.getElementById('stepRow0'),
      document.getElementById('stepRow1'),
      document.getElementById('stepRow2'),
      document.getElementById('stepRow3')
    ];
    const btns = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('togglePlay');
    const baseLabel = document.getElementById('baseLabel');

    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    function render(step) {
      currentStep = step;
      rows.forEach((row, i) => {
        row.classList.remove('active', 'done');
        if (i === step) {
          row.classList.add('active');
        } else if (i < step) {
          row.classList.add('done');
        }
      });

      btns.forEach((btn, i) => {
        btn.classList.toggle('active', i === step);
      });

      if (step === 3) {
        baseLabel.textContent = 'x = 8 cm';
        baseLabel.style.fill = '#16a34a';
      } else {
        baseLabel.textContent = 'x cm';
        baseLabel.style.fill = '#ea580c';
      }
    }

    function nextStep() {
      const next = (currentStep + 1) % 4;
      render(next);
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(nextStep, 3500);
      isPlaying = true;
      playBtn.textContent = '⏸';
    }

    function stopTimer() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
      isPlaying = false;
      playBtn.textContent = '▶';
    }

    btns.forEach(btn => {
      btn.addEventListener('click', () => {
        const step = parseInt(btn.getAttribute('data-step'), 10);
        render(step);
        stopTimer();
      });
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopTimer();
      } else {
        startTimer();
      }
    });

    // Initialize
    render(0);
    startTimer();
  </script>
</body>
</html>

Solving One-Step Equations in Geometric Contexts

<!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: #1e2945;
      background: #ffffff;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100%;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .svg-container {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 170px;
      display: block;
    }
    .steps-container {
      width: 100%;
      min-height: 84px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    .step-panel {
      display: none;
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .step-panel.active {
      display: flex;
      animation: fadeIn 0.25s ease-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(3px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .step-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 4px;
    }
    .tag-1 { background: #eef2ff; color: #4f46e5; }
    .tag-2 { background: #fef2f2; color: #dc2626; }
    .tag-3 { background: #f0fdf4; color: #16a34a; }
    .math-row {
      font-size: 19px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      line-height: 1.3;
    }
    .math-sub {
      font-size: 13px;
      color: #64748b;
      line-height: 1.4;
    }
    .c-indigo { color: #6366f1; font-weight: 700; }
    .c-blue { color: #0284c7; font-weight: 700; }
    .c-red { color: #dc2626; font-weight: 700; }
    .c-green { color: #16a34a; font-weight: 700; }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin-top: 4px;
    }
    .btn-step {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .btn-step:hover {
      background: #e2e8f0;
    }
    .btn-step.active {
      background: #6366f1;
      border-color: #6366f1;
      color: #ffffff;
    }
    .btn-play {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: background-color 0.2s ease;
    }
    .btn-play:hover {
      background: #f8fafc;
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <div class="svg-container">
      <svg viewBox="0 0 360 170" aria-label="Supplementary angles on a straight line">
        <defs>
          <marker id="arrow" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#1e2945" />
          </marker>
          <marker id="arrow-ray" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#1e2945" />
          </marker>
        </defs>

        
        <line x1="40" y1="130" x2="320" y2="130" stroke="#1e2945" stroke-width="2.5" marker-start="url(#arrow)" marker-end="url(#arrow)" />
        
        
        <line x1="180" y1="130" x2="243" y2="40" stroke="#1e2945" stroke-width="2.5" marker-end="url(#arrow-ray)" />
        
        
        <circle cx="180" cy="130" r="3.5" fill="#1e2945" />

        
        <path d="M 135 130 A 45 45 0 0 1 216.7 103.1" fill="none" stroke="#6366f1" stroke-width="2.5" />
        <rect x="110" y="74" width="46" height="24" rx="4" fill="#eef2ff" stroke="#c7d2fe" stroke-width="1" />
        <text x="133" y="90.5" fill="#4338ca" font-size="14" font-weight="700" text-anchor="middle">125°</text>

        
        <path d="M 232 130 A 52 52 0 0 0 209.8 87.4" fill="none" stroke="#0284c7" stroke-width="2.5" />
        <rect x="236" y="92" width="34" height="24" rx="4" fill="#e0f2fe" stroke="#bae6fd" stroke-width="1" />
        <text x="253" y="108.5" fill="#0369a1" font-size="14" font-weight="700" text-anchor="middle">a°</text>

        
        <path d="M 55 138 Q 180 158 305 138" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />
        <text x="180" y="160" fill="#64748b" font-size="11" font-weight="600" text-anchor="middle">Straight Angle = 180°</text>
      </svg>
    </div>

    
    <div class="steps-container">
      <div class="step-panel active" id="step-1">
        <span class="step-tag tag-1">Step 1: Set Up</span>
        <div class="math-row">
          <span class="c-blue">a</span> + <span class="c-indigo">125°</span> = 180°
        </div>
        <div class="math-sub">Supplementary angles sum to 180°</div>
      </div>

      <div class="step-panel" id="step-2">
        <span class="step-tag tag-2">Step 2: Isolate a</span>
        <div class="math-row">
          <span class="c-blue">a</span> + 125° <span class="c-red">− 125°</span> = 180° <span class="c-red">− 125°</span>
        </div>
        <div class="math-sub">Subtract 125° from both sides</div>
      </div>

      <div class="step-panel" id="step-3">
        <span class="step-tag tag-3">Step 3: Solution</span>
        <div class="math-row">
          <span class="c-blue">a</span> = <span class="c-green">55°</span>
        </div>
        <div class="math-sub">Check: 55° + 125° = 180° ✓</div>
      </div>
    </div>

    
    <div class="controls">
      <button class="btn-step active" onclick="goToStep(0)">1</button>
      <button class="btn-step" onclick="goToStep(1)">2</button>
      <button class="btn-step" onclick="goToStep(2)">3</button>
      <button class="btn-play" id="playBtn" onclick="togglePlay()">
        <span id="playIcon">⏸</span> Pause
      </button>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;
    const totalSteps = 3;

    const panels = [
      document.getElementById('step-1'),
      document.getElementById('step-2'),
      document.getElementById('step-3')
    ];
    const buttons = document.querySelectorAll('.btn-step');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');

    function showStep(index) {
      currentStep = index;
      panels.forEach((p, i) => {
        p.classList.toggle('active', i === index);
      });
      buttons.forEach((b, i) => {
        b.classList.toggle('active', i === index);
      });
    }

    function goToStep(index) {
      showStep(index);
    }

    function nextStep() {
      const next = (currentStep + 1) % totalSteps;
      showStep(next);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
      isPlaying = true;
      playIcon.textContent = '⏸';
      playBtn.lastChild.textContent = ' Pause';
    }

    function pauseAutoPlay() {
      if (timer) clearInterval(timer);
      timer = null;
      isPlaying = false;
      playIcon.textContent = '▶';
      playBtn.lastChild.textContent = ' Play';
    }

    function togglePlay() {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        startAutoPlay();
      }
    }

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

111.26(b)(1)(A)

Aligned learning resources

Related diagrams