<!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;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
      min-height: 100%;
    }

    /* Top Comparison Cards Grid */
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
    }

    .inspect-card {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
      text-align: center;
    }

    .inspect-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    .inspect-card.active-grow {
      background: #f0fdf4;
      border-color: #16a34a;
      box-shadow: 0 0 0 1px #16a34a;
    }

    .inspect-card.active-shrink {
      background: #fffbeb;
      border-color: #d97706;
      box-shadow: 0 0 0 1px #d97706;
    }

    /* Math expression styling */
    .math-exp {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 0.9em;
      line-height: 1;
    }

    .frac-num {
      padding-bottom: 2px;
      border-bottom: 2px solid currentColor;
    }

    .frac-den {
      padding-top: 2px;
    }

    /* Badges */
    .badge {
      font-size: 13px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .badge-green {
      background: #dcfce7;
      color: #15803d;
    }

    .badge-orange {
      background: #fef3c7;
      color: #b45309;
    }

    /* Result callout */
    .result-tag {
      font-size: 15px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .result-tag.grow {
      color: #16a34a;
    }

    .result-tag.shrink {
      color: #d97706;
    }

    /* Interactive Number Line Section */
    .diagram-panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      position: relative;
    }

    .svg-container {
      width: 100%;
      max-width: 540px;
      height: 110px;
    }

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

    .axis-line {
      stroke: #94a3b8;
      stroke-width: 3;
      stroke-linecap: round;
    }

    .tick-line {
      stroke: #94a3b8;
      stroke-width: 2;
    }

    .point-dot {
      transition: r 0.3s ease, fill 0.3s ease;
      cursor: pointer;
    }

    .arc-path {
      fill: none;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-dasharray: 6 4;
      transition: stroke-opacity 0.3s ease, stroke-width 0.3s ease;
    }

    .svg-label {
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      text-anchor: middle;
    }

    .hint-label {
      font-size: 11px;
      fill: #64748b;
      font-weight: 600;
      text-anchor: middle;
    }

    /* Mode selector tabs */
    .tab-bar {
      display: flex;
      justify-content: center;
      gap: 6px;
      width: 100%;
      margin-top: 2px;
    }

    .tab-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #0ea5e9;
      border-color: #0284c7;
      color: #ffffff;
    }

    @media (max-width: 360px) {
      .math-exp { font-size: 16px; }
      .badge { font-size: 12px; }
      .result-tag { font-size: 14px; }
      .svg-label { font-size: 12px; }
    }
  </style>
