<!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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px;
      user-select: none;
    }

    .main-stage {
      width: 100%;
      max-width: 440px;
      height: 250px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto 0;
    }

    /* Math Expression Area */
    .math-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      font-size: 32px;
      font-weight: 700;
      position: relative;
    }

    .frac {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 64px;
      position: relative;
    }

    .num, .den {
      position: relative;
      height: 48px;
      width: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
    }

    .bar {
      width: 100%;
      height: 3px;
      background: #1e2945;
      border-radius: 2px;
      margin: 2px 0;
    }

    .op {
      font-size: 28px;
      color: #94a3b8;
      font-weight: 600;
      transition: opacity 0.3s ease;
    }

    /* Digit Strikethrough & Simplified replacement */
    .val-orig {
      position: absolute;
      transition: transform 0.3s ease, opacity 0.3s ease, color 0.3s ease;
    }

    .val-orig::after {
      content: '';
      position: absolute;
      left: -4px;
      right: -4px;
      top: 50%;
      height: 3px;
      background: #ef4444;
      border-radius: 2px;
      transform: scaleX(0) rotate(-20deg);
      transform-origin: center;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .strike.val-orig::after {
      transform: scaleX(1) rotate(-20deg);
    }

    .strike.val-orig {
      opacity: 0.35;
    }

    .val-new {
      position: absolute;
      font-size: 26px;
      font-weight: 800;
      opacity: 0;
      transform: scale(0.4);
      transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                  transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .val-new.show {
      opacity: 1;
      transform: scale(1);
    }

    .val-new.top { top: -20px; }
    .val-new.bot { bottom: -20px; }

    /* Blue diagonal (5 and 15) */
    .blue-pair {
      color: #0284c7;
    }
    .active-blue .num-5, .active-blue .den-15 {
      background: #e0f2fe;
      box-shadow: 0 0 0 2px #0284c7;
    }

    /* Orange diagonal (8 and 12) */
    .orange-pair {
      color: #ea580c;
    }
    .active-orange .den-12, .active-orange .num-8 {
      background: #ffedd5;
      box-shadow: 0 0 0 2px #ea580c;
    }

    /* SVG Connecting Lines */
    .diagonal-lines {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
    }

    .diag-line {
      stroke-dasharray: 6 6;
      stroke-width: 2.5;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .line-blue { stroke: #0284c7; }
    .line-orange { stroke: #ea580c; }

    .show-blue-line .line-blue { opacity: 0.4; }
    .show-orange-line .line-orange { opacity: 0.4; }

    /* Tags / Badges for operations */
    .tag {
      position: absolute;
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.3s ease, transform 0.3s ease;
      white-space: nowrap;
    }

    .tag-blue {
      background: #0284c7;
      color: #fff;
      top: 10px;
      left: 50%;
      transform: translateX(-50%) translateY(4px);
    }

    .tag-orange {
      background: #ea580c;
      color: #fff;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%) translateY(-4px);
    }

    .active-blue .tag-blue {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .active-orange .tag-orange {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* Result group */
    .result-group {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      opacity: 0;
      transform: translateX(-10px);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .result-group.show {
      opacity: 1;
      transform: translateX(0);
    }

    .res-frac .num, .res-frac .den {
      color: #16a34a;
      font-weight: 800;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: 380px;
    }

    .step-buttons {
      display: flex;
      gap: 8px;
      width: 100%;
    }

    .btn-step {
      flex: 1;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      padding: 8px 4px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }

    .btn-step.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.3);
    }

    .playback-bar {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .btn-play {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 4px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
  </style>
</head>
<body>

  <div class="main-stage" id="stage">
    
    <svg class="diagonal-lines" viewBox="0 0 400 240">
      
      <line class="diag-line line-blue" x1="120" y1="88" x2="216" y2="152" />
      
      <line class="diag-line line-orange" x1="120" y1="152" x2="216" y2="88" />
    </svg>

    
    <div class="tag tag-blue">÷ 5</div>
    <div class="tag tag-orange">÷ 4</div>

    <div class="math-row">
      
      <div class="frac">
        <div class="num num-5">
          <span class="val-orig" id="num1">5</span>
          <span class="val-new top blue-pair" id="num1New">1</span>
        </div>
        <div class="bar"></div>
        <div class="den den-12">
          <span class="val-orig" id="den1">12</span>
          <span class="val-new bot orange-pair" id="den1New">3</span>
        </div>
      </div>

      <div class="op">×</div>

      
      <div class="frac">
        <div class="num num-8">
          <span class="val-orig" id="num2">8</span>
          <span class="val-new top orange-pair" id="num2New">2</span>
        </div>
        <div class="bar"></div>
        <div class="den den-15">
          <span class="val-orig" id="den2">15</span>
          <span class="val-new bot blue-pair" id="den2New">3</span>
        </div>
      </div>

      
      <div class="result-group" id="resGroup">
        <div class="op">=</div>
        <div class="frac res-frac">
          <div class="num">2</div>
          <div class="bar"></div>
          <div class="den">9</div>
        </div>
      </div>
    </div>
  </div>

  <div class="controls">
    <div class="step-buttons">
      <button class="btn-step active" onclick="goToStep(0)">1. Original</button>
      <button class="btn-step" onclick="goToStep(1)">2. Cross (÷5)</button>
      <button class="btn-step" onclick="goToStep(2)">3. Cross (÷4)</button>
      <button class="btn-step" onclick="goToStep(3)">4. Multiply</button>
    </div>
    <div class="playback-bar">
      <button class="btn-play" id="playBtn" onclick="togglePlay()">
        <span id="playIcon">⏸</span> Auto-step
      </button>
    </div>
  </div>

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

    const stage = document.getElementById('stage');
    const num1 = document.getElementById('num1');
    const den1 = document.getElementById('den1');
    const num2 = document.getElementById('num2');
    const den2 = document.getElementById('den2');
    const num1New = document.getElementById('num1New');
    const den1New = document.getElementById('den1New');
    const num2New = document.getElementById('num2New');
    const den2New = document.getElementById('den2New');
    const resGroup = document.getElementById('resGroup');
    const buttons = document.querySelectorAll('.btn-step');
    const playIcon = document.getElementById('playIcon');

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

      // Reset classes
      stage.className = 'main-stage';
      num1.classList.remove('strike');
      den1.classList.remove('strike');
      num2.classList.remove('strike');
      den2.classList.remove('strike');
      num1New.classList.remove('show');
      den1New.classList.remove('show');
      num2New.classList.remove('show');
      den2New.classList.remove('show');
      resGroup.classList.remove('show');

      if (step >= 1) {
        // Pair 5 & 15 divided by 5
        stage.classList.add('show-blue-line');
        if (step === 1) stage.classList.add('active-blue');
        num1.classList.add('strike');
        den2.classList.add('strike');
        num1New.classList.add('show');
        den2New.classList.add('show');
      }

      if (step >= 2) {
        // Pair 8 & 12 divided by 4
        stage.classList.add('show-orange-line');
        if (step === 2) stage.classList.add('active-orange');
        num2.classList.add('strike');
        den1.classList.add('strike');
        num2New.classList.add('show');
        den1New.classList.add('show');
      }

      if (step === 3) {
        // Multiply simplified
        resGroup.classList.add('show');
      }
    }

    function goToStep(step) {
      applyStep(step);
      resetTimer();
    }

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

    function startTimer() {
      if (timer) clearInterval(timer);
      timer = setInterval(nextStep, 3600);
      isPlaying = true;
      playIcon.textContent = '⏸';
    }

    function pauseTimer() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      playIcon.textContent = '▶';
    }

    function resetTimer() {
      if (isPlaying) {
        clearInterval(timer);
        timer = setInterval(nextStep, 3600);
      }
    }

    function togglePlay() {
      if (isPlaying) {
        pauseTimer();
      } else {
        startTimer();
      }
    }

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

Multiplying Positive Fractions Fluently

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

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #0f172a;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px 8px;
      user-select: none;
    }

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

    /* Equation Display */
    .equation-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 4px;
      width: 100%;
    }

    .frac {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 700;
      min-width: 44px;
      line-height: 1;
    }

    .frac-bar {
      width: 100%;
      height: 3px;
      background: #334155;
      border-radius: 2px;
      margin: 4px 0;
    }

    .term {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      border-radius: 8px;
      transition: background-color 0.25s ease, box-shadow 0.25s ease;
    }

    .op {
      font-size: 22px;
      font-weight: 600;
      color: #64748b;
    }

    .val {
      position: relative;
      z-index: 1;
      transition: color 0.25s ease;
    }

    /* Slash strike */
    .slash {
      position: absolute;
      inset: 4px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    .slash svg {
      width: 100%;
      height: 100%;
    }

    /* Replacement number */
    .sub {
      position: absolute;
      font-size: 15px;
      font-weight: 800;
      opacity: 0;
      transform: scale(0.5);
      transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 2;
    }

    .term.top .sub {
      top: -10px;
      right: -6px;
    }

    .term.bottom .sub {
      bottom: -10px;
      right: -6px;
    }

    /* Cancellation Color Themes */
    /* Green: 5 and 5 */
    .c-green.active-highlight {
      background: #dcfce7;
      box-shadow: 0 0 0 2px #16a34a;
    }
    .c-green .val-struck {
      color: #94a3b8;
    }
    .c-green .slash {
      opacity: 1;
    }
    .c-green .slash line {
      stroke: #16a34a;
      stroke-width: 3.5;
      stroke-linecap: round;
    }
    .c-green .sub {
      opacity: 1;
      transform: scale(1);
      color: #15803d;
      background: #f0fdf4;
      padding: 1px 4px;
      border-radius: 4px;
      border: 1.5px solid #16a34a;
    }

    /* Blue: 3 and 9 */
    .c-blue.active-highlight {
      background: #dbeafe;
      box-shadow: 0 0 0 2px #2563eb;
    }
    .c-blue .val-struck {
      color: #94a3b8;
    }
    .c-blue .slash {
      opacity: 1;
    }
    .c-blue .slash line {
      stroke: #2563eb;
      stroke-width: 3.5;
      stroke-linecap: round;
    }
    .c-blue .sub {
      opacity: 1;
      transform: scale(1);
      color: #1d4ed8;
      background: #eff6ff;
      padding: 1px 4px;
      border-radius: 4px;
      border: 1.5px solid #2563eb;
    }

    /* Orange: 2 and 4 */
    .c-orange.active-highlight {
      background: #ffedd5;
      box-shadow: 0 0 0 2px #ea580c;
    }
    .c-orange .val-struck {
      color: #94a3b8;
    }
    .c-orange .slash {
      opacity: 1;
    }
    .c-orange .slash line {
      stroke: #ea580c;
      stroke-width: 3.5;
      stroke-linecap: round;
    }
    .c-orange .sub {
      opacity: 1;
      transform: scale(1);
      color: #c2410c;
      background: #fff7ed;
      padding: 1px 4px;
      border-radius: 4px;
      border: 1.5px solid #ea580c;
    }

    /* Step Explanation Callout */
    .explanation-box {
      width: 100%;
      min-height: 48px;
      padding: 8px 14px;
      border-radius: 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #1e293b;
      line-height: 1.35;
      transition: background-color 0.25s ease, border-color 0.25s ease;
    }

    .explanation-box.hl-green {
      background: #f0fdf4;
      border-color: #86efac;
      color: #14532d;
    }

    .explanation-box.hl-blue {
      background: #eff6ff;
      border-color: #93c5fd;
      color: #1e3a8a;
    }

    .explanation-box.hl-orange {
      background: #fff7ed;
      border-color: #fdba74;
      color: #7c2d12;
    }

    .explanation-box.hl-final {
      background: #f8fafc;
      border-color: #cbd5e1;
      color: #0f172a;
      font-weight: 600;
    }

    /* Summary Result Row */
    .result-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 8px 14px;
      border-radius: 10px;
      background: #f1f5f9;
      width: 100%;
      min-height: 54px;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .result-row.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .result-frac {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      font-size: 19px;
      font-weight: 700;
      line-height: 1;
    }

    .result-frac .frac-bar {
      height: 2px;
      margin: 3px 0;
    }

    .final-answer {
      display: inline-flex;
      align-items: center;
      font-size: 21px;
      font-weight: 800;
      color: #0f172a;
      background: #ffffff;
      padding: 4px 10px;
      border-radius: 8px;
      border: 2px solid #16a34a;
    }

    /* Navigation Controls */
    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      gap: 6px;
      margin-top: 4px;
    }

    .step-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      justify-content: center;
      align-items: center;
    }

    .step-pill {
      border: 1px solid #cbd5e1;
      background: #f1f5f9;
      color: #1e293b;
      font-size: 12px;
      font-weight: 700;
      padding: 5px 9px;
      border-radius: 999px;
      cursor: pointer;
      white-space: nowrap;
      transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .step-pill:hover {
      background: #e2e8f0;
      border-color: #94a3b8;
    }

    .step-pill.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    .ctrl-btn {
      border: 1px solid #94a3b8;
      background: #ffffff;
      color: #0f172a;
      width: 32px;
      height: 32px;
      flex-shrink: 0;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .ctrl-btn:hover {
      background: #f1f5f9;
    }

    @media (max-width: 380px) {
      .equation-row {
        gap: 6px;
      }
      .frac {
        font-size: 24px;
        min-width: 36px;
      }
      .term {
        width: 36px;
        height: 36px;
      }
      .op {
        font-size: 18px;
      }
      .step-pill {
        font-size: 11px;
        padding: 4px 7px;
      }
      .explanation-box {
        font-size: 13px;
      }
    }
  </style>
</head>
<body>

  <div class="container">
    
    <div class="equation-row">
      
      <div class="frac">
        <div class="term top" id="t-3">
          <span class="val">3</span>
          <span class="sub">1</span>
          <div class="slash"><svg viewBox="0 0 24 24"><line x1="4" y1="20" x2="20" y2="4"/></svg></div>
        </div>
        <div class="frac-bar"></div>
        <div class="term bottom" id="b-4">
          <span class="val">4</span>
          <span class="sub">2</span>
          <div class="slash"><svg viewBox="0 0 24 24"><line x1="4" y1="20" x2="20" y2="4"/></svg></div>
        </div>
      </div>

      <div class="op">×</div>

      
      <div class="frac">
        <div class="term top" id="t-2">
          <span class="val">2</span>
          <span class="sub">1</span>
          <div class="slash"><svg viewBox="0 0 24 24"><line x1="4" y1="20" x2="20" y2="4"/></svg></div>
        </div>
        <div class="frac-bar"></div>
        <div class="term bottom" id="b-5">
          <span class="val">5</span>
          <span class="sub">1</span>
          <div class="slash"><svg viewBox="0 0 24 24"><line x1="4" y1="20" x2="20" y2="4"/></svg></div>
        </div>
      </div>

      <div class="op">×</div>

      
      <div class="frac">
        <div class="term top" id="t-5">
          <span class="val">5</span>
          <span class="sub">1</span>
          <div class="slash"><svg viewBox="0 0 24 24"><line x1="4" y1="20" x2="20" y2="4"/></svg></div>
        </div>
        <div class="frac-bar"></div>
        <div class="term bottom" id="b-9">
          <span class="val">9</span>
          <span class="sub">3</span>
          <div class="slash"><svg viewBox="0 0 24 24"><line x1="4" y1="20" x2="20" y2="4"/></svg></div>
        </div>
      </div>
    </div>

    
    <div class="explanation-box" id="explanationBox">
      Look for common factors across numerators and denominators.
    </div>

    
    <div class="result-row" id="resultRow">
      <div class="result-frac">
        <span style="color:#ea580c">1</span>
        <div class="frac-bar"></div>
        <span style="color:#ea580c">2</span>
      </div>
      <div class="op" style="font-size:16px">×</div>
      <div class="result-frac">
        <span style="color:#16a34a">1</span>
        <div class="frac-bar"></div>
        <span style="color:#16a34a">1</span>
      </div>
      <div class="op" style="font-size:16px">×</div>
      <div class="result-frac">
        <span style="color:#2563eb">1</span>
        <div class="frac-bar"></div>
        <span style="color:#2563eb">3</span>
      </div>
      <div class="op" style="font-size:18px; font-weight:700">=</div>
      <div class="final-answer">
        <div class="result-frac">
          <span>1</span>
          <div class="frac-bar"></div>
          <span>6</span>
        </div>
      </div>
    </div>

    
    <div class="nav-bar">
      <button class="ctrl-btn" id="prevBtn" title="Previous Step" aria-label="Previous Step">◀</button>
      <div class="step-pills">
        <button class="step-pill active" onclick="userSelectStep(0)">Start</button>
        <button class="step-pill" onclick="userSelectStep(1)">5 & 5</button>
        <button class="step-pill" onclick="userSelectStep(2)">3 & 9</button>
        <button class="step-pill" onclick="userSelectStep(3)">2 & 4</button>
        <button class="step-pill" onclick="userSelectStep(4)">= 1/6</button>
      </div>
      <button class="ctrl-btn" id="nextBtn" title="Next Step" aria-label="Next Step">▶</button>
    </div>
  </div>

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

    const descriptions = [
      { text: "Original problem: Multiply numerators and denominators.", hl: "" },
      { text: "Divide top 5 and bottom 5 by 5 → both reduce to 1.", hl: "hl-green" },
      { text: "Divide top 3 and bottom 9 by 3 → 3 becomes 1, 9 becomes 3.", hl: "hl-blue" },
      { text: "Divide top 2 and bottom 4 by 2 → 2 becomes 1, 4 becomes 2.", hl: "hl-orange" },
      { text: "Multiply remaining values: (1 × 1 × 1) / (2 × 1 × 3) = 1/6.", hl: "hl-final" }
    ];

    const el = {
      t3: document.getElementById('t-3'),
      b4: document.getElementById('b-4'),
      t2: document.getElementById('t-2'),
      b5: document.getElementById('b-5'),
      t5: document.getElementById('t-5'),
      b9: document.getElementById('b-9'),
      resultRow: document.getElementById('resultRow'),
      explanationBox: document.getElementById('explanationBox'),
      pills: document.querySelectorAll('.step-pill'),
      prevBtn: document.getElementById('prevBtn'),
      nextBtn: document.getElementById('nextBtn')
    };

    function resetStyles() {
      const terms = [el.t3, el.b4, el.t2, el.b5, el.t5, el.b9];
      terms.forEach(t => {
        t.className = t.classList.contains('top') ? 'term top' : 'term bottom';
        const v = t.querySelector('.val');
        if (v) v.classList.remove('val-struck');
      });
      el.resultRow.classList.remove('visible');
    }

    function applyStep(step) {
      resetStyles();

      // Step 1: Cancel 5 and 5 (Green)
      if (step >= 1) {
        el.t5.classList.add('c-green');
        el.b5.classList.add('c-green');
        el.t5.querySelector('.val').classList.add('val-struck');
        el.b5.querySelector('.val').classList.add('val-struck');
        if (step === 1) {
          el.t5.classList.add('active-highlight');
          el.b5.classList.add('active-highlight');
        }
      }

      // Step 2: Cancel 3 and 9 (Blue)
      if (step >= 2) {
        el.t3.classList.add('c-blue');
        el.b9.classList.add('c-blue');
        el.t3.querySelector('.val').classList.add('val-struck');
        el.b9.querySelector('.val').classList.add('val-struck');
        if (step === 2) {
          el.t3.classList.add('active-highlight');
          el.b9.classList.add('active-highlight');
        }
      }

      // Step 3: Cancel 2 and 4 (Orange)
      if (step >= 3) {
        el.t2.classList.add('c-orange');
        el.b4.classList.add('c-orange');
        el.t2.querySelector('.val').classList.add('val-struck');
        el.b4.querySelector('.val').classList.add('val-struck');
        if (step === 3) {
          el.t2.classList.add('active-highlight');
          el.b4.classList.add('active-highlight');
        }
      }

      // Step 4: Multiply Remaining -> 1/6
      if (step >= 4) {
        el.resultRow.classList.add('visible');
      }

      // Update explanation callout
      el.explanationBox.className = 'explanation-box ' + (descriptions[step].hl || '');
      el.explanationBox.textContent = descriptions[step].text;

      // Update pills
      el.pills.forEach((p, idx) => {
        p.classList.toggle('active', idx === step);
      });
    }

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

    function userSelectStep(s) {
      autoPlay = false;
      if (timer) clearInterval(timer);
      setStep(s);
    }

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

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

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

    el.prevBtn.addEventListener('click', () => {
      autoPlay = false;
      if (timer) clearInterval(timer);
      prevStep();
    });

    el.nextBtn.addEventListener('click', () => {
      autoPlay = false;
      if (timer) clearInterval(timer);
      nextStep();
    });

    // Initialize
    applyStep(0);
    restartTimer();
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <title>Fraction Multiplication Area Model</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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 16px;
      user-select: none;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 380px;
      justify-content: center;
    }
    .step-btn {
      flex: 1;
      padding: 8px 6px;
      font-size: 13px;
      font-weight: 700;
      border: 2px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }
    .step-btn.active {
      background: #eff6ff;
      border-color: #2563eb;
      color: #1d4ed8;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.15);
    }

    /* Diagram Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 320px;
      margin: 8px auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .svg-container {
      width: 100%;
      aspect-ratio: 1 / 1;
      max-width: 250px;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* Mathematical Equation Area */
    .equation-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 20px;
      font-weight: 800;
      min-height: 48px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 6px 18px;
      width: 100%;
      max-width: 320px;
    }
    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 17px;
      line-height: 1;
    }
    .frac-num {
      padding-bottom: 2px;
      border-bottom: 2px solid currentColor;
    }
    .frac-den {
      padding-top: 2px;
    }

    .c-blue { color: #0284c7; }
    .c-coral { color: #ea580c; }
    .c-purple { color: #7c3aed; }
    .muted-sym { color: #94a3b8; font-weight: 500; }

    /* Transitions */
    .cell-bg {
      transition: fill 0.35s ease, opacity 0.35s ease;
    }
    .grid-line {
      transition: opacity 0.35s ease, stroke 0.35s ease;
    }
    .dim-label {
      font-size: 13px;
      font-weight: 700;
      transition: opacity 0.3s ease;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" id="btn-0" onclick="setStep(0)">1. Split <sup>1</sup>/<sub>2</sub></button>
    <button class="step-btn" id="btn-1" onclick="setStep(1)">2. Split <sup>3</sup>/<sub>4</sub></button>
    <button class="step-btn" id="btn-2" onclick="setStep(2)">3. Overlap <sup>3</sup>/<sub>8</sub></button>
  </div>

  
  <div class="stage">
    <div class="svg-container">
      <svg viewBox="-40 -28 290 280">
        <defs>
          
          <pattern id="coralStripe" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="0" y2="10" stroke="#f97316" stroke-width="3.5" />
          </pattern>
          
          <pattern id="purplePattern" width="8" height="8" patternUnits="userSpaceOnUse">
            <rect width="8" height="8" fill="#8b5cf6" fill-opacity="0.88"/>
            <path d="M0 8 L8 0 M0 0 L8 8" stroke="#6d28d9" stroke-width="1.5"/>
          </pattern>
        </defs>

        
        
        <g id="lbl-top" class="dim-label" opacity="1">
          <text x="55" y="-12" text-anchor="middle" fill="#0284c7" font-weight="bold">½</text>
          <path d="M 4 -4 L 106 -4" stroke="#0284c7" stroke-width="1.5" marker-start="none"/>
        </g>
        <g id="lbl-top-full" class="dim-label" opacity="0.4">
          <text x="165" y="-12" text-anchor="middle" fill="#94a3b8">½</text>
          <path d="M 114 -4 L 216 -4" stroke="#cbd5e1" stroke-width="1.5"/>
        </g>

        
        <g id="lbl-left" class="dim-label" opacity="0">
          <text x="-20" y="85" text-anchor="middle" fill="#ea580c" font-weight="bold">¾</text>
          <path d="M -6 4 L -6 161" stroke="#ea580c" stroke-width="1.5"/>
        </g>

        
        <rect x="0" y="0" width="220" height="220" fill="#f8fafc" stroke="#334155" stroke-width="2.5" rx="3"/>

        
        
        <rect id="cell-0-0" class="cell-bg" x="0" y="0" width="110" height="55" fill="#38bdf8" fill-opacity="0.35"/>
        <rect id="cell-0-1" class="cell-bg" x="0" y="55" width="110" height="55" fill="#38bdf8" fill-opacity="0.35"/>
        <rect id="cell-0-2" class="cell-bg" x="0" y="110" width="110" height="55" fill="#38bdf8" fill-opacity="0.35"/>
        <rect id="cell-0-3" class="cell-bg" x="0" y="165" width="110" height="55" fill="#38bdf8" fill-opacity="0.35"/>

        
        <rect id="cell-1-0" class="cell-bg" x="110" y="0" width="110" height="55" fill="none"/>
        <rect id="cell-1-1" class="cell-bg" x="110" y="55" width="110" height="55" fill="none"/>
        <rect id="cell-1-2" class="cell-bg" x="110" y="110" width="110" height="55" fill="none"/>
        <rect id="cell-1-3" class="cell-bg" x="110" y="165" width="110" height="55" fill="none"/>

        
        <line x1="110" y1="0" x2="110" y2="220" stroke="#0284c7" stroke-width="2.5"/>

        
        <g id="h-lines" class="grid-line" opacity="0">
          <line x1="0" y1="55" x2="220" y2="55" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3,3"/>
          <line x1="0" y1="110" x2="220" y2="110" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3,3"/>
          <line x1="0" y1="165" x2="220" y2="165" stroke="#ea580c" stroke-width="2"/>
        </g>

        
        <g id="overlap-highlight" opacity="0" style="transition: opacity 0.35s ease;">
          <rect x="0" y="0" width="110" height="165" fill="none" stroke="#6d28d9" stroke-width="3.5" rx="2"/>
          <text x="55" y="88" text-anchor="middle" fill="#ffffff" font-size="16" font-weight="900" style="filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));">3 of 8</text>
        </g>

        
        <rect x="0" y="0" width="220" height="220" fill="none" stroke="#334155" stroke-width="2.5" rx="3"/>
      </svg>
    </div>
  </div>

  
  <div class="equation-bar" id="eq-bar">
    
    <span class="c-blue">
      <span class="frac"><span class="frac-num">1</span><span class="frac-den">2</span></span>
    </span>
    <span class="muted-sym">of 1 whole</span>
  </div>

  <script>
    let curStep = 0;
    let autoTimer = null;

    function renderState(step) {
      curStep = step;

      // Update buttons
      for (let i = 0; i < 3; i++) {
        document.getElementById(`btn-${i}`).classList.toggle('active', i === step);
      }

      const hLines = document.getElementById('h-lines');
      const lblLeft = document.getElementById('lbl-left');
      const lblTop = document.getElementById('lbl-top');
      const overlapHigh = document.getElementById('overlap-highlight');
      const eqBar = document.getElementById('eq-bar');

      // Col 0 cells
      const c00 = document.getElementById('cell-0-0');
      const c01 = document.getElementById('cell-0-1');
      const c02 = document.getElementById('cell-0-2');
      const c03 = document.getElementById('cell-0-3');

      // Col 1 cells
      const c10 = document.getElementById('cell-1-0');
      const c11 = document.getElementById('cell-1-1');
      const c12 = document.getElementById('cell-1-2');
      const c13 = document.getElementById('cell-1-3');

      if (step === 0) {
        // Step 1: 1/2 shaded blue
        hLines.setAttribute('opacity', '0');
        lblLeft.setAttribute('opacity', '0');
        lblTop.setAttribute('opacity', '1');
        overlapHigh.setAttribute('opacity', '0');

        c00.setAttribute('fill', '#38bdf8'); c00.setAttribute('fill-opacity', '0.35');
        c01.setAttribute('fill', '#38bdf8'); c01.setAttribute('fill-opacity', '0.35');
        c02.setAttribute('fill', '#38bdf8'); c02.setAttribute('fill-opacity', '0.35');
        c03.setAttribute('fill', '#38bdf8'); c03.setAttribute('fill-opacity', '0.35');

        c10.setAttribute('fill', 'none');
        c11.setAttribute('fill', 'none');
        c12.setAttribute('fill', 'none');
        c13.setAttribute('fill', 'none');

        eqBar.innerHTML = `
          <span class="c-blue"><span class="frac"><span class="frac-num">1</span><span class="frac-den">2</span></span></span>
          <span class="muted-sym" style="font-size:15px; font-weight:600;">(1 of 2 columns)</span>
        `;
      } else if (step === 1) {
        // Step 2: Split 3/4 horizontally with coral stripes
        hLines.setAttribute('opacity', '1');
        lblLeft.setAttribute('opacity', '1');
        lblTop.setAttribute('opacity', '1');
        overlapHigh.setAttribute('opacity', '0');

        c00.setAttribute('fill', 'url(#coralStripe)'); c00.setAttribute('fill-opacity', '1');
        c01.setAttribute('fill', 'url(#coralStripe)'); c01.setAttribute('fill-opacity', '1');
        c02.setAttribute('fill', 'url(#coralStripe)'); c02.setAttribute('fill-opacity', '1');
        c03.setAttribute('fill', '#38bdf8'); c03.setAttribute('fill-opacity', '0.35');

        c10.setAttribute('fill', 'url(#coralStripe)'); c10.setAttribute('fill-opacity', '0.45');
        c11.setAttribute('fill', 'url(#coralStripe)'); c11.setAttribute('fill-opacity', '0.45');
        c12.setAttribute('fill', 'url(#coralStripe)'); c12.setAttribute('fill-opacity', '0.45');
        c13.setAttribute('fill', 'none');

        eqBar.innerHTML = `
          <span class="c-coral"><span class="frac"><span class="frac-num">3</span><span class="frac-den">4</span></span></span>
          <span class="muted-sym">×</span>
          <span class="c-blue"><span class="frac"><span class="frac-num">1</span><span class="frac-den">2</span></span></span>
          <span class="muted-sym" style="font-size:15px; font-weight:600;">(¾ of the ½)</span>
        `;
      } else if (step === 2) {
        // Step 3: Overlapping 3 tiles highlighted in deep purple
        hLines.setAttribute('opacity', '1');
        lblLeft.setAttribute('opacity', '1');
        lblTop.setAttribute('opacity', '1');
        overlapHigh.setAttribute('opacity', '1');

        c00.setAttribute('fill', '#8b5cf6'); c00.setAttribute('fill-opacity', '0.9');
        c01.setAttribute('fill', '#8b5cf6'); c01.setAttribute('fill-opacity', '0.9');
        c02.setAttribute('fill', '#8b5cf6'); c02.setAttribute('fill-opacity', '0.9');
        c03.setAttribute('fill', '#38bdf8'); c03.setAttribute('fill-opacity', '0.2');

        c10.setAttribute('fill', '#fed7aa'); c10.setAttribute('fill-opacity', '0.35');
        c11.setAttribute('fill', '#fed7aa'); c11.setAttribute('fill-opacity', '0.35');
        c12.setAttribute('fill', '#fed7aa'); c12.setAttribute('fill-opacity', '0.35');
        c13.setAttribute('fill', 'none');

        eqBar.innerHTML = `
          <span class="c-coral"><span class="frac"><span class="frac-num">3</span><span class="frac-den">4</span></span></span>
          <span class="muted-sym">×</span>
          <span class="c-blue"><span class="frac"><span class="frac-num">1</span><span class="frac-den">2</span></span></span>
          <span class="muted-sym">=</span>
          <span class="c-purple"><span class="frac"><span class="frac-num">3</span><span class="frac-den">8</span></span></span>
        `;
      }
    }

    function setStep(s) {
      clearInterval(autoTimer);
      renderState(s);
      startAutoPlay();
    }

    function startAutoPlay() {
      clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        const next = (curStep + 1) % 3;
        renderState(next);
      }, 3600);
    }

    // Initialize
    renderState(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="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: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .stepper-nav {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 420px;
      justify-content: center;
    }

    .step-btn {
      flex: 1;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #f8fafc;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }

    .step-btn.active {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    }

    .viz-container {
      width: 100%;
      max-width: 420px;
      position: relative;
      margin: 8px 0;
      display: flex;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: auto;
      max-height: 210px;
      overflow: visible;
    }

    /* SVG Transitions */
    .rect-ghost {
      stroke: #94a3b8;
      stroke-width: 1.5;
      stroke-dasharray: 5 4;
      fill: #f1f5f9;
      opacity: 0;
    }

    .tri-shape {
      fill: #dbeafe;
      stroke: #2563eb;
      stroke-width: 2.5;
      stroke-linejoin: round;
    }

    .height-line {
      stroke: #ea580c;
      stroke-width: 2;
      stroke-dasharray: 4 3;
    }

    .angle-marker {
      stroke: #ea580c;
      stroke-width: 1.5;
      fill: none;
    }

    .dim-label {
      font-size: 14px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .area-badge {
      opacity: 0;
      font-size: 16px;
      font-weight: 800;
      fill: #1d4ed8;
      text-anchor: middle;
      dominant-baseline: central;
    }

    /* Mathematical Calculation Card */
    .math-card {
      width: 100%;
      max-width: 420px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      position: relative;
      overflow: hidden;
      min-height: 86px;
      justify-content: center;
    }

    .formula-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 600;
      color: #475569;
    }

    .calc-display {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
      flex-wrap: wrap;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 700;
    }

    .tag-blue { background: #dbeafe; color: #1d4ed8; }
    .tag-orange { background: #ffedd5; color: #c2410c; }
    .tag-green { background: #dcfce7; color: #15803d; }
    .tag-purple { background: #f3e8ff; color: #7e22ce; }

    .play-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      max-width: 420px;
      justify-content: center;
      padding-top: 4px;
    }

    .play-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 4px 14px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .dots {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
    }

    .dot.active {
      background: #3b82f6;
      transform: scale(1.15);
    }
  </style>
</head>
<body>

  
  <div class="stepper-nav">
    <button class="step-btn active" id="btn0" onclick="goToStep(0)">1. Identify</button>
    <button class="step-btn" id="btn1" onclick="goToStep(1)">2. Base × Height</button>
    <button class="step-btn" id="btn2" onclick="goToStep(2)">3. Multiply ½</button>
  </div>

  
  <div class="viz-container">
    <svg viewBox="0 0 340 180" id="svgGraph">
      
      <rect id="ghostRect" class="rect-ghost" x="40" y="30" width="240" height="110" rx="4" />
      <text id="ghostLabel" x="160" y="20" fill="#64748b" font-size="12" font-weight="600" text-anchor="middle" style="opacity:0;">Rectangle = 30 ft²</text>

      
      
      <polygon id="triangle" class="tri-shape" points="40,140 120,30 280,140" />

      
      <line id="hLine" class="height-line" x1="120" y1="30" x2="120" y2="140" />
      
      <path class="angle-marker" d="M 120,128 L 132,128 L 132,140" />

      
      <line x1="40" y1="152" x2="280" y2="152" stroke="#2563eb" stroke-width="2" />
      <line x1="40" y1="147" x2="40" y2="157" stroke="#2563eb" stroke-width="2" />
      <line x1="280" y1="147" x2="280" y2="157" stroke="#2563eb" stroke-width="2" />

      
      <text class="dim-label" id="bLabel" x="160" y="168" fill="#2563eb">b = 7.5 ft</text>
      <text class="dim-label" id="hLabel" x="98" y="85" fill="#ea580c">h = 4 ft</text>

      
      <g id="areaGroup">
        <rect id="areaBg" x="110" y="82" width="105" height="30" rx="8" fill="#ffffff" stroke="#1d4ed8" stroke-width="1.5" style="opacity:0; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));" />
        <text id="areaText" class="area-badge" x="162" y="97">15 ft²</text>
      </g>
    </svg>
  </div>

  
  <div class="math-card" id="mathCard">
    <div class="formula-row">
      <span>Formula:</span>
      <span>Area = <span style="font-size:17px;">½</span> · <span class="tag tag-blue">b</span> · <span class="tag tag-orange">h</span></span>
    </div>
    <div class="calc-display" id="stepOutput">
      
    </div>
  </div>

  
  <div class="play-bar">
    <button class="play-btn" id="playToggle" onclick="togglePlay()">
      <span id="playIcon">⏸</span> <span id="playText">Pause</span>
    </button>
    <div class="dots">
      <div class="dot active" onclick="goToStep(0)"></div>
      <div class="dot" onclick="goToStep(1)"></div>
      <div class="dot" onclick="goToStep(2)"></div>
    </div>
  </div>

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

    const stepsData = [
      {
        html: `<span><span class="tag tag-blue">b = 7.5 ft</span> &nbsp;and&nbsp; <span class="tag tag-orange">h = 4 ft</span></span>`,
        rectOpacity: 0,
        rectLabelOpacity: 0,
        triFill: '#dbeafe',
        triStroke: '#2563eb',
        hHighlight: true,
        bHighlight: true,
        areaOpacity: 0
      },
      {
        html: `<span class="tag tag-blue">7.5</span> × <span class="tag tag-orange">4</span> = <span class="tag tag-purple">30 ft²</span> <span style="font-size:13px; font-weight:500; color:#64748b;">(Rectangle)</span>`,
        rectOpacity: 0.85,
        rectLabelOpacity: 1,
        triFill: '#bfdbfe',
        triStroke: '#2563eb',
        hHighlight: false,
        bHighlight: false,
        areaOpacity: 0
      },
      {
        html: `<span><span style="font-size:16px;">½</span> × <span class="tag tag-purple">30</span> = <span class="tag tag-green" style="font-size:20px;">15 ft²</span></span>`,
        rectOpacity: 0.2,
        rectLabelOpacity: 0,
        triFill: '#93c5fd',
        triStroke: '#1d4ed8',
        hHighlight: false,
        bHighlight: false,
        areaOpacity: 1
      }
    ];

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

      // Update Nav Buttons
      for (let i = 0; i < 3; i++) {
        document.getElementById('btn' + i).classList.toggle('active', i === idx);
        document.querySelectorAll('.dot')[i].classList.toggle('active', i === idx);
      }

      // Update Visual SVG
      const ghostRect = document.getElementById('ghostRect');
      const ghostLabel = document.getElementById('ghostLabel');
      const triangle = document.getElementById('triangle');
      const areaBg = document.getElementById('areaBg');
      const areaText = document.getElementById('areaText');

      ghostRect.style.transition = 'opacity 0.4s ease';
      ghostRect.style.opacity = data.rectOpacity;

      ghostLabel.style.transition = 'opacity 0.4s ease';
      ghostLabel.style.opacity = data.rectLabelOpacity;

      triangle.style.transition = 'fill 0.4s ease, stroke 0.4s ease';
      triangle.style.fill = data.triFill;
      triangle.style.stroke = data.triStroke;

      areaBg.style.transition = 'opacity 0.4s ease';
      areaBg.style.opacity = data.areaOpacity;

      areaText.style.transition = 'opacity 0.4s ease';
      areaText.style.opacity = data.areaOpacity;

      // Update Math Display
      document.getElementById('stepOutput').innerHTML = data.html;
    }

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

    function goToStep(idx) {
      renderStep(idx);
      if (isPlaying) {
        resetTimer();
      }
    }

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

    function togglePlay() {
      isPlaying = !isPlaying;
      document.getElementById('playIcon').textContent = isPlaying ? '⏸' : '▶';
      document.getElementById('playText').textContent = isPlaying ? 'Pause' : 'Play';
      if (isPlaying) {
        resetTimer();
      } else {
        clearInterval(timer);
      }
    }

    // Initial Start
    renderStep(0);
    resetTimer();
  </script>
</body>
</html>

Area of Triangles

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .badge {
      cursor: pointer;
      transition: transform 0.2s ease, filter 0.2s ease;
    }
    .badge:hover {
      filter: brightness(0.95);
    }
    .badge:active {
      transform: scale(0.98);
    }
    .toggle-row {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }
    .btn-pill {
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 999px;
      border: 1.5px solid transparent;
      background: #f1f5f9;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-pill.active-slant {
      background: #fee2e2;
      color: #b91c1c;
      border-color: #ef4444;
    }
    .btn-pill.active-height {
      background: #dcfce7;
      color: #15803d;
      border-color: #22c55e;
    }
    .highlight-red {
      stroke: #ef4444 !important;
      stroke-width: 4.5 !important;
    }
    .highlight-green {
      stroke: #16a34a !important;
      stroke-width: 4.5 !important;
    }
    .dimmed {
      opacity: 0.35;
      transition: opacity 0.25s ease;
    }
    .transition-all {
      transition: all 0.25s ease;
    }
  </style>
</head>
<body>

<div class="diagram-wrap">
  <svg viewBox="0 0 440 330" aria-label="Triangle height vs slanted side warning diagram">
    <defs>
      
      <marker id="arrow-left" viewBox="0 0 10 10" refX="2" refY="5" markerWidth="6" markerHeight="6" orient="auto">
        <path d="M 8 2 L 2 5 L 8 8" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" />
      </marker>
      <marker id="arrow-right" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
        <path d="M 2 2 L 8 5 L 2 8" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" />
      </marker>
    </defs>

    
    <polygon points="70,250 370,250 220,50" 
             fill="#eff6ff" 
             stroke="#3b82f6" 
             stroke-width="2.5" 
             stroke-linejoin="round" />

    
    <g id="rightAngleGroup" class="transition-all">
      <path d="M 220,232 L 238,232 L 238,250" 
            fill="rgba(22, 163, 74, 0.15)" 
            stroke="#16a34a" 
            stroke-width="2" 
            stroke-linecap="square" />
      <circle cx="229" cy="241" r="1.5" fill="#16a34a" />
    </g>

    
    <line id="slantSide" x1="70" y1="250" x2="220" y2="50" 
          stroke="#ef4444" 
          stroke-width="3" 
          stroke-linecap="round" 
          class="transition-all" />

    
    <line id="heightLine" x1="220" y1="50" x2="220" y2="250" 
          stroke="#16a34a" 
          stroke-width="3" 
          stroke-dasharray="6,5" 
          stroke-linecap="round" 
          class="transition-all" />

    
    <text x="312" y="145" fill="#64748b" font-size="15" font-weight="600" text-anchor="start">5 cm</text>

    
    <g id="baseGroup">
      <line x1="70" y1="272" x2="370" y2="272" 
            stroke="#64748b" stroke-width="1.5" 
            marker-start="url(#arrow-left)" marker-end="url(#arrow-right)" />
      <line x1="70" y1="255" x2="70" y2="280" stroke="#cbd5e1" stroke-width="1" />
      <line x1="370" y1="255" x2="370" y2="280" stroke="#cbd5e1" stroke-width="1" />
      <rect x="185" y="262" width="70" height="20" fill="#ffffff" rx="4" />
      <text x="220" y="277" fill="#1e2945" font-size="14" font-weight="700" text-anchor="middle">6 cm</text>
    </g>

    
    <g id="wrongCallout" class="badge transition-all" transform="translate(18, 115)">
      
      <path d="M 125,25 L 140,25" stroke="#ef4444" stroke-width="2" stroke-linecap="round" />
      
      <rect x="0" y="0" width="125" height="50" rx="10" fill="#fee2e2" stroke="#ef4444" stroke-width="1.5" />
      <text x="62" y="21" fill="#991b1b" font-size="14" font-weight="800" text-anchor="middle">5 cm</text>
      <text x="62" y="39" fill="#dc2626" font-size="13" font-weight="700" text-anchor="middle">✕ NOT height!</text>
    </g>

    
    <g id="correctCallout" class="badge transition-all" transform="translate(235, 115)">
      
      <path d="M 0,25 L -12,25" stroke="#22c55e" stroke-width="2" stroke-linecap="round" />
      
      <rect x="0" y="0" width="135" height="50" rx="10" fill="#dcfce7" stroke="#22c55e" stroke-width="1.5" />
      <text x="67" y="21" fill="#166534" font-size="14" font-weight="800" text-anchor="middle">4 cm</text>
      <text x="67" y="39" fill="#15803d" font-size="13" font-weight="700" text-anchor="middle">✓ True height</text>
    </g>

    
    <text x="220" y="315" fill="#64748b" font-size="13" font-weight="600" text-anchor="middle">
      Height must be perpendicular (90°) to the base
    </text>
  </svg>

  
  <div class="toggle-row">
    <button class="btn-pill" id="btnSlant">✕ Slanted side</button>
    <button class="btn-pill" id="btnHeight">✓ Perpendicular height</button>
  </div>
</div>

<script>
  const slantSide = document.getElementById('slantSide');
  const heightLine = document.getElementById('heightLine');
  const rightAngle = document.getElementById('rightAngleGroup');
  const wrongCallout = document.getElementById('wrongCallout');
  const correctCallout = document.getElementById('correctCallout');
  const btnSlant = document.getElementById('btnSlant');
  const btnHeight = document.getElementById('btnHeight');

  let state = 'all'; // 'all', 'slant', 'height'

  function updateView(mode) {
    if (state === mode) mode = 'all';
    state = mode;

    if (state === 'slant') {
      btnSlant.className = 'btn-pill active-slant';
      btnHeight.className = 'btn-pill';
      slantSide.classList.add('highlight-red');
      heightLine.classList.remove('highlight-green');
      wrongCallout.classList.remove('dimmed');
      correctCallout.classList.add('dimmed');
      rightAngle.classList.add('dimmed');
    } else if (state === 'height') {
      btnSlant.className = 'btn-pill';
      btnHeight.className = 'btn-pill active-height';
      slantSide.classList.remove('highlight-red');
      heightLine.classList.add('highlight-green');
      wrongCallout.classList.add('dimmed');
      correctCallout.classList.remove('dimmed');
      rightAngle.classList.remove('dimmed');
    } else {
      btnSlant.className = 'btn-pill';
      btnHeight.className = 'btn-pill';
      slantSide.classList.remove('highlight-red');
      heightLine.classList.remove('highlight-green');
      wrongCallout.classList.remove('dimmed');
      correctCallout.classList.remove('dimmed');
      rightAngle.classList.remove('dimmed');
    }
  }

  btnSlant.addEventListener('click', () => updateView('slant'));
  btnHeight.addEventListener('click', () => updateView('height'));
  wrongCallout.addEventListener('click', () => updateView('slant'));
  correctCallout.addEventListener('click', () => updateView('height'));
</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, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .svg-container {
      width: 100%;
      position: relative;
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .tri-fill {
      fill: #eff6ff;
      stroke: #3b82f6;
      stroke-width: 2.5;
      stroke-linejoin: round;
      transition: all 0.3s ease;
    }
    .base-line {
      stroke: #1d4ed8;
      stroke-width: 4.5;
      stroke-linecap: round;
      transition: stroke-width 0.3s ease;
    }
    .ext-line {
      stroke: #94a3b8;
      stroke-width: 2;
      stroke-dasharray: 5,4;
    }
    .height-line {
      stroke: #dc2626;
      stroke-width: 2.5;
      stroke-dasharray: 5,4;
      transition: stroke-width 0.3s ease;
    }
    .right-angle {
      fill: none;
      stroke: #dc2626;
      stroke-width: 1.8;
    }
    .label-base {
      fill: #1d4ed8;
      font-size: 15px;
      font-weight: 700;
      text-anchor: middle;
    }
    .label-height {
      fill: #dc2626;
      font-size: 15px;
      font-weight: 700;
      text-anchor: start;
    }
    .calc-card {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .calc-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 16px;
      font-weight: 600;
    }
    .badge-b {
      color: #1d4ed8;
      background: #dbeafe;
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 700;
    }
    .badge-h {
      color: #dc2626;
      background: #fee2e2;
      padding: 2px 8px;
      border-radius: 6px;
      font-weight: 700;
    }
    .badge-ans {
      color: #047857;
      background: #d1fae5;
      padding: 2px 10px;
      border-radius: 6px;
      font-weight: 800;
      font-size: 17px;
    }
    .btn-group {
      display: flex;
      gap: 8px;
      width: 100%;
    }
    .tab-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 600;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      color: #475569;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
  </style>
</head>
<body>

<div class="diagram-wrap">
  <div class="svg-container">
    <svg viewBox="0 0 380 200">
      
      <polygon id="triPoly" class="tri-fill" points="40,150 200,150 290,45" />

      
      <line class="ext-line" x1="200" y1="150" x2="320" y2="150" />

      
      <polyline class="right-angle" points="278,150 278,138 290,138" />

      
      <line id="heightLine" class="height-line" x1="290" y1="45" x2="290" y2="150" />

      
      <line id="baseLine" class="base-line" x1="40" y1="150" x2="200" y2="150" />

      
      <circle cx="290" cy="45" r="4" fill="#dc2626" />
      <circle cx="40" cy="150" r="3.5" fill="#1d4ed8" />
      <circle cx="200" cy="150" r="3.5" fill="#1d4ed8" />

      
      <text class="label-base" x="120" y="174">b = 6 cm</text>
      <text class="label-height" x="300" y="102">h = 3.5 cm</text>
    </svg>
  </div>

  <div class="calc-card">
    <div class="calc-row">
      <span>Area = </span>
      <span>½</span>
      <span>×</span>
      <span class="badge-b">6</span>
      <span>×</span>
      <span class="badge-h">3.5</span>
    </div>
    <div class="calc-row">
      <span>Area = </span>
      <span class="badge-ans">10.5 cm²</span>
    </div>
  </div>

  <div class="btn-group">
    <button class="tab-btn active" onclick="setMode('all', this)">View All</button>
    <button class="tab-btn" onclick="setMode('base', this)">Base (b)</button>
    <button class="tab-btn" onclick="setMode('height', this)">Height (h)</button>
  </div>
</div>

<script>
  function setMode(mode, btn) {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');

    const baseLine = document.getElementById('baseLine');
    const heightLine = document.getElementById('heightLine');
    const triPoly = document.getElementById('triPoly');

    if (mode === 'base') {
      baseLine.style.strokeWidth = '7';
      heightLine.style.strokeWidth = '1.5';
      triPoly.style.fill = '#f8fafc';
    } else if (mode === 'height') {
      baseLine.style.strokeWidth = '2.5';
      heightLine.style.strokeWidth = '4.5';
      triPoly.style.fill = '#f8fafc';
    } else {
      baseLine.style.strokeWidth = '4.5';
      heightLine.style.strokeWidth = '2.5';
      triPoly.style.fill = '#eff6ff';
    }
  }
</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, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .grid-line {
      stroke: rgba(0, 0, 0, 0.08);
      stroke-width: 1;
      stroke-dasharray: 2 2;
    }
    .tri-a {
      fill: #e0f2fe;
      stroke: #0284c7;
      stroke-width: 2.5;
      stroke-linejoin: round;
    }
    .tri-b {
      fill: #ffe4e6;
      stroke: #f43f5e;
      stroke-width: 2.5;
      stroke-linejoin: round;
      transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .diagonal {
      stroke: #475569;
      stroke-width: 2;
      stroke-dasharray: 5 4;
    }
    .dim-line {
      stroke: #64748b;
      stroke-width: 1.5;
    }
    .dim-text {
      font-size: 14px;
      font-weight: 700;
      fill: #334155;
      text-anchor: middle;
      dominant-baseline: middle;
    }
    .area-text {
      font-size: 15px;
      font-weight: 800;
      text-anchor: middle;
      dominant-baseline: middle;
    }
    .text-a { fill: #0369a1; }
    .text-b { fill: #be123c; }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      width: 100%;
      max-width: 380px;
    }
    .btn {
      background: #0284c7;
      color: #fff;
      border: none;
      padding: 7px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
    }
    .btn:active { transform: translateY(1px); }
    input[type=range] {
      flex: 1;
      accent-color: #0284c7;
      cursor: pointer;
      height: 6px;
    }
    .calc-badge {
      font-size: 14px;
      font-weight: 700;
      color: #334155;
      background: #f1f5f9;
      padding: 6px 14px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <svg viewBox="0 0 460 270" aria-label="Rectangle split into two congruent triangles">
      <defs>
        <marker id="arrow" viewBox="0 0 6 6" refX="3" refY="3" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
          <path d="M 0 0 L 6 3 L 0 6 z" fill="#64748b"/>
        </marker>
      </defs>

      
      <line x1="42" y1="45" x2="42" y2="195" class="dim-line" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
      <rect x="0" y="108" width="84" height="24" fill="#ffffff" rx="4"/>
      <text x="42" y="120" class="dim-text">height = 4</text>

      
      <line x1="85" y1="238" x2="375" y2="238" class="dim-line" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
      <rect x="190" y="226" width="80" height="24" fill="#ffffff" rx="4"/>
      <text x="230" y="238" class="dim-text">base = 6</text>

      
      <g>
        <polygon points="80,40 80,200 380,200" class="tri-a"/>
        
        <line x1="130" y1="67" x2="130" y2="200" class="grid-line"/>
        <line x1="180" y1="93" x2="180" y2="200" class="grid-line"/>
        <line x1="230" y1="120" x2="230" y2="200" class="grid-line"/>
        <line x1="280" y1="147" x2="280" y2="200" class="grid-line"/>
        <line x1="330" y1="173" x2="330" y2="200" class="grid-line"/>
        <line x1="80" y1="80" x2="155" y2="80" class="grid-line"/>
        <line x1="80" y1="120" x2="230" y2="120" class="grid-line"/>
        <line x1="80" y1="160" x2="305" y2="160" class="grid-line"/>
        <text x="175" y="160" class="area-text text-a">Area = 12</text>
      </g>

      
      <g id="triB" class="tri-b">
        <polygon points="80,40 380,40 380,200" style="fill:inherit; stroke:inherit; stroke-width:inherit;"/>
        
        <line x1="130" y1="40" x2="130" y2="67" class="grid-line"/>
        <line x1="180" y1="40" x2="180" y2="93" class="grid-line"/>
        <line x1="230" y1="40" x2="230" y2="120" class="grid-line"/>
        <line x1="280" y1="40" x2="280" y2="147" class="grid-line"/>
        <line x1="330" y1="40" x2="330" y2="173" class="grid-line"/>
        <line x1="155" y1="80" x2="380" y2="80" class="grid-line"/>
        <line x1="230" y1="120" x2="380" y2="120" class="grid-line"/>
        <line x1="305" y1="160" x2="380" y2="160" class="grid-line"/>
        <text x="285" y="80" class="area-text text-b">Area = 12</text>
      </g>

      
      <line x1="80" y1="40" x2="380" y2="200" class="diagonal"/>
    </svg>

    <div class="calc-badge">
      Area = (6 × 4) ÷ 2 = <strong>12</strong>
    </div>

    <div class="controls">
      <button id="toggleBtn" class="btn">Separate</button>
      <input id="slider" type="range" min="0" max="100" value="0" aria-label="Shift triangle slider">
    </div>
  </div>

  <script>
    const triB = document.getElementById('triB');
    const slider = document.getElementById('slider');
    const toggleBtn = document.getElementById('toggleBtn');
    let separated = false;

    function updateShift(val) {
      const dx = (val / 100) * 35;
      const dy = (val / 100) * -25;
      triB.style.transform = `translate(${dx}px, ${dy}px)`;
      slider.value = val;
      separated = val > 40;
      toggleBtn.textContent = separated ? 'Together' : 'Separate';
    }

    slider.addEventListener('input', (e) => {
      updateShift(parseFloat(e.target.value));
    });

    toggleBtn.addEventListener('click', () => {
      separated = !separated;
      const target = separated ? 100 : 0;
      updateShift(target);
    });
  </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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px;
    }
    .diagram-svg {
      width: 100%;
      max-width: 640px;
      height: auto;
      display: block;
    }
    .label-title {
      font-size: 15px;
      font-weight: 700;
      fill: #1e2945;
      text-anchor: middle;
    }
    .label-base {
      font-size: 14px;
      font-weight: 700;
      fill: #2563eb;
      text-anchor: middle;
    }
    .label-height {
      font-size: 14px;
      font-weight: 700;
      fill: #dc2626;
      text-anchor: middle;
    }
    .tri-fill {
      fill: #f1f5f9;
      stroke: #334155;
      stroke-width: 2.5;
      stroke-linejoin: round;
    }
    .base-line {
      stroke: #2563eb;
      stroke-width: 3.5;
      stroke-linecap: round;
    }
    .height-line {
      stroke: #dc2626;
      stroke-width: 2.5;
      stroke-dasharray: 5 4;
      stroke-linecap: round;
    }
    .ext-line {
      stroke: #94a3b8;
      stroke-width: 2;
      stroke-dasharray: 4 4;
    }
    .sq-marker {
      fill: none;
      stroke: #dc2626;
      stroke-width: 1.8;
    }
  </style>
</head>
<body>
  <svg class="diagram-svg" viewBox="0 0 600 250" aria-label="Comparison of base and height in right, acute, and obtuse triangles">
    
    <g transform="translate(10, 0)">
      <text x="95" y="30" class="label-title">Right</text>
      
      <polygon points="45,60 45,190 155,190" class="tri-fill" />
      
      <line x1="45" y1="190" x2="155" y2="190" class="base-line" />
      
      <line x1="45" y1="60" x2="45" y2="190" class="height-line" />
      
      <polyline points="45,176 59,176 59,190" class="sq-marker" />
      
      <text x="32" y="130" class="label-height">h</text>
      <text x="100" y="214" class="label-base">base (b)</text>
    </g>

    
    <g transform="translate(205, 0)">
      <text x="95" y="30" class="label-title">Acute</text>
      
      <polygon points="95,60 25,190 165,190" class="tri-fill" />
      
      <line x1="25" y1="190" x2="165" y2="190" class="base-line" />
      
      <line x1="95" y1="60" x2="95" y2="190" class="height-line" />
      
      <polyline points="95,176 109,176 109,190" class="sq-marker" />
      
      <text x="82" y="130" class="label-height">h</text>
      <text x="95" y="214" class="label-base">base (b)</text>
    </g>

    
    <g transform="translate(400, 0)">
      <text x="95" y="30" class="label-title">Obtuse</text>
      
      <polygon points="25,60 65,190 165,190" class="tri-fill" />
      
      <line x1="25" y1="190" x2="65" y2="190" class="ext-line" />
      
      <line x1="65" y1="190" x2="165" y2="190" class="base-line" />
      
      <line x1="25" y1="60" x2="25" y2="190" class="height-line" />
      
      <polyline points="25,176 39,176 39,190" class="sq-marker" />
      
      <text x="12" y="130" class="label-height">h</text>
      <text x="115" y="214" class="label-base">base (b)</text>
    </g>
  </svg>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <title>Garden Bed Area Calculation</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: transparent;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .stepper-nav {
      display: flex;
      gap: 6px;
      margin-bottom: 10px;
      width: 100%;
      max-width: 440px;
    }
    .step-btn {
      flex: 1;
      border: 1.5px solid #cbd5e1;
      background: #f8fafc;
      color: #334155;
      padding: 7px 4px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
    }
    .step-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }
    .step-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 2px 5px rgba(2, 132, 199, 0.25);
    }

    .cards-container {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .math-card {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 12px;
      padding: 11px 14px;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
    }
    .math-card.active-card {
      border-color: #0284c7;
      box-shadow: 0 0 0 1px #0284c7, 0 3px 10px rgba(2, 132, 199, 0.12);
    }
    .math-card.dimmed {
      opacity: 0.72;
      border-color: #e2e8f0;
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .step-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #0369a1;
      background: #e0f2fe;
      padding: 3px 8px;
      border-radius: 6px;
    }
    .dimmed .step-tag {
      background: #f1f5f9;
      color: #475569;
    }
    .card-title {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
    }

    /* Card 1 Garden Visual */
    .garden-visual-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 2px 0 4px 0;
    }
    .dim-top {
      margin-bottom: 4px;
      text-align: center;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .garden-main-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
    }
    .dim-left {
      text-align: right;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      min-width: 65px;
    }
    .dim-label {
      font-size: 13px;
      font-weight: 700;
      color: #0369a1;
      white-space: nowrap;
    }
    .dim-sub {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
    }
    .garden-rect {
      flex: 1;
      max-width: 220px;
      height: 58px;
      background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
      border: 2px dashed #16a34a;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .garden-rect span {
      font-size: 13px;
      font-weight: 700;
      color: #15803d;
    }

    /* Math typography */
    .math-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      flex-wrap: wrap;
    }
    .math-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }
    .arrow {
      color: #475569;
      font-size: 15px;
      font-weight: 700;
    }

    /* Fractions */
    .frac {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 13px;
      line-height: 1;
      padding: 0 2px;
      font-weight: 700;
    }
    .frac-top {
      border-bottom: 1.5px solid #1e2945;
      padding-bottom: 2px;
    }
    .frac-bot {
      padding-top: 2px;
    }
    .frac-colored {
      color: #0284c7;
    }
    .frac-colored .frac-top {
      border-bottom-color: #0284c7;
    }
    .mixed {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: 15px;
      font-weight: 700;
    }

    /* Multiply row */
    .mult-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }
    .mult-frac {
      font-size: 13px;
    }

    /* Result Badge */
    .result-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #e0f2fe;
      border: 1.5px solid #38bdf8;
      border-radius: 8px;
      padding: 5px 12px;
      color: #0369a1;
      font-weight: 700;
    }
    .result-badge .mixed {
      font-size: 16px;
      color: #0284c7;
    }
    .result-badge .mixed .frac-top {
      border-bottom-color: #0284c7;
    }

    .step-section {
      transition: opacity 0.2s ease;
    }
    .step-muted {
      opacity: 0.65;
    }
  </style>
</head>
<body>

  <div class="stepper-nav">
    <button class="step-btn active" onclick="setStep(0)" id="btn-0">1. Improper</button>
    <button class="step-btn" onclick="setStep(1)" id="btn-1">2. Multiply</button>
    <button class="step-btn" onclick="setStep(2)" id="btn-2">3. Area</button>
  </div>

  <div class="cards-container">
    
    <div class="math-card" id="card-diag">
      <div class="card-header">
        <span class="card-title">Garden Bed Dimensions</span>
        <span class="dim-sub" style="font-weight:700; color:#334155;">Area = Length × Width</span>
      </div>
      <div class="garden-visual-wrapper">
        
        <div class="dim-top">
          <span class="dim-label">Length: <span class="mixed">2<span class="frac"><span class="frac-top">1</span><span class="frac-bot">2</span></span></span> yd</span>
          <span class="dim-sub">(<span class="frac"><span class="frac-top">5</span><span class="frac-bot">2</span></span>)</span>
        </div>
        <div class="garden-main-row">
          
          <div class="dim-left">
            <div class="dim-label"><span class="mixed">1<span class="frac"><span class="frac-top">3</span><span class="frac-bot">4</span></span></span> yd</div>
            <div class="dim-sub">(<span class="frac"><span class="frac-top">7</span><span class="frac-bot">4</span></span>)</div>
          </div>
          <div class="garden-rect">
            <span>🌿 Garden Bed</span>
          </div>
          
          <div style="min-width: 65px;"></div>
        </div>
      </div>
    </div>

    
    <div class="math-card active-card" id="card-calc">
      <div id="step1-content" class="step-section">
        <div class="card-header">
          <span class="step-tag">Step 1</span>
          <span class="card-title">Convert to improper fractions</span>
        </div>
        <div class="math-row">
          <div class="math-item">
            <span class="mixed">2<span class="frac"><span class="frac-top">1</span><span class="frac-bot">2</span></span></span>
            <span class="arrow">→</span>
            <span class="frac frac-colored"><span class="frac-top">5</span><span class="frac-bot">2</span></span>
          </div>
          <div style="color:#475569; font-weight:700; font-size:13px;">and</div>
          <div class="math-item">
            <span class="mixed">1<span class="frac"><span class="frac-top">3</span><span class="frac-bot">4</span></span></span>
            <span class="arrow">→</span>
            <span class="frac frac-colored"><span class="frac-top">7</span><span class="frac-bot">4</span></span>
          </div>
        </div>
      </div>

      <div id="step2-content" class="step-section step-muted" style="margin-top: 8px; padding-top: 8px; border-top: 1px dashed #cbd5e1;">
        <div class="card-header">
          <span class="step-tag">Step 2</span>
          <span class="card-title">Multiply straight across</span>
        </div>
        <div class="mult-row">
          <div class="frac"><span class="frac-top">5</span><span class="frac-bot">2</span></div>
          <span>×</span>
          <div class="frac"><span class="frac-top">7</span><span class="frac-bot">4</span></div>
          <span>=</span>
          <div class="frac mult-frac">
            <span class="frac-top">5 × 7</span>
            <span class="frac-bot">2 × 4</span>
          </div>
          <span>=</span>
          <div class="frac frac-colored"><span class="frac-top">35</span><span class="frac-bot">8</span></div>
        </div>
      </div>
    </div>

    
    <div class="math-card dimmed" id="card-res">
      <div class="card-header">
        <span class="step-tag">Step 3</span>
        <span class="card-title">Convert to mixed number</span>
      </div>
      <div style="display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;">
        <div class="math-item">
          <span class="frac"><span class="frac-top">35</span><span class="frac-bot">8</span></span>
          <span>=</span>
        </div>
        <div class="result-badge">
          <span class="mixed">4<span class="frac"><span class="frac-top">3</span><span class="frac-bot">8</span></span></span>
          <span>sq yd</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    function setStep(idx) {
      const btns = [document.getElementById('btn-0'), document.getElementById('btn-1'), document.getElementById('btn-2')];
      btns.forEach((b, i) => b.classList.toggle('active', i === idx));

      const cardCalc = document.getElementById('card-calc');
      const cardRes = document.getElementById('card-res');
      const s1 = document.getElementById('step1-content');
      const s2 = document.getElementById('step2-content');

      if (idx === 0) {
        cardCalc.classList.add('active-card');
        cardCalc.classList.remove('dimmed');
        cardRes.classList.add('dimmed');
        cardRes.classList.remove('active-card');
        s1.classList.remove('step-muted');
        s2.classList.add('step-muted');
      } else if (idx === 1) {
        cardCalc.classList.add('active-card');
        cardCalc.classList.remove('dimmed');
        cardRes.classList.add('dimmed');
        cardRes.classList.remove('active-card');
        s1.classList.add('step-muted');
        s2.classList.remove('step-muted');
      } else {
        cardCalc.classList.remove('active-card');
        cardCalc.classList.add('dimmed');
        cardRes.classList.add('active-card');
        cardRes.classList.remove('dimmed');
        s1.classList.remove('step-muted');
        s2.classList.remove('step-muted');
      }
    }

    setStep(0);
  </script>
</body>
</html>

Solving Area Problems with Fractional Dimensions

<!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>Triangle Area with Fractional Dimensions</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: #1e2945;
      width: 100%;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
    }

    /* Top: Geometry Area */
    .geometry-box {
      width: 100%;
      max-width: 480px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    svg {
      width: 100%;
      max-height: 160px;
      overflow: visible;
    }

    /* Middle: Interactive Steps */
    .calc-container {
      width: 100%;
      max-width: 480px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      min-height: 130px;
      position: relative;
    }

    /* Math layout */
    .math-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      flex-wrap: wrap;
    }

    .frac {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      vertical-align: middle;
      padding: 0 3px;
      position: relative;
    }
    .num {
      border-bottom: 2px solid #1e2945;
      padding-bottom: 2px;
      width: 100%;
      text-align: center;
      position: relative;
    }
    .den {
      padding-top: 2px;
      width: 100%;
      text-align: center;
      position: relative;
    }

    /* Cross-canceling elements */
    .cross-val {
      position: relative;
      display: inline-block;
      transition: color 0.3s ease;
    }
    .strike {
      position: absolute;
      top: 50%;
      left: -2px;
      right: -2px;
      height: 2px;
      background: #ef4444;
      transform: rotate(-25deg);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .sub-tag {
      position: absolute;
      font-size: 12px;
      font-weight: 800;
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .tag-top {
      top: -14px;
      left: 50%;
      transform: translateX(-50%) translateY(4px);
    }
    .tag-bottom {
      bottom: -14px;
      left: 50%;
      transform: translateX(-50%) translateY(-4px);
    }
    .tag-blue { color: #0284c7; }
    .tag-amber { color: #d97706; }

    /* Active cross-simplification states */
    .simplified .strike { opacity: 1; }
    .simplified .sub-tag {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
    .simplified .orig-num { color: #94a3b8; }

    /* Steps Display */
    .step-panel {
      display: none;
      width: 100%;
      text-align: center;
      animation: fadeIn 0.3s ease;
    }
    .step-panel.active {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }

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

    /* Result Badge */
    .result-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #ecfdf5;
      border: 1.5px solid #10b981;
      color: #065f46;
      padding: 4px 12px;
      border-radius: 9999px;
      font-weight: 700;
      font-size: 16px;
    }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 480px;
      margin-top: 4px;
    }
    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    .step-btn:hover {
      background: #e2e8f0;
      color: #1e2945;
    }
    .step-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .play-btn {
      background: #0284c7;
      border: none;
      color: white;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      transition: background 0.2s ease;
    }
    .play-btn:hover {
      background: #0369a1;
    }
  </style>
</head>
<body>

  
  <div class="geometry-box">
    <svg viewBox="0 0 360 145" aria-label="Right triangle inside bounding rectangle">
      <defs>
        
        <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="4" markerHeight="4" orient="auto-start-reverse">
          <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#64748b" />
        </marker>
      </defs>

      
      <rect x="70" y="20" width="200" height="95" fill="#f0f9ff" stroke="#93c5fd" stroke-width="1.5" stroke-dasharray="4 4" rx="2" />

      
      <polygon points="70,115 270,115 70,20" fill="#bae6fd" fill-opacity="0.6" stroke="#0284c7" stroke-width="2.5" stroke-linejoin="round" />

      
      <path d="M 70 101 L 84 101 L 84 115" fill="none" stroke="#0284c7" stroke-width="1.5" />

      
      <text x="130" y="78" font-size="12" font-weight="700" fill="#0369a1" opacity="0.8">½ of rectangle</text>

      
      <line x1="52" y1="22" x2="52" y2="113" stroke="#64748b" stroke-width="1.2" marker-start="url(#arrow)" marker-end="url(#arrow)" />
      <text x="44" y="68" font-size="13" font-weight="700" fill="#0f172a" text-anchor="end" dominant-baseline="middle">h = ⁹⁄₁₀ m</text>

      
      <line x1="72" y1="130" x2="268" y2="130" stroke="#64748b" stroke-width="1.2" marker-start="url(#arrow)" marker-end="url(#arrow)" />
      <text x="170" y="142" font-size="13" font-weight="700" fill="#0f172a" text-anchor="middle">b = ⁴⁄₃ m</text>
    </svg>
  </div>

  
  <div class="calc-container">

    
    <div id="step-0" class="step-panel active">
      <div class="math-row">
        <span>Area =</span>
        <div class="frac"><span class="num">1</span><span class="den">2</span></div>
        <span>×</span>
        <div class="frac"><span class="num">4</span><span class="den">3</span></div>
        <span>×</span>
        <div class="frac"><span class="num">9</span><span class="den">10</span></div>
      </div>
      <div style="font-size: 13px; color: #64748b; font-weight: 500;">
        Area = ½ × base × height
      </div>
    </div>

    
    <div id="step-1" class="step-panel">
      <div class="math-row simplified">
        <span>Area =</span>
        
        <div class="frac">
          <span class="num">1</span>
          <span class="den">
            <span class="cross-val">
              <span class="orig-num">2</span>
              <span class="strike"></span>
              <span class="sub-tag tag-bottom tag-blue">1</span>
            </span>
          </span>
        </div>
        <span>×</span>
        
        <div class="frac">
          <span class="num">
            <span class="cross-val">
              <span class="orig-num">4</span>
              <span class="strike"></span>
              <span class="sub-tag tag-top tag-blue">2</span>
            </span>
          </span>
          <span class="den">
            <span class="cross-val">
              <span class="orig-num">3</span>
              <span class="strike"></span>
              <span class="sub-tag tag-bottom tag-amber">1</span>
            </span>
          </span>
        </div>
        <span>×</span>
        
        <div class="frac">
          <span class="num">
            <span class="cross-val">
              <span class="orig-num">9</span>
              <span class="strike"></span>
              <span class="sub-tag tag-top tag-amber">3</span>
            </span>
          </span>
          <span class="den">10</span>
        </div>
      </div>
      <div style="font-size: 13px; color: #64748b; font-weight: 600;">
        Cross-simplify: <span style="color:#0284c7;">4 & 2 (÷2)</span> &nbsp;|&nbsp; <span style="color:#d97706;">9 & 3 (÷3)</span>
      </div>
    </div>

    
    <div id="step-2" class="step-panel">
      <div class="math-row">
        <span>Area =</span>
        <div class="frac">
          <span class="num">1 × 2 × 3</span>
          <span class="den">1 × 1 × 10</span>
        </div>
        <span>=</span>
        <div class="frac">
          <span class="num">6</span>
          <span class="den">10</span>
        </div>
      </div>
      <div style="font-size: 13px; color: #64748b; font-weight: 500;">
        Multiply remaining numerators & denominators
      </div>
    </div>

    
    <div id="step-3" class="step-panel">
      <div class="math-row">
        <span>Area =</span>
        <div class="frac" style="opacity: 0.6;">
          <span class="num">6</span>
          <span class="den">10</span>
        </div>
        <span>=</span>
        <div class="result-badge">
          <div class="frac" style="font-size: 18px;">
            <span class="num" style="border-color: #065f46;">3</span>
            <span class="den">5</span>
          </div>
          <span>m²</span>
        </div>
      </div>
      <div style="font-size: 13px; color: #059669; font-weight: 700;">
        ✓ Fully simplified area
      </div>
    </div>

  </div>

  
  <div class="controls">
    <button id="playBtn" class="play-btn" aria-label="Play/Pause">❚❚</button>
    <button class="step-btn active" data-step="0">1. Setup</button>
    <button class="step-btn" data-step="1">2. Simplify</button>
    <button class="step-btn" data-step="2">3. Multiply</button>
    <button class="step-btn" data-step="3">4. Result</button>
  </div>

  <script>
    const panels = document.querySelectorAll('.step-panel');
    const buttons = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playBtn');

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

    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 nextStep() {
      showStep((currentStep + 1) % panels.length);
    }

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

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

    buttons.forEach((btn, index) => {
      btn.addEventListener('click', () => {
        showStep(index);
        pauseAutoPlay();
      });
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        nextStep();
        startAutoPlay();
      }
    });

    // Start auto loop on load
    startAutoPlay();
  </script>
</body>
</html>

111.26(b)(3)(E)

Aligned learning resources

Related diagrams