<!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: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    /* Equation Display Header */
    .eq-header {
      font-size: 20px;
      font-weight: 700;
      color: #1e2945;
      display: flex;
      align-items: center;
      gap: 8px;
      height: 32px;
    }
    .eq-pill {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 16px;
      font-weight: 600;
      color: #475569;
      transition: all 0.3s ease;
    }
    .eq-pill.active {
      background: #e0f2fe;
      border-color: #38bdf8;
      color: #0369a1;
    }

    /* Equation Mat */
    .mat-container {
      width: 100%;
      max-width: 520px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      position: relative;
      padding: 14px 10px;
      min-height: 200px;
      box-sizing: border-box;
    }

    .mat-side {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 6px;
    }

    .mat-divider {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 32px;
    }
    .mat-divider::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: #cbd5e1;
      border-radius: 1px;
    }
    .equal-sign {
      position: relative;
      z-index: 2;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      color: #334155;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 16px;
    }

    /* Visual Elements */
    .cup-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .cup {
      width: 46px;
      height: 54px;
      background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
      clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
      border-radius: 4px 4px 10px 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-weight: 800;
      font-size: 22px;
      box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
    }
    .cup-label {
      font-size: 13px;
      font-weight: 700;
      color: #2563eb;
      margin-top: 4px;
    }

    .counters-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      align-items: center;
      max-width: 140px;
    }

    .counter {
      width: 26px;
      height: 26px;
      background: #facc15;
      border: 2px solid #ca8a04;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      color: #854d0e;
      position: relative;
      transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
      flex-shrink: 0;
    }
    .counter::before {
      content: '+1';
    }

    .counter-group {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
    }

    /* Subtraction Cross Overlay */
    .counter .cross {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
      color: #ef4444;
      font-size: 18px;
      font-weight: 900;
      line-height: 1;
    }

    /* Step States */
    body[data-step="1"] .remove-target .cross {
      opacity: 0;
    }

    body[data-step="2"] .remove-target {
      opacity: 0.55;
      filter: grayscale(0.2);
    }
    body[data-step="2"] .remove-target .cross {
      opacity: 1;
    }

    body[data-step="3"] .remove-target {
      opacity: 0;
      transform: scale(0.3);
      pointer-events: none;
    }

    /* Action / Result Badge */
    .result-badge {
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 17px;
      border-radius: 10px;
      padding: 6px 18px;
      transition: all 0.3s ease;
    }
    .badge-step1 {
      background: #f1f5f9;
      color: #475569;
    }
    .badge-step2 {
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fca5a5;
    }
    .badge-step3 {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #86efac;
      font-size: 20px;
      box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
    }

    /* Step Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }
    .btn-step {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }
    .btn-step.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
    .btn-play {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #475569;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 13px;
    }
    .btn-play:active, .btn-step:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body data-step="1">

  
  <div class="eq-header">
    <span class="eq-pill active" id="eqPill">x + 3 = 8</span>
  </div>

  
  <div class="mat-container">
    
    <div class="mat-side">
      <div class="cup-wrap">
        <div class="cup">x</div>
        <span class="cup-label">Cup (x)</span>
      </div>
      <div class="counters-grid">
        <div class="counter remove-target"><span class="cross">✕</span></div>
        <div class="counter remove-target"><span class="cross">✕</span></div>
        <div class="counter remove-target"><span class="cross">✕</span></div>
      </div>
    </div>

    
    <div class="mat-divider">
      <div class="equal-sign">=</div>
    </div>

    
    <div class="mat-side">
      <div class="counters-grid">
        <div class="counter remove-target"><span class="cross">✕</span></div>
        <div class="counter remove-target"><span class="cross">✕</span></div>
        <div class="counter remove-target"><span class="cross">✕</span></div>
      </div>
      <div class="counters-grid">
        <div class="counter"></div>
        <div class="counter"></div>
        <div class="counter"></div>
        <div class="counter"></div>
        <div class="counter"></div>
      </div>
    </div>
  </div>

  
  <div class="result-badge badge-step1" id="actionBadge">
    Model: x + 3 = 8
  </div>

  
  <div class="controls">
    <button class="btn-play" id="playToggle" title="Play/Pause">⏸</button>
    <button class="btn-step active" data-target="1">1. Model</button>
    <button class="btn-step" data-target="2">2. −3 Both Sides</button>
    <button class="btn-step" data-target="3">3. x = 5</button>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const body = document.body;
    const eqPill = document.getElementById('eqPill');
    const badge = document.getElementById('actionBadge');
    const playToggle = document.getElementById('playToggle');
    const stepBtns = document.querySelectorAll('.btn-step');

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

    const stepData = {
      1: {
        eq: 'x + 3 = 8',
        badgeClass: 'badge-step1',
        badgeText: 'Model: x + 3 = 8'
      },
      2: {
        eq: 'x + 3 − 3 = 8 − 3',
        badgeClass: 'badge-step2',
        badgeText: 'Subtract 3 from both sides'
      },
      3: {
        eq: 'x = 5',
        badgeClass: 'badge-step3',
        badgeText: '✓ x = 5'
      }
    };

    function setStep(step) {
      currentStep = step;
      body.setAttribute('data-step', step);

      // Update Top Formula Pill
      eqPill.textContent = stepData[step].eq;

      // Update Bottom Badge
      badge.className = 'result-badge ' + stepData[step].badgeClass;
      badge.textContent = stepData[step].badgeText;

      // Update Button Highlight
      stepBtns.forEach(btn => {
        btn.classList.toggle('active', parseInt(btn.dataset.target, 10) === step);
      });
    }

    function nextStep() {
      const next = currentStep >= 3 ? 1 : currentStep + 1;
      setStep(next);
    }

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

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

    stepBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        pauseAutoPlay();
        setStep(parseInt(btn.dataset.target, 10));
      });
    });

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

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

Modeling One-Step Equations with Concrete Models

<!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>Modeling 3x = 12</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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 10px 8px;
    }

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

    /* Row sections */
    .section {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .equation-title {
      font-size: 15px;
      font-weight: 700;
      color: #334155;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .equation-title span {
      background: #e0f2fe;
      color: #0369a1;
      padding: 2px 8px;
      border-radius: 6px;
    }

    .split-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }

    .left-side, .right-side {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
    }

    .eq-sign {
      font-size: 20px;
      font-weight: 800;
      color: #94a3b8;
      user-select: none;
      padding: 0 4px;
    }

    /* Cup Representation */
    .cup-group-h {
      display: flex;
      gap: 8px;
      justify-content: center;
    }

    .cup-group-v {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      align-items: center;
    }

    .cup {
      width: 32px;
      height: 38px;
      background: linear-gradient(180deg, #38bdf8 0%, #0284c7 100%);
      clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
      border-radius: 3px 3px 6px 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-weight: 800;
      font-size: 14px;
      box-shadow: inset 0 -3px 0 rgba(0,0,0,0.15);
      cursor: pointer;
      transition: filter 0.2s, transform 0.2s;
    }

    .cup.highlighted {
      filter: drop-shadow(0 0 4px #0284c7);
      transform: scale(1.06);
    }

    /* Counters */
    .counter-grid-12 {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 4px;
      justify-items: center;
      align-items: center;
    }

    .counter {
      width: 18px;
      height: 18px;
      background: linear-gradient(135deg, #fde047 0%, #eab308 100%);
      border: 1.5px solid #ca8a04;
      border-radius: 50%;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      display: inline-block;
    }

    /* Bottom match rows */
    .groups-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
    }

    .match-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 3px 6px;
      border-radius: 8px;
      transition: background-color 0.2s;
    }

    .match-row.active {
      background: #eff6ff;
      outline: 1.5px solid #3b82f6;
    }

    .counter-box {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      background: #ffffff;
      border: 1.5px dashed #cbd5e1;
      border-radius: 8px;
      padding: 6px 8px;
      height: 38px;
    }

    .match-row.active .counter-box {
      border: 1.5px solid #38bdf8;
      background: #f0f9ff;
    }

    /* Transition Arrow */
    .transition-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: #64748b;
      font-size: 12px;
      font-weight: 700;
    }

    .arrow-icon {
      font-size: 16px;
      color: #3b82f6;
      line-height: 1;
    }

    /* Bottom Solution Callout */
    .solution-badge {
      width: 100%;
      background: #f0fdf4;
      border: 1.5px solid #86efac;
      border-radius: 10px;
      padding: 8px 12px;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      color: #166534;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .solution-badge .key-val {
      background: #22c55e;
      color: white;
      padding: 2px 7px;
      border-radius: 5px;
    }
  </style>
