<!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>Zero Placeholder in Long Division</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      width: 100%;
      background: #ffffff;
      color: #1e2945;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Tab Controls */
    .controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 580px;
    }

    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

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

    .step-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    .step-btn.alert-btn.active {
      background: #d97706;
      border-color: #d97706;
      color: #ffffff;
    }

    /* Main Stage Container - Flat layout without outer card frames */
    .stage {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* Division Layout - Clean transparent container */
    .division-view {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 24px;
      padding: 8px 4px;
      min-height: 220px;
      width: 100%;
    }

    .math-grid {
      font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;
      font-size: 17px;
      line-height: 1.45;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      flex-shrink: 0;
    }

    .quotient-row {
      display: flex;
      margin-left: 46px;
      font-weight: 700;
      min-height: 28px;
      align-items: center;
    }

    .q-digit {
      width: 17px;
      text-align: center;
      display: inline-block;
      border-radius: 4px;
      transition: all 0.2s ease;
    }

    .bracket-row {
      display: flex;
      align-items: center;
      border-top: 2px solid #1e2945;
      position: relative;
    }

    .divisor {
      margin-right: 8px;
      font-weight: 700;
      color: #475569;
      letter-spacing: 0;
    }

    .bracket-line {
      position: absolute;
      left: 35px;
      top: -2px;
      bottom: -4px;
      width: 2px;
      background: #1e2945;
      border-radius: 2px 0 0 2px;
    }

    .dividend {
      margin-left: 11px;
      font-weight: 700;
      letter-spacing: 3px;
    }

    .work-rows {
      margin-left: 46px;
      display: flex;
      flex-direction: column;
      white-space: pre;
      color: #334155;
      font-weight: 600;
    }

    /* Highlights */
    .hl-amber {
      background: #fef3c7;
      color: #b45309;
      box-shadow: 0 0 0 2px #f59e0b;
      font-weight: 800;
    }

    .hl-blue {
      background: #e0f2fe;
      color: #0369a1;
      box-shadow: 0 0 0 2px #0ea5e9;
      font-weight: 800;
    }

    .hl-green {
      background: #dcfce7;
      color: #15803d;
      box-shadow: 0 0 0 2px #22c55e;
      font-weight: 800;
    }

    /* Explanation Panel */
    .callout-box {
      flex: 1;
      max-width: 250px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 8px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      gap: 4px;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
    }

    .badge-amber {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .badge-blue {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }

    .badge-green {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }

    .desc-text {
      font-size: 14px;
      color: #334155;
      font-weight: 500;
      line-height: 1.4;
    }

    /* Comparison Cards (Step 4) */
    .compare-container {
      display: none;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      padding-top: 8px;
    }

    .compare-card {
      padding: 14px 12px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
    }

    .compare-right {
      background: #f0fdf4;
      border: 1.5px solid #86efac;
    }

    .compare-wrong {
      background: #fef2f2;
      border: 1.5px solid #fca5a5;
    }

    .card-title {
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .compare-right .card-title { color: #166534; }
    .compare-wrong .card-title { color: #991b1b; }

    .card-math {
      font-family: ui-monospace, monospace;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 1px;
    }

    .compare-right .card-math { color: #15803d; }
    .compare-wrong .card-math { color: #b91c1c; }

    .card-check {
      font-size: 12.5px;
      color: #475569;
      font-weight: 600;
      line-height: 1.3;
    }

    /* Responsive adjustments */
    @media (max-width: 480px) {
      .division-view {
        flex-direction: column;
        align-items: center;
        gap: 14px;
      }
      .callout-box {
        max-width: 100%;
        align-items: center;
        text-align: center;
      }
      .badge {
        align-self: center;
      }
      .compare-container {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="step-btn active" onclick="setStep(0)">1. 64 ÷ 31</button>
    <button class="step-btn alert-btn" onclick="setStep(1)">2. Zero Place ⚠️</button>
    <button class="step-btn" onclick="setStep(2)">3. Next Digits</button>
    <button class="step-btn" onclick="setStep(3)">4. Right vs Wrong</button>
  </div>

  <div class="stage">
    
    <div id="divisionView" class="division-view">
      <div class="math-grid">
        
        <div class="quotient-row">
          <span id="q0" class="q-digit hl-blue">2</span>
          <span id="q1" class="q-digit">&nbsp;</span>
          <span id="q2" class="q-digit">&nbsp;</span>
          <span id="q3" class="q-digit">&nbsp;</span>
        </div>

        
        <div class="bracket-row">
          <span class="divisor">31</span>
          <div class="bracket-line"></div>
          <span class="dividend" id="dividendText">64192</span>
        </div>

        
        <div class="work-rows" id="workRows">-62  
───  
  2  </div>
      </div>

      
      <div class="callout-box" id="calloutBox">
        <span id="calloutBadge" class="badge badge-blue">Step 1: Divide 64</span>
        <div id="calloutText" class="desc-text">
          31 fits into 64 <b>2 times</b> (2 × 31 = 62).<br>
          Remainder = <b>2</b>.
        </div>
      </div>
    </div>

    
    <div id="compareView" class="compare-container">
      <div class="compare-card compare-right">
        <div class="card-title">✓ Correct (With '0')</div>
        <div class="card-math">2070 R22</div>
        <div class="card-check">2,070 × 31 + 22 = 64,192<br><small style="color: #166534; font-weight:700;">Maintains accurate place values</small></div>
      </div>

      <div class="compare-card compare-wrong">
        <div class="card-title">✕ Skipped '0'</div>
        <div class="card-math">270 R24</div>
        <div class="card-check">270 × 31 ≈ 8,370<br><small style="color: #991b1b; font-weight:700;">Place value error (Off by 10×!)</small></div>
      </div>
    </div>
  </div>

  <script>
    const steps = [
      {
        quotient: ['2', '\u00A0', '\u00A0', '\u00A0'],
        qHighlight: 0,
        hlClass: 'hl-blue',
        work: '-62  \n───  \n  2  ',
        badge: 'Step 1: Divide 64',
        badgeClass: 'badge-blue',
        text: '31 fits into 64 <b>2 times</b> (62).<br>Remainder = <b>2</b>.'
      },
      {
        quotient: ['2', '0', '\u00A0', '\u00A0'],
        qHighlight: 1,
        hlClass: 'hl-amber',
        work: '-62  \n───  \n  21  ← 31 into 21 = 0!\n  -0  \n───  \n  21  ',
        badge: '⚠️ Zero Placeholder',
        badgeClass: 'badge-amber',
        text: 'Bring down 1 → <b>21</b>.<br>31 fits into 21 <b>ZERO</b> times.<br>Write <b style="color:#b45309;">0</b> in hundreds place!'
      },
      {
        quotient: ['2', '0', '7', '0'],
        qHighlight: 2,
        hlClass: 'hl-green',
        work: '-62  \n───  \n  219 ← Bring down 9\n -217 (7 × 31)\n ────\n   22 ← Remainder 22',
        badge: 'Step 3: Complete',
        badgeClass: 'badge-green',
        text: 'Bring down 9 → <b>219</b> (7 × 31 = 217).<br>Final result = <b>2,070 R 22</b>.'
      }
    ];

    function setStep(idx) {
      const btns = document.querySelectorAll('.step-btn');
      btns.forEach((b, i) => {
        b.classList.toggle('active', i === idx);
      });

      const divView = document.getElementById('divisionView');
      const compView = document.getElementById('compareView');

      if (idx === 3) {
        divView.style.display = 'none';
        compView.style.display = 'grid';
      } else {
        divView.style.display = 'flex';
        compView.style.display = 'none';

        const s = steps[idx];
        
        ['q0', 'q1', 'q2', 'q3'].forEach((id, i) => {
          const el = document.getElementById(id);
          el.textContent = s.quotient[i];
          el.className = 'q-digit';
          if (i === s.qHighlight) {
            el.classList.add(s.hlClass);
          }
        });

        document.getElementById('workRows').textContent = s.work;

        const badge = document.getElementById('calloutBadge');
        badge.textContent = s.badge;
        badge.className = 'badge ' + s.badgeClass;

        document.getElementById('calloutText').innerHTML = s.text;
      }
    }
  </script>
</body>
</html>

Fluency with Multi-Digit Long Division by Two-Digit Divisors

<!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 {
      width: 100%;
      height: 100%;
      background: transparent;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      user-select: none;
    }

    .anatomy-stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 340px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      grid-template-rows: 70px 150px 80px;
      align-items: center;
      justify-items: center;
    }

    /* Core Division Bracket Area */
    .division-core {
      grid-column: 2;
      grid-row: 2;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 10px;
    }

    .quotient-row {
      font-size: 26px;
      font-weight: 700;
      letter-spacing: 4px;
      color: #16a34a;
      height: 34px;
      line-height: 34px;
      padding-left: 36px;
    }

    .bracket-row {
      display: flex;
      align-items: stretch;
      font-size: 26px;
      font-weight: 700;
      height: 48px;
    }

    .divisor-num {
      color: #7c3aed;
      display: flex;
      align-items: center;
      padding-right: 10px;
      letter-spacing: 2px;
    }

    .bracket-symbol {
      position: relative;
      width: 16px;
      border-top: 3.5px solid #475569;
      border-left: 3.5px solid #475569;
      border-top-left-radius: 6px;
      margin-right: -2px;
    }

    .dividend-num {
      color: #2563eb;
      border-top: 3.5px solid #475569;
      display: flex;
      align-items: center;
      padding: 0 14px 0 6px;
      letter-spacing: 3px;
    }

    .calc-steps {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      width: 100%;
      padding-right: 12px;
      font-size: 17px;
      font-weight: 600;
      color: #94a3b8;
      line-height: 1.25;
      margin-top: 2px;
    }

    .remainder-row {
      color: #ea580c;
      font-weight: 800;
      font-size: 22px;
      border-top: 2px solid #cbd5e1;
      padding-top: 2px;
      margin-top: 2px;
      width: 76px;
      text-align: right;
      padding-right: 4px;
    }

    /* Color-coded Pill Badges */
    .pill {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.25;
      text-align: center;
      transition: box-shadow 0.2s ease, transform 0.2s ease;
      cursor: default;
      border-width: 1.5px;
      border-style: solid;
      white-space: nowrap;
      z-index: 2;
    }

    .pill .sub {
      font-size: 11px;
      font-weight: 500;
      opacity: 0.85;
      margin-top: 2px;
    }

    /* Purple: Divisor */
    .pill-divisor {
      grid-column: 1;
      grid-row: 2;
      justify-self: end;
      margin-right: 8px;
      background: #f5f3ff;
      border-color: #ddd6fe;
      color: #6d28d9;
    }

    /* Green: Quotient */
    .pill-quotient {
      grid-column: 2;
      grid-row: 1;
      align-self: end;
      margin-bottom: 8px;
      background: #f0fdf4;
      border-color: #bbf7d0;
      color: #15803d;
    }

    /* Blue: Dividend */
    .pill-dividend {
      grid-column: 3;
      grid-row: 2;
      justify-self: start;
      margin-left: 8px;
      background: #eff6ff;
      border-color: #bfdbfe;
      color: #1d4ed8;
    }

    /* Orange: Remainder */
    .pill-remainder {
      grid-column: 2;
      grid-row: 3;
      align-self: start;
      margin-top: 8px;
      background: #fff7ed;
      border-color: #fed7aa;
      color: #c2410c;
    }

    /* Connecting Pointer Lines Layer */
    .pointer-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .pointer-line {
      stroke-width: 1.5;
      stroke-dasharray: 4 3;
      fill: none;
    }

    @media (max-width: 400px) {
      .pill {
        padding: 6px 9px;
        font-size: 12px;
      }
      .pill .sub {
        font-size: 10px;
      }
      .quotient-row, .bracket-row {
        font-size: 22px;
      }
      .calc-steps {
        font-size: 14px;
      }
      .remainder-row {
        font-size: 19px;
      }
    }
  </style>
</head>
<body>

  <div class="anatomy-stage">
    
    <svg class="pointer-layer" viewBox="0 0 480 340" preserveAspectRatio="none">
      
      <path class="pointer-line" stroke="#16a34a" d="M240, 68 L240, 85" marker-end="url(#arrow-green)" />
      
      <path class="pointer-line" stroke="#7c3aed" d="M165, 138 L185, 138" />
      
      <path class="pointer-line" stroke="#2563eb" d="M315, 138 L292, 138" />
      
      <path class="pointer-line" stroke="#ea580c" d="M240, 246 L240, 264" />
    </svg>

    
    <div class="pill pill-quotient">
      Quotient
      <span class="sub">Equal groups</span>
    </div>

    
    <div class="pill pill-divisor">
      Divisor
      <span class="sub">Group size</span>
    </div>

    
    <div class="division-core">
      <div class="quotient-row">204</div>
      <div class="bracket-row">
        <div class="divisor-num">24</div>
        <div class="bracket-symbol"></div>
        <div class="dividend-num">4896</div>
      </div>
      <div class="calc-steps">
        <div>−48↓↓</div>
        <div>096</div>
        <div>−96</div>
      </div>
      <div class="remainder-row">0</div>
    </div>

    
    <div class="pill pill-dividend">
      Dividend
      <span class="sub">Total to split</span>
    </div>

    
    <div class="pill pill-remainder">
      Remainder
      <span class="sub">Left over</span>
    </div>
  </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Long Division: 7485 ÷ 32</title>
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8fafc;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      gap: 10px;
    }

    /* Operation legend */
    .legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
    }
    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: 6px;
    }
    .c-div { background: #fef08a; color: #854d0e; }
    .c-mul { background: #bbf7d0; color: #166534; }
    .c-sub { background: #fecdd3; color: #9f1239; }
    .c-brg { background: #bae6fd; color: #075985; }

    /* Division Board */
    .board-container {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px 20px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 19px;
      font-weight: 700;
      line-height: 1.35;
      width: 100%;
      max-width: 380px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      user-select: none;
    }

    .grid-row {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      text-align: center;
      align-items: center;
      min-height: 27px;
    }

    .cell {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      transition: background-color 0.25s, color 0.25s, opacity 0.25s;
    }

    .line-top {
      border-top: 2px solid #1e2945;
    }
    .line-left {
      border-left: 2px solid #1e2945;
      border-top-left-radius: 4px;
    }
    .sub-bar {
      grid-column: span 3;
      border-bottom: 2px solid #94a3b8;
      height: 2px;
      margin: 2px 0 3px 0;
    }

    .hidden {
      opacity: 0;
      visibility: hidden;
    }

    /* Active Highlight States */
    .hl-div { background: #fef08a; color: #854d0e; box-shadow: 0 0 0 2px #eab308; }
    .hl-mul { background: #bbf7d0; color: #166534; box-shadow: 0 0 0 2px #22c55e; }
    .hl-sub { background: #fecdd3; color: #9f1239; box-shadow: 0 0 0 2px #f43f5e; }
    .hl-brg { background: #bae6fd; color: #075985; box-shadow: 0 0 0 2px #0284c7; }

    /* Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }
    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, border-color 0.15s;
    }
    .btn:active { background: #f1f5f9; }
    .step-btn {
      padding: 6px 10px;
      font-size: 13px;
      border-radius: 6px;
    }
    .step-btn.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
    .step-dots {
      display: flex;
      gap: 6px;
    }

    .formula-tag {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      min-height: 20px;
      text-align: center;
    }
  </style>
</head>
<body>

  
  <div class="legend">
    <span class="legend-item c-div">÷ Divide</span>
    <span class="legend-item c-mul">× Multiply</span>
    <span class="legend-item c-sub">− Subtract</span>
    <span class="legend-item c-brg">↓ Bring Down</span>
  </div>

  
  <div class="board-container">
    
    <div class="grid-row">
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell" id="q1">2</span>
      <span class="cell" id="q2">3</span>
      <span class="cell" id="q3">3</span>
      <span class="cell" id="r-lbl" style="font-size:14px; font-weight:600; color:#64748b;">R</span>
      <span class="cell" id="r-val" style="font-size:16px;">29</span>
    </div>

    
    <div class="grid-row">
      <span class="cell" id="d1">3</span>
      <span class="cell" id="d2">2</span>
      <span class="cell line-left line-top">)</span>
      <span class="cell line-top" id="dd1">7</span>
      <span class="cell line-top" id="dd2">4</span>
      <span class="cell line-top" id="dd3">8</span>
      <span class="cell line-top" id="dd4">5</span>
      <span class="cell"></span>
      <span class="cell"></span>
    </div>

    
    <div class="grid-row" id="row-c1-sub">
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell" style="color:#94a3b8;">−</span>
      <span class="cell" id="c1-m1">6</span>
      <span class="cell" id="c1-m2">4</span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
    </div>
    <div class="grid-row" id="row-c1-line">
      <span class="cell"></span>
      <span class="cell"></span>
      <div class="sub-bar"></div>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
    </div>
    <div class="grid-row" id="row-c1-diff">
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell" id="c1-d1">1</span>
      <span class="cell" id="c1-d2">0</span>
      <span class="cell" id="c1-b">8</span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
    </div>

    
    <div class="grid-row" id="row-c2-sub">
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell" style="color:#94a3b8;">−</span>
      <span class="cell" id="c2-m1">9</span>
      <span class="cell" id="c2-m2">6</span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
    </div>
    <div class="grid-row" id="row-c2-line">
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <div class="sub-bar"></div>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
    </div>
    <div class="grid-row" id="row-c2-diff">
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell" id="c2-d1">1</span>
      <span class="cell" id="c2-d2">2</span>
      <span class="cell" id="c2-b">5</span>
      <span class="cell"></span>
      <span class="cell"></span>
    </div>

    
    <div class="grid-row" id="row-c3-sub">
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell" style="color:#94a3b8;">−</span>
      <span class="cell" id="c3-m1">9</span>
      <span class="cell" id="c3-m2">6</span>
      <span class="cell"></span>
      <span class="cell"></span>
    </div>
    <div class="grid-row" id="row-c3-line">
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <div class="sub-bar"></div>
      <span class="cell"></span>
      <span class="cell"></span>
    </div>
    <div class="grid-row" id="row-c3-diff">
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell"></span>
      <span class="cell" id="c3-d1">2</span>
      <span class="cell" id="c3-d2">9</span>
      <span class="cell"></span>
      <span class="cell"></span>
    </div>
  </div>

  
  <div class="formula-tag" id="formulaTag">32 × 2 = 64 &nbsp;|&nbsp; 74 − 64 = 10</div>

  
  <div class="controls">
    <button class="btn" id="prevBtn" aria-label="Previous">←</button>
    <div class="step-dots">
      <button class="btn step-btn active" id="btn-0">Step 1</button>
      <button class="btn step-btn" id="btn-1">Step 2</button>
      <button class="btn step-btn" id="btn-2">Step 3</button>
    </div>
    <button class="btn" id="nextBtn" aria-label="Next">→</button>
    <button class="btn" id="playBtn" style="padding:6px 10px;">⏸</button>
  </div>

  <script>
    const el = (id) => document.getElementById(id);
    let curStep = 0;
    let timer = null;
    let isPlaying = true;

    const formulas = [
      "74 ÷ 32 = 2 &nbsp;→&nbsp; 74 − 64 = 10 ↓ 8",
      "108 ÷ 32 = 3 &nbsp;→&nbsp; 108 − 96 = 12 ↓ 5",
      "125 ÷ 32 = 3 R 29 &nbsp;→&nbsp; Quotient: 233 R 29"
    ];

    function setClass(elem, cls) {
      elem.className = 'cell ' + cls;
    }

    function render(step) {
      curStep = step;

      // Update buttons
      [0, 1, 2].forEach(i => {
        el('btn-' + i).classList.toggle('active', i === step);
      });

      // Update formula
      el('formulaTag').innerHTML = formulas[step];

      // Reset all highlights and visibilities
      // Step 1 elements
      el('q1').className = 'cell ' + (step === 0 ? 'hl-div' : '');
      el('dd1').className = 'cell line-top ' + (step === 0 ? 'hl-div' : '');
      el('dd2').className = 'cell line-top ' + (step === 0 ? 'hl-div' : '');
      el('c1-m1').className = 'cell ' + (step === 0 ? 'hl-mul' : '');
      el('c1-m2').className = 'cell ' + (step === 0 ? 'hl-mul' : '');
      el('c1-d1').className = 'cell ' + (step === 0 ? 'hl-sub' : '');
      el('c1-d2').className = 'cell ' + (step === 0 ? 'hl-sub' : '');
      el('c1-b').className = 'cell ' + (step === 0 ? 'hl-brg' : (step === 1 ? 'hl-div' : ''));

      // Step 2 elements
      const showStep2 = step >= 1;
      el('q2').className = 'cell ' + (!showStep2 ? 'hidden' : (step === 1 ? 'hl-div' : ''));
      el('row-c2-sub').className = 'grid-row ' + (!showStep2 ? 'hidden' : '');
      el('row-c2-line').className = 'grid-row ' + (!showStep2 ? 'hidden' : '');
      el('row-c2-diff').className = 'grid-row ' + (!showStep2 ? 'hidden' : '');

      if (showStep2) {
        el('c1-d1').className = 'cell ' + (step === 1 ? 'hl-div' : '');
        el('c1-d2').className = 'cell ' + (step === 1 ? 'hl-div' : '');
        el('c2-m1').className = 'cell ' + (step === 1 ? 'hl-mul' : '');
        el('c2-m2').className = 'cell ' + (step === 1 ? 'hl-mul' : '');
        el('c2-d1').className = 'cell ' + (step === 1 ? 'hl-sub' : '');
        el('c2-d2').className = 'cell ' + (step === 1 ? 'hl-sub' : '');
        el('c2-b').className = 'cell ' + (step === 1 ? 'hl-brg' : (step === 2 ? 'hl-div' : ''));
      }

      // Step 3 elements
      const showStep3 = step >= 2;
      el('q3').className = 'cell ' + (!showStep3 ? 'hidden' : (step === 2 ? 'hl-div' : ''));
      el('r-lbl').className = 'cell ' + (!showStep3 ? 'hidden' : '');
      el('r-val').className = 'cell ' + (!showStep3 ? 'hidden' : 'hl-sub');
      el('row-c3-sub').className = 'grid-row ' + (!showStep3 ? 'hidden' : '');
      el('row-c3-line').className = 'grid-row ' + (!showStep3 ? 'hidden' : '');
      el('row-c3-diff').className = 'grid-row ' + (!showStep3 ? 'hidden' : '');

      if (showStep3) {
        el('c2-d1').className = 'cell ' + (step === 2 ? 'hl-div' : '');
        el('c2-d2').className = 'cell ' + (step === 2 ? 'hl-div' : '');
        el('c3-m1').className = 'cell ' + (step === 2 ? 'hl-mul' : '');
        el('c3-m2').className = 'cell ' + (step === 2 ? 'hl-mul' : '');
        el('c3-d1').className = 'cell ' + (step === 2 ? 'hl-sub' : '');
        el('c3-d2').className = 'cell ' + (step === 2 ? 'hl-sub' : '');
      }

      // Divisor highlight
      el('d1').className = 'cell ' + (step !== -1 ? 'c-div' : '');
      el('d2').className = 'cell ' + (step !== -1 ? 'c-div' : '');
    }

    function next() {
      render((curStep + 1) % 3);
    }
    function prev() {
      render((curStep + 2) % 3);
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(next, 3800);
      isPlaying = true;
      el('playBtn').textContent = '⏸';
    }

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

    function togglePlay() {
      if (isPlaying) stopTimer();
      else { next(); startTimer(); }
    }

    // Attach click events
    [0, 1, 2].forEach(i => {
      el('btn-' + i).onclick = () => { render(i); stopTimer(); };
    });
    el('prevBtn').onclick = () => { prev(); stopTimer(); };
    el('nextBtn').onclick = () => { next(); stopTimer(); };
    el('playBtn').onclick = togglePlay;

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

探究三角形三边关系：两边之和大于第三边

快速判断三条线段能否围成三角形

已知两边确定第三边的取值范围

等腰三角形边长的分类讨论问题

动手操作验证三角形内角和是180°

已知两角求三角形第三个角的度数

直角三角形两个锐角互余的应用

等腰与等边三角形的内角计算

探索四边形与多边形的内角和公式

math

三角形的边角关系与性质探究

Comparing Integers Using Number Lines

Comparing Rational Numbers Using Number Lines

Ordering Integers and Rational Numbers from Least to Greatest

Ordering Rational Numbers from Mathematical Contexts

Ordering Rational Numbers from Real-World Contexts

Understanding Fraction Notation as Division

Converting Between Division Expressions and Fraction Notation

Distance Between Two Rational Numbers on a Number Line

Comparing, Ordering, and Working with Rational Numbers

Cálculo mental com adição de naturais

Cálculo mental com subtração de naturais

Cálculo mental com multiplicação de naturais

Cálculo mental com divisão de naturais

Estratégias pessoais para resolver problemas

Estimando resultados de operações com naturais

Usando calculadora para resolver problemas

Estratégias de cálculo mental, estimativa e ferramentas com números naturais

Adición de enteros con el mismo signo

Adición de enteros con signos diferentes

Propiedades de la adición de enteros

Sustracción de enteros como suma del opuesto

Práctica fluida de sumas y restas de enteros

Multiplicación de enteros y regla de signos

Propiedades de la multiplicación en enteros

División exacta de números enteros

Operaciones combinadas con enteros y jerarquía

Resolución de problemas aditivos y multiplicativos con enteros

Uso de la calculadora para verificar operaciones con enteros

Operaciones con números enteros

认识土地面积单位：公顷

认识平方千米与面积单位换算

平行四边形面积公式的割补推导

平行四边形面积计算中的底高对应

三角形面积公式的倍拼推导

三角形面积应用与等底等高模型

梯形面积公式的转化推导与计算

梯形面积的实际应用与钢管堆放问题

组合图形面积计算：分割法与添补法

估算不规则图形面积：数方格与近似图形法

平面多边形面积与大面积单位测量

Reviewing the Long Division Process

Dividing by Two-Digit Divisors

Dividing Three-Digit Numbers by Two-Digit Divisors

Dividing Four-Digit Numbers by Two-Digit Divisors

Dividing Five-Digit Numbers

Division with Zeros in the Quotient

Estimating Quotients Using Compatible Numbers

Checking Division Answers with Multiplication

Multi-Digit Division with Two-Digit Divisors

Dividing by Three-Digit Divisors Using the Standard Algorithm

Expressing Division Remainders as Fractions and Mixed Numbers

Expressing Division Remainders as Terminating Decimals

Contextual Remainder Interpretation: Rounding Up or Discarding

Multi-Digit Whole Number Division and Remainder Interpretation

Concepto de número racional y representación fraccionaria

Fracciones propias, impropias y números mixtos

Fracciones equivalentes por amplificación y simplificación

Fracción irreducible y simplificación máxima

Ubicación de fracciones positivas y negativas en la recta

Comparación de fracciones con distinto denominador

Densidad de los números racionales

Fracciones como operadores de cantidades y medidas

Problemas de comparación y medición con fracciones

Números racionales: Fracciones y equivalencia

Problemas de adição e subtração com naturais

Problemas de multiplicação com naturais

Problemas de divisão com naturais

Problemas com operações combinadas

Verificando a razoabilidade das respostas

Resolução e verificação de problemas com operações naturais

认识圆的特征与用圆规画圆

同圆或等圆中半径与直径的关系

认识扇形、弧与圆心角

圆周率的历史探究与圆的周长公式推导

圆的周长计算与车轮滚动等实际应用

半圆周长与扇形弧长的计算

切拼转化探究圆的面积公式

圆的面积计算与已知周长求面积

圆环面积与扇形面积计算

外方内圆、外圆内方与阴影部分面积

圆与扇形的认识、周长与面积

Adición y sustracción de fracciones homogéneas

Adición y sustracción de fracciones heterogéneas con mcm

Suma y resta de números mixtos

Multiplicación de fracciones y modelo de área

Simplificación cruzada en la multiplicación de fracciones

Multiplicación con números mixtos y enteros

Adición, sustracción y multiplicación de fracciones y números mixtos

Expressing Remainders as Fractions

Interpreting Remainders in Word Problems

Multi-Digit Division Word Problems

Multi-Step Problems with Multi-Digit Division

Division Fluency with Two-Digit Divisors

Error Analysis in Multi-Digit Division

Applying Multi-Digit Division

长方体和正方体的特征：面、棱、顶点

正方体与长方体的表面展开图识别

长方体和正方体表面积公式推导与计算

表面积的实际应用：粉刷教室与无盖容器

体积与容积的意义及度量单位（m³、dm³、cm³、L、mL）

体积与容积单位之间的进率与换算

长方体和正方体体积公式推导与计算（V=abh, V=a³, V=Sh）

切割与拼截问题中的表面积与体积变化规律

排水法测量不规则物体的体积

长方体和正方体的特征、表面积与体积

Concepto de inverso multiplicativo o recíproco

División de fracciones por el método del recíproco

División con fracciones y números mixtos

Operaciones combinadas con fracciones y jerarquía

Problemas verbales aditivos con fracciones en medidas

Problemas verbales multiplicativos y de división con fracciones

División, operaciones combinadas y problemas con fracciones

认识圆柱和圆锥的特征与高

圆柱侧面展开图与侧面积公式推导

圆柱表面积计算及生活实际应用

圆柱体积公式的切拼转化推导

圆柱体积与容积的综合应用计算

等底等高倒水/倒沙实验探究圆锥体积公式

圆锥体积计算与沙堆、粮堆实际问题

圆柱与圆锥等底、等高、等体积的倍数关系辨析

旋转体问题：平面图形绕轴旋转形成立体图形

圆柱与圆锥的特征、表面积与体积

辨认长方体、正方体、圆柱和圆锥的三视图

观察小正方体组合体并画出三视图

从不同方向观察组合体看到相同图形的判断

根据单个方向的形状图还原几何体与摆法探究

根据两个方向的视图确定所需小正方体数量的最值

根据三视图还原立体图形并在俯视图上标数

观察物体与三视图空间想象

Recognizing Division by a Rational Number as Multiplying by Its Reciprocal

Using Reciprocals to Solve Division Problems

Using Fraction Notation in Division Equations

Determining if a Quantity Increases or Decreases When Multiplied by a Fraction

Predicting Results of Multiplying by Fractions Greater Than One

Predicting Results of Multiplying by Fractions Less Than One

Predicting Results of Multiplying by Fractions Equal to One

Division and Reciprocal Relationships

Adición y sustracción alineada de decimales

Multiplicación de números decimales

Multiplicación y división de decimales por potencias de 10

División de decimales entre enteros

División entre números decimales

Problemas contextuales con decimales y dinero

Estimación frente a cálculo exacto con decimales

Operaciones y problemas con números decimales

Defining Rational Numbers in Fractional Form

Converting Fractions to Terminating and Repeating Decimals

Plotting Positive and Negative Fractions on a Number Line

Plotting Positive and Negative Decimals on a Number Line

Rational Numbers: Structure, Comparison, and Absolute Value

Multiplying Decimals by 10, 100 and 1000

Dividing Decimals by 10, 100 and 1000

Decimal Multiplication Patterns and Place Value

Representing Decimal × Whole Number with Area Models

Properties of Operations with Decimal Multiplication

Multiplying Two Decimal Numbers

Multiplying Decimals

Using Place Value Strategies for Decimal Division

Dividing Decimals by Whole Numbers

Estimating Decimal Products and Quotients

Using Properties to Multiply and Divide Rational Numbers

Dividing Decimals and Checking Reasonableness

Reviewing Expanded Multiplication as a Bridge to Long Multiplication

Multiplying a Two-Digit Number by a Two-Digit Number Using Long Multiplication

Multiplying a Three-Digit Number by a Two-Digit Number

Multiplying a Four-Digit Number by a Two-Digit Number Without Regrouping

Multiplying a Four-Digit Number by a Two-Digit Number With Regrouping

Managing Place Value and Zero in Long Multiplication

Multiplying by Multiples of 10 Using Long Multiplication

Mastering Formal Long Multiplication

Raíces cuadradas exactas y estimadas

Raíces cúbicas exactas

Propiedades de la radicación: raíz de un producto y cociente

Orden de operaciones con potencias y raíces

Notación científica introductoria y grandes números

Resolución de problemas de crecimiento exponencial y geométrico

Radicación, operaciones combinadas y aplicaciones

Estimating Products to Check Long Multiplication Answers

Spotting and Correcting Errors in Long Multiplication Calculations

Solving Single-Step Word Problems Using Long Multiplication

Solving Multi-Step Word Problems Involving Long Multiplication

Solving Area and Perimeter Problems Involving Long Multiplication

Missing Digit Problems in Long Multiplication

Applications and Problem Solving with Long Multiplication

Múltiplos y divisores de un número natural

Criterios de divisibilidad por 2, 3, 5 y 10

Teoría de números: Divisibilidad, MCD y mcm

OGM.7.NS.3

Aligned learning resources

Related diagrams