<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px 16px;
    }

    .main-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* Place Value Grid (Clean open layout without outer card border/bg) */
    .chart-container {
      width: 100%;
      position: relative;
      background: transparent;
      padding: 0;
    }

    .grid-headers {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      text-align: center;
      margin-bottom: 8px;
    }

    .header-col {
      font-size: 14px;
      font-weight: 800;
      color: #1e2945;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      line-height: 1.2;
    }

    .header-col span {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: #475569;
      margin-top: 2px;
    }

    .grid-cells {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      position: relative;
      height: 96px;
    }

    .cell {
      background: #f8fafc;
      border: 2px dashed #cbd5e1;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* Animated Digits */
    .digit {
      font-size: 46px;
      font-weight: 800;
      line-height: 1;
      position: absolute;
      top: 50%;
      transition: left 0.55s cubic-bezier(0.34, 1.3, 0.64, 1), transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.4s ease;
      user-select: none;
    }

    .digit-seven {
      color: #2563eb;
      left: 83.33%;
      transform: translate(-50%, -50%);
    }

    .digit-seven.shifted {
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .digit-zero {
      color: #16a34a;
      left: 83.33%;
      transform: translate(-50%, -50%) scale(0.4);
      opacity: 0;
      filter: drop-shadow(0 0 10px rgba(22, 163, 74, 0.5));
    }

    .digit-zero.visible {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }

    /* Shift Arrow SVG Overlay */
    .arrow-svg {
      position: absolute;
      top: -12px;
      left: 0;
      width: 100%;
      height: calc(100% + 12px);
      pointer-events: none;
      opacity: 0;
      overflow: visible;
      transition: opacity 0.35s ease;
      z-index: 5;
    }

    .arrow-svg.visible {
      opacity: 1;
    }

    /* Equation Display (Flat minimal presentation) */
    .equation-area {
      width: 100%;
      text-align: center;
      font-size: 19px;
      font-weight: 700;
      color: #1e2945;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px 8px;
      line-height: 1.3;
    }

    .eq-highlight-blue {
      color: #2563eb;
    }

    .eq-highlight-green {
      color: #16a34a;
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      padding: 7px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

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

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

    .step-btn.active:hover {
      background: #1d4ed8;
      border-color: #1d4ed8;
    }

    .play-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      cursor: pointer;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

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

    @media (max-width: 380px) {
      .header-col {
        font-size: 12px;
      }
      .header-col span {
        font-size: 11px;
      }
      .digit {
        font-size: 38px;
      }
      .grid-cells {
        height: 84px;
      }
      .equation-area {
        font-size: 16px;
      }
      .step-btn {
        padding: 6px 12px;
        font-size: 12px;
      }
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    
    
    <div class="chart-container">
      <div class="grid-headers">
        <div class="header-col">Hundreds<span>(H)</span></div>
        <div class="header-col">Tens<span>(T)</span></div>
        <div class="header-col">Ones<span>(O)</span></div>
      </div>

      <div class="grid-cells">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>

        
        <svg class="arrow-svg" id="arrowSvg" viewBox="0 0 300 108" preserveAspectRatio="none">
          <defs>
            <marker id="arrowhead" markerWidth="7" markerHeight="7" refX="5" refY="3.5" orient="auto">
              <polygon points="7 0, 0 3.5, 7 7" fill="#2563eb" />
            </marker>
          </defs>
          
          <path d="M 246 34 Q 200 4 154 30" fill="none" stroke="#2563eb" stroke-width="2.5" stroke-dasharray="4 4" marker-end="url(#arrowhead)" />
          
          <rect x="184" y="0" width="32" height="14" rx="4" fill="#ffffff" fill-opacity="0.9" />
          <text x="200" y="11" fill="#2563eb" font-size="12" font-weight="800" text-anchor="middle">×10</text>
        </svg>

        
        <div class="digit digit-seven" id="digitSeven">7</div>
        <div class="digit digit-zero" id="digitZero">0</div>
      </div>
    </div>

    
    <div class="equation-area" id="eqArea">
      <span>7 in Ones column = <span class="eq-highlight-blue">7</span></span>
    </div>

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

  </div>

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

    const steps = [
      {
        shifted: false,
        showArrow: false,
        showZero: false,
        eq: '<span>7 in Ones column = <span class="eq-highlight-blue">7</span></span>'
      },
      {
        shifted: true,
        showArrow: true,
        showZero: false,
        eq: '<span>Shift left 1 place (×10) = <span class="eq-highlight-blue">7 tens</span></span>'
      },
      {
        shifted: true,
        showArrow: false,
        showZero: true,
        eq: '<span>7 × 10 = 7 tens + 0 ones = <span class="eq-highlight-blue">7</span><span class="eq-highlight-green">0</span></span>'
      }
    ];

    const dSeven = document.getElementById('digitSeven');
    const dZero = document.getElementById('digitZero');
    const arrow = document.getElementById('arrowSvg');
    const eqArea = document.getElementById('eqArea');
    const stepBtns = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playBtn');

    function renderStep(idx) {
      currentStep = idx;
      const s = steps[idx];

      if (s.shifted) {
        dSeven.classList.add('shifted');
      } else {
        dSeven.classList.remove('shifted');
      }

      if (s.showArrow) {
        arrow.classList.add('visible');
      } else {
        arrow.classList.remove('visible');
      }

      if (s.showZero) {
        dZero.classList.add('visible');
      } else {
        dZero.classList.remove('visible');
      }

      eqArea.innerHTML = s.eq;

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

    function setStep(idx) {
      renderStep(idx);
      resetTimer();
    }

    function nextStep() {
      const next = (currentStep + 1) % steps.length;
      renderStep(next);
    }

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

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

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

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

Multiplying Single-Digit Numbers by 10

<!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;
    }
    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100%;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 600px;
    }
    @media (max-width: 440px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
    }
    .math-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
    .equation {
      font-size: 20px;
      font-weight: 700;
      color: #1e2945;
      letter-spacing: -0.5px;
    }
    .accent {
      color: #2563eb;
    }
    .rods-container {
      display: flex;
      gap: 5px;
      align-items: center;
      justify-content: center;
      min-height: 64px;
      padding: 6px 10px;
      background: #f8fafc;
      border-radius: 8px;
      width: 100%;
    }
    .rod {
      width: 9px;
      height: 52px;
      background: #2563eb;
      border-radius: 2px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 1px 0;
      box-sizing: border-box;
    }
    .rod-segment {
      width: 100%;
      height: 4px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    }
    .rod-segment:last-child {
      border-bottom: none;
    }
    .pv-table {
      width: 100%;
      max-width: 150px;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr;
      text-align: center;
      background: #ffffff;
    }
    .pv-header {
      background: #f1f5f9;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      padding: 4px 0;
      border-bottom: 1px solid #cbd5e1;
    }
    .pv-header:first-child {
      border-right: 1px solid #cbd5e1;
    }
    .pv-cell {
      font-size: 18px;
      font-weight: 700;
      padding: 6px 0;
      color: #1e2945;
    }
    .pv-cell:first-child {
      border-right: 1px solid #cbd5e1;
      color: #2563eb;
    }
    .pv-cell.zero {
      color: #94a3b8;
    }
    .summary-tag {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      background: #f8fafc;
      padding: 4px 10px;
      border-radius: 6px;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="math-card">
      <div class="equation">3 × 10 = <span class="accent">30</span></div>
      
      <div class="rods-container" aria-label="3 tens rods">
        <div class="rod">
          <div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div>
          <div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div>
        </div>
        <div class="rod">
          <div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div>
          <div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div>
        </div>
        <div class="rod">
          <div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div>
          <div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div>
        </div>
      </div>

      <div class="pv-table">
        <div class="pv-header">Tens</div>
        <div class="pv-header">Ones</div>
        <div class="pv-cell">3</div>
        <div class="pv-cell zero">0</div>
      </div>

      <div class="summary-tag">3 tens = 30</div>
    </div>

    
    <div class="math-card">
      <div class="equation">8 × 10 = <span class="accent">80</span></div>
      
      <div class="rods-container" aria-label="8 tens rods">
        <div class="rod"><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div></div>
        <div class="rod"><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div></div>
        <div class="rod"><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div></div>
        <div class="rod"><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div></div>
        <div class="rod"><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div></div>
        <div class="rod"><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div></div>
        <div class="rod"><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div></div>
        <div class="rod"><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div><div class="rod-segment"></div></div>
      </div>

      <div class="pv-table">
        <div class="pv-header">Tens</div>
        <div class="pv-header">Ones</div>
        <div class="pv-cell">8</div>
        <div class="pv-cell zero">0</div>
      </div>

      <div class="summary-tag">8 tens = 80</div>
    </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">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 16px 12px;
      user-select: none;
      gap: 16px;
    }

    .main-stage {
      width: 100%;
      max-width: 400px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    /* Base Ten Visualizer Row */
    .visual-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 4px;
      min-height: 120px;
    }

    .block-group {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      transition: opacity 0.25s ease;
    }

    .items-container {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 6px;
      height: 86px;
    }

    /* Unit Cubes (Yellow - high contrast) */
    .unit-cube {
      width: 15px;
      height: 15px;
      background: #f59e0b;
      border: 2px solid #92400e;
      border-radius: 3px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    }

    /* Rods (Blue - 10 segments) */
    .ten-rod {
      width: 15px;
      height: 84px;
      background: #3b82f6;
      border: 2px solid #1d4ed8;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.15);
    }

    .segment-line {
      width: 100%;
      height: 1px;
      background: #1d4ed8;
      opacity: 0.8;
    }

    .arrow-divider {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 0 6px;
    }

    .op-badge {
      background: #dbeafe;
      color: #1d4ed8;
      font-weight: 800;
      font-size: 14px;
      padding: 4px 10px;
      border-radius: 8px;
      border: 1.5px solid #93c5fd;
      white-space: nowrap;
    }

    .arrow-icon {
      color: #2563eb;
      font-size: 18px;
      line-height: 1;
      font-weight: bold;
    }

    .label-badge {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.1px;
      white-space: nowrap;
    }
    .label-yellow { 
      color: #78350f; 
    }
    .label-blue { 
      color: #1d4ed8; 
    }

    /* Place Value Chart */
    .pv-container {
      width: 100%;
    }

    .pv-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 2px solid #94a3b8;
      border-radius: 10px;
      overflow: hidden;
      background: #ffffff;
    }

    .pv-header {
      background: #e2e8f0;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      padding: 8px 0;
      color: #1e293b;
      border-bottom: 2px solid #94a3b8;
    }
    .pv-header:first-child {
      border-right: 2px solid #94a3b8;
    }

    .pv-cell {
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 800;
    }
    .pv-cell:first-child {
      border-right: 2px solid #94a3b8;
    }

    .digit {
      transition: color 0.25s ease;
    }
    .digit-tens { color: #2563eb; }
    .digit-ones { color: #78350f; }
    .digit-zero { color: #475569; }

    /* Controls */
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 400px;
    }

    .btn-step {
      flex: 1;
      border: 1.5px solid #cbd5e1;
      background: #ffffff;
      color: #334155;
      padding: 9px 10px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

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

    .btn-step.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #1d4ed8;
    }

    .btn-step.active:hover {
      background: #1d4ed8;
    }
  </style>
</head>
<body>

  <div class="main-stage">
    
    <div class="visual-row">
      
      <div class="block-group" id="onesGroup">
        <div class="items-container">
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
        </div>
        <div class="label-badge label-yellow">4 ones</div>
      </div>

      
      <div class="arrow-divider">
        <div class="op-badge">× 10</div>
        <div class="arrow-icon">→</div>
      </div>

      
      <div class="block-group" id="tensGroup">
        <div class="items-container">
          <div class="ten-rod">
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
          </div>
          <div class="ten-rod">
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
          </div>
          <div class="ten-rod">
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
          </div>
          <div class="ten-rod">
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
            <div class="segment-line"></div>
          </div>
        </div>
        <div class="label-badge label-blue">4 tens = 40</div>
      </div>
    </div>

    
    <div class="pv-container">
      <div class="pv-grid">
        <div class="pv-header">Tens (T)</div>
        <div class="pv-header">Ones (O)</div>
        <div class="pv-cell">
          <span id="tensDigit" class="digit digit-tens">4</span>
        </div>
        <div class="pv-cell">
          <span id="onesDigit" class="digit digit-zero">0</span>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn-step" id="step1Btn" onclick="setStep(1)">1. Start (4)</button>
    <button class="btn-step active" id="step2Btn" onclick="setStep(2)">2. Shift (4 × 10 = 40)</button>
  </div>

  <script>
    function setStep(step) {
      const onesGroup = document.getElementById('onesGroup');
      const tensGroup = document.getElementById('tensGroup');
      const tensDigit = document.getElementById('tensDigit');
      const onesDigit = document.getElementById('onesDigit');
      const btn1 = document.getElementById('step1Btn');
      const btn2 = document.getElementById('step2Btn');

      if (step === 1) {
        btn1.classList.add('active');
        btn2.classList.remove('active');

        onesGroup.style.opacity = '1';
        tensGroup.style.opacity = '0.35';

        tensDigit.textContent = '';
        onesDigit.textContent = '4';
        onesDigit.className = 'digit digit-ones';
      } else {
        btn2.classList.add('active');
        btn1.classList.remove('active');

        onesGroup.style.opacity = '0.35';
        tensGroup.style.opacity = '1';

        tensDigit.textContent = '4';
        tensDigit.className = 'digit digit-tens';
        onesDigit.textContent = '0';
        onesDigit.className = 'digit digit-zero';
      }
    }

    // Initialize state
    setStep(2);
  </script>
</body>
</html>

Algoritmo estándar de la suma con múltiples reagrupaciones

Propiedades conmutativa y asociativa en el cálculo mental

Algoritmo estándar de la resta con desagrupación continua

Resta atravesando ceros: estrategias y procedimientos

Estimación de sumas y diferencias para verificar resultados

Relación inversa entre suma y resta para comprobar operaciones

math

Algoritmos y estrategias de cálculo de suma y resta

Dodawanie w pamięci – liczby jednocyfrowe

Odejmowanie w pamięci – liczby jednocyfrowe

Dodawanie i odejmowanie wielokrotności 10

Dodawanie i odejmowanie wielokrotności 100

Dodawanie liczb dwucyfrowych bez przejścia

Odejmowanie liczb dwucyfrowych bez przejścia

Dodawanie liczb dwucyfrowych z przejściem

Odejmowanie liczb dwucyfrowych z przejściem

Dodawanie i odejmowanie w pamięci

Properties of Operations: Commutative and Associative

Using the Commutative Property to Multiply

Using the Associative Property to Multiply

Distributive Property with Area Models

Breaking Apart Numbers Using the Distributive Property

Multiplying by Multiples of Ten

Multiplication Properties and Place Value Patterns

Situaciones aditivas de composición parte-todo

Situaciones aditivas de transformación: aumento y disminución

Situaciones aditivas de comparación: cuánto más y cuánto menos

Situaciones aditivas de igualación: compensar cantidades

Resolución de problemas aditivos de dos y tres pasos

Uso de diagramas de barras para modelar problemas aditivos

Estrategias de compensación y descomposición mental

Ecuaciones aditivas simples: hallar el término desconocido

Formulación de problemas aditivos a partir de datos reales

Resolución de problemas aditivos: modelación y aplicaciones

Fluidez en las tablas de multiplicar hasta el 12

Propiedad distributiva de la multiplicación sobre la suma

Modelo de áreas rectangulares para la multiplicación

Multiplicación de un número de varias cifras por una cifra

Multiplicación por múltiplos de 10, 100 y 1.000

Multiplicación de dos cifras por dos cifras: productos parciales

Algoritmo estándar de la multiplicación de dos y tres cifras

Algoritmo de la multiplicación de números naturales

Dodawanie pisemne – liczby trzycyfrowe

Odejmowanie pisemne – liczby trzycyfrowe

Dodawanie pisemne – liczby czterocyfrowe

Odejmowanie pisemne – liczby czterocyfrowe

Odejmowanie z pożyczaniem przez zero

Dodawanie i odejmowanie pisemne

Partial Products Method for 2-Digit by 1-Digit

Standard Algorithm for 2-Digit by 1-Digit

Multiplying 2-Digit by 1-Digit with Regrouping

Mental Math Strategies for Multiplication

Choosing the Best Multiplication Strategy

2-Digit by 1-Digit Multiplication Word Problems

Multi-Digit Multiplication: 2-Digit by 1-Digit Strategies

Propiedades asociativa y conmutativa de la multiplicación

Multiplicación de tres o más factores

Estimación de productos mediante redondeo

Problemas multiplicativos de grupos iguales y arreglos

Problemas multiplicativos de comparación: tantas veces más

Problemas multiplicativos de combinatoria y cartesiano

Duplicar y partir a la mitad como estrategia mental

Detección y corrección de errores en la multiplicación

Problemas multiplicativos de dos pasos con dinero y cantidades

Cálculo mental y problemas multiplicativos

Multiplying Multiples of Ten by Single Digits

Multiplying Two-Digit Numbers by Partitioning (Without Regrouping)

Multiplying Two-Digit Numbers by Partitioning (With Regrouping)

Using the Grid Method to Multiply Two-Digit Numbers

Expanded Short Multiplication (Two Digits by One Digit)

Dividing Multiples of Ten by Single Digits

Dividing Two-Digit Numbers by Partitioning into Tens and Ones

Dividing Two-Digit Numbers with Remainders

Using Inverse Operations to Check Written Calculations

Solving Multiplication and Division Calculation Word Problems

Multiplication and Division: Two Digits by One Digit

Dodawanie trzech i więcej liczb

Obliczenia typu 250 + 50, 180 – 30

Własności dodawania – przemienność i łączność

Sprawdzanie dodawania odejmowaniem

Sprawdzanie odejmowania dodawaniem

Szacowanie sum i różnic

Równania z okienkiem – dodawanie i odejmowanie

Zadania tekstowe – dodawanie i odejmowanie

Sprawdzenie – dodawanie i odejmowanie

Sprawność w dodawaniu i odejmowaniu – zastosowania

Significados de la división: reparto equitativo y agrupamiento

Términos de la división y prueba de la división exacta e inexacta

División de números de varias cifras entre un dígito sin residuo

División entre un dígito con residuo y ceros en el cociente

Estimación del cociente usando múltiplos del divisor

División entre dos cifras: método de cocientes parciales

Algoritmo estándar de la división por dos cifras

Ajuste del cociente estimado cuando se pasa o queda corto

Interpretación del residuo: redondear al alza o descartar

Problemas de empaquetado, transporte y reparto con residuo

División de números naturales: algoritmos y aplicaciones

Multiplying Single-Digit Numbers by Multiples of 10

Multiplying Two-Digit Numbers Using Area Models

Multiplying Two-Digit Numbers by Breaking Apart

Multiplying Two-Digit Numbers Using Partial Products

Multiplying Two-Digit Numbers Using Standard Written Method

Solving Word Problems Involving Two-Digit by One-Digit Multiplication

Multiplying Multiples of Ten and Two-Digit Numbers

Mnożenie jako dodawanie tych samych składników

Tabliczka mnożenia przez 2 i 3

Tabliczka mnożenia przez 4 i 5

Tabliczka mnożenia przez 6 i 7

Tabliczka mnożenia przez 8 i 9

Mnożenie przez 0, 1 i 10

Przemienność mnożenia

Łączność mnożenia – trzy czynniki

Rozdzielność mnożenia względem dodawania

Tabliczka mnożenia i jej właściwości

Mnożenie przez 10 liczb mniejszych od 20

Mnożenie liczb dwucyfrowych przez 2

Mnożenie liczb dwucyfrowych przez 3, 4 i 5

Mnożenie liczb dwucyfrowych przez 6–9

Mnożenie liczb z zerami na końcu

Mnożenie pisemne przez liczbę jednocyfrową

Mnożenie pisemne przez liczbę dwucyfrową – wprowadzenie

Mnożenie pisemne przez liczbę dwucyfrową – ćwiczenia

Mnożenie w pamięci i pisemne

Propiedad de invarianza del cociente al multiplicar o dividir ambos términos

Jerarquía de las operaciones sin signos de agrupación

Uso de paréntesis y corchetes en expresiones combinadas

Traducción entre lenguaje verbal y expresiones numéricas

Problemas verbales combinados con las cuatro operaciones

Propiedades de la división y operaciones combinadas

Szacowanie iloczynów

Równania z okienkiem – mnożenie

Równania z okienkiem – dzielenie

Zadania tekstowe – mnożenie

Wiązki między mnożeniem a dodawaniem

Sprawdzenie – mnożenie

Zastosowanie mnożenia w zadaniach

Dzielenie jako podział na równe części

Dzielenie jako wielokrotne odejmowanie

Tabliczka dzielenia przez 2 i 3

Tabliczka dzielenia przez 4 i 5

Tabliczka dzielenia przez 6, 7, 8 i 9

Dzielenie przez 10

Dzielenie z resztą – wprowadzenie

Dzielenie z resztą – ćwiczenia

Sprawdzanie dzielenia mnożeniem

Dzielenie w pamięci i z resztą

Dzielenie liczb dwucyfrowych przez jednocyfrowe

Dzielenie pisemne przez liczbę jednocyfrową

Dzielenie liczb z zerami na końcu

Zadania tekstowe – dzielenie

Dzielenie pisemne i zadania tekstowe

Liczby trzycyfrowe podzielne przez 5 o trzech różnych cyfrach

Dzielniki liczby – wprowadzenie

Wielokrotności liczby

Podzielność przez 2, 5 i 10

Sprawdzenie – dzielenie i podzielność

Podzielność liczb

Representing Multiplication Problems with Arrays and Equations

Using Place Value to Multiply by Multiples of 10

Using Known Facts to Find Unknown Products

Using Multiplication to Solve Division

Using Division to Solve Multiplication

Solving Multiplication and Division Problems with Equations

Understanding Multiplication as Equal Groups

Understanding Division as Sharing Equally

Understanding Division as Grouping

Understanding Multiplication and Division

Zadania jednoetapowe – dodawanie i odejmowanie

Zadania jednoetapowe – mnożenie i dzielenie

Zadania dwuetapowe – wprowadzenie

Zadania dwuetapowe – ćwiczenia

Równanie z okienkiem w zadaniu

Zadania tekstowe jedno- i dwuetapowe

Finding Missing Factors in Multiplication

Finding Missing Values in Division

Representing Multiplication with Arrays

Representing Division with Arrays

Representing Multiplication with Number Sentences

Representing Division with Number Sentences

Multiplying One-Digit by Two-Digit Numbers

Dividing Two-Digit Numbers by One-Digit Numbers

Multiplication and Division Word Problems

Representing and Applying Multiplication and Division

Suma de fracciones con igual denominador y modelos visuales

Resta de fracciones con igual denominador

Suma y resta de números mixtos con igual denominador

Suma de fracciones con distinto denominador usando fracciones equivalentes

Resta de fracciones con distinto denominador

Suma y resta de números mixtos con distinto denominador

Problemas verbales aditivos con fracciones y medidas

Suma y resta de fracciones y números mixtos

Multiplicación de una fracción por un número natural

Multiplicación de fracción por fracción con modelo de área

Simplificación cruzada antes de multiplicar fracciones

La multiplicación como escalamiento o cambio de tamaño

División de fracciones unitarias entre un número natural

División de un número natural entre una fracción unitaria

Multiplicación y división de fracciones

OGM.4.NBT.5

Aligned learning resources

Related diagrams