</head>
<body>

  <div class="model-area">
    
    <div class="section">
      <div class="equation-title"><span>3x = 12</span></div>
      <div class="split-row">
        <div class="left-side">
          <div class="cup-group-h">
            <div class="cup">x</div>
            <div class="cup">x</div>
            <div class="cup">x</div>
          </div>
        </div>
        <div class="eq-sign">=</div>
        <div class="right-side">
          <div class="counter-grid-12">
            <div class="counter"></div><div class="counter"></div><div class="counter"></div>
            <div class="counter"></div><div class="counter"></div><div class="counter"></div>
            <div class="counter"></div><div class="counter"></div><div class="counter"></div>
            <div class="counter"></div><div class="counter"></div><div class="counter"></div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="transition-divider">
      <span class="arrow-icon">↓</span> Divide into 3 equal groups
    </div>

    
    <div class="section">
      <div class="groups-container">
        
        <div class="match-row active" id="row-1">
          <div class="cup highlighted">x</div>
          <div class="eq-sign">=</div>
          <div class="counter-box">
            <div class="counter"></div>
            <div class="counter"></div>
            <div class="counter"></div>
            <div class="counter"></div>
          </div>
        </div>

        
        <div class="match-row" id="row-2">
          <div class="cup">x</div>
          <div class="eq-sign">=</div>
          <div class="counter-box">
            <div class="counter"></div>
            <div class="counter"></div>
            <div class="counter"></div>
            <div class="counter"></div>
          </div>
        </div>

        
        <div class="match-row" id="row-3">
          <div class="cup">x</div>
          <div class="eq-sign">=</div>
          <div class="counter-box">
            <div class="counter"></div>
            <div class="counter"></div>
            <div class="counter"></div>
            <div class="counter"></div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="solution-badge">
      1 cup = 4 counters, so <span class="key-val">x = 4</span>
    </div>
  </div>

  <script>
    // Interactive focus on click/tap between rows
    const rows = document.querySelectorAll('.match-row');
    rows.forEach((row) => {
      row.addEventListener('click', () => {
        rows.forEach(r => {
          r.classList.remove('active');
          r.querySelector('.cup').classList.remove('highlighted');
        });
        row.classList.add('active');
        row.querySelector('.cup').classList.add('highlighted');
      });
    });
  </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: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }
    .scale-container {
      width: 100%;
      max-width: 520px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .counter {
      transition: opacity 0.4s ease, transform 0.4s ease;
      transform-origin: center;
    }
    .counter.removed {
      opacity: 0;
      transform: translateY(-16px) scale(0.6);
      pointer-events: none;
    }
    .counter.highlight-remove {
      opacity: 0.45;
      filter: grayscale(0.6);
    }
    .cup-content {
      transition: transform 0.3s ease;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn:hover {
      background: #e2e8f0;
    }
    .btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }
    .eq-display {
      font-size: 20px;
      font-weight: 700;
      color: #1e2945;
      margin-top: 4px;
      letter-spacing: 0.5px;
      min-height: 28px;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="scale-container">
    <svg viewBox="0 0 520 270" aria-label="Balance scale representing x + 3 = 7">
      
      <polygon points="260,140 230,225 290,225" fill="#475569" />
      <rect x="200" y="222" width="120" height="8" rx="3" fill="#334155" />
      
      
      <rect x="55" y="86" width="410" height="8" rx="4" fill="#475569" />
      
      
      <circle cx="260" cy="90" r="16" fill="#ffffff" stroke="#475569" stroke-width="3" />
      <text x="260" y="96" text-anchor="middle" font-size="20" font-weight="bold" fill="#1e2945">=</text>

      
      <line x1="80" y1="94" x2="45" y2="165" stroke="#94a3b8" stroke-width="2" />
      <line x1="80" y1="94" x2="175" y2="165" stroke="#94a3b8" stroke-width="2" />
      
      <path d="M 40,165 Q 110,182 180,165 Z" fill="#64748b" />

      
      <line x1="440" y1="94" x2="340" y2="165" stroke="#94a3b8" stroke-width="2" />
      <line x1="440" y1="94" x2="475" y2="165" stroke="#94a3b8" stroke-width="2" />
      
      <path d="M 335,165 Q 407,182 480,165 Z" fill="#64748b" />

      
      
      <g id="cup" class="cup-content">
        <polygon points="65,115 105,115 99,165 71,165" fill="#2563eb" />
        <ellipse cx="85" cy="115" rx="20" ry="4" fill="#3b82f6" />
        <text x="85" y="146" text-anchor="middle" font-size="18" font-weight="bold" fill="#ffffff" font-style="italic">x</text>
      </g>

      
      <g id="left-counters">
        
        <g class="counter left-removable" id="lc1">
          <circle cx="124" cy="155" r="9" fill="#f59e0b" stroke="#d97706" stroke-width="1.5" />
          <text x="124" y="159" text-anchor="middle" font-size="11" font-weight="bold" fill="#ffffff">1</text>
        </g>
        <g class="counter left-removable" id="lc2">
          <circle cx="145" cy="155" r="9" fill="#f59e0b" stroke="#d97706" stroke-width="1.5" />
          <text x="145" y="159" text-anchor="middle" font-size="11" font-weight="bold" fill="#ffffff">1</text>
        </g>
        <g class="counter left-removable" id="lc3">
          <circle cx="134.5" cy="138" r="9" fill="#f59e0b" stroke="#d97706" stroke-width="1.5" />
          <text x="134.5" y="142" text-anchor="middle" font-size="11" font-weight="bold" fill="#ffffff">1</text>
        </g>
      </g>

      
      <g id="right-counters">
        
        <g class="counter" id="rc1">
          <circle cx="365" cy="155" r="9" fill="#f59e0b" stroke="#d97706" stroke-width="1.5" />
          <text x="365" y="159" text-anchor="middle" font-size="11" font-weight="bold" fill="#ffffff">1</text>
        </g>
        <g class="counter" id="rc2">
          <circle cx="386" cy="155" r="9" fill="#f59e0b" stroke="#d97706" stroke-width="1.5" />
          <text x="386" y="159" text-anchor="middle" font-size="11" font-weight="bold" fill="#ffffff">1</text>
        </g>
        <g class="counter" id="rc3">
          <circle cx="407" cy="155" r="9" fill="#f59e0b" stroke="#d97706" stroke-width="1.5" />
          <text x="407" y="159" text-anchor="middle" font-size="11" font-weight="bold" fill="#ffffff">1</text>
        </g>
        <g class="counter" id="rc4">
          <circle cx="428" cy="155" r="9" fill="#f59e0b" stroke="#d97706" stroke-width="1.5" />
          <text x="428" y="159" text-anchor="middle" font-size="11" font-weight="bold" fill="#ffffff">1</text>
        </g>

        
        <g class="counter right-removable" id="rc5">
          <circle cx="375.5" cy="138" r="9" fill="#f59e0b" stroke="#d97706" stroke-width="1.5" />
          <text x="375.5" y="142" text-anchor="middle" font-size="11" font-weight="bold" fill="#ffffff">1</text>
        </g>
        <g class="counter right-removable" id="rc6">
          <circle cx="396.5" cy="138" r="9" fill="#f59e0b" stroke="#d97706" stroke-width="1.5" />
          <text x="396.5" y="142" text-anchor="middle" font-size="11" font-weight="bold" fill="#ffffff">1</text>
        </g>
        <g class="counter right-removable" id="rc7">
          <circle cx="417.5" cy="138" r="9" fill="#f59e0b" stroke="#d97706" stroke-width="1.5" />
          <text x="417.5" y="142" text-anchor="middle" font-size="11" font-weight="bold" fill="#ffffff">1</text>
        </g>
      </g>
    </svg>
  </div>

  <div class="eq-display" id="eqText">x + 3 = 7</div>

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

  <script>
    const steps = [
      { eq: "x + 3 = 7", leftClass: "", rightClass: "" },
      { eq: "x + 3 − 3 = 7 − 3", leftClass: "highlight-remove", rightClass: "highlight-remove" },
      { eq: "x = 4", leftClass: "removed", rightClass: "removed" }
    ];

    let currentStep = 0;
    let autoTimer = null;

    function applyState(idx) {
      currentStep = idx;
      document.getElementById('eqText').textContent = steps[idx].eq;
      
      const leftItems = document.querySelectorAll('.left-removable');
      const rightItems = document.querySelectorAll('.right-removable');

      leftItems.forEach(el => {
        el.className.baseVal = "counter left-removable " + steps[idx].leftClass;
      });

      rightItems.forEach(el => {
        el.className.baseVal = "counter right-removable " + steps[idx].rightClass;
      });

      for (let i = 0; i < 3; i++) {
        const btn = document.getElementById('btn' + i);
        if (i === idx) btn.classList.add('active');
        else btn.classList.remove('active');
      }
    }

    function setStep(idx) {
      clearInterval(autoTimer);
      applyState(idx);
      startAutoPlay();
    }

    function startAutoPlay() {
      clearInterval(autoTimer);
      autoTimer = setInterval(() => {
        currentStep = (currentStep + 1) % 3;
        applyState(currentStep);
      }, 3500);
    }

    applyState(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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px 8px;
    }

    .key-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 580px;
      margin-bottom: 14px;
    }

    .key-item {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
    }

    .key-item.active {
      border-color: #2563eb;
      background: #eff6ff;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12);
    }

    .icon-box {
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
    }

    .math-sym {
      font-size: 19px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
    }

    .math-label {
      font-size: 13px;
      font-weight: 500;
      color: #64748b;
      margin-top: 2px;
    }

    /* Equation Preview Mat */
    .mat-container {
      width: 100%;
      max-width: 580px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .mat-surface {
      width: 100%;
      height: 80px;
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      display: grid;
      grid-template-columns: 1fr 2px 1fr;
      align-items: center;
      position: relative;
    }

    .mat-side {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 0 8px;
    }

    .mat-divider {
      height: 70px;
      border-left: 2.5px dashed #64748b;
    }

    .equation-labels {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      text-align: center;
      font-size: 16px;
      font-weight: 800;
      color: #1e2945;
      margin-top: 8px;
    }

    .eq-part {
      padding: 0 4px;
    }

    /* Highlight pulse */
    .highlight-cup {
      filter: drop-shadow(0 0 6px rgba(37, 99, 235, 0.6));
    }

    .highlight-counter {
      filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.8));
    }

    .highlight-equal {
      border-color: #2563eb !important;
      filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.8));
    }

    @media (max-width: 400px) {
      .math-sym { font-size: 17px; }
      .math-label { font-size: 12px; }
      .icon-box { height: 56px; }
    }
  </style>