</head>
<body>

  
  <div class="cards-grid">
    
    <div id="cardGrow" class="inspect-card active-grow" onclick="setMode('grow')">
      <div class="math-exp">
        <span>20</span>
        <span>×</span>
        <div class="fraction">
          <span class="frac-num">7</span>
          <span class="frac-den">6</span>
        </div>
      </div>
      <div class="badge badge-green">
        <span>7/6 &gt; 1</span>
        <span>(Improper)</span>
      </div>
      <div class="result-tag grow">
        <span>Product &gt; 20</span>
        <span>▲</span>
      </div>
    </div>

    
    <div id="cardShrink" class="inspect-card" onclick="setMode('shrink')">
      <div class="math-exp">
        <span>20</span>
        <span>×</span>
        <div class="fraction">
          <span class="frac-num">5</span>
          <span class="frac-den">6</span>
        </div>
      </div>
      <div class="badge badge-orange">
        <span>5/6 &lt; 1</span>
        <span>(Proper)</span>
      </div>
      <div class="result-tag shrink">
        <span>Product &lt; 20</span>
        <span>▼</span>
      </div>
    </div>
  </div>

  
  <div class="diagram-panel">
    <div class="svg-container">
      <svg viewBox="0 0 500 110" preserveAspectRatio="xMidYMid meet">
        <defs>
          <marker id="arrow-green" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1 L 10 5 L 0 9 z" fill="#16a34a"/>
          </marker>
          <marker id="arrow-orange" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M 0 1 L 10 5 L 0 9 z" fill="#d97706"/>
          </marker>
        </defs>

        
        <line x1="30" y1="70" x2="470" y2="70" class="axis-line" />
        
        
        <polygon points="28,70 36,65 36,75" fill="#94a3b8" />
        <polygon points="472,70 464,65 464,75" fill="#94a3b8" />

        
        <line x1="120" y1="63" x2="120" y2="77" class="tick-line" />
        <line x1="250" y1="60" x2="250" y2="80" class="tick-line" stroke-width="3" stroke="#0f172a" />
        <line x1="380" y1="63" x2="380" y2="77" class="tick-line" />

        
        
        <path id="arcShrink" class="arc-path" d="M 245 58 Q 182 22 125 58" stroke="#d97706" marker-end="url(#arrow-orange)" stroke-opacity="0.3" />
        
        
        <path id="arcGrow" class="arc-path" d="M 255 58 Q 318 22 375 58" stroke="#16a34a" marker-end="url(#arrow-green)" stroke-opacity="1" />

        
        <circle id="dotCenter" cx="250" cy="70" r="7" fill="#0f172a" class="point-dot" />
        <text x="250" y="93" class="svg-label" fill="#0f172a">20</text>
        <text x="250" y="105" class="hint-label">(Base × 1)</text>

        
        <circle id="dotShrink" cx="120" cy="70" r="6" fill="#d97706" class="point-dot" onclick="setMode('shrink')" />
        <text x="120" y="93" class="svg-label" fill="#d97706">20 × 5/6</text>
        <text x="120" y="105" class="hint-label">≈ 16.7</text>

        
        <circle id="dotGrow" cx="380" cy="70" r="7" fill="#16a34a" class="point-dot" onclick="setMode('grow')" />
        <text x="380" y="93" class="svg-label" fill="#16a34a">20 × 7/6</text>
        <text x="380" y="105" class="hint-label">≈ 23.3</text>
      </svg>
    </div>

    
    <div class="tab-bar">
      <button id="btnGrow" class="tab-btn active" onclick="setMode('grow')">Zoom In (&gt; 1)</button>
      <button id="btnShrink" class="tab-btn" onclick="setMode('shrink')">Shrink (&lt; 1)</button>
      <button id="btnBoth" class="tab-btn" onclick="setMode('both')">Compare Both</button>
    </div>
  </div>

  <script>
    let currentMode = 'grow';

    function setMode(mode) {
      currentMode = mode;

      const cardGrow = document.getElementById('cardGrow');
      const cardShrink = document.getElementById('cardShrink');
      const arcGrow = document.getElementById('arcGrow');
      const arcShrink = document.getElementById('arcShrink');
      const dotGrow = document.getElementById('dotGrow');
      const dotShrink = document.getElementById('dotShrink');

      const btnGrow = document.getElementById('btnGrow');
      const btnShrink = document.getElementById('btnShrink');
      const btnBoth = document.getElementById('btnBoth');

      // Update button active states
      btnGrow.classList.toggle('active', mode === 'grow');
      btnShrink.classList.toggle('active', mode === 'shrink');
      btnBoth.classList.toggle('active', mode === 'both');

      // Update Cards and SVG Elements based on mode
      if (mode === 'grow') {
        cardGrow.classList.add('active-grow');
        cardShrink.classList.remove('active-shrink');

        arcGrow.setAttribute('stroke-opacity', '1');
        arcGrow.setAttribute('stroke-width', '4');
        arcShrink.setAttribute('stroke-opacity', '0.2');
        arcShrink.setAttribute('stroke-width', '2');

        dotGrow.setAttribute('r', '8');
        dotShrink.setAttribute('r', '5');
      } else if (mode === 'shrink') {
        cardGrow.classList.remove('active-grow');
        cardShrink.classList.add('active-shrink');

        arcGrow.setAttribute('stroke-opacity', '0.2');
        arcGrow.setAttribute('stroke-width', '2');
        arcShrink.setAttribute('stroke-opacity', '1');
        arcShrink.setAttribute('stroke-width', '4');

        dotGrow.setAttribute('r', '5');
        dotShrink.setAttribute('r', '8');
      } else {
        // Both active
        cardGrow.classList.add('active-grow');
        cardShrink.classList.add('active-shrink');

        arcGrow.setAttribute('stroke-opacity', '1');
        arcGrow.setAttribute('stroke-width', '3');
        arcShrink.setAttribute('stroke-opacity', '1');
        arcShrink.setAttribute('stroke-width', '3');

        dotGrow.setAttribute('r', '7');
        dotShrink.setAttribute('r', '7');
      }
    }
  </script>
</body>
</html>

