<!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: transparent;
      color: #1e2945;
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }

    /* Filter buttons */
    .controls {
      display: flex;
      justify-content: center;
      gap: 8px;
    }

    .tab-btn {
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 20px;
      border: 1px solid #d1d5db;
      background: #ffffff;
      color: #4b5563;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    /* Rows list */
    .rows-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .num-row {
      background: #ffffff;
      border: 1.5px solid #e5e7eb;
      border-radius: 12px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .num-row:hover, .num-row.selected {
      border-color: #22b7ff;
      box-shadow: 0 0 0 2px rgba(34, 183, 255, 0.25);
    }

    .num-row.hidden {
      display: none;
    }

    /* Visual Rod and Ones */
    .visual-group {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    /* 10-Rod */
    .ten-rod {
      display: inline-flex;
      background: #10b981;
      border: 1.5px solid #059669;
      border-radius: 4px;
      padding: 1px;
      gap: 1px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .ten-segment {
      width: 11px;
      height: 18px;
      background: #34d399;
      border-radius: 1px;
    }

    .plus-sign {
      font-weight: 800;
      color: #9ca3af;
      font-size: 15px;
    }

    /* Loose ones */
    .ones-group {
      display: flex;
      gap: 3px;
      align-items: center;
      flex-wrap: wrap;
      max-width: 110px;
    }

    .unit-cube {
      width: 13px;
      height: 18px;
      background: #fb923c;
      border: 1.5px solid #ea580c;
      border-radius: 3px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    /* Equation / Label */
    .equation {
      font-size: 14px;
      font-weight: 700;
      white-space: nowrap;
      text-align: right;
    }

    .ten-txt {
      color: #059669;
    }

    .ones-txt {
      color: #ea580c;
    }

    .sum-txt {
      color: #1e2945;
      font-size: 16px;
      font-weight: 800;
    }
  </style>
</head>
<body>

  
  <div class="controls">
    <button class="tab-btn active" onclick="showNumber('all')">All</button>
    <button class="tab-btn" onclick="showNumber(12)">12</button>
    <button class="tab-btn" onclick="showNumber(15)">15</button>
    <button class="tab-btn" onclick="showNumber(18)">18</button>
  </div>

  <div class="rows-container">
    
    <div class="num-row selected" id="row-12" onclick="showNumber(12)">
      <div class="visual-group">
        <div class="ten-rod" title="1 ten (10)">
          <div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div>
          <div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div>
        </div>
        <span class="plus-sign">+</span>
        <div class="ones-group" title="2 ones">
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
        </div>
      </div>
      <div class="equation">
        <span class="ten-txt">1 ten</span> + <span class="ones-txt">2 ones</span> = <span class="sum-txt">12</span>
      </div>
    </div>

    
    <div class="num-row" id="row-15" onclick="showNumber(15)">
      <div class="visual-group">
        <div class="ten-rod" title="1 ten (10)">
          <div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div>
          <div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div>
        </div>
        <span class="plus-sign">+</span>
        <div class="ones-group" title="5 ones">
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
        </div>
      </div>
      <div class="equation">
        <span class="ten-txt">1 ten</span> + <span class="ones-txt">5 ones</span> = <span class="sum-txt">15</span>
      </div>
    </div>

    
    <div class="num-row" id="row-18" onclick="showNumber(18)">
      <div class="visual-group">
        <div class="ten-rod" title="1 ten (10)">
          <div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div>
          <div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div><div class="ten-segment"></div>
        </div>
        <span class="plus-sign">+</span>
        <div class="ones-group" title="8 ones">
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
        </div>
      </div>
      <div class="equation">
        <span class="ten-txt">1 ten</span> + <span class="ones-txt">8 ones</span> = <span class="sum-txt">18</span>
      </div>
    </div>
  </div>

  <script>
    function showNumber(val) {
      const rows = [12, 15, 18];
      const buttons = document.querySelectorAll('.tab-btn');

      // Update button styles
      buttons.forEach(btn => {
        const text = btn.textContent.trim().toLowerCase();
        if (text === String(val).toLowerCase()) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });

      // Update row visibility and highlighting
      rows.forEach(num => {
        const rowEl = document.getElementById('row-' + num);
        if (val === 'all') {
          rowEl.classList.remove('hidden');
          rowEl.classList.remove('selected');
        } else if (num === val) {
          rowEl.classList.remove('hidden');
          rowEl.classList.add('selected');
        } else {
          rowEl.classList.add('hidden');
          rowEl.classList.remove('selected');
        }
      });
    }
  </script>
</body>
</html>

Composing Numbers 11 to 19 as a Ten and Some Ones

<!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, "Comic Sans MS", sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 16px;
    }

    .frames-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 580px;
    }

    .frame-card {
      flex: 1;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .frame-label {
      font-size: 16px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
      display: inline-block;
      text-align: center;
      white-space: nowrap;
    }

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

    .label-yellow {
      background: #fef3c7;
      color: #b45309;
      border: 1.5px solid #fde68a;
    }

    .ten-frame {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 6px;
      background: #ffffff;
      border: 2px solid #94a3b8;
      border-radius: 10px;
      padding: 6px;
      width: 100%;
      max-width: 220px;
    }

    .cell {
      aspect-ratio: 1 / 1;
      background: #f8fafc;
      border: 1.5px dashed #cbd5e1;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    .dot {
      width: 80%;
      height: 80%;
      border-radius: 50%;
      cursor: pointer;
      transition: transform 0.15s ease, filter 0.15s ease;
    }

    .dot:active {
      transform: scale(0.9);
    }

    .dot-blue {
      background: radial-gradient(circle at 35% 35%, #38bdf8, #0284c7);
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.35);
      border: 1px solid #0369a1;
    }

    .dot-yellow {
      background: radial-gradient(circle at 35% 35%, #fde047, #eab308);
      box-shadow: 0 2px 4px rgba(202, 138, 4, 0.35);
      border: 1px solid #ca8a04;
    }

    .plus-sign {
      font-size: 28px;
      font-weight: 800;
      color: #94a3b8;
    }

    .equation-card {
      background: #f0fdf4;
      border: 2px solid #bbf7d0;
      border-radius: 16px;
      padding: 10px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 28px;
      font-weight: 800;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    }

    .num-blue { color: #0284c7; }
    .num-yellow { color: #d97706; }
    .sym-gray { color: #64748b; }
    .num-total { color: #16a34a; }

    @media (max-width: 440px) {
      .frames-container {
        gap: 8px;
      }
      .frame-label {
        font-size: 13px;
        padding: 3px 8px;
      }
      .ten-frame {
        gap: 4px;
        padding: 4px;
      }
      .plus-sign {
        font-size: 20px;
      }
      .equation-card {
        font-size: 22px;
        padding: 8px 18px;
        gap: 8px;
      }
    }
  </style>
</head>
<body>

  <div class="frames-container">
    
    <div class="frame-card">
      <div class="frame-label label-blue">1 Ten (10)</div>
      <div class="ten-frame" id="frameTen">
        <div class="cell"><div class="dot dot-blue" onclick="pop(260)"></div></div>
        <div class="cell"><div class="dot dot-blue" onclick="pop(280)"></div></div>
        <div class="cell"><div class="dot dot-blue" onclick="pop(300)"></div></div>
        <div class="cell"><div class="dot dot-blue" onclick="pop(320)"></div></div>
        <div class="cell"><div class="dot dot-blue" onclick="pop(340)"></div></div>
        <div class="cell"><div class="dot dot-blue" onclick="pop(360)"></div></div>
        <div class="cell"><div class="dot dot-blue" onclick="pop(380)"></div></div>
        <div class="cell"><div class="dot dot-blue" onclick="pop(400)"></div></div>
        <div class="cell"><div class="dot dot-blue" onclick="pop(420)"></div></div>
        <div class="cell"><div class="dot dot-blue" onclick="pop(440)"></div></div>
      </div>
    </div>

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

    
    <div class="frame-card">
      <div class="frame-label label-yellow">4 Ones (4)</div>
      <div class="ten-frame" id="frameOnes">
        <div class="cell"><div class="dot dot-yellow" onclick="pop(520)"></div></div>
        <div class="cell"><div class="dot dot-yellow" onclick="pop(560)"></div></div>
        <div class="cell"><div class="dot dot-yellow" onclick="pop(600)"></div></div>
        <div class="cell"><div class="dot dot-yellow" onclick="pop(640)"></div></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
      </div>
    </div>
  </div>

  
  <div class="equation-card">
    <span class="num-blue">10</span>
    <span class="sym-gray">+</span>
    <span class="num-yellow">4</span>
    <span class="sym-gray">=</span>
    <span class="num-total">14</span>
  </div>

  <script>
    function pop(freq) {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ctx = new AudioCtx();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(freq, ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(freq * 1.25, ctx.currentTime + 0.08);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.15);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.15);
      } catch (e) {}
    }
  </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;
      user-select: none;
      -webkit-user-select: none;
    }

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

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

    .comparison-grid {
      display: flex;
      align-items: stretch;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .number-card {
      flex: 1;
      background: #ffffff;
      border-radius: 14px;
      border: 2px solid #e2e8f0;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 230px;
      position: relative;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
      cursor: pointer;
    }

    .number-card.active {
      border-color: #22b7ff;
      box-shadow: 0 4px 16px rgba(34, 183, 255, 0.18);
    }

    .digit-header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 28px;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .d-tens {
      color: #0284c7;
      background: #e0f2fe;
      padding: 2px 8px;
      border-radius: 8px;
      display: inline-block;
      min-width: 32px;
      text-align: center;
    }

    .d-ones {
      color: #16a34a;
      background: #dcfce7;
      padding: 2px 8px;
      border-radius: 8px;
      display: inline-block;
      min-width: 32px;
      text-align: center;
    }

    .blocks-container {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 10px;
      flex: 1;
      width: 100%;
      padding: 8px 4px;
    }

    .rods-group {
      display: flex;
      align-items: flex-end;
      gap: 3px;
    }

    .rod {
      width: 9px;
      height: 90px;
      background: #38bdf8;
      border: 1.5px solid #0284c7;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 1px 0;
      box-sizing: border-box;
    }

    .rod-seg {
      width: 100%;
      height: 7px;
      border-bottom: 1px solid rgba(2, 132, 199, 0.35);
    }
    .rod-seg:last-child {
      border-bottom: none;
    }

    .units-group {
      display: grid;
      grid-template-columns: repeat(2, 9px);
      grid-auto-rows: 9px;
      gap: 3px;
      align-self: flex-end;
    }

    .cube {
      width: 9px;
      height: 9px;
      background: #4ade80;
      border: 1.5px solid #16a34a;
      border-radius: 2px;
    }

    .card-footer {
      margin-top: 8px;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      text-align: center;
      line-height: 1.2;
    }

    .card-footer .highlight-tens {
      color: #0284c7;
    }

    .card-footer .highlight-ones {
      color: #16a34a;
    }

    .swap-divider {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 40px;
    }

    .swap-btn {
      background: #ffffff;
      border: 2px solid #cbd5e1;
      border-radius: 50%;
      width: 38px;
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      color: #0284c7;
      cursor: pointer;
      transition: background 0.2s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

    .swap-btn:hover {
      background: #e0f2fe;
    }

    .swap-btn.rotated {
      transform: rotate(180deg);
    }

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

    .summary-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #eff6ff;
      border: 1px solid #bfdbfe;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 700;
      color: #1e3a8a;
    }

    @media (max-width: 380px) {
      .digit-header {
        font-size: 24px;
      }
      .rod {
        width: 7px;
        height: 75px;
      }
      .units-group {
        grid-template-columns: repeat(2, 7px);
        grid-auto-rows: 7px;
        gap: 2px;
      }
      .cube {
        width: 7px;
        height: 7px;
      }
      .card-footer {
        font-size: 12px;
      }
      .swap-divider {
        min-width: 32px;
      }
      .swap-btn {
        width: 32px;
        height: 32px;
        font-size: 15px;
      }
    }
  </style>
</head>
<body>

  <div class="main-stage">
    <div class="comparison-grid">
      
      
      <div class="number-card" id="cardA" onclick="focusCard('A')">
        <div class="digit-header">
          <span class="d-tens">3</span>
          <span class="d-ones">8</span>
        </div>
        <div class="blocks-container">
          <div class="rods-group" title="3 Tens">
            <div class="rod"><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div></div>
            <div class="rod"><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div></div>
            <div class="rod"><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div></div>
          </div>
          <div class="units-group" title="8 Ones">
            <div class="cube"></div><div class="cube"></div>
            <div class="cube"></div><div class="cube"></div>
            <div class="cube"></div><div class="cube"></div>
            <div class="cube"></div><div class="cube"></div>
          </div>
        </div>
        <div class="card-footer">
          <span class="highlight-tens">3 tens</span> &amp; <span class="highlight-ones">8 ones</span><br>= 38
        </div>
      </div>

      
      <div class="swap-divider">
        <button class="swap-btn" id="swapBtn" onclick="toggleSwap()" title="Switch Digits">⇄</button>
        <span class="swap-text">Swap</span>
      </div>

      
      <div class="number-card" id="cardB" onclick="focusCard('B')">
        <div class="digit-header">
          <span class="d-tens">8</span>
          <span class="d-ones">3</span>
        </div>
        <div class="blocks-container">
          <div class="rods-group" title="8 Tens">
            <div class="rod"><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div></div>
            <div class="rod"><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div></div>
            <div class="rod"><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div></div>
            <div class="rod"><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div></div>
            <div class="rod"><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div></div>
            <div class="rod"><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div></div>
            <div class="rod"><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div></div>
            <div class="rod"><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div><div class="rod-seg"></div></div>
          </div>
          <div class="units-group" title="3 Ones">
            <div class="cube"></div><div class="cube"></div>
            <div class="cube"></div>
          </div>
        </div>
        <div class="card-footer">
          <span class="highlight-tens">8 tens</span> &amp; <span class="highlight-ones">3 ones</span><br>= 83
        </div>
      </div>

    </div>

    <div class="summary-badge" id="badge">
      <span>83 is greater than 38</span>
    </div>
  </div>

  <script>
    let activeCard = 'B';
    const cardA = document.getElementById('cardA');
    const cardB = document.getElementById('cardB');
    const swapBtn = document.getElementById('swapBtn');
    const badge = document.getElementById('badge');

    function updateState() {
      if (activeCard === 'B') {
        cardB.classList.add('active');
        cardA.classList.remove('active');
        badge.innerHTML = '<span>8 tens &gt; 3 tens &nbsp;✦&nbsp; 83 &gt; 38</span>';
      } else {
        cardA.classList.add('active');
        cardB.classList.remove('active');
        badge.innerHTML = '<span>3 tens &lt; 8 tens &nbsp;✦&nbsp; 38 &lt; 83</span>';
      }
    }

    function toggleSwap() {
      swapBtn.classList.toggle('rotated');
      activeCard = (activeCard === 'A') ? 'B' : 'A';
      updateState();
    }

    function focusCard(card) {
      activeCard = card;
      updateState();
    }

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

Using Given Digits to Form Two-Digit Numbers

<!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: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      width: 100%;
      max-width: 600px;
    }

    @media (max-width: 440px) {
      .grid {
        grid-template-columns: 1fr;
        gap: 10px;
      }
    }

    .card-panel {
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
    }

    .card-panel.valid {
      border-color: #86efac;
      background: #f0fdf4;
    }

    .card-panel.invalid {
      border-color: #fecaca;
      background: #fff5f5;
    }

    /* Place Value Table */
    .pv-table {
      display: flex;
      border: 2px solid #cbd5e1;
      border-radius: 10px;
      background: #ffffff;
      overflow: hidden;
      margin-bottom: 10px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }

    .pv-col {
      padding: 4px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .pv-col:first-child {
      border-right: 2px solid #cbd5e1;
      background: #eff6ff;
    }

    .pv-col:last-child {
      background: #fefce8;
    }

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

    .pv-digit {
      font-size: 26px;
      font-weight: 800;
      line-height: 1;
    }

    .tens-color { color: #2563eb; }
    .ones-color { color: #d97706; }

    /* Visual Blocks Section */
    .blocks-area {
      height: 110px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-bottom: 10px;
      padding: 4px;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 10px;
    }

    /* 10-Rod */
    .ten-rod {
      width: 13px;
      height: 96px;
      background: #3b82f6;
      border: 1.5px solid #1d4ed8;
      border-radius: 3px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 1px 0;
    }

    .rod-segment {
      width: 100%;
      height: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    }

    .rod-segment:last-child {
      border-bottom: none;
    }

    /* Single Cubes */
    .cubes-row {
      display: flex;
      gap: 5px;
      align-items: center;
    }

    .unit-cube {
      width: 13px;
      height: 13px;
      background: #f59e0b;
      border: 1.5px solid #b45309;
      border-radius: 3px;
    }

    /* Result Tag */
    .result-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 800;
      padding: 6px 12px;
      border-radius: 20px;
      margin-bottom: 4px;
    }

    .badge-valid {
      background: #22c55e;
      color: #ffffff;
    }

    .badge-invalid {
      background: #ef4444;
      color: #ffffff;
    }

    .desc-text {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="card-panel valid">
      <div class="pv-table">
        <div class="pv-col">
          <span class="pv-label">Tens</span>
          <span class="pv-digit tens-color">5</span>
        </div>
        <div class="pv-col">
          <span class="pv-label">Ones</span>
          <span class="pv-digit ones-color">0</span>
        </div>
      </div>

      <div class="blocks-area" aria-label="5 ten-rods">
        <div class="ten-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="ten-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="ten-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="ten-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="ten-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="result-badge badge-valid">
        <span>50</span>
        <span>✓</span>
      </div>
      <div class="desc-text">2-digit number</div>
    </div>

    
    <div class="card-panel invalid">
      <div class="pv-table">
        <div class="pv-col">
          <span class="pv-label">Tens</span>
          <span class="pv-digit tens-color">0</span>
        </div>
        <div class="pv-col">
          <span class="pv-label">Ones</span>
          <span class="pv-digit ones-color">5</span>
        </div>
      </div>

      <div class="blocks-area" aria-label="5 single unit cubes">
        <div class="cubes-row">
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
          <div class="unit-cube"></div>
        </div>
      </div>

      <div class="result-badge badge-invalid">
        <span>05 = 5</span>
        <span>✕</span>
      </div>
      <div class="desc-text">1-digit number</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">
  <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;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 12px;
      min-height: 100%;
    }

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

    /* House Structure */
    .house {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .roof {
      width: 100%;
      display: flex;
      height: 44px;
    }

    .roof-tens {
      flex: 1;
      background: #2563eb;
      clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 4px;
      color: #ffffff;
      font-weight: 800;
      font-size: 15px;
      letter-spacing: 0.5px;
    }

    .roof-ones {
      flex: 1;
      background: #16a34a;
      clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 4px;
      color: #ffffff;
      font-weight: 800;
      font-size: 15px;
      letter-spacing: 0.5px;
    }

    .rooms {
      width: 100%;
      display: flex;
      border: 3px solid #e2e8f0;
      border-top: none;
      border-radius: 0 0 16px 16px;
      overflow: hidden;
      background: #f8fafc;
    }

    .room {
      flex: 1;
      padding: 16px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 200px;
    }

    .room-tens {
      background: #eff6ff;
      border-right: 2px dashed #cbd5e1;
    }

    .room-ones {
      background: #f0fdf4;
    }

    .blocks-container {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 10px;
      height: 150px;
      width: 100%;
    }

    /* Ten Rod */
    .ten-rod {
      display: flex;
      flex-direction: column;
      width: 14px;
      height: 140px;
      background: #1d4ed8;
      border-radius: 3px;
      overflow: hidden;
      box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
    }

    .cube-segment {
      flex: 1;
      border-bottom: 1px solid rgba(255, 255, 255, 0.45);
      background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    }
    .cube-segment:last-child {
      border-bottom: none;
    }

    /* Ones Grid */
    .ones-grid {
      display: grid;
      grid-template-columns: repeat(2, 14px);
      grid-template-rows: repeat(4, 14px);
      gap: 6px;
      align-content: end;
      height: 140px;
    }

    .unit-cube {
      width: 14px;
      height: 14px;
      background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
      border-radius: 3px;
      border: 1px solid #15803d;
      box-shadow: 0 2px 3px rgba(22, 163, 74, 0.25);
    }

    .room-tag {
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 12px;
      margin-top: 10px;
    }

    .tag-tens {
      background: #dbeafe;
      color: #1e40af;
    }

    .tag-ones {
      background: #dcfce7;
      color: #166534;
    }

    /* Bottom Display */
    .equation-card {
      width: 100%;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    }

    .digits-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .digit-box {
      width: 44px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 900;
      border-radius: 10px;
      color: #ffffff;
    }

    .box-tens {
      background: #2563eb;
      box-shadow: 0 3px 6px rgba(37, 99, 235, 0.3);
    }

    .box-ones {
      background: #16a34a;
      box-shadow: 0 3px 6px rgba(22, 163, 74, 0.3);
    }

    .digit-symbol {
      font-size: 24px;
      font-weight: 800;
      color: #64748b;
    }

    .total-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 48px;
      padding: 0 16px;
      font-size: 30px;
      font-weight: 900;
      color: #1e2945;
      background: #f1f5f9;
      border-radius: 10px;
      border: 2px solid #cbd5e1;
    }

    .expanded-math {
      font-size: 15px;
      font-weight: 700;
      color: #64748b;
    }

    .math-tens { color: #2563eb; }
    .math-ones { color: #16a34a; }
    .math-total { color: #1e2945; }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="house">
      <div class="roof">
        <div class="roof-tens">Tens</div>
        <div class="roof-ones">Ones</div>
      </div>

      <div class="rooms">
        
        <div class="room room-tens">
          <div class="blocks-container">
            
            <div class="ten-rod">
              <div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div>
              <div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div>
            </div>
            <div class="ten-rod">
              <div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div>
              <div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div>
            </div>
            <div class="ten-rod">
              <div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div>
              <div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div><div class="cube-segment"></div>
            </div>
          </div>
          <div class="room-tag tag-tens">3 Tens (30)</div>
        </div>

        
        <div class="room room-ones">
          <div class="blocks-container">
            
            <div class="ones-grid">
              <div class="unit-cube"></div><div class="unit-cube"></div>
              <div class="unit-cube"></div><div class="unit-cube"></div>
              <div class="unit-cube"></div><div class="unit-cube"></div>
              <div class="unit-cube"></div><div class="unit-cube"></div>
            </div>
          </div>
          <div class="room-tag tag-ones">8 Ones (8)</div>
        </div>
      </div>
    </div>

    
    <div class="equation-card">
      <div class="digits-row">
        <div class="digit-box box-tens">3</div>
        <div class="digit-box box-ones">8</div>
        <div class="digit-symbol">=</div>
        <div class="total-badge">38</div>
      </div>
      <div class="expanded-math">
        <span class="math-tens">30</span> + <span class="math-ones">8</span> = <span class="math-total">38</span>
      </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">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

    /* Place Value Grid */
    .chart-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1.1fr;
      gap: 8px;
      width: 100%;
      max-width: 480px;
    }

    .column-box {
      border-radius: 16px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 210px;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
      border: 2px solid transparent;
    }

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

    .column-box.active {
      transform: translateY(-2px);
    }

    /* Column themes */
    .col-hundreds {
      background: #eff6ff;
      border-color: #bfdbfe;
    }
    .col-hundreds.active {
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px #93c5fd;
    }

    .col-tens {
      background: #f0fdf4;
      border-color: #bbf7d0;
    }
    .col-tens.active {
      border-color: #22c55e;
      box-shadow: 0 0 0 2px #86efac;
    }

    .col-ones {
      background: #fffbeb;
      border-color: #fde68a;
    }
    .col-ones.active {
      border-color: #f59e0b;
      box-shadow: 0 0 0 2px #fcd34d;
    }

    /* Column Headers */
    .col-header {
      text-align: center;
      width: 100%;
    }

    .col-title {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .col-hundreds .col-title { color: #1d4ed8; }
    .col-tens .col-title { color: #15803d; }
    .col-ones .col-title { color: #b45309; }

    .digit-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      font-size: 16px;
      font-weight: 800;
      margin-top: 4px;
      color: #fff;
    }

    .col-hundreds .digit-pill { background: #3b82f6; }
    .col-tens .digit-pill { background: #22c55e; }
    .col-ones .digit-pill { background: #f59e0b; }

    /* Block Display Areas */
    .block-area {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-grow: 1;
      width: 100%;
      padding: 6px 0;
    }

    /* SVG Blocks */
    svg.block-svg {
      overflow: visible;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.08));
    }

    .ones-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      align-items: center;
      justify-items: center;
    }

    /* Value Badges */
    .val-badge {
      font-size: 13px;
      font-weight: 800;
      padding: 3px 10px;
      border-radius: 12px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.08);
    }

    .col-hundreds .val-badge { color: #1d4ed8; }
    .col-tens .val-badge { color: #15803d; }
    .col-ones .val-badge { color: #b45309; }

    /* Bottom Equation Badge */
    .equation-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 18px;
      padding: 8px 16px;
      font-size: 18px;
      font-weight: 800;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      flex-wrap: wrap;
    }

    .eq-num {
      padding: 2px 8px;
      border-radius: 8px;
      transition: all 0.2s ease;
    }

    .eq-num.h { color: #2563eb; background: #eff6ff; }
    .eq-num.t { color: #16a34a; background: #f0fdf4; }
    .eq-num.o { color: #d97706; background: #fffbeb; }
    .eq-num.total {
      color: #1e2945;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      padding: 2px 10px;
      border-radius: 10px;
    }

    .eq-op {
      color: #94a3b8;
      font-size: 16px;
      font-weight: 900;
    }

    /* Responsive adjustments */
    @media (max-width: 360px) {
      .col-title { font-size: 11px; }
      .digit-pill { width: 24px; height: 24px; font-size: 14px; }
      .equation-bar { font-size: 15px; padding: 6px 10px; gap: 4px; }
      .val-badge { font-size: 11px; padding: 2px 6px; }
    }
  </style>
</head>
<body>

  
  <div class="chart-grid">
    
    
    <div class="column-box col-hundreds" id="col-h" onclick="selectCol('h')">
      <div class="col-header">
        <div class="col-title">Hundreds</div>
        <div class="digit-pill">1</div>
      </div>
      
      <div class="block-area">
        <svg class="block-svg" width="92" height="92" viewBox="0 0 100 100">
          <defs>
            <pattern id="grid100" width="10" height="10" patternUnits="userSpaceOnUse">
              <rect width="10" height="10" fill="#60a5fa" stroke="#3b82f6" stroke-width="0.75" />
            </pattern>
          </defs>
          <rect x="1" y="1" width="98" height="98" rx="4" fill="url(#grid100)" stroke="#2563eb" stroke-width="1.5" />
        </svg>
      </div>

      <div class="val-badge">100</div>
    </div>

    
    <div class="column-box col-tens" id="col-t" onclick="selectCol('t')">
      <div class="col-header">
        <div class="col-title">Tens</div>
        <div class="digit-pill">1</div>
      </div>

      <div class="block-area">
        <svg class="block-svg" width="18" height="92" viewBox="0 0 12 100">
          <defs>
            <pattern id="grid10" width="12" height="10" patternUnits="userSpaceOnUse">
              <rect width="12" height="10" fill="#4ade80" stroke="#22c55e" stroke-width="0.75" />
            </pattern>
          </defs>
          <rect x="1" y="1" width="10" height="98" rx="2" fill="url(#grid10)" stroke="#16a34a" stroke-width="1.5" />
        </svg>
      </div>

      <div class="val-badge">10</div>
    </div>

    
    <div class="column-box col-ones" id="col-o" onclick="selectCol('o')">
      <div class="col-header">
        <div class="col-title">Ones</div>
        <div class="digit-pill">4</div>
      </div>

      <div class="block-area">
        <div class="ones-container">
          <svg class="block-svg" width="18" height="18" viewBox="0 0 14 14">
            <rect x="1" y="1" width="12" height="12" rx="2" fill="#fbbf24" stroke="#d97706" stroke-width="1.5" />
          </svg>
          <svg class="block-svg" width="18" height="18" viewBox="0 0 14 14">
            <rect x="1" y="1" width="12" height="12" rx="2" fill="#fbbf24" stroke="#d97706" stroke-width="1.5" />
          </svg>
          <svg class="block-svg" width="18" height="18" viewBox="0 0 14 14">
            <rect x="1" y="1" width="12" height="12" rx="2" fill="#fbbf24" stroke="#d97706" stroke-width="1.5" />
          </svg>
          <svg class="block-svg" width="18" height="18" viewBox="0 0 14 14">
            <rect x="1" y="1" width="12" height="12" rx="2" fill="#fbbf24" stroke="#d97706" stroke-width="1.5" />
          </svg>
        </div>
      </div>

      <div class="val-badge">4</div>
    </div>

  </div>

  
  <div class="equation-bar">
    <span class="eq-num h" id="eq-h">100</span>
    <span class="eq-op">+</span>
    <span class="eq-num t" id="eq-t">10</span>
    <span class="eq-op">+</span>
    <span class="eq-num o" id="eq-o">4</span>
    <span class="eq-op">=</span>
    <span class="eq-num total">114</span>
  </div>

  <script>
    let activeKey = null;

    function selectCol(key) {
      const cols = ['h', 't', 'o'];
      if (activeKey === key) {
        activeKey = null;
      } else {
        activeKey = key;
      }

      cols.forEach(k => {
        const colEl = document.getElementById('col-' + k);
        const eqEl = document.getElementById('eq-' + k);
        
        if (activeKey === k) {
          colEl.classList.add('active');
          eqEl.style.transform = 'scale(1.12)';
          eqEl.style.boxShadow = '0 2px 6px rgba(0,0,0,0.12)';
        } else {
          colEl.classList.remove('active');
          eqEl.style.transform = 'scale(1)';
          eqEl.style.boxShadow = 'none';
        }
      });
    }
  </script>
</body>
</html>

Representing Numbers to 120 With Base Ten Blocks

<!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: transparent;
      color: #0f172a;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .instructions {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      margin-bottom: 8px;
      text-align: center;
    }
    .comparison-container {
      display: flex;
      flex-direction: row;
      gap: 12px;
      width: 100%;
      max-width: 560px;
      justify-content: center;
    }
    .number-card {
      flex: 1;
      min-width: 0;
      background: #ffffff;
      border-radius: 12px;
      border: 1.5px solid #cbd5e1;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      user-select: none;
      transition: border-color 0.2s ease, background-color 0.2s ease;
    }
    .number-card.active {
      border-color: #2563eb;
      background: #f8faff;
      outline: 2px solid #3b82f6;
      outline-offset: 1px;
    }
    .big-number {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 2px;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .digit-hundreds { color: #0284c7; }
    .digit-tens { color: #7c3aed; }
    .digit-ones { color: #d97706; }
    .digit-zero { 
      color: #0f172a; 
      background: #e2e8f0;
      border: 1px solid #94a3b8;
      border-radius: 5px;
      padding: 0 4px;
      line-height: 1.1;
    }

    .blocks-container {
      width: 100%;
      background: #f8fafc;
      border-radius: 8px;
      padding: 6px 4px;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      height: 74px;
      border: 1px solid #e2e8f0;
    }
    
    .place-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      flex: 1;
      height: 100%;
    }

    .flat-svg {
      width: 52px;
      height: 52px;
      filter: drop-shadow(0 1px 2px rgba(2, 132, 199, 0.2));
    }
    .rods-wrap {
      display: flex;
      gap: 2px;
      align-items: flex-end;
      justify-content: center;
      height: 52px;
    }
    .rod-svg {
      width: 5.5px;
      height: 52px;
    }
    .units-wrap {
      display: grid;
      grid-template-columns: repeat(2, 7.5px);
      gap: 2.5px;
      justify-content: center;
      align-content: flex-end;
      height: 52px;
    }
    .unit-cube {
      width: 7.5px;
      height: 7.5px;
      background: #f59e0b;
      border-radius: 1.5px;
      border: 1px solid #b45309;
    }

    .empty-placeholder {
      width: 88%;
      height: 52px;
      border: 1.5px dashed #64748b;
      border-radius: 6px;
      background: #edf2f7;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2px;
    }
    .number-card.active .empty-placeholder {
      border-color: #475569;
      background: #e2e8f0;
    }
    .zero-icon {
      font-size: 13px;
      font-weight: 800;
      color: #0f172a;
      line-height: 1;
    }
    .zero-label {
      font-size: 10.5px;
      font-weight: 700;
      color: #334155;
      margin-top: 2px;
      line-height: 1;
    }

    .equation-bar {
      margin-top: 8px;
      font-size: 13px;
      font-weight: 800;
      color: #1e293b;
      background: #f1f5f9;
      padding: 4px 8px;
      border-radius: 14px;
      border: 1px solid #cbd5e1;
      display: flex;
      align-items: center;
      gap: 3px;
      white-space: nowrap;
    }
    .eq-100 { color: #0284c7; }
    .eq-tens { color: #7c3aed; }
    .eq-ones { color: #d97706; }
    .eq-zero { 
      color: #0f172a; 
      background: #e2e8f0;
      padding: 0 4px;
      border-radius: 3px;
      border: 1px solid #94a3b8;
    }

    @media (max-width: 460px) {
      .comparison-container {
        flex-direction: column;
        gap: 10px;
        max-width: 320px;
      }
      .number-card {
        padding: 8px;
      }
      .big-number {
        font-size: 24px;
        margin-bottom: 4px;
      }
      .blocks-container {
        height: 64px;
      }
      .flat-svg { width: 44px; height: 44px; }
      .rod-svg { height: 44px; width: 5px; }
      .rods-wrap, .empty-placeholder, .units-wrap { height: 44px; }
      .unit-cube { width: 6.5px; height: 6.5px; }
      .equation-bar { font-size: 12px; margin-top: 6px; }
    }
  </style>
</head>
<body>

  <div class="instructions">Click a card to highlight its place value breakdown</div>

  <div class="comparison-container">
    
    <div class="number-card active" id="cardA" onclick="selectCard('A')">
      <div class="big-number">
        <span class="digit-hundreds">1</span>
        <span class="digit-zero">0</span>
        <span class="digit-ones">7</span>
      </div>

      <div class="blocks-container">
        
        <div class="place-col">
          <svg class="flat-svg" viewBox="0 0 50 50" aria-label="1 flat representing 100">
            <rect x="0" y="0" width="50" height="50" rx="3" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5" />
            <path d="M5,0 v50 M10,0 v50 M15,0 v50 M20,0 v50 M25,0 v50 M30,0 v50 M35,0 v50 M40,0 v50 M45,0 v50" stroke="#0284c7" stroke-width="0.7" opacity="0.6"/>
            <path d="M0,5 h50 M0,10 h50 M0,15 h50 M0,20 h50 M0,25 h50 M0,30 h50 M0,35 h50 M0,40 h50 M0,45 h50" stroke="#0284c7" stroke-width="0.7" opacity="0.6"/>
          </svg>
        </div>

        
        <div class="place-col">
          <div class="empty-placeholder">
            <div class="zero-icon">0</div>
            <div class="zero-label">0 tens</div>
          </div>
        </div>

        
        <div class="place-col">
          <div class="units-wrap">
            <div class="unit-cube"></div>
            <div class="unit-cube"></div>
            <div class="unit-cube"></div>
            <div class="unit-cube"></div>
            <div class="unit-cube"></div>
            <div class="unit-cube"></div>
            <div class="unit-cube"></div>
          </div>
        </div>
      </div>

      <div class="equation-bar">
        <span class="eq-100">100</span> + <span class="eq-zero">0</span> + <span class="eq-ones">7</span> = <strong>107</strong>
      </div>
    </div>

    
    <div class="number-card" id="cardB" onclick="selectCard('B')">
      <div class="big-number">
        <span class="digit-hundreds">1</span>
        <span class="digit-tens">7</span>
        <span class="digit-zero">0</span>
      </div>

      <div class="blocks-container">
        
        <div class="place-col">
          <svg class="flat-svg" viewBox="0 0 50 50" aria-label="1 flat representing 100">
            <rect x="0" y="0" width="50" height="50" rx="3" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5" />
            <path d="M5,0 v50 M10,0 v50 M15,0 v50 M20,0 v50 M25,0 v50 M30,0 v50 M35,0 v50 M40,0 v50 M45,0 v50" stroke="#0284c7" stroke-width="0.7" opacity="0.6"/>
            <path d="M0,5 h50 M0,10 h50 M0,15 h50 M0,20 h50 M0,25 h50 M0,30 h50 M0,35 h50 M0,40 h50 M0,45 h50" stroke="#0284c7" stroke-width="0.7" opacity="0.6"/>
          </svg>
        </div>

        
        <div class="place-col">
          <div class="rods-wrap">
            <svg class="rod-svg" viewBox="0 0 6 50"><rect x="0" y="0" width="6" height="50" rx="1" fill="#c4b5fd" stroke="#7c3aed" stroke-width="1"/><line x1="0" y1="5" x2="6" y2="5" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="10" x2="6" y2="10" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="15" x2="6" y2="15" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="20" x2="6" y2="20" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="25" x2="6" y2="25" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="30" x2="6" y2="30" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="35" x2="6" y2="35" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="40" x2="6" y2="40" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="45" x2="6" y2="45" stroke="#7c3aed" stroke-width="0.6"/></svg>
            <svg class="rod-svg" viewBox="0 0 6 50"><rect x="0" y="0" width="6" height="50" rx="1" fill="#c4b5fd" stroke="#7c3aed" stroke-width="1"/><line x1="0" y1="5" x2="6" y2="5" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="10" x2="6" y2="10" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="15" x2="6" y2="15" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="20" x2="6" y2="20" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="25" x2="6" y2="25" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="30" x2="6" y2="30" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="35" x2="6" y2="35" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="40" x2="6" y2="40" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="45" x2="6" y2="45" stroke="#7c3aed" stroke-width="0.6"/></svg>
            <svg class="rod-svg" viewBox="0 0 6 50"><rect x="0" y="0" width="6" height="50" rx="1" fill="#c4b5fd" stroke="#7c3aed" stroke-width="1"/><line x1="0" y1="5" x2="6" y2="5" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="10" x2="6" y2="10" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="15" x2="6" y2="15" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="20" x2="6" y2="20" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="25" x2="6" y2="25" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="30" x2="6" y2="30" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="35" x2="6" y2="35" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="40" x2="6" y2="40" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="45" x2="6" y2="45" stroke="#7c3aed" stroke-width="0.6"/></svg>
            <svg class="rod-svg" viewBox="0 0 6 50"><rect x="0" y="0" width="6" height="50" rx="1" fill="#c4b5fd" stroke="#7c3aed" stroke-width="1"/><line x1="0" y1="5" x2="6" y2="5" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="10" x2="6" y2="10" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="15" x2="6" y2="15" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="20" x2="6" y2="20" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="25" x2="6" y2="25" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="30" x2="6" y2="30" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="35" x2="6" y2="35" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="40" x2="6" y2="40" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="45" x2="6" y2="45" stroke="#7c3aed" stroke-width="0.6"/></svg>
            <svg class="rod-svg" viewBox="0 0 6 50"><rect x="0" y="0" width="6" height="50" rx="1" fill="#c4b5fd" stroke="#7c3aed" stroke-width="1"/><line x1="0" y1="5" x2="6" y2="5" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="10" x2="6" y2="10" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="15" x2="6" y2="15" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="20" x2="6" y2="20" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="25" x2="6" y2="25" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="30" x2="6" y2="30" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="35" x2="6" y2="35" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="40" x2="6" y2="40" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="45" x2="6" y2="45" stroke="#7c3aed" stroke-width="0.6"/></svg>
            <svg class="rod-svg" viewBox="0 0 6 50"><rect x="0" y="0" width="6" height="50" rx="1" fill="#c4b5fd" stroke="#7c3aed" stroke-width="1"/><line x1="0" y1="5" x2="6" y2="5" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="10" x2="6" y2="10" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="15" x2="6" y2="15" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="20" x2="6" y2="20" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="25" x2="6" y2="25" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="30" x2="6" y2="30" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="35" x2="6" y2="35" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="40" x2="6" y2="40" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="45" x2="6" y2="45" stroke="#7c3aed" stroke-width="0.6"/></svg>
            <svg class="rod-svg" viewBox="0 0 6 50"><rect x="0" y="0" width="6" height="50" rx="1" fill="#c4b5fd" stroke="#7c3aed" stroke-width="1"/><line x1="0" y1="5" x2="6" y2="5" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="10" x2="6" y2="10" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="15" x2="6" y2="15" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="20" x2="6" y2="20" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="25" x2="6" y2="25" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="30" x2="6" y2="30" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="35" x2="6" y2="35" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="40" x2="6" y2="40" stroke="#7c3aed" stroke-width="0.6"/><line x1="0" y1="45" x2="6" y2="45" stroke="#7c3aed" stroke-width="0.6"/></svg>
          </div>
        </div>

        
        <div class="place-col">
          <div class="empty-placeholder">
            <div class="zero-icon">0</div>
            <div class="zero-label">0 ones</div>
          </div>
        </div>
      </div>

      <div class="equation-bar">
        <span class="eq-100">100</span> + <span class="eq-tens">70</span> + <span class="eq-zero">0</span> = <strong>170</strong>
      </div>
    </div>
  </div>

  <script>
    function selectCard(card) {
      document.getElementById('cardA').classList.toggle('active', card === 'A');
      document.getElementById('cardB').classList.toggle('active', card === 'B');
    }
  </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">
  <title>Number 120 with Base Ten Blocks</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
      -webkit-user-select: none;
    }

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

    /* Blocks Display Area */
    .blocks-container {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 20px;
      width: 100%;
      padding: 10px 6px;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }

    .block-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      padding: 6px 8px;
      border-radius: 8px;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .block-group:hover, .block-group.active {
      background: #ffffff;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
      transform: translateY(-2px);
    }

    .block-group.active {
      outline: 2px solid #3b82f6;
    }

    .block-label {
      font-size: 13px;
      font-weight: 700;
      color: #475569;
    }

    .hundred-label { color: #2563eb; }
    .tens-label { color: #059669; }
    .ones-label { color: #d97706; }

    /* SVG Blocks */
    .flat-svg {
      width: 120px;
      height: 120px;
    }

    .rods-wrapper {
      display: flex;
      gap: 6px;
      align-items: flex-end;
      height: 120px;
    }

    .rod-svg {
      width: 15px;
      height: 120px;
    }

    .empty-ones {
      width: 40px;
      height: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 2px dashed #cbd5e1;
      border-radius: 6px;
      color: #94a3b8;
      font-size: 12px;
      font-weight: 600;
      text-align: center;
      line-height: 1.2;
    }

    /* Place Value Table */
    .pv-table {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
    }

    .pv-col {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 6px 4px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .pv-col.active {
      border-color: currentColor;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      background: #f8fafc;
    }

    .pv-col.h-col { color: #2563eb; }
    .pv-col.t-col { color: #059669; }
    .pv-col.o-col { color: #d97706; }

    .pv-header {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .pv-digit {
      font-size: 22px;
      font-weight: 800;
      line-height: 1;
    }

    /* Glowing Sum Pill */
    .sum-pill {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 9999px;
      padding: 8px 18px;
      font-size: 18px;
      font-weight: 800;
      box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12), 0 0 12px rgba(37, 99, 235, 0.08);
      width: 100%;
    }

    .num-100 { color: #2563eb; }
    .num-20 { color: #059669; }
    .num-0 { color: #d97706; }
    .num-total { color: #1e2945; }
    .op { color: #94a3b8; font-weight: 600; font-size: 16px; }

    /* Interactive hint */
    .hint {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-top: -4px;
    }
  </style>
</head>
<body>

  <div class="diagram">
    
    <div class="blocks-container">
      
      <div class="block-group active" id="group-hundred" onclick="selectPart('hundred')">
        <svg class="flat-svg" viewBox="0 0 100 100">
          <defs>
            <pattern id="grid100" width="10" height="10" patternUnits="userSpaceOnUse">
              <rect width="10" height="10" fill="#eff6ff" stroke="#3b82f6" stroke-width="0.8" />
            </pattern>
          </defs>
          <rect width="100" height="100" fill="url(#grid100)" rx="2" stroke="#2563eb" stroke-width="1.5" />
        </svg>
        <span class="block-label hundred-label">1 Flat = 100</span>
      </div>

      
      <div class="block-group active" id="group-tens" onclick="selectPart('tens')">
        <div class="rods-wrapper">
          <svg class="rod-svg" viewBox="0 0 10 100">
            <defs>
              <pattern id="grid10a" width="10" height="10" patternUnits="userSpaceOnUse">
                <rect width="10" height="10" fill="#ecfdf5" stroke="#10b981" stroke-width="0.8" />
              </pattern>
            </defs>
            <rect width="10" height="100" fill="url(#grid10a)" rx="1.5" stroke="#059669" stroke-width="1.5" />
          </svg>
          <svg class="rod-svg" viewBox="0 0 10 100">
            <defs>
              <pattern id="grid10b" width="10" height="10" patternUnits="userSpaceOnUse">
                <rect width="10" height="10" fill="#ecfdf5" stroke="#10b981" stroke-width="0.8" />
              </pattern>
            </defs>
            <rect width="10" height="100" fill="url(#grid10b)" rx="1.5" stroke="#059669" stroke-width="1.5" />
          </svg>
        </div>
        <span class="block-label tens-label">2 Rods = 20</span>
      </div>

      
      <div class="block-group active" id="group-ones" onclick="selectPart('ones')">
        <div class="empty-ones">
          <span>0<br>ones</span>
        </div>
        <span class="block-label ones-label">0 Units = 0</span>
      </div>
    </div>

    
    <div class="pv-table">
      <div class="pv-col h-col active" id="pv-hundred" onclick="selectPart('hundred')">
        <div class="pv-header">Hundreds</div>
        <div class="pv-digit">1</div>
      </div>
      <div class="pv-col t-col active" id="pv-tens" onclick="selectPart('tens')">
        <div class="pv-header">Tens</div>
        <div class="pv-digit">2</div>
      </div>
      <div class="pv-col o-col active" id="pv-ones" onclick="selectPart('ones')">
        <div class="pv-header">Ones</div>
        <div class="pv-digit">0</div>
      </div>
    </div>

    
    <div class="sum-pill" id="sum-pill">
      <span class="num-100" id="sum-100">100</span>
      <span class="op">+</span>
      <span class="num-20" id="sum-20">20</span>
      <span class="op">+</span>
      <span class="num-0" id="sum-0">0</span>
      <span class="op">=</span>
      <span class="num-total">120</span>
    </div>

    <div class="hint">Tap blocks or columns to inspect</div>
  </div>

  <script>
    let currentSelection = 'all';

    function selectPart(part) {
      if (currentSelection === part) {
        currentSelection = 'all';
      } else {
        currentSelection = part;
      }
      updateView();
    }

    function updateView() {
      const parts = ['hundred', 'tens', 'ones'];
      
      parts.forEach(p => {
        const bg = document.getElementById('group-' + p);
        const pv = document.getElementById('pv-' + p);
        
        const isSelected = currentSelection === 'all' || currentSelection === p;
        
        if (isSelected) {
          bg.classList.add('active');
          pv.classList.add('active');
          bg.style.opacity = '1';
          pv.style.opacity = '1';
        } else {
          bg.classList.remove('active');
          pv.classList.remove('active');
          bg.style.opacity = '0.35';
          pv.style.opacity = '0.35';
        }
      });

      // Update pill highlighting
      const s100 = document.getElementById('sum-100');
      const s20 = document.getElementById('sum-20');
      const s0 = document.getElementById('sum-0');

      s100.style.opacity = (currentSelection === 'all' || currentSelection === 'hundred') ? '1' : '0.3';
      s20.style.opacity = (currentSelection === 'all' || currentSelection === 'tens') ? '1' : '0.3';
      s0.style.opacity = (currentSelection === 'all' || currentSelection === 'ones') ? '1' : '0.3';
    }
  </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: 12px 8px;
      user-select: none;
    }

    .blocks-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      gap: 8px;
      padding: 16px 4px 8px;
    }

    .block-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      cursor: pointer;
      flex: 1;
      padding: 8px 4px;
      border-radius: 12px;
      transition: background-color 0.2s ease, box-shadow 0.2s ease;
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .block-card:hover {
      background: #f8fafc;
    }

    .block-card.active {
      box-shadow: 0 0 0 2px var(--accent-color), 0 4px 12px rgba(0, 0, 0, 0.08);
      background: #ffffff;
    }

    .block-stage {
      height: 130px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      width: 100%;
      padding-bottom: 6px;
    }

    /* Proportional SVG block sizing (unit = 11px) */
    svg.cube-svg {
      width: 15px;
      height: 15px;
    }

    svg.rod-svg {
      width: 15px;
      height: 114px;
    }

    svg.flat-svg {
      width: 114px;
      height: 114px;
    }

    /* Badges */
    .badge {
      display: inline-block;
      font-size: 13px;
      font-weight: 700;
      color: #ffffff;
      padding: 3px 8px;
      border-radius: 6px;
      margin-top: 8px;
      text-align: center;
      line-height: 1.2;
    }

    .badge-one { background-color: #22b7ff; }
    .badge-ten { background-color: #48bb78; }
    .badge-hundred { background-color: #ed8936; }

    .sub-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 4px;
      text-align: center;
      white-space: nowrap;
    }

    /* Interactive Comparison Bar */
    .relationship-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      background: #f1f5f9;
      padding: 6px 14px;
      border-radius: 20px;
    }

    .rel-pill {
      font-weight: 700;
      color: #0f172a;
    }
  </style>
</head>
<body>

  <div class="blocks-container">
    
    <div class="block-card active" style="--accent-color: #22b7ff;" onclick="selectBlock(0)">
      <div class="block-stage">
        <svg class="cube-svg" viewBox="0 0 12 12" fill="none">
          <rect x="0.5" y="0.5" width="11" height="11" rx="1.5" fill="#fef08a" stroke="#ca8a04" stroke-width="1"/>
          <path d="M1 1L3 3M11 1L9 3" stroke="#fde047" stroke-width="0.75" stroke-linecap="round"/>
        </svg>
      </div>
      <span class="badge badge-one">1 One</span>
      <span class="sub-label">1 cube</span>
    </div>

    
    <div class="block-card" style="--accent-color: #48bb78;" onclick="selectBlock(1)">
      <div class="block-stage">
        <svg class="rod-svg" viewBox="0 0 12 111" fill="none">
          
          <g fill="#fef08a" stroke="#ca8a04" stroke-width="1">
            <rect x="0.5" y="0.5" width="11" height="11" rx="1.5" />
            <rect x="0.5" y="11.5" width="11" height="11" />
            <rect x="0.5" y="22.5" width="11" height="11" />
            <rect x="0.5" y="33.5" width="11" height="11" />
            <rect x="0.5" y="44.5" width="11" height="11" />
            <rect x="0.5" y="55.5" width="11" height="11" />
            <rect x="0.5" y="66.5" width="11" height="11" />
            <rect x="0.5" y="77.5" width="11" height="11" />
            <rect x="0.5" y="88.5" width="11" height="11" />
            <rect x="0.5" y="99.5" width="11" height="11" rx="1.5" />
          </g>
        </svg>
      </div>
      <span class="badge badge-ten">1 Ten</span>
      <span class="sub-label">10 ones</span>
    </div>

    
    <div class="block-card" style="--accent-color: #ed8936;" onclick="selectBlock(2)">
      <div class="block-stage">
        <svg class="flat-svg" viewBox="0 0 111 111" fill="none">
          
          <rect x="0.5" y="0.5" width="110" height="110" rx="2" fill="#fef08a" stroke="#ca8a04" stroke-width="1"/>
          
          <path d="M11.5 0.5V110.5 M22.5 0.5V110.5 M33.5 0.5V110.5 M44.5 0.5V110.5 M55.5 0.5V110.5 M66.5 0.5V110.5 M77.5 0.5V110.5 M88.5 0.5V110.5 M99.5 0.5V110.5" stroke="#ca8a04" stroke-width="1"/>
          
          <path d="M0.5 11.5H110.5 M0.5 22.5H110.5 M0.5 33.5H110.5 M0.5 44.5H110.5 M0.5 55.5H110.5 M0.5 66.5H110.5 M0.5 77.5H110.5 M0.5 88.5H110.5 M0.5 99.5H110.5" stroke="#ca8a04" stroke-width="1"/>
        </svg>
      </div>
      <span class="badge badge-hundred">1 Hundred</span>
      <span class="sub-label">10 tens = 100 ones</span>
    </div>
  </div>

  <div class="relationship-bar" id="relBar">
    <span>10 Ones = 1 Ten</span>
    <span>•</span>
    <span>10 Tens = 1 Hundred</span>
  </div>

  <script>
    const cards = document.querySelectorAll('.block-card');
    const infoMessages = [
      '1 Unit Cube = 1 One',
      '1 Ten Rod = 10 Unit Cubes',
      '1 Hundred Flat = 10 Rods = 100 Cubes'
    ];
    const relBar = document.getElementById('relBar');

    function selectBlock(index) {
      cards.forEach((card, i) => {
        card.classList.toggle('active', i === index);
      });
      relBar.innerHTML = `<span class="rel-pill">${infoMessages[index]}</span>`;
    }
  </script>
</body>
</html>

111.3(b)(2)(C)

Aligned learning resources

Related diagrams