</head>
<body>

  <div class="key-grid">
    
    <div class="key-item active" id="key-cup" onclick="selectItem('cup')">
      <div class="icon-box">
        <svg width="44" height="54" viewBox="0 0 44 54">
          <ellipse cx="22" cy="8" rx="17" ry="5" fill="#3b82f6" stroke="#1d4ed8" stroke-width="2"/>
          <polygon points="5,8 39,8 33,48 11,48" fill="#2563eb"/>
          <ellipse cx="22" cy="48" rx="11" ry="3.5" fill="#1d4ed8"/>
          <text x="22" y="32" fill="#ffffff" font-size="16" font-weight="bold" text-anchor="middle">x</text>
        </svg>
      </div>
      <div class="math-sym">= x</div>
      <div class="math-label">(unknown)</div>
    </div>

    
    <div class="key-item" id="key-counter" onclick="selectItem('counter')">
      <div class="icon-box">
        <svg width="46" height="46" viewBox="0 0 46 46">
          <circle cx="23" cy="24" r="18" fill="#ca8a04"/>
          <circle cx="23" cy="22" r="18" fill="#facc15" stroke="#eab308" stroke-width="2"/>
          <text x="23" y="27" fill="#854d0e" font-size="16" font-weight="900" text-anchor="middle">1</text>
        </svg>
      </div>
      <div class="math-sym">= 1</div>
      <div class="math-label">(counter)</div>
    </div>

    
    <div class="key-item" id="key-mat" onclick="selectItem('mat')">
      <div class="icon-box">
        <svg width="56" height="52" viewBox="0 0 56 52">
          <rect x="3" y="4" width="50" height="44" rx="6" fill="#e2e8f0" stroke="#94a3b8" stroke-width="1.5"/>
          <line x1="28" y1="4" x2="28" y2="48" stroke="#475569" stroke-width="2.5" stroke-dasharray="4,4"/>
        </svg>
      </div>
      <div class="math-sym">=</div>
      <div class="math-label">(equals sign)</div>
    </div>
  </div>

  
  <div class="mat-container">
    <div class="mat-surface">
      
      <div class="mat-side">
        <svg id="prev-cup" width="30" height="38" viewBox="0 0 44 54" class="highlight-cup">
          <ellipse cx="22" cy="8" rx="17" ry="5" fill="#3b82f6" stroke="#1d4ed8" stroke-width="2"/>
          <polygon points="5,8 39,8 33,48 11,48" fill="#2563eb"/>
          <text x="22" y="32" fill="#ffffff" font-size="16" font-weight="bold" text-anchor="middle">x</text>
        </svg>

        <svg class="prev-coin" width="22" height="22" viewBox="0 0 46 46">
          <circle cx="23" cy="23" r="19" fill="#facc15" stroke="#ca8a04" stroke-width="3"/>
          <text x="23" y="29" fill="#854d0e" font-size="18" font-weight="bold" text-anchor="middle">1</text>
        </svg>
        <svg class="prev-coin" width="22" height="22" viewBox="0 0 46 46">
          <circle cx="23" cy="23" r="19" fill="#facc15" stroke="#ca8a04" stroke-width="3"/>
          <text x="23" y="29" fill="#854d0e" font-size="18" font-weight="bold" text-anchor="middle">1</text>
        </svg>
      </div>

      
      <div id="prev-line" class="mat-divider"></div>

      
      <div class="mat-side">
        <svg class="prev-coin" width="22" height="22" viewBox="0 0 46 46">
          <circle cx="23" cy="23" r="19" fill="#facc15" stroke="#ca8a04" stroke-width="3"/>
          <text x="23" y="29" fill="#854d0e" font-size="18" font-weight="bold" text-anchor="middle">1</text>
        </svg>
        <svg class="prev-coin" width="22" height="22" viewBox="0 0 46 46">
          <circle cx="23" cy="23" r="19" fill="#facc15" stroke="#ca8a04" stroke-width="3"/>
          <text x="23" y="29" fill="#854d0e" font-size="18" font-weight="bold" text-anchor="middle">1</text>
        </svg>
        <svg class="prev-coin" width="22" height="22" viewBox="0 0 46 46">
          <circle cx="23" cy="23" r="19" fill="#facc15" stroke="#ca8a04" stroke-width="3"/>
          <text x="23" y="29" fill="#854d0e" font-size="18" font-weight="bold" text-anchor="middle">1</text>
        </svg>
      </div>
    </div>

    <div class="equation-labels">
      <div class="eq-part" id="lbl-left">x + 2</div>
      <div class="eq-part" id="lbl-eq">=</div>
      <div class="eq-part" id="lbl-right">3</div>
    </div>
  </div>

  <script>
    function selectItem(type) {
      document.getElementById('key-cup').classList.toggle('active', type === 'cup');
      document.getElementById('key-counter').classList.toggle('active', type === 'counter');
      document.getElementById('key-mat').classList.toggle('active', type === 'mat');

      const cup = document.getElementById('prev-cup');
      const coins = document.querySelectorAll('.prev-coin');
      const line = document.getElementById('prev-line');

      cup.classList.toggle('highlight-cup', type === 'cup');
      coins.forEach(c => c.classList.toggle('highlight-counter', type === 'counter'));
      line.classList.toggle('highlight-equal', type === 'mat');
    }
  </script>