Interpreting Multiplication as Scaling and Resizing

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .controls {
      display: flex;
      justify-content: center;
      gap: 6px;
    }
    .btn-tab {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 6px;
      padding: 5px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-tab.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
    }
    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }
    .bar {
      transition: opacity 0.3s ease, transform 0.3s ease;
      rx: 4;
    }
    .bar-orig { fill: #0284c7; }
    .bar-scale { fill: #0ea5e9; }
    .bar-row {
      transition: opacity 0.3s ease;
    }
    .bar-row.dimmed {
      opacity: 0.25;
    }
    .proj-line {
      stroke-dasharray: 4 4;
      animation: dash 1s linear infinite;
      transition: opacity 0.3s ease, stroke 0.3s ease;
    }
    @keyframes dash {
      to { stroke-dashoffset: -8; }
    }
    .lbl {
      font-size: 11.5px;
      font-weight: 600;
      fill: #334155;
    }
    .lbl-sub {
      font-size: 11px;
      font-weight: 500;
      fill: #64748b;
    }
    .lbl-bar {
      font-size: 11px;
      font-weight: 700;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
    }
    .tick { stroke: #e2e8f0; stroke-width: 1; }
  </style>
</head>
<body>

<div class="diagram-wrap">
  <div class="controls">
    <button class="btn-tab active" data-mode="all">All</button>
    <button class="btn-tab" data-mode="2">× 2</button>
    <button class="btn-tab" data-mode="1">× 1</button>
    <button class="btn-tab" data-mode="0.5">× ½</button>
  </div>

  <svg viewBox="0 0 440 250" aria-label="Multiplication as scaling visual diagram">
    
    <g id="grid">
      <line x1="90" y1="20" x2="90" y2="230" class="tick" stroke-width="1.5" stroke="#94a3b8" />
      <line x1="150" y1="20" x2="150" y2="230" class="tick" />
      <line x1="210" y1="20" x2="210" y2="230" class="tick" stroke-width="1.5" stroke="#94a3b8" />
      <line x1="270" y1="20" x2="270" y2="230" class="tick" />
      <line x1="330" y1="20" x2="330" y2="230" class="tick" stroke-width="1.5" stroke="#94a3b8" />
    </g>

    
    <g id="orig-group">
      <text x="82" y="44" text-anchor="end" class="lbl">Original</text>
      <rect x="90" y="30" width="120" height="24" class="bar bar-orig" />
      <text x="150" y="42" class="lbl-bar">6 units</text>
    </g>

    
    
    <path id="proj-2" class="proj-line" d="M 210,54 C 210,70 330,68 330,85" fill="none" stroke="#0284c7" stroke-width="2" />
    
    <path id="proj-1" class="proj-line" d="M 210,54 L 210,135" fill="none" stroke="#0284c7" stroke-width="2" />
    
    <path id="proj-05" class="proj-line" d="M 210,54 C 210,170 150,168 150,185" fill="none" stroke="#0284c7" stroke-width="2" />

    
    <g id="row-2" class="bar-row">
      <text x="82" y="94" text-anchor="end" class="lbl">× 2</text>
      <text x="82" y="106" text-anchor="end" class="lbl-sub">Enlarged</text>
      <rect x="90" y="85" width="240" height="24" class="bar bar-scale" />
      <text x="210" y="97" class="lbl-bar">12 units</text>
    </g>

    
    <g id="row-1" class="bar-row">
      <text x="82" y="144" text-anchor="end" class="lbl">× 1</text>
      <text x="82" y="156" text-anchor="end" class="lbl-sub">Unchanged</text>
      <rect x="90" y="135" width="120" height="24" class="bar bar-scale" />
      <text x="150" y="147" class="lbl-bar">6 units</text>
    </g>

    
    <g id="row-05" class="bar-row">
      <text x="82" y="194" text-anchor="end" class="lbl">× ½</text>
      <text x="82" y="206" text-anchor="end" class="lbl-sub">Reduced</text>
      <rect x="90" y="185" width="60" height="24" class="bar bar-scale" />
      <text x="120" y="197" class="lbl-bar">3</text>
    </g>
  </svg>
</div>

<script>
  const buttons = document.querySelectorAll('.btn-tab');
  const rows = {
    '2': document.getElementById('row-2'),
    '1': document.getElementById('row-1'),
    '0.5': document.getElementById('row-05')
  };
  const projs = {
    '2': document.getElementById('proj-2'),
    '1': document.getElementById('proj-1'),
    '0.5': document.getElementById('proj-05')
  };

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      buttons.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      const mode = btn.dataset.mode;

      if (mode === 'all') {
        Object.values(rows).forEach(r => r.classList.remove('dimmed'));
        Object.values(projs).forEach(p => {
          p.style.opacity = '1';
          p.setAttribute('stroke-width', '2');
        });
      } else {
        Object.entries(rows).forEach(([key, r]) => {
          if (key === mode) {
            r.classList.remove('dimmed');
          } else {
            r.classList.add('dimmed');
          }
        });
        Object.entries(projs).forEach(([key, p]) => {
          if (key === mode) {
            p.style.opacity = '1';
            p.setAttribute('stroke-width', '2.5');
          } else {
            p.style.opacity = '0.12';
            p.setAttribute('stroke-width', '1');
          }
        });
      }
    });
  });
</script>

