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

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

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

    .btn-step {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      color: #64748b;
      transition: all 0.2s ease;
    }

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

    /* Grid SVG */
    .grid-svg {
      width: 100%;
      max-width: 320px;
      height: auto;
      display: block;
      border-radius: 8px;
      background: #ffffff;
    }

    .cell {
      transition: fill 0.3s ease, opacity 0.3s ease;
      stroke: #cbd5e1;
      stroke-width: 1;
    }

    .cell-blue {
      fill: #93c5fd;
    }

    .cell-orange {
      fill: #fdba74;
    }

    .cell-white {
      fill: #ffffff;
    }

    .dimmed {
      opacity: 0.2;
    }

    /* Legend */
    .legend {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
      max-width: 320px;
      font-size: 14px;
      font-weight: 600;
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .swatch {
      width: 16px;
      height: 16px;
      border-radius: 4px;
      border: 1px solid rgba(0,0,0,0.1);
      flex-shrink: 0;
    }

    .swatch-blue { background: #93c5fd; border-color: #60a5fa; }
    .swatch-orange { background: #fdba74; border-color: #fb923c; }

    /* Total Banner */
    .total-banner {
      width: 100%;
      max-width: 320px;
      background: #f1f5f9;
      border: 1.5px dashed #94a3b8;
      border-radius: 8px;
      padding: 8px 12px;
      text-align: center;
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }

    .total-banner span {
      color: #0284c7;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="controls">
      <button class="btn-step" id="btn1" onclick="setMode('first')">0.35</button>
      <button class="btn-step" id="btn2" onclick="setMode('second')">+ 0.42</button>
      <button class="btn-step active" id="btn3" onclick="setMode('all')">0.35 + 0.42</button>
    </div>

    
    <svg class="grid-svg" viewBox="0 0 300 300" id="gridSvg">
      <g id="cellsGroup"></g>
      
      <rect x="0.5" y="0.5" width="299" height="299" fill="none" stroke="#64748b" stroke-width="2" rx="4" />
    </svg>

    
    <div class="legend">
      <div class="legend-item">
        <div class="swatch swatch-blue"></div>
        <span><strong>0.35</strong> = 3 tenths, 5 hundredths</span>
      </div>
      <div class="legend-item">
        <div class="swatch swatch-orange"></div>
        <span><strong>0.42</strong> = 4 tenths, 2 hundredths</span>
      </div>
    </div>

    
    <div class="total-banner" id="banner">
      Total Shaded = <span>77 squares = 0.77</span>
    </div>
  </div>

  <script>
    const svgGroup = document.getElementById('cellsGroup');
    const cells = [];

    // Create 100 grid squares (10x10)
    for (let i = 0; i < 100; i++) {
      const row = Math.floor(i / 10);
      const col = i % 10;
      const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
      
      rect.setAttribute('x', col * 30);
      rect.setAttribute('y', row * 30);
      rect.setAttribute('width', 30);
      rect.setAttribute('height', 30);

      if (i < 35) {
        rect.setAttribute('class', 'cell cell-blue');
      } else if (i < 77) {
        rect.setAttribute('class', 'cell cell-orange');
      } else {
        rect.setAttribute('class', 'cell cell-white');
      }

      svgGroup.appendChild(rect);
      cells.push(rect);
    }

    function setMode(mode) {
      document.querySelectorAll('.btn-step').forEach(b => b.classList.remove('active'));
      const banner = document.getElementById('banner');

      if (mode === 'first') {
        document.getElementById('btn1').classList.add('active');
        cells.forEach((cell, i) => {
          if (i < 35) cell.classList.remove('dimmed');
          else cell.classList.add('dimmed');
        });
        banner.innerHTML = 'Blue = <span>35 squares = 0.35</span>';
      } else if (mode === 'second') {
        document.getElementById('btn2').classList.add('active');
        cells.forEach((cell, i) => {
          if (i >= 35 && i < 77) cell.classList.remove('dimmed');
          else cell.classList.add('dimmed');
        });
        banner.innerHTML = 'Orange = <span>42 squares = 0.42</span>';
      } else {
        document.getElementById('btn3').classList.add('active');
        cells.forEach(cell => cell.classList.remove('dimmed'));
        banner.innerHTML = 'Total Shaded = <span>77 squares = 0.77</span>';
      }
    }
  </script>
</body>
</html>

Adding Decimals with Base-Ten Blocks and Grids

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

    .legend {
      display: flex;
      gap: 16px;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 8px;
    }
    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .swatch {
      width: 14px;
      height: 14px;
      border-radius: 3px;
    }
    .swatch-blue { background: #2563eb; }
    .swatch-orange { background: #ea580c; }

    .grids-container {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 14px;
      width: 100%;
      max-width: 480px;
    }

    .grid-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 210px;
    }

    .grid-100 {
      width: 100%;
      aspect-ratio: 1 / 1;
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(10, 1fr);
      gap: 1px;
      background: #cbd5e1;
      border: 2px solid #64748b;
      border-radius: 4px;
      padding: 1px;
    }

    .cell {
      background: #f8fafc;
      transition: background 0.3s ease;
    }
    .cell.blue {
      background: #2563eb;
    }
    .cell.orange {
      background: #ea580c;
    }

    .bracket-container {
      width: 100%;
      margin-top: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .bracket-svg {
      width: 90%;
      height: 10px;
      stroke: #64748b;
      stroke-width: 1.5;
      fill: none;
    }

    .grid-label {
      font-size: 14px;
      font-weight: 700;
      margin-top: 4px;
      text-align: center;
      line-height: 1.2;
    }
    .grid-sublabel {
      font-size: 12px;
      font-weight: 500;
      color: #64748b;
    }

    .plus-sign {
      align-self: center;
      font-size: 22px;
      font-weight: 700;
      color: #64748b;
      margin-top: -30px;
    }

    .equation-bar {
      margin-top: 10px;
      background: #f1f5f9;
      border-radius: 8px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 18px;
      font-weight: 700;
    }
    .eq-blue { color: #2563eb; }
    .eq-orange { color: #ea580c; }
    .eq-total { color: #0f172a; }
  </style>
</head>
<body>

  
  <div class="legend">
    <div class="legend-item">
      <div class="swatch swatch-blue"></div>
      <span>0.68</span>
    </div>
    <div class="legend-item">
      <div class="swatch swatch-orange"></div>
      <span>0.54 (32 + 22)</span>
    </div>
  </div>

  
  <div class="grids-container">
    
    <div class="grid-col">
      <div class="grid-100" id="grid1"></div>
      <div class="bracket-container">
        <svg class="bracket-svg" viewBox="0 0 100 12" preserveAspectRatio="none">
          <path d="M 2 1 L 2 6 Q 2 11 12 11 L 44 11 Q 50 11 50 12 Q 50 11 56 11 L 88 11 Q 98 11 98 6 L 98 1" />
        </svg>
        <div class="grid-label">1.00</div>
        <div class="grid-sublabel">1 Whole</div>
      </div>
    </div>

    <div class="plus-sign">+</div>

    
    <div class="grid-col">
      <div class="grid-100" id="grid2"></div>
      <div class="bracket-container">
        <svg class="bracket-svg" viewBox="0 0 100 12" preserveAspectRatio="none">
          <path d="M 2 1 L 2 6 Q 2 11 12 11 L 44 11 Q 50 11 50 12 Q 50 11 56 11 L 88 11 Q 98 11 98 6 L 98 1" />
        </svg>
        <div class="grid-label">0.22</div>
        <div class="grid-sublabel">22 Hundredths</div>
      </div>
    </div>
  </div>

  
  <div class="equation-bar">
    <span class="eq-blue">0.68</span>
    <span>+</span>
    <span class="eq-orange">0.54</span>
    <span>=</span>
    <span class="eq-total">1.22</span>
  </div>

  <script>
    // Populate Grid 1: 68 blue squares + 32 orange squares = 100 total
    const grid1 = document.getElementById('grid1');
    for (let i = 0; i < 100; i++) {
      const cell = document.createElement('div');
      cell.className = i < 68 ? 'cell blue' : 'cell orange';
      grid1.appendChild(cell);
    }

    // Populate Grid 2: 22 orange squares + 78 empty squares
    const grid2 = document.getElementById('grid2');
    for (let i = 0; i < 100; i++) {
      const cell = document.createElement('div');
      cell.className = i < 22 ? 'cell orange' : 'cell';
      grid2.appendChild(cell);
    }
  </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;
    }
    body {
      background: #f8fafc;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .main-wrap {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 580px;
    }
    .grid-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }
    .grid-100 {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      grid-template-rows: repeat(10, 1fr);
      width: 210px;
      height: 210px;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 6px;
      padding: 3px;
      gap: 2px;
    }
    .cell {
      border-radius: 2px;
      background: #f1f5f9;
      transition: background-color 0.25s ease;
    }
    .cell.c-blue {
      background: #3b82f6;
    }
    .cell.c-orange {
      background: #f97316;
    }
    .cell.c-red {
      background: #ef4444;
    }
    .info-panel {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1;
      min-width: 210px;
    }
    .math-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      font-weight: 600;
    }
    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
    }
    .chip-blue {
      background: #dbeafe;
      color: #1d4ed8;
      border: 1px solid #bfdbfe;
    }
    .chip-orange {
      background: #ffedd5;
      color: #c2410c;
      border: 1px solid #fed7aa;
    }
    .result-card {
      padding: 8px 12px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 13px;
    }
    .card-correct {
      background: #f0fdf4;
      border: 1.5px solid #86efac;
      color: #15803d;
    }
    .card-wrong {
      background: #fef2f2;
      border: 1.5px solid #fca5a5;
      color: #b91c1c;
      opacity: 0.85;
    }
    .res-title {
      font-weight: 800;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .toggle-bar {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }
    .btn-toggle {
      flex: 1;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      transition: all 0.2s ease;
    }
    .btn-toggle.active {
      background: #1e293b;
      color: #ffffff;
      border-color: #1e293b;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="grid-box">
      <div class="grid-100" id="grid"></div>
      <div class="toggle-bar" style="width: 210px;">
        <button class="btn-toggle active" id="btnActual" onclick="showState('actual')">0.35 (35 sq)</button>
        <button class="btn-toggle" id="btnMistake" onclick="showState('mistake')">0.8 (80 sq)</button>
      </div>
    </div>

    
    <div class="info-panel">
      <div class="math-row">
        <span class="chip chip-blue">0.3</span>
        <span>= 30 hundredths (3 cols)</span>
      </div>

      <div class="math-row">
        <span class="chip chip-orange">0.05</span>
        <span>= 5 hundredths (5 sq)</span>
      </div>

      
      <div class="result-card card-correct" id="cardCorrect">
        <div class="res-title">
          <span>0.3 + 0.05 = 0.35</span>
          <span>✓ CORRECT</span>
        </div>
        <span>35 squares total</span>
      </div>

      
      <div class="result-card card-wrong" id="cardWrong">
        <div class="res-title">
          <span>0.8</span>
          <span>✗ WRONG</span>
        </div>
        <span>0.8 means 80 squares!</span>
      </div>
    </div>
  </div>

  <script>
    const grid = document.getElementById('grid');
    
    // Create 100 squares (ordered column by column, top to bottom)
    const cells = [];
    for (let c = 0; c < 10; c++) {
      for (let r = 0; r < 10; r++) {
        const cell = document.createElement('div');
        cell.className = 'cell';
        cell.style.gridColumn = (c + 1);
        cell.style.gridRow = (r + 1);
        grid.appendChild(cell);
        cells.push({ col: c, row: r, el: cell });
      }
    }

    function showState(mode) {
      const btnActual = document.getElementById('btnActual');
      const btnMistake = document.getElementById('btnMistake');
      const cardCorrect = document.getElementById('cardCorrect');
      const cardWrong = document.getElementById('cardWrong');

      if (mode === 'actual') {
        btnActual.classList.add('active');
        btnMistake.classList.remove('active');
        cardCorrect.style.opacity = '1';
        cardWrong.style.opacity = '0.5';

        cells.forEach((item, index) => {
          item.el.className = 'cell';
          if (item.col < 3) {
            // First 3 full columns = 30 hundredths (0.3)
            item.el.classList.add('c-blue');
          } else if (item.col === 3 && item.row < 5) {
            // 5 squares in column 4 = 5 hundredths (0.05)
            item.el.classList.add('c-orange');
          }
        });
      } else {
        btnActual.classList.remove('active');
        btnMistake.classList.add('active');
        cardCorrect.style.opacity = '0.5';
        cardWrong.style.opacity = '1';

        cells.forEach((item) => {
          item.el.className = 'cell';
          if (item.col < 8) {
            // 8 full columns = 80 hundredths (0.8)
            item.el.classList.add('c-red');
          }
        });
      }
    }

    // Initialize in actual correct state
    showState('actual');
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 16px 8px;
    }
    .grid-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-end;
      gap: 16px;
      width: 100%;
      max-width: 600px;
    }
    .block-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      flex: 1 1 140px;
      min-width: 100px;
      max-width: 190px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }
    .visual-area {
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
    }
    .label-title {
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      margin-top: 12px;
      color: #0f172a;
    }
    .label-sub {
      font-size: 13px;
      font-weight: 500;
      color: #64748b;
      text-align: center;
      margin-top: 2px;
    }
    svg {
      display: block;
    }
    .whole-tile {
      fill: #e0f2fe;
      stroke: #38bdf8;
      stroke-width: 1;
    }
    .rod-tile {
      fill: #0284c7;
      stroke: #bae6fd;
      stroke-width: 1;
    }
    .unit-tile {
      fill: #1e293b;
      stroke: #0f172a;
      stroke-width: 1;
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    <div class="block-card">
      <div class="visual-area">
        <svg width="120" height="120" viewBox="0 0 120 120" aria-label="10 by 10 grid representing 1 whole">
          <g>
            
            <defs>
              <pattern id="gridWhole" width="12" height="12" patternUnits="userSpaceOnUse">
                <rect width="12" height="12" class="whole-tile" />
              </pattern>
            </defs>
            <rect width="120" height="120" fill="url(#gridWhole)" rx="2" />
            <rect width="120" height="120" fill="none" stroke="#0284c7" stroke-width="2" rx="2" />
          </g>
        </svg>
      </div>
      <div class="label-title">1 Whole</div>
      <div class="label-sub">1.0</div>
    </div>

    
    <div class="block-card">
      <div class="visual-area">
        <svg width="14" height="120" viewBox="0 0 14 120" aria-label="1 vertical rod representing 1 tenth">
          <g transform="translate(1, 0)">
            
            <rect y="0" width="12" height="12" class="rod-tile" />
            <rect y="12" width="12" height="12" class="rod-tile" />
            <rect y="24" width="12" height="12" class="rod-tile" />
            <rect y="36" width="12" height="12" class="rod-tile" />
            <rect y="48" width="12" height="12" class="rod-tile" />
            <rect y="60" width="12" height="12" class="rod-tile" />
            <rect y="72" width="12" height="12" class="rod-tile" />
            <rect y="84" width="12" height="12" class="rod-tile" />
            <rect y="96" width="12" height="12" class="rod-tile" />
            <rect y="108" width="12" height="12" class="rod-tile" />
            <rect y="0" width="12" height="120" fill="none" stroke="#0369a1" stroke-width="1.5" rx="1" />
          </g>
        </svg>
      </div>
      <div class="label-title">1 Tenth</div>
      <div class="label-sub">0.1 = 10 hundredths</div>
    </div>

    
    <div class="block-card">
      <div class="visual-area">
        <svg width="14" height="120" viewBox="0 0 14 120" aria-label="1 unit square representing 1 hundredth">
          <g transform="translate(1, 54)">
            <rect width="12" height="12" class="unit-tile" rx="1" />
          </g>
        </svg>
      </div>
      <div class="label-title">1 Hundredth</div>
      <div class="label-sub">0.01</div>
    </div>
  </div>

</body>
</html>

Subtracting Decimals with Base-Ten Blocks and Grids

Mental Strategies for Adding and Subtracting Decimals

Adding Decimals to Hundredths Without Regrouping

Adding Decimals to Hundredths with Regrouping

Subtracting Decimals to Hundredths Without Regrouping

Subtracting Decimals to Hundredths with Regrouping

Subtracting Decimals from Whole Numbers and Annexing Zeros

Estimating Sums and Differences of Decimals

Solving Real-World Word Problems with Decimal Addition and Subtraction

math

Adding and Subtracting Decimals to Hundredths

Calcul mental : ajouter ou soustraire des unités à un décimal sans retenue

Calcul mental : ajouter ou soustraire des dizaines et centaines à un décimal

Ajouter un nombre entier à un décimal avec retenue

Ajouter deux nombres décimaux inférieurs à 10 avec un chiffre après la virgule

OGM.5.DEC.3

Aligned learning resources

Related diagrams