</body>
</html>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Solving One-Step Equations in Geometric Contexts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!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>Solving One-Step Equations: Puppy Pen</title>
  <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: space-between;
      min-height: 100%;
      padding: 10px;
      user-select: none;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 340px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    /* Top badge */
    .area-badge {
      font-size: 15px;
      font-weight: 700;
      background: #e0f2fe;
      color: #0369a1;
      padding: 4px 12px;
      border-radius: 20px;
      border: 1px solid #bae6fd;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    /* Pen visual structure */
    .geometry-container {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding-top: 22px;
      padding-left: 48px;
      margin: 2px 0;
    }

    .top-dimension {
      position: absolute;
      top: 0;
      left: 48px;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
    }
    .top-dimension .dim-line {
      width: 100%;
      height: 2px;
      background: #94a3b8;
      position: relative;
      margin-top: 2px;
    }
    .top-dimension .dim-line::before,
    .top-dimension .dim-line::after {
      content: '';
      position: absolute;
      top: -3px;
      width: 2px;
      height: 8px;
      background: #94a3b8;
    }
    .top-dimension .dim-line::before { left: 0; }
    .top-dimension .dim-line::after { right: 0; }

    .left-dimension {
      position: absolute;
      left: 0;
      top: 22px;
      bottom: 0;
      width: 44px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 4px;
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
      transition: color 0.3s ease;
    }
    .left-dimension .dim-line-v {
      width: 2px;
      height: 100%;
      background: #94a3b8;
      position: relative;
    }
    .left-dimension .dim-line-v::before,
    .left-dimension .dim-line-v::after {
      content: '';
      position: absolute;
      left: -3px;
      width: 8px;
      height: 2px;
      background: #94a3b8;
    }
    .left-dimension .dim-line-v::before { top: 0; }
    .left-dimension .dim-line-v::after { bottom: 0; }

    .grid-pen {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: repeat(6, 1fr);
      width: 216px;
      height: 156px;
      background: #e0f2fe;
      border: 2px solid #0284c7;
      border-radius: 6px;
      overflow: hidden;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.15);
    }
    .grid-cell {
      border: 0.5px solid rgba(2, 132, 199, 0.25);
      transition: background-color 0.3s ease;
    }
    .col-highlight .grid-cell:nth-child(8n+1) {
      background-color: #bae6fd;
    }

    /* Equation Steps container */
    .equation-card {
      width: 100%;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-height: 86px;
      justify-content: center;
    }

    .step-display {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      width: 100%;
      text-align: center;
    }
    .step-display.active {
      display: flex;
    }

    .eq-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .eq-math {
      font-size: 19px;
      font-weight: 700;
      color: #1e2945;
      font-family: 'Cambria Math', 'Times New Roman', serif, system-ui;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    .highlight-blue {
      color: #0284c7;
      background: #e0f2fe;
      padding: 1px 6px;
      border-radius: 6px;
    }

    .highlight-green {
      color: #15803d;
      background: #dcfce7;
      padding: 1px 6px;
      border-radius: 6px;
    }

    .division-note {
      font-size: 12px;
      color: #0284c7;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    /* Controls bar */
    .controls-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .btn-step {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s ease;
    }
    .btn-step:hover {
      background: #e2e8f0;
    }
    .btn-step.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    .btn-play {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
    .btn-play:hover {
      background: #e2e8f0;
    }
  </style>
</head>
<body>

  <div class="diagram-wrap">
    
    <div class="area-badge">
      <span>🐶</span>
      <span>Area = 48 sq ft</span>
    </div>

    
    <div class="geometry-container">
      
      <div class="top-dimension">
        <span>8 ft</span>
        <div class="dim-line"></div>
      </div>

      
      <div class="left-dimension" id="leftDim">
        <span id="leftLabel">w = ?</span>
        <div class="dim-line-v"></div>
      </div>

      
      <div class="grid-pen" id="gridPen">
        
        <script>
          for (let i = 0; i < 48; i++) {
            document.write('<div class="grid-cell"></div>');
          }
        </script>
      </div>
    </div>

    
    <div class="equation-card">
      
      <div class="step-display active" id="step1">
        <div class="eq-label">Step 1: Set up equation</div>
        <div class="eq-math">
          <span>8 · w = 48</span>
        </div>
      </div>

      
      <div class="step-display" id="step2">
        <div class="eq-label">Step 2: Divide both sides by 8</div>
        <div class="eq-math">
          <span>(8 · w) <span class="highlight-blue">÷ 8</span> = 48 <span class="highlight-blue">÷ 8</span></span>
        </div>
      </div>

      
      <div class="step-display" id="step3">
        <div class="eq-label">Step 3: Solved width</div>
        <div class="eq-math">
          <span class="highlight-green">w = 6 ft</span>
        </div>
      </div>
    </div>

    
    <div class="controls-row">
      <button class="btn-step active" onclick="setStep(0)">Step 1</button>
      <button class="btn-step" onclick="setStep(1)">Step 2</button>
      <button class="btn-step" onclick="setStep(2)">Step 3</button>
      <button class="btn-play" id="playBtn" onclick="togglePlay()" title="Play / Pause">⏸</button>
    </div>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    let currentStep = 0;
    let isPlaying = true;
    let autoTimer = null;

    const leftLabel = document.getElementById('leftLabel');
    const leftDim = document.getElementById('leftDim');
    const gridPen = document.getElementById('gridPen');
    const stepEls = [
      document.getElementById('step1'),
      document.getElementById('step2'),
      document.getElementById('step3')
    ];
    const buttons = document.querySelectorAll('.btn-step');
    const playBtn = document.getElementById('playBtn');

    function updateView(step) {
      currentStep = step;

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

      // Update buttons
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === step);
      });

      // Visual state updates
      if (step === 0) {
        leftLabel.textContent = 'w = ?';
        leftLabel.style.color = '#1e2945';
        gridPen.classList.remove('col-highlight');
      } else if (step === 1) {
        leftLabel.textContent = 'w = ?';
        leftLabel.style.color = '#0284c7';
        gridPen.classList.add('col-highlight');
      } else {
        leftLabel.textContent = 'w = 6 ft';
        leftLabel.style.color = '#15803d';
        gridPen.classList.add('col-highlight');
      }
    }

    function setStep(step) {
      updateView(step);
      resetAutoTimer();
    }

    function nextStep() {
      const next = (currentStep + 1) % 3;
      updateView(next);
    }

    function startTimer() {
      stopTimer();
      autoTimer = setInterval(nextStep, 3500);
    }

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

    function resetAutoTimer() {
      if (isPlaying) {
        startTimer();
      }
    }

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

    // Initialize auto play
    startTimer();
  </script>
</body>
</html>

111.26(b)(10)(A)

Aligned learning resources

Related diagrams