<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background: transparent;
      color: #0f172a;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      min-height: 100%;
      user-select: none;
    }

    .main-wrap {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Math typography styling */
    .math {
      font-family: "Cambria Math", "STIX Two Math", "Times New Roman", Georgia, serif;
      font-style: normal;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      white-space: nowrap;
    }

    .math var {
      font-style: italic;
      padding-right: 1px;
    }

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

    .frac .num {
      border-bottom: 1.5px solid currentColor;
      padding: 0 1px 2px 1px;
      display: block;
    }

    .frac .den {
      padding: 2px 1px 0 1px;
      display: block;
    }

    .sup {
      font-size: 0.72em;
      vertical-align: super;
      line-height: 0;
      margin-left: 1px;
      font-weight: bold;
    }

    .paren {
      font-size: 1.2em;
      font-weight: 300;
      line-height: 1;
      padding: 0 0.5px;
      vertical-align: middle;
    }

    .op {
      margin: 0 2px;
      font-weight: 600;
    }

    /* Color Tokens for Terms */
    .t1 { color: #b45309; font-weight: 700; } /* Amber / Term 1 */
    .t2 { color: #15803d; font-weight: 700; } /* Emerald / Term 2 */
    .t3 { color: #6d28d9; font-weight: 700; } /* Purple / Term 3 */
    .t4 { color: #334155; font-weight: 700; } /* Slate / Term 4 */

    /* Expression Header */
    .expr-header {
      background: #f8fafc;
      border-radius: 8px;
      padding: 8px 6px;
      text-align: center;
      font-size: clamp(0.78rem, 3.2vw, 1.12rem);
      color: #0f172a;
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 1.4;
      border: 1px solid #e2e8f0;
      width: 100%;
      overflow-x: auto;
    }

    /* Stepper Navigation */
    .nav-bar {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    @media (min-width: 520px) {
      .nav-bar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
    }

    .step-pills {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
      flex: 1;
    }

    .step-pill {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      font-size: clamp(10.5px, 2.6vw, 12px);
      font-weight: 700;
      padding: 7px 4px;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease;
    }

    .step-pill.active {
      background: #1d4ed8;
      color: #ffffff;
      border-color: #1d4ed8;
    }

    .ctrl-btns {
      display: flex;
      gap: 6px;
      justify-content: flex-end;
    }

    .btn-icon {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      color: #1e293b;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      flex: 1;
      text-align: center;
      transition: background-color 0.28s ease, opacity 0.28s ease, border-color 0.28s ease;
    }

    @media (min-width: 520px) {
      .btn-icon {
        flex: initial;
      }
    }

    .btn-icon:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }

    /* Content Stage */
    .step-stage {
      min-height: 190px;
      padding: 4px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .step-card {
      display: none;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 100%;
      animation: fadeIn 0.28s ease forwards;
    }

    .step-card.active {
      display: flex;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .step-title {
      font-size: clamp(11px, 2.7vw, 12px);
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      color: #475569;
      text-align: center;
    }

    .terms-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 6px;
      width: 100%;
    }

    .calc-card {
      border-radius: 6px;
      padding: 6px 10px;
      font-size: clamp(12.5px, 3.2vw, 15px);
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-weight: 600;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    .bg-t1 { background: #fffbeb; border: 1.5px solid #fcd34d; }
    .bg-t2 { background: #f0fdf4; border: 1.5px solid #86efac; }
    .bg-t3 { background: #faf5ff; border: 1.5px solid #d8b4fe; }
    .bg-t4 { background: #f8fafc; border: 1.5px solid #cbd5e1; }

    .result-row {
      font-size: clamp(13px, 3.4vw, 17px);
      color: #0f172a;
      text-align: center;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 8px 10px;
      border-radius: 8px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 3px;
    }

    .arrow {
      color: #64748b;
      font-weight: bold;
      font-size: 13px;
      margin: 0 2px;
    }

    /* Final Highlight Badge */
    .final-badge {
      background: #eff6ff;
      border: 2px solid #2563eb;
      border-radius: 8px;
      padding: 8px 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 2px;
    }

    .badge-label {
      font-size: clamp(14px, 3.8vw, 16px);
      font-weight: 800;
      color: #1e40af;
      letter-spacing: 0.3px;
    }

    .badge-val {
      font-size: clamp(18px, 4.8vw, 22px);
      color: #1d4ed8;
      font-weight: 800;
    }
  </style>
</head>
<body>

<div class="main-wrap">
  
  <div class="expr-header">
    <span class="math">
      <var>P</var><span class="paren">(</span><span class="op">−</span><span class="frac"><span class="num">1</span><span class="den">3</span></span><span class="paren">)</span>
      <span class="op">=</span>
      <span class="t1">6<span class="paren">(</span><span class="op">−</span><span class="frac"><span class="num">1</span><span class="den">3</span></span><span class="paren">)</span><span class="sup">3</span></span>
      <span class="op">+</span>
      <span class="t2">4<span class="paren">(</span><span class="op">−</span><span class="frac"><span class="num">1</span><span class="den">3</span></span><span class="paren">)</span><span class="sup">2</span></span>
      <span class="op">−</span>
      <span class="t3">2<span class="paren">(</span><span class="op">−</span><span class="frac"><span class="num">1</span><span class="den">3</span></span><span class="paren">)</span></span>
      <span class="op">+</span>
      <span class="t4">1</span>
    </span>
  </div>

  
  <div class="nav-bar">
    <div class="step-pills">
      <button class="step-pill active" onclick="goToStep(0)">1. Powers</button>
      <button class="step-pill" onclick="goToStep(1)">2. Multiply</button>
      <button class="step-pill" onclick="goToStep(2)">3. Common</button>
      <button class="step-pill" onclick="goToStep(3)">4. Result</button>
    </div>
    <div class="ctrl-btns">
      <button class="btn-icon" id="prevBtn" onclick="prevStep()" disabled>← Prev</button>
      <button class="btn-icon" id="nextBtn" onclick="nextStep()">Next →</button>
    </div>
  </div>

  
  <div class="step-stage">
    
    
    <div class="step-card active" id="view0">
      <div class="step-title">Step 1: Evaluate Powers First</div>
      <div class="terms-row">
        <div class="calc-card bg-t1">
          <span class="math t1">
            <span class="paren">(</span><span class="op">−</span><span class="frac"><span class="num">1</span><span class="den">3</span></span><span class="paren">)</span><span class="sup">3</span>
            <span class="op">=</span>
            <span class="op">−</span><span class="frac"><span class="num">1</span><span class="den">27</span></span>
          </span>
        </div>
        <div class="calc-card bg-t2">
          <span class="math t2">
            <span class="paren">(</span><span class="op">−</span><span class="frac"><span class="num">1</span><span class="den">3</span></span><span class="paren">)</span><span class="sup">2</span>
            <span class="op">=</span>
            <span class="frac"><span class="num">1</span><span class="den">9</span></span>
          </span>
        </div>
      </div>
      <div class="result-row">
        <span class="math">
          <span class="op">=</span>
          <span class="t1">6<span class="paren">(</span><span class="op">−</span><span class="frac"><span class="num">1</span><span class="den">27</span></span><span class="paren">)</span></span>
          <span class="op">+</span>
          <span class="t2">4<span class="paren">(</span><span class="frac"><span class="num">1</span><span class="den">9</span></span><span class="paren">)</span></span>
          <span class="op">−</span>
          <span class="t3">2<span class="paren">(</span><span class="op">−</span><span class="frac"><span class="num">1</span><span class="den">3</span></span><span class="paren">)</span></span>
          <span class="op">+</span>
          <span class="t4">1</span>
        </span>
      </div>
    </div>

    
    <div class="step-card" id="view1">
      <div class="step-title">Step 2: Multiply Terms & Simplify</div>
      <div class="terms-row">
        <div class="calc-card bg-t1">
          <span class="math t1">
            6<span class="paren">(</span><span class="op">−</span><span class="frac"><span class="num">1</span><span class="den">27</span></span><span class="paren">)</span>
            <span class="arrow">→</span>
            <span class="op">−</span><span class="frac"><span class="num">2</span><span class="den">9</span></span>
          </span>
        </div>
        <div class="calc-card bg-t2">
          <span class="math t2">
            4<span class="paren">(</span><span class="frac"><span class="num">1</span><span class="den">9</span></span><span class="paren">)</span>
            <span class="arrow">→</span>
            <span class="frac"><span class="num">4</span><span class="den">9</span></span>
          </span>
        </div>
        <div class="calc-card bg-t3">
          <span class="math t3">
            <span class="op">−</span>2<span class="paren">(</span><span class="op">−</span><span class="frac"><span class="num">1</span><span class="den">3</span></span><span class="paren">)</span>
            <span class="arrow">→</span>
            <span class="op">+</span><span class="frac"><span class="num">2</span><span class="den">3</span></span>
          </span>
        </div>
      </div>
      <div class="result-row">
        <span class="math">
          <span class="op">=</span>
          <span class="t1"><span class="op">−</span><span class="frac"><span class="num">2</span><span class="den">9</span></span></span>
          <span class="op">+</span>
          <span class="t2"><span class="frac"><span class="num">4</span><span class="den">9</span></span></span>
          <span class="op">+</span>
          <span class="t3"><span class="frac"><span class="num">2</span><span class="den">3</span></span></span>
          <span class="op">+</span>
          <span class="t4">1</span>
        </span>
      </div>
    </div>

    
    <div class="step-card" id="view2">
      <div class="step-title">Step 3: Convert to Common Denominator (9)</div>
      <div class="terms-row">
        <div class="calc-card bg-t3">
          <span class="math t3">
            <span class="frac"><span class="num">2</span><span class="den">3</span></span>
            <span class="op">=</span>
            <span class="frac"><span class="num">2 × 3</span><span class="den">3 × 3</span></span>
            <span class="op">=</span>
            <span class="frac"><span class="num">6</span><span class="den">9</span></span>
          </span>
        </div>
        <div class="calc-card bg-t4">
          <span class="math t4">
            1
            <span class="op">=</span>
            <span class="frac"><span class="num">9</span><span class="den">9</span></span>
          </span>
        </div>
      </div>
      <div class="result-row">
        <span class="math">
          <span class="op">=</span>
          <span class="t1"><span class="op">−</span><span class="frac"><span class="num">2</span><span class="den">9</span></span></span>
          <span class="op">+</span>
          <span class="t2"><span class="frac"><span class="num">4</span><span class="den">9</span></span></span>
          <span class="op">+</span>
          <span class="t3"><span class="frac"><span class="num">6</span><span class="den">9</span></span></span>
          <span class="op">+</span>
          <span class="t4"><span class="frac"><span class="num">9</span><span class="den">9</span></span></span>
        </span>
      </div>
    </div>

    
    <div class="step-card" id="view3">
      <div class="step-title">Step 4: Combine Numerators</div>
      <div class="result-row">
        <span class="math">
          <span class="op">=</span>
          <span class="frac">
            <span class="num"><span class="t1">−2</span> <span class="op">+</span> <span class="t2">4</span> <span class="op">+</span> <span class="t3">6</span> <span class="op">+</span> <span class="t4">9</span></span>
            <span class="den">9</span>
          </span>
          <span class="op">=</span>
          <span class="frac"><span class="num">17</span><span class="den">9</span></span>
        </span>
      </div>
      <div class="final-badge">
        <span class="badge-label math"><var>P</var><span class="paren">(</span><span class="op">−</span><span class="frac"><span class="num">1</span><span class="den">3</span></span><span class="paren">)</span> =</span>
        <span class="badge-val math"><span class="frac"><span class="num">17</span><span class="den">9</span></span></span>
      </div>
    </div>

  </div>
</div>

<script>
  let curStep = 0;
  const totalSteps = 4;

  function updateView() {
    for (let i = 0; i < totalSteps; i++) {
      const el = document.getElementById('view' + i);
      if (el) el.classList.toggle('active', i === curStep);
    }
    const pills = document.querySelectorAll('.step-pill');
    pills.forEach((p, idx) => {
      p.classList.toggle('active', idx === curStep);
    });

    document.getElementById('prevBtn').disabled = (curStep === 0);
    document.getElementById('nextBtn').disabled = (curStep === totalSteps - 1);
  }

  function goToStep(s) {
    curStep = Math.max(0, Math.min(totalSteps - 1, s));
    updateView();
  }

  function nextStep() {
    if (curStep < totalSteps - 1) {
      curStep++;
      updateView();
    }
  }

  function prevStep() {
    if (curStep > 0) {
      curStep--;
      updateView();
    }
  }

  window.addEventListener('DOMContentLoaded', () => {
    updateView();
  });
</script>

</body>
</html>

Evaluating Algebraic Expressions with Fractions and Decimals

<!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, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Math expression bar */
    .expr-container {
      width: 100%;
      max-width: 540px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      text-align: center;
      font-size: 17px;
      font-weight: 600;
      letter-spacing: 0.2px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .token {
      padding: 2px 4px;
      border-radius: 4px;
      transition: background 0.3s, color 0.3s;
    }
    .tok-exp { color: #8b5cf6; }
    .tok-t1  { color: #2563eb; }
    .tok-t2  { color: #d97706; }
    .tok-t3  { color: #64748b; }

    /* Steps grid */
    .steps-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      width: 100%;
      max-width: 540px;
      margin: 10px 0;
    }

    @media (max-width: 440px) {
      .steps-grid {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .expr-container {
        font-size: 15px;
        padding: 8px 10px;
      }
    }

    .step-box {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      opacity: 0.45;
      transition: opacity 0.3s, border-color 0.3s, box-shadow 0.3s;
    }
    .step-box.active {
      opacity: 1;
      border-color: #0284c7;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
    }
    .step-box.done {
      opacity: 0.9;
    }

    .step-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 4px;
    }
    .step-badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 2px 6px;
      border-radius: 4px;
      background: #f1f5f9;
      color: #64748b;
    }
    .active .step-badge {
      background: #e0f2fe;
      color: #0284c7;
    }

    .step-math {
      font-size: 14px;
      font-weight: 600;
      color: #0f172a;
    }
    .step-sub {
      font-size: 11px;
      color: #64748b;
      margin-top: 2px;
    }

    /* Result pill */
    .result-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 2px;
      min-height: 38px;
    }
    .teal-pill {
      background: #ccfbf1;
      border: 1.5px solid #0d9488;
      color: #0f766e;
      font-size: 16px;
      font-weight: 700;
      padding: 4px 16px;
      border-radius: 999px;
      transition: transform 0.3s, opacity 0.3s;
      opacity: 0.3;
    }
    .teal-pill.active {
      opacity: 1;
      transform: scale(1.04);
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      max-width: 540px;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      user-select: none;
    }
    .btn:active { background: #f1f5f9; }
    .dots {
      display: flex;
      gap: 6px;
    }
    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.3s, transform 0.3s;
    }
    .dot.active {
      background: #0284c7;
      transform: scale(1.25);
    }
  </style>
</head>
<body>

  
  <div class="expr-container">
    <span>Q(−0.4) = </span>
    <span id="tok1" class="token tok-t1">2.5<span id="tokExp" class="token tok-exp">(−0.4)²</span></span>
    <span> − </span>
    <span id="tok2" class="token tok-t2">1.4(−0.4)</span>
    <span> − </span>
    <span id="tok3" class="token tok-t3">0.75</span>
  </div>

  
  <div class="steps-grid">
    
    <div class="step-box" id="box0">
      <div class="step-header">
        <span class="step-badge">Step 1</span>
        <span class="step-sub">Exponent</span>
      </div>
      <div class="step-math">(−0.4)² = <strong style="color:#8b5cf6;">0.16</strong></div>
      <div class="step-sub">2 decimal places</div>
    </div>

    
    <div class="step-box" id="box1">
      <div class="step-header">
        <span class="step-badge">Step 2</span>
        <span class="step-sub">1st Term</span>
      </div>
      <div class="step-math">2.5 × 0.16 = <strong style="color:#2563eb;">0.40</strong></div>
      <div class="step-sub">Multiply coefficient</div>
    </div>

    
    <div class="step-box" id="box2">
      <div class="step-header">
        <span class="step-badge">Step 3</span>
        <span class="step-sub">2nd Term</span>
      </div>
      <div class="step-math">−1.4 × (−0.4) = <strong style="color:#d97706;">+0.56</strong></div>
      <div class="step-sub">(−) × (−) = (+)</div>
    </div>

    
    <div class="step-box" id="box3">
      <div class="step-header">
        <span class="step-badge">Step 4</span>
        <span class="step-sub">Combine</span>
      </div>
      <div class="step-math">0.40 + 0.56 − 0.75</div>
      <div class="step-sub">0.96 − 0.75</div>
    </div>
  </div>

  
  <div class="result-wrap">
    <span style="font-size:14px; font-weight:600; color:#475569;">Result:</span>
    <div class="teal-pill" id="pillResult">Q(−0.4) = 0.21</div>
  </div>

  
  <div class="controls">
    <button class="btn" id="prevBtn">← Back</button>
    <div class="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 class="dot" data-step="4"></div>
    </div>
    <button class="btn" id="nextBtn">Next →</button>
    <button class="btn" id="playBtn">⏸</button>
  </div>

  <script>
    let currentStep = 0;
    const totalSteps = 5;
    let autoPlay = true;
    let timer = null;

    const boxes = [
      document.getElementById('box0'),
      document.getElementById('box1'),
      document.getElementById('box2'),
      document.getElementById('box3')
    ];
    const pill = document.getElementById('pillResult');
    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');

    const tokExp = document.getElementById('tokExp');
    const tok1 = document.getElementById('tok1');
    const tok2 = document.getElementById('tok2');
    const tok3 = document.getElementById('tok3');

    function update() {
      // Update boxes
      boxes.forEach((box, i) => {
        box.classList.remove('active', 'done');
        if (i === currentStep) {
          box.classList.add('active');
        } else if (i < currentStep) {
          box.classList.add('done');
        }
      });

      // Update pill result
      if (currentStep === 4) {
        pill.classList.add('active');
      } else {
        pill.classList.remove('active');
      }

      // Update dots
      dots.forEach((d, i) => {
        d.classList.toggle('active', i === currentStep);
      });

      // Highlight math tokens
      tokExp.style.background = currentStep === 0 ? '#ede9fe' : 'transparent';
      tok1.style.background = currentStep === 1 ? '#dbeafe' : 'transparent';
      tok2.style.background = currentStep === 2 ? '#fef3c7' : 'transparent';
      tok3.style.background = currentStep === 3 ? '#f1f5f9' : 'transparent';
    }

    function setStep(s) {
      currentStep = (s + totalSteps) % totalSteps;
      update();
    }

    function next() { setStep(currentStep + 1); }
    function prev() { setStep(currentStep - 1); }

    function togglePlay() {
      autoPlay = !autoPlay;
      playBtn.textContent = autoPlay ? '⏸' : '▶';
      if (autoPlay) startTimer();
      else clearInterval(timer);
    }

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (autoPlay) next();
      }, 3500);
    }

    document.getElementById('nextBtn').addEventListener('click', () => { next(); });
    document.getElementById('prevBtn').addEventListener('click', () => { prev(); });
    playBtn.addEventListener('click', togglePlay);

    dots.forEach((dot, idx) => {
      dot.addEventListener('click', () => {
        setStep(idx);
      });
    });

    update();
    startTimer();
  </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>Multi-variable Substitution Diagram</title>
  <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: #0f172a;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100vh;
      max-height: 560px;
    }

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

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

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

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

    .app-container {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Header Bar */
    .header-box {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px 12px;
      flex-wrap: wrap;
    }

    .exp-label {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .tip-badge {
      background: #e0f2fe;
      border: 1.5px solid #38bdf8;
      color: #0369a1;
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    /* Explanation message banner */
    .step-banner {
      background: #f8fafc;
      border-left: 4px solid #0284c7;
      padding: 6px 10px;
      border-radius: 0 6px 6px 0;
      font-size: 13px;
      font-weight: 600;
      color: #1e293b;
      min-height: 32px;
      display: flex;
      align-items: center;
    }

    /* Stage */
    .main-stage {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .terms-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    @media (max-width: 460px) {
      .terms-row {
        grid-template-columns: 1fr;
      }
    }

    .term-card {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 8px;
      text-align: center;
      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

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

    .term-title {
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #334155;
      margin-bottom: 4px;
    }

    .term-math {
      font-size: 15px;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0f172a;
      padding: 2px 0;
    }

    .term-result {
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
      margin-top: 4px;
      padding-top: 4px;
      border-top: 1px dashed #94a3b8;
    }

    .sum-card {
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    }

    .sum-card.active {
      border-color: #16a34a;
      background: #f0fdf4;
      box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25);
    }

    .sum-steps {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px 10px;
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      min-height: 38px;
    }

    .final-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #15803d;
      color: #ffffff;
      padding: 3px 9px;
      border-radius: 6px;
      font-weight: 800;
      font-size: 15px;
    }

    /* Interactive Controls */
    .controls {
      width: 100%;
      max-width: 600px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-top: 4px;
    }

    .btn-group {
      display: flex;
      gap: 6px;
    }

    .btn {
      background: #ffffff;
      border: 1.5px solid #64748b;
      color: #0f172a;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background-color 0.15s, border-color 0.15s;
      user-select: none;
    }

    .btn:hover {
      background: #f1f5f9;
      border-color: #334155;
    }

    .btn:active {
      background: #e2e8f0;
    }

    .nav-dots {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .nav-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      border: 1.5px solid #94a3b8;
      transition: background-color 0.2s, border-color 0.2s;
      padding: 0;
    }

    .nav-dot.active {
      background: #0284c7;
      border-color: #0369a1;
    }
  </style>
</head>
<body>

  <div class="app-container">
    
    <div class="header-box">
      <div class="exp-label math-font">
        <span>R(a, b) = 8ab<sup>2</sup> − 3a + 5b</span>
      </div>
      <div class="tip-badge">
        <span>💡 Tip:</span>
        <span class="math-font">a = −0.5 = −<span class="frac"><span class="num">1</span><span class="den">2</span></span></span>
        <span class="math-font">, b = <span class="frac"><span class="num">1</span><span class="den">2</span></span></span>
      </div>
    </div>

    
    <div class="step-banner" id="stepMessage">
      Step 1 of 4: Substitute fractional values for each variable.
    </div>

    
    <div class="main-stage">
      <div class="terms-row">
        
        <div class="term-card" id="card1">
          <div class="term-title">Term 1 (8ab²)</div>
          <div class="term-math math-font" id="mathT1"></div>
          <div class="term-result math-font" id="resT1"></div>
        </div>

        
        <div class="term-card" id="card2">
          <div class="term-title">Term 2 (−3a)</div>
          <div class="term-math math-font" id="mathT2"></div>
          <div class="term-result math-font" id="resT2"></div>
        </div>

        
        <div class="term-card" id="card3">
          <div class="term-title">Term 3 (+5b)</div>
          <div class="term-math math-font" id="mathT3"></div>
          <div class="term-result math-font" id="resT3"></div>
        </div>
      </div>

      
      <div class="sum-card" id="sumCard">
        <div class="term-title" style="margin-bottom: 4px; color: #166534;">Combined Sum</div>
        <div class="sum-steps math-font" id="mathSum"></div>
      </div>
    </div>

    
    <div class="controls">
      <div class="btn-group">
        <button class="btn" id="playBtn" aria-label="Pause animation">⏸ Pause</button>
        <button class="btn" id="prevBtn" aria-label="Previous step">← Back</button>
        <button class="btn" id="nextBtn" aria-label="Next step">Next →</button>
      </div>

      <div class="nav-dots">
        <button class="nav-dot active" data-step="0" aria-label="Step 1"></button>
        <button class="nav-dot" data-step="1" aria-label="Step 2"></button>
        <button class="nav-dot" data-step="2" aria-label="Step 3"></button>
        <button class="nav-dot" data-step="3" aria-label="Step 4"></button>
      </div>
    </div>
  </div>

  <script>
    const frac = (n, d) => `<span class="frac"><span class="num">${n}</span><span class="den">${d}</span></span>`;

    const stepsData = [
      {
        message: "Step 1/4: Substitute fractions a = −1/2 and b = 1/2 into all three terms.",
        t1: `8(−${frac(1, 2)})(${frac(1, 2)})<sup>2</sup>`,
        r1: `= 8(−${frac(1, 2)})(${frac(1, 4)})`,
        t2: `−3(−${frac(1, 2)})`,
        r2: `= +${frac(3, 2)}`,
        t3: `5(${frac(1, 2)})`,
        r3: `= +${frac(5, 2)}`,
        sum: `(−1) + ${frac(3, 2)} + ${frac(5, 2)}`,
        activeCard: "card1"
      },
      {
        message: "Step 2/4: Simplify Term 1 multiplication: 8 × (−1/8) = −1.",
        t1: `8(−${frac(1, 8)})`,
        r1: `= −1`,
        t2: `−3(−${frac(1, 2)})`,
        r2: `= +${frac(3, 2)}`,
        t3: `5(${frac(1, 2)})`,
        r3: `= +${frac(5, 2)}`,
        sum: `−1 + ${frac("3 + 5", 2)}`,
        activeCard: "card1"
      },
      {
        message: "Step 3/4: Combine the like fractional terms: 3/2 + 5/2 = 8/2 = 4.",
        t1: `−1`,
        r1: `= −1`,
        t2: `+${frac(3, 2)}`,
        r2: `= +${frac(3, 2)}`,
        t3: `+${frac(5, 2)}`,
        r3: `= +${frac(5, 2)}`,
        sum: `−1 + ${frac(8, 2)} = −1 + 4`,
        activeCard: "card2"
      },
      {
        message: "Step 4/4: Complete the addition. The result is a clean integer (3)!",
        t1: `−1`,
        r1: `= −1`,
        t2: `+${frac(3, 2)}`,
        r2: `= +${frac(3, 2)}`,
        t3: `+${frac(5, 2)}`,
        r3: `= +${frac(5, 2)}`,
        sum: `−1 + 4 = <span class="final-badge">3 &nbsp;✓ (Integer)</span>`,
        activeCard: "sumCard"
      }
    ];

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

    function applyStep(idx) {
      currentStep = idx;
      const data = stepsData[idx];

      document.getElementById("stepMessage").textContent = data.message;
      document.getElementById("mathT1").innerHTML = data.t1;
      document.getElementById("resT1").innerHTML = data.r1;
      document.getElementById("mathT2").innerHTML = data.t2;
      document.getElementById("resT2").innerHTML = data.r2;
      document.getElementById("mathT3").innerHTML = data.t3;
      document.getElementById("resT3").innerHTML = data.r3;
      document.getElementById("mathSum").innerHTML = data.sum;

      ['card1', 'card2', 'card3', 'sumCard'].forEach(id => {
        const el = document.getElementById(id);
        if (el) {
          if (id === data.activeCard) {
            el.classList.add('active');
          } else {
            el.classList.remove('active');
          }
        }
      });

      document.querySelectorAll('.nav-dot').forEach((dot, i) => {
        dot.classList.toggle('active', i === idx);
      });
    }

    function nextStep() {
      applyStep((currentStep + 1) % stepsData.length);
    }

    function prevStep() {
      applyStep((currentStep - 1 + stepsData.length) % stepsData.length);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3500);
    }

    function stopTimer() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    document.getElementById('playBtn').addEventListener('click', () => {
      isPlaying = !isPlaying;
      document.getElementById('playBtn').textContent = isPlaying ? '⏸ Pause' : '▶ Play';
      if (isPlaying) {
        startTimer();
      } else {
        stopTimer();
      }
    });

    document.getElementById('nextBtn').addEventListener('click', () => {
      stopTimer();
      isPlaying = false;
      document.getElementById('playBtn').textContent = '▶ Play';
      nextStep();
    });

    document.getElementById('prevBtn').addEventListener('click', () => {
      stopTimer();
      isPlaying = false;
      document.getElementById('playBtn').textContent = '▶ Play';
      prevStep();
    });

    document.querySelectorAll('.nav-dot').forEach(dot => {
      dot.addEventListener('click', (e) => {
        const step = parseInt(e.target.getAttribute('data-step'), 10);
        stopTimer();
        isPlaying = false;
        document.getElementById('playBtn').textContent = '▶ Play';
        applyStep(step);
      });
    });

    // Initial render
    applyStep(0);
    startTimer();
  </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>Evaluating with Parentheses</title>
  <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: 12px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100vh;
      max-width: 660px;
      margin: 0 auto;
    }

    /* Math Typography */
    .math-text {
      font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", "Times New Roman", serif;
      font-weight: 600;
      letter-spacing: 0.01em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }

    sup {
      font-size: 0.7em;
      vertical-align: 0.58em;
      line-height: 0;
      font-weight: 700;
      margin-left: 1px;
    }

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

    .frac .num {
      border-bottom: 1.5px solid currentColor;
      padding-bottom: 1px;
      line-height: 1;
      display: block;
    }

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

    .minus-sign {
      margin-right: 1px;
    }

    .op {
      margin: 0 6px;
      font-weight: 500;
    }

    /* Header Pill */
    .header-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px;
      padding: 6px 16px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      margin-bottom: 8px;
    }

    .header-pill .math-text {
      font-size: 16px;
      color: #1e2945;
      font-weight: 700;
    }

    /* Main Stage */
    .main-stage {
      width: 100%;
      min-height: 280px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-grow: 1;
      padding: 4px 0;
    }

    .step-view {
      display: none;
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 350ms ease, transform 350ms ease;
    }

    .step-view.active {
      display: flex;
      opacity: 1;
      transform: translateY(0);
    }

    .step-label {
      font-size: 13px;
      font-weight: 800;
      color: #0284c7;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      margin-bottom: 8px;
      text-align: center;
    }

    .math-row {
      font-size: 24px;
      margin: 6px 0;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      min-height: 44px;
      line-height: 1;
    }

    .arrow-indicator {
      color: #94a3b8;
      font-size: 18px;
      font-weight: bold;
      margin: 2px 0;
    }

    /* Interactive Boxes & Highlights */
    .placeholder-box {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      min-width: 44px;
      height: 38px;
      border: 2px dashed #0284c7;
      border-radius: 8px;
      background: #f0f9ff;
      color: #0284c7;
      margin: 0 3px;
      vertical-align: middle;
      animation: pulseBox 2s infinite ease-in-out;
    }

    @keyframes pulseBox {
      0%, 100% { border-color: #0284c7; background: #f0f9ff; }
      50% { border-color: #38bdf8; background: #e0f2fe; }
    }

    .sub-value {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #e0f2fe;
      border: 1.5px solid #0284c7;
      color: #0369a1;
      border-radius: 8px;
      padding: 2px 6px;
      font-weight: 700;
      margin: 0 3px;
    }

    .calc-step {
      font-size: 20px;
      color: #334155;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      padding: 6px 14px;
      border-radius: 10px;
      margin-top: 4px;
    }

    /* Comparison Grid */
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 560px;
      margin-top: 4px;
    }

    .comp-card {
      border: 2px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 10px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-height: 140px;
    }

    .comp-card.correct {
      background: #f0fdf4;
      border-color: #22c55e;
    }

    .comp-card.incorrect {
      background: #fef2f2;
      border-color: #ef4444;
    }

    .comp-tag {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .correct .comp-tag {
      background: #dcfce7;
      color: #15803d;
    }

    .incorrect .comp-tag {
      background: #fee2e2;
      color: #b91c1c;
    }

    .comp-math {
      font-size: 22px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 4px 0;
    }

    .correct .comp-math { color: #15803d; }
    .incorrect .comp-math { color: #b91c1c; }

    .comp-note {
      font-size: 12px;
      font-weight: 600;
      line-height: 1.35;
    }
    .correct .comp-note { color: #166534; }
    .incorrect .comp-note { color: #991b1b; }

    .summary-badge {
      margin-top: 10px;
      padding: 6px 14px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    .summary-badge .math-text {
      font-size: 16px;
      color: #0f172a;
    }

    /* Controls */
    .controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      margin-top: 12px;
    }

    .step-btn {
      padding: 8px 14px;
      border-radius: 20px;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
    }

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

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

    .play-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold;
      transition: background 300ms ease, border-color 300ms ease;
    }

    .play-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    @media (max-width: 480px) {
      .comparison-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .comp-card {
        min-height: auto;
        padding: 10px 8px;
      }
      .math-row {
        font-size: 20px;
      }
      .calc-step {
        font-size: 16px;
        padding: 4px 10px;
      }
      .step-btn {
        padding: 6px 10px;
        font-size: 12px;
      }
      .header-pill {
        font-size: 13px;
        padding: 4px 12px;
      }
    }
  </style>
</head>
<body>

  
  <div class="header-pill">
    <span>Evaluate</span>
    <span class="math-text">3<i>x</i><sup>2</sup> <span class="op">&minus;</span> 4<i>x</i></span>
    <span>for</span>
    <span class="math-text"><i>x</i> = <span class="minus-sign">&minus;</span><span class="frac"><span class="num">1</span><span class="den">2</span></span></span>
  </div>

  <div class="main-stage">
    
    <div class="step-view active" id="step-0">
      <div class="step-label">Step 1: Replace every '<i>x</i>' with empty parentheses</div>
      <div class="math-row math-text">
        3<i>x</i><sup>2</sup> <span class="op">&minus;</span> 4<i>x</i>
      </div>
      <div class="arrow-indicator">↓</div>
      <div class="math-row math-text">
        3<span class="placeholder-box">( &nbsp; )</span><sup>2</sup> <span class="op">&minus;</span> 4<span class="placeholder-box">( &nbsp; )</span>
      </div>
    </div>

    
    <div class="step-view" id="step-1">
      <div class="step-label">Step 2: Drop the value &minus;1/2 inside the parentheses</div>
      <div class="math-row math-text">
        3<span class="sub-value">(<span class="minus-sign">&minus;</span><span class="frac"><span class="num">1</span><span class="den">2</span></span>)</span><sup>2</sup>
        <span class="op">&minus;</span>
        4<span class="sub-value">(<span class="minus-sign">&minus;</span><span class="frac"><span class="num">1</span><span class="den">2</span></span>)</span>
      </div>
      <div class="arrow-indicator">↓</div>
      <div class="calc-step math-text">
        3<span style="margin:0 2px;">(</span>+<span class="frac"><span class="num">1</span><span class="den">4</span></span><span style="margin:0 2px;">)</span>
        <span class="op">+</span> 2
        <span class="op">=</span>
        <span class="frac"><span class="num">3</span><span class="den">4</span></span>
        <span class="op">+</span> 2
        <span class="op">=</span>
        <span class="frac"><span class="num">11</span><span class="den">4</span></span>
      </div>
    </div>

    
    <div class="step-view" id="step-2">
      <div class="step-label" style="color: #475569;">Step 3: Why parentheses are essential</div>
      <div class="comparison-grid">
        <div class="comp-card correct">
          <div class="comp-tag">✓ WITH PARENTHESES</div>
          <div class="comp-math math-text">
            (<span class="minus-sign">&minus;</span><span class="frac"><span class="num">1</span><span class="den">2</span></span>)<sup>2</sup>
            <span class="op">=</span>
            +<span class="frac"><span class="num">1</span><span class="den">4</span></span>
          </div>
          <div class="comp-note">Entire negative base is squared:<br>(&minus;1/2) &times; (&minus;1/2) = +1/4</div>
        </div>
        <div class="comp-card incorrect">
          <div class="comp-tag">✕ WITHOUT PARENTHESES</div>
          <div class="comp-math math-text">
            <span class="minus-sign">&minus;</span><span class="frac"><span class="num">1</span><span class="den">2</span></span><sup>2</sup>
            <span class="op">=</span>
            <span class="minus-sign">&minus;</span><span class="frac"><span class="num">1</span><span class="den">4</span></span>
          </div>
          <div class="comp-note">Only 1/2 is squared, negative stays:<br>&minus;(1/2 &times; 1/2) = &minus;1/4</div>
        </div>
      </div>
      <div class="summary-badge">
        <span>Correct Final Value:</span>
        <span class="math-text">
          3(<span class="frac"><span class="num">1</span><span class="den">4</span></span>) <span class="op">+</span> 2
          <span class="op">=</span>
          <span class="frac"><span class="num">11</span><span class="den">4</span></span>
          <span class="op">=</span>
          2<span class="frac"><span class="num">3</span><span class="den">4</span></span>
        </span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn active" onclick="setStep(0)">1. Placeholders</button>
    <button class="step-btn" onclick="setStep(1)">2. Substitute</button>
    <button class="step-btn" onclick="setStep(2)">3. With vs Without ( )</button>
    <button class="play-btn" id="play-btn" onclick="togglePlay()" title="Toggle auto-play">⏸</button>
  </div>

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

    function setStep(index) {
      currentStep = index;
      for (let i = 0; i < 3; i++) {
        const stepEl = document.getElementById(`step-${i}`);
        if (stepEl) {
          stepEl.classList.toggle('active', i === index);
        }
      }
      const buttons = document.querySelectorAll('.step-btn');
      buttons.forEach((btn, i) => btn.classList.toggle('active', i === index));
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 3;
      setStep(currentStep);
    }

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3800);
    }

    function togglePlay() {
      playing = !playing;
      document.getElementById('play-btn').textContent = playing ? '⏸' : '▶';
      if (playing) {
        startTimer();
      } else {
        clearInterval(timer);
      }
    }

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

Adding and Subtracting Polynomial Expressions

Multiplying Monomials and Polynomials Using the Distributive Property

Multiplying Binomials Using FOIL and Area Models

Expanding Perfect Square Trinomials Algebraically

Expanding Difference of Squares Binomial Products

Factoring by Extracting the Greatest Common Monomial Factor

Factoring Four-Term Polynomials by Grouping

Factoring Monic Quadratic Trinomials

Factoring Non-Monic Quadratic Trinomials

Factoring Difference of Squares and Perfect Square Trinomials

Multi-Step Factoring Combining Common Factors and Identities

math

Polynomial Expressions, Special Products, and Factoring

Propiedades de la potenciación con exponentes enteros

Simplificación de expresiones con exponentes enteros

Concepto de notación científica y orden de magnitud

Conversión entre notación decimal y notación científica

Suma y resta en notación científica

Multiplicación y división en notación científica

Notación científica y operaciones

Potenciación con exponentes enteros y notación científica

Relación entre potencias fraccionarias y raíces

Propiedades fundamentales de los radicales

Extracción e introducción de factores en un radical

Suma y resta de radicales semejantes

Multiplicación y división de radicales de igual y distinto índice

Racionalización de denominadores monomios

Racionalización de denominadores binomios con el conjugado

Radicación: propiedades, operaciones y racionalización

Reviewing Like Terms and Simplifying

Applying the Distributive Property with Positive Coefficients

Expanding with Negative Coefficients

Factorising Linear Expressions with Common Factors

Rearranging Linear Expressions

Simplifying Expressions with Multiple Operations

Using Commutative and Associative Properties

Using Identity and Inverse Properties

Combining Expansion and Simplification

Using Expressions to Model Practical Situations

Mixed Linear Expression Problems

Linear Expressions: Expand and Factorise

Traducción de lenguaje común a lenguaje algebraico

Elementos de un término algebraico y clasificación

Valor numérico de una expresión algebraica

Reducción de términos semejantes

Adición y sustracción de polinomios

Multiplicación de monomio por monomio y por polinomio

Multiplicación de polinomio por polinomio

Lenguaje algebraico y operaciones con polinomios

Interpretación geométrica de la multiplicación algebraica

Cuadrado de la suma y de la diferencia de un binomio

Producto de la suma por la diferencia de dos cantidades

Producto de dos binomios con un término común

Cubo de la suma y de la diferencia de un binomio

Triángulo de Pascal y teorema del binomio

Productos notables y teorema del binomio

数量の関係を式で表す

分からない数を□として式に表す

足し算の場面を□の式で表す — □ + a = b と a + □ = b

引き算の場面を□の式で表す — □ - a = b と a - □ = b

かけ算の場面を□の式で表す — □ × a = b と a × □ = b

□に数を当てはめて正しさを調べる

足し算・引き算の逆算で□を求める

かけ算の逆算（割り算）で□を求める

日常の関係を式で表す

□を使った式の総合練習と立式の習熟

数量の関係と□を使った式 — 未知数を求める式の表現

División de monomios y de polinomio entre monomio

División larga de polinomios

División sintética o regla de Ruffini

Teorema del residuo y del factor

Modelación algebraica de patrones y conjeturas

División de polinomios y modelación algebraica

テープ図で数量を表す基礎

式を図で解釈する

合併・増加の関係を図と式でつなぐ

求残・求差の関係を図と式でつなぐ

倍の関係（かけ算・割り算）を図と式でつなぐ

線分図への発展 — 数量関係を簡潔に表す

図から式を導き出す作式活動

同じ場面を異なる見方の図と式で表現する

図と式を用いた考え方の説明活動

数量関係の視覚化のまとめ

テープ図と線分図を用いた数量関係の解釈

2つの関係を含む文章題の場面把握

2段階の数量関係を表すテープ図の活用

（ ）を使った1つの式での表現

□を含む2段階の加減の式 — (□ + a) - b = c

かけ算と足し算が混ざった□の式 — □ × a + b = c

かけ算と引き算が混ざった□の式 — a × b - □ = c

□の式からお話（文章題）をつくる作問活動

工夫して□を求める考え方 — 表や数直線での整理

2段階文章題の応用問題解決

数量関係と式の表現の総まとめ

2段階の文章題と□を使った逆算

Concepto de factorización y descomposición factorial

Factor común monomio

Factor común polinomio

Factor común por agrupación de términos

Factorización por factor común

Factorización de diferencia de cuadrados perfectos

Factorización de trinomio cuadrado perfecto

Factorización de trinomios completando el cuadrado

Factorización de trinomios de la forma x^2 + bx + c

Factorización de trinomios de la forma ax^2 + bx + c por aspa

Factorización de trinomios ax^2 + bx + c por multiplicación y división

Factorización de suma y diferencia de cubos perfectos

Factorización de binomios y trinomios cuadráticos

Factorización de suma y diferencia de potencias iguales impares

Factorización por evaluación y regla de Ruffini

Estrategia general para la combinación de casos de factorización

Aplicación de la factorización al cálculo de áreas y volúmenes

Factorización avanzada y aplicaciones

从数字到字母：用字母表示数量关系与运算律

列代数式：用代数语言刻画现实数量关系

公式的查阅、理解与代数表达构建

代数式的代入求值与整体代入技巧

用字母表示数与代数式建模

Dominio y valores indeterminados en fracciones algebraicas

Simplificación de fracciones algebraicas por factorización

Mínimo común múltiplo de expresiones algebraicas

Suma y resta de fracciones algebraicas con igual denominador

Suma y resta de fracciones algebraicas con distinto denominador

Multiplicación de fracciones algebraicas

División de fracciones algebraicas

Fracciones algebraicas complejas

Ecuaciones racionales reducibles a primer grado

Problemas de velocidad, trabajo compartido y proporciones inversas

Fracciones algebraicas y expresiones racionales

Concepto de igualdad, ecuación e identidad

Propiedades de las igualdades y transposición de términos

Resolución de ecuaciones lineales con paréntesis

Resolución de ecuaciones lineales con coeficientes fraccionarios

Clasificación de ecuaciones lineales: solución única, infinita o vacía

Despeje de variables en fórmulas de física y geometría

Planteamiento y resolución de problemas verbales lineales

Ecuaciones lineales en una variable

单项式的系数、次数与多项式的项与次数

同类项的概念与合并同类项法则

去括号与添括号的符号运算法则

整式的加减综合运算与化简求值

整式的基本概念与加减运算

Propiedades de las desigualdades en los reales

Resolución de inecuaciones lineales en una variable

Inecuaciones lineales compuestas con conjunción y disyunción

Inecuaciones con valor absoluto

Problemas contextuales con desigualdades e inecuaciones

Inecuaciones lineales en una variable

单项式乘以单项式的运算法则与几何面积直观

单项式乘以多项式的运算法则与分配律应用

多项式乘法：一次式乘以一次式的展开与合并

多项式乘法：一次式乘以二次式的展开与综合运算

整式的乘法运算法则

平方差公式 (a+b)(a-b)=a^2-b^2 的推导与图形拼接模型

平方差公式的变式识别与简便计算应用

完全平方公式 (a±b)^2=a^2±2ab+b^2 的推导与面积模型

完全平方公式的变式恒等变形与配方思想初步

乘法公式的综合应用与整除奇偶数论推理

乘法公式与几何模型

Razón de cambio constante y concepto de pendiente

Clasificación de pendientes: positiva, negativa, cero e indefinida

Función lineal directa y proporcionalidad (y = mx)

Función afín y ecuación pendiente-intercepto (y = mx + b)

Ecuación punto-pendiente de la recta

Ecuación de la recta que pasa por dos puntos

Forma general de la ecuación de la recta (Ax + By + C = 0)

Rectas paralelas y perpendiculares: criterio de pendientes

Interceptos con los ejes coordenados

Modelado de costos, tarifas y planes de pago con funciones afines

Función lineal y afín: ecuaciones de la recta

因式分解的概念与整式乘法的互逆关系

提公因式法分解因式与变号技巧

公式法分解因式：平方差公式 a^2-b^2=(a+b)(a-b)

公式法分解因式：完全平方公式 a^2±2ab+b^2=(a±b)^2

先提公因式再用公式法的两步综合因式分解

因式分解：提公因式法与公式法

Concepto de sistema de ecuaciones lineales y conjunto solución

Método gráfico y clasificación de sistemas lineales

Método de sustitución paso a paso

Método de igualación

Método de reducción o eliminación

Método de determinantes: regla de Cramer

Sistemas con coeficientes fraccionarios y signos de agrupación

Elección del método más eficiente según la estructura del sistema

Resolución de sistemas de ecuaciones lineales 2x2

Problemas contextuales con sistemas de ecuaciones

Problemas de mezclas y aleaciones con sistemas 2x2

Problemas de cinemática y velocidad relativa con sistemas 2x2

Introducción a los sistemas de ecuaciones lineales 3x3

Aplicaciones de sistemas 2x2 e introducción a sistemas 3x3

Definición y forma estándar de la ecuación cuadrática

Resolución de ecuaciones cuadráticas incompletas: puras y mixtas

Resolución de ecuaciones cuadráticas por factorización

Resolución completando el trinomio cuadrado perfecto

Deducción y aplicación de la fórmula general

Fórmula general para ecuaciones cuadráticas

Resolución de ecuaciones cuadráticas

OGM.9.ALG.1

Aligned learning resources

Related diagrams