</body>
</html>

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

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

    .cards-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
    }

    .rule-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
    }

    /* Color Themes */
    .card-grow {
      border-color: #bbf7d0;
      background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 40%);
    }

    .card-same {
      border-color: #bfdbfe;
      background: linear-gradient(180deg, #eff6ff 0%, #ffffff 40%);
    }

    .card-shrink {
      border-color: #fed7aa;
      background: linear-gradient(180deg, #fff7ed 0%, #ffffff 40%);
    }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      white-space: nowrap;
    }

    .badge-grow {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #86efac;
    }

    .badge-same {
      background: #dbeafe;
      color: #1d4ed8;
      border: 1px solid #93c5fd;
    }

    .badge-shrink {
      background: #ffedd5;
      color: #c2410c;
      border: 1px solid #fdba74;
    }

    .icon-box {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 800;
    }

    .icon-grow {
      background: #22c55e;
      color: #ffffff;
    }

    .icon-same {
      background: #3b82f6;
      color: #ffffff;
    }

    .icon-shrink {
      background: #f97316;
      color: #ffffff;
    }

    .equation {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      gap: 3px;
      flex-wrap: wrap;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      font-size: 13px;
      line-height: 1;
      padding: 0 1px;
    }

    .fraction .top {
      border-bottom: 1.5px solid #1e2945;
      padding-bottom: 1px;
    }

    .fraction .bottom {
      padding-top: 1px;
    }

    .rel-sym {
      font-size: 17px;
      font-weight: 800;
      margin: 0 1px;
    }

    .sym-grow { color: #16a34a; }
    .sym-same { color: #2563eb; }
    .sym-shrink { color: #ea580c; }

    /* Visual Bars */
    .bars-container {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 6px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .bar-row {
      display: flex;
      align-items: center;
      gap: 4px;
      height: 14px;
    }

    .bar-label {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      width: 24px;
      text-align: right;
      flex-shrink: 0;
    }

    .bar-track {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      position: relative;
    }

    .bar {
      height: 10px;
      border-radius: 3px;
    }

    .bar-base {
      width: 64%;
      background: #cbd5e1;
    }

    .bar-res-grow {
      width: 80%;
      background: #22c55e;
    }

    .bar-res-same {
      width: 64%;
      background: #3b82f6;
    }

    .bar-res-shrink {
      width: 48%;
      background: #f97316;
    }

    .ref-line {
      position: absolute;
      left: 64%;
      top: -2px;
      bottom: -2px;
      width: 1px;
      border-left: 1.5px dashed #94a3b8;
    }

    @media (max-width: 420px) {
      .cards-grid {
        grid-template-columns: 1fr;
        max-width: 280px;
      }
      .rule-card {
        flex-direction: row;
        justify-content: space-between;
        padding: 8px 12px;
      }
      .bars-container {
        display: none;
      }
    }
  </style>
</head>
<body>

  <div class="cards-grid">
    
    <div class="rule-card card-grow">
      <div class="badge badge-grow">Factor &gt; 1</div>
      <div class="icon-box icon-grow">↗</div>
      
      <div class="equation">
        <span>8</span>
        <span>×</span>
        <div class="fraction">
          <span class="top">5</span>
          <span class="bottom">4</span>
        </div>
        <span class="rel-sym sym-grow">&gt;</span>
        <span>8</span>
      </div>

      <div class="bars-container">
        <div class="bar-row">
          <span class="bar-label">Start</span>
          <div class="bar-track">
            <div class="bar bar-base"></div>
          </div>
        </div>
        <div class="bar-row">
          <span class="bar-label">End</span>
          <div class="bar-track">
            <div class="ref-line"></div>
            <div class="bar bar-res-grow"></div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="rule-card card-same">
      <div class="badge badge-same">Factor = 1</div>
      <div class="icon-box icon-same">=</div>
      
      <div class="equation">
        <span>8</span>
        <span>×</span>
        <span>1</span>
        <span class="rel-sym sym-same">=</span>
        <span>8</span>
      </div>

      <div class="bars-container">
        <div class="bar-row">
          <span class="bar-label">Start</span>
          <div class="bar-track">
            <div class="bar bar-base"></div>
          </div>
        </div>
        <div class="bar-row">
          <span class="bar-label">End</span>
          <div class="bar-track">
            <div class="ref-line"></div>
            <div class="bar bar-res-same"></div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="rule-card card-shrink">
      <div class="badge badge-shrink">Factor &lt; 1</div>
      <div class="icon-box icon-shrink">↘</div>
      
      <div class="equation">
        <span>8</span>
        <span>×</span>
        <div class="fraction">
          <span class="top">3</span>
          <span class="bottom">4</span>
        </div>
        <span class="rel-sym sym-shrink">&lt;</span>
        <span>8</span>
      </div>

      <div class="bars-container">
        <div class="bar-row">
          <span class="bar-label">Start</span>
          <div class="bar-track">
            <div class="bar bar-base"></div>
          </div>
        </div>
        <div class="bar-row">
          <span class="bar-label">End</span>
          <div class="bar-track">
            <div class="ref-line"></div>
            <div class="bar bar-res-shrink"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
</html>

OGM.6.NF.5

Aligned learning resources

Related diagrams