<!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;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
    }
    .cards-row {
      display: flex;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 480px;
    }
    .dice-card {
      flex: 1;
      max-width: 135px;
      background: #f8fafc;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    }
    .dice-card.active {
      border-color: #22b7ff;
      background: #f0f9ff;
      box-shadow: 0 4px 14px rgba(34, 183, 255, 0.18);
    }
    .die-face {
      position: relative;
      width: 76px;
      height: 76px;
      background: #ffffff;
      border-radius: 16px;
      border: 2px solid #cbd5e1;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      padding: 6px;
      transition: transform 0.3s ease, border-color 0.3s ease;
    }
    .dice-card.active .die-face {
      border-color: #38bdf8;
    }
    .pip {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: #1e2945;
      margin: auto;
      transition: background-color 0.3s ease, transform 0.3s ease;
    }

    /* Subgroup Overlays */
    .overlay-box {
      position: absolute;
      inset: 10px;
      border: 2px dashed #94a3b8;
      border-radius: 8px;
      opacity: 0.35;
      transition: opacity 0.3s ease, border-color 0.3s ease;
      pointer-events: none;
    }
    .dice-card.active .overlay-box {
      border-color: #0284c7;
      border-style: solid;
      opacity: 1;
      background: rgba(2, 132, 199, 0.06);
    }

    /* Overlay columns for 6 */
    .col-highlight {
      position: absolute;
      top: 6px;
      bottom: 6px;
      width: 26px;
      border-radius: 13px;
      border: 2px dashed #94a3b8;
      opacity: 0.35;
      transition: opacity 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
      pointer-events: none;
    }
    .col-left { left: 8px; }
    .col-right { right: 8px; }
    .dice-card.active .col-highlight {
      border-style: solid;
      border-color: #7c3aed;
      background: rgba(124, 58, 237, 0.08);
      opacity: 1;
    }

    /* Active Pip Highlights */
    .dice-card.active .pip-corner {
      background: #0284c7;
      transform: scale(1.12);
    }
    .dice-card.active .pip-center {
      background: #ea580c;
      transform: scale(1.2);
    }
    .dice-card.active .pip-column {
      background: #7c3aed;
      transform: scale(1.12);
    }

    .num-title {
      font-size: 20px;
      font-weight: 800;
      color: #1e2945;
      line-height: 1;
    }
    .math-pill {
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      padding: 3px 8px;
      border-radius: 12px;
      transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    }
    .dice-card.active .math-pill {
      color: #0369a1;
      border-color: #bae6fd;
      background: #e0f2fe;
    }
    .dice-card.card-6.active .math-pill {
      color: #6d28d9;
      border-color: #ddd6fe;
      background: #ede9fe;
    }
    .dice-card.card-5.active .math-pill {
      color: #c2410c;
      border-color: #fed7aa;
      background: #ffedd5;
    }

    .prompt-text {
      margin-top: 12px;
      font-size: 13px;
      font-weight: 600;
      color: #94a3b8;
      display: flex;
      align-items: center;
      gap: 4px;
    }
  </style>
</head>
<body>

  <div class="cards-row">
    
    <div class="dice-card active" id="card4" onclick="selectCard(0)">
      <div class="num-title">4</div>
      <div class="die-face">
        <div class="overlay-box"></div>
        <div class="pip pip-corner" style="grid-area: 1 / 1;"></div>
        <div class="pip pip-corner" style="grid-area: 1 / 3;"></div>
        <div class="pip pip-corner" style="grid-area: 3 / 1;"></div>
        <div class="pip pip-corner" style="grid-area: 3 / 3;"></div>
      </div>
      <div class="math-pill">2 + 2</div>
    </div>

    
    <div class="dice-card card-5" id="card5" onclick="selectCard(1)">
      <div class="num-title">5</div>
      <div class="die-face">
        <div class="pip pip-corner" style="grid-area: 1 / 1;"></div>
        <div class="pip pip-corner" style="grid-area: 1 / 3;"></div>
        <div class="pip pip-center" style="grid-area: 2 / 2;"></div>
        <div class="pip pip-corner" style="grid-area: 3 / 1;"></div>
        <div class="pip pip-corner" style="grid-area: 3 / 3;"></div>
      </div>
      <div class="math-pill">4 + 1</div>
    </div>

    
    <div class="dice-card card-6" id="card6" onclick="selectCard(2)">
      <div class="num-title">6</div>
      <div class="die-face">
        <div class="col-highlight col-left"></div>
        <div class="col-highlight col-right"></div>
        <div class="pip pip-column" style="grid-area: 1 / 1;"></div>
        <div class="pip pip-column" style="grid-area: 2 / 1;"></div>
        <div class="pip pip-column" style="grid-area: 3 / 1;"></div>
        <div class="pip pip-column" style="grid-area: 1 / 3;"></div>
        <div class="pip pip-column" style="grid-area: 2 / 3;"></div>
        <div class="pip pip-column" style="grid-area: 3 / 3;"></div>
      </div>
      <div class="math-pill">3 + 3</div>
    </div>
  </div>

  <div class="prompt-text">
    <span>✦ Tap to see groups</span>
  </div>

  <script>
    const cards = [
      document.getElementById('card4'),
      document.getElementById('card5'),
      document.getElementById('card6')
    ];

    function selectCard(index) {
      cards.forEach((card, i) => {
        if (i === index) {
          card.classList.add('active');
        } else {
          card.classList.remove('active');
        }
      });
    }
  </script>
</body>
</html>

Recognizing Quantities on Dice and Domino Patterns

<!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>Domino Subitizing Reader</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 16px;
      gap: 16px;
    }

    /* Badges */
    .badges-row {
      display: flex;
      justify-content: center;
      gap: 14px;
      width: 100%;
      max-width: 380px;
    }

    .badge {
      flex: 1;
      padding: 8px 12px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }

    .badge-left {
      background: #eff6ff;
      color: #2563eb;
      border: 1.5px solid #bfdbfe;
    }

    .badge-right {
      background: #fdf2f8;
      color: #db2777;
      border: 1.5px solid #fbcfe8;
    }

    .badge-val {
      font-size: 20px;
      font-weight: 800;
    }

    /* Domino Tile */
    .domino-board {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
    }

    .domino {
      width: 280px;
      height: 140px;
      background: #18181b;
      border-radius: 18px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), inset 0 2px 3px rgba(255, 255, 255, 0.2);
      display: flex;
      padding: 10px;
      position: relative;
      user-select: none;
    }

    .domino-half {
      flex: 1;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      padding: 8px;
      align-items: center;
      justify-items: center;
      border-radius: 10px;
      transition: background 0.2s ease;
    }

    .divider {
      width: 3px;
      height: 85%;
      align-self: center;
      background: #3f3f46;
      border-radius: 2px;
      box-shadow: 1px 0 1px rgba(255, 255, 255, 0.1);
    }

    /* Pip styles */
    .pip-cell {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pip {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #ffffff;
      box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3);
      opacity: 0;
      transform: scale(0.3);
      transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .pip.visible {
      opacity: 1;
      transform: scale(1);
    }

    /* Pip Accent Colors to tie with badges */
    .domino-half.left-half .pip.visible {
      background: #60a5fa;
    }

    .domino-half.right-half .pip.visible {
      background: #f472b6;
    }

    /* Preset Selection Buttons */
    .controls {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 380px;
    }

    .btn-tile {
      background: #f1f5f9;
      border: 1.5px solid #cbd5e1;
      color: #334155;
      padding: 8px 14px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }

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

    .btn-tile.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
      box-shadow: 0 3px 8px rgba(30, 41, 69, 0.25);
    }

    @media (max-width: 350px) {
      .domino {
        width: 250px;
        height: 125px;
        padding: 8px;
      }
      .pip {
        width: 15px;
        height: 15px;
      }
      .btn-tile {
        padding: 6px 10px;
        font-size: 13px;
      }
    }
  </style>
</head>
<body>

  
  <div class="badges-row">
    <div class="badge badge-left">
      <span>Left:</span>
      <span id="leftVal" class="badge-val">5</span>
    </div>
    <div class="badge badge-right">
      <span>Right:</span>
      <span id="rightVal" class="badge-val">3</span>
    </div>
  </div>

  
  <div class="domino-board">
    <div class="domino" aria-label="Domino Tile">
      <div id="leftHalf" class="domino-half left-half"></div>
      <div class="divider"></div>
      <div id="rightHalf" class="domino-half right-half"></div>
    </div>
  </div>

  
  <div class="controls" id="btnGroup">
    <button class="btn-tile active" data-left="5" data-right="3">5 | 3</button>
    <button class="btn-tile" data-left="6" data-right="2">6 | 2</button>
    <button class="btn-tile" data-left="4" data-right="4">4 | 4</button>
    <button class="btn-tile" data-left="1" data-right="5">1 | 5</button>
  </div>

  <script>
    // 3x3 positions: [0..8]
    // 0 1 2
    // 3 4 5
    // 6 7 8
    const PATTERNS = {
      0: [],
      1: [4],
      2: [2, 6],
      3: [2, 4, 6],
      4: [0, 2, 6, 8],
      5: [0, 2, 4, 6, 8],
      6: [0, 2, 3, 5, 6, 8]
    };

    const leftHalfEl = document.getElementById('leftHalf');
    const rightHalfEl = document.getElementById('rightHalf');
    const leftValEl = document.getElementById('leftVal');
    const rightValEl = document.getElementById('rightVal');
    const buttons = document.querySelectorAll('.btn-tile');

    // Build 9 pip slots for each half
    function createPipGrid(container) {
      container.innerHTML = '';
      for (let i = 0; i < 9; i++) {
        const cell = document.createElement('div');
        cell.className = 'pip-cell';
        const pip = document.createElement('div');
        pip.className = 'pip';
        cell.appendChild(pip);
        container.appendChild(cell);
      }
    }

    createPipGrid(leftHalfEl);
    createPipGrid(rightHalfEl);

    function renderHalf(container, count) {
      const activeIndices = PATTERNS[count] || [];
      const cells = container.querySelectorAll('.pip');
      cells.forEach((pip, idx) => {
        if (activeIndices.includes(idx)) {
          pip.classList.add('visible');
        } else {
          pip.classList.remove('visible');
        }
      });
    }

    function setDomino(left, right) {
      leftValEl.textContent = left;
      rightValEl.textContent = right;
      renderHalf(leftHalfEl, left);
      renderHalf(rightHalfEl, right);
    }

    // Initial render
    setDomino(5, 3);

    // Interactive button clicks
    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        buttons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        const l = parseInt(btn.getAttribute('data-left'), 10);
        const r = parseInt(btn.getAttribute('data-right'), 10);
        setDomino(l, r);
      });
    });
  </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="1:1">
  <title>Rotating Dice Pattern</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    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: 100vh;
      padding: 16px;
      user-select: none;
      -webkit-user-select: none;
      overflow: hidden;
    }

    .main-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      width: 100%;
      max-width: 360px;
      position: relative;
    }

    /* Status badge */
    .status-card {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 999px;
      padding: 8px 18px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      text-align: center;
    }

    .status-highlight {
      color: #0284c7;
    }

    /* Die stage */
    .stage {
      position: relative;
      width: 160px;
      height: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .die {
      width: 130px;
      height: 130px;
      background: #ffffff;
      border-radius: 26px;
      box-shadow: 0 10px 25px -4px rgba(30, 41, 69, 0.12),
                  0 4px 8px -2px rgba(30, 41, 69, 0.06),
                  inset 0 0 0 2px #e2e8f0;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 1fr);
      padding: 18px 24px;
      place-items: center;
      transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
      will-change: transform;
    }

    .pip {
      width: 18px;
      height: 18px;
      background: #1e2945;
      border-radius: 50%;
      box-shadow: inset 0 2px 3px rgba(0,0,0,0.25);
    }

    /* Controls */
    .btn-rotate {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #22b7ff;
      color: #ffffff;
      border: none;
      border-radius: 14px;
      padding: 12px 24px;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.35);
      transition: background 0.15s ease, transform 0.1s ease;
      touch-action: manipulation;
    }

    .btn-rotate:active {
      transform: scale(0.96);
      background: #0ea5e9;
    }

    .sub-label {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
    }

    /* Confetti / Sparkle Canvas */
    #fxCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 10;
    }
  </style>
</head>
<body>
  <div class="main-wrap">
    <div class="status-card">
      <span id="orientLabel">Vertical: 2 × 3</span>
      <span>•</span>
      <span class="status-highlight">Still 6 dots!</span>
    </div>

    <div class="stage">
      <canvas id="fxCanvas"></canvas>
      <div class="die" id="dieFace">
        <div class="pip"></div>
        <div class="pip"></div>
        <div class="pip"></div>
        <div class="pip"></div>
        <div class="pip"></div>
        <div class="pip"></div>
      </div>
    </div>

    <button class="btn-rotate" id="rotateBtn" type="button">
      <span>Rotate 90°</span>
      <span style="font-size: 18px;">↻</span>
    </button>

    <div class="sub-label">Position changes, amount stays 6</div>
  </div>

  <script>
    let currentAngle = 0;
    const die = document.getElementById('dieFace');
    const label = document.getElementById('orientLabel');
    const btn = document.getElementById('rotateBtn');
    const canvas = document.getElementById('fxCanvas');
    const ctx = canvas.getContext('2d');

    // Particle system
    let particles = [];
    function resizeCanvas() {
      const rect = canvas.getBoundingClientRect();
      canvas.width = rect.width * window.devicePixelRatio;
      canvas.height = rect.height * window.devicePixelRatio;
      ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
    }
    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);

    function playPopSound() {
      try {
        const AudioCtx = window.AudioContext || window.webkitAudioContext;
        if (!AudioCtx) return;
        const ac = new AudioCtx();
        const osc = ac.createOscillator();
        const gain = ac.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(440, ac.currentTime);
        osc.frequency.exponentialRampToValueAtTime(880, ac.currentTime + 0.12);
        gain.gain.setValueAtTime(0.2, ac.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ac.currentTime + 0.12);
        osc.connect(gain);
        gain.connect(ac.destination);
        osc.start();
        osc.stop(ac.currentTime + 0.12);
      } catch (e) {}
    }

    function spawnParticles() {
      const w = canvas.getBoundingClientRect().width;
      const h = canvas.getBoundingClientRect().height;
      const colors = ['#22b7ff', '#f59e0b', '#10b981', '#6366f1', '#ec4899'];
      for (let i = 0; i < 14; i++) {
        const angle = Math.random() * Math.PI * 2;
        const speed = 2 + Math.random() * 3.5;
        particles.push({
          x: w / 2,
          y: h / 2,
          vx: Math.cos(angle) * speed,
          vy: Math.sin(angle) * speed,
          size: 3.5 + Math.random() * 2.5,
          color: colors[Math.floor(Math.random() * colors.length)],
          alpha: 1,
          decay: 0.02 + Math.random() * 0.02
        });
      }
    }

    function renderParticles() {
      const w = canvas.getBoundingClientRect().width;
      const h = canvas.getBoundingClientRect().height;
      ctx.clearRect(0, 0, w, h);

      for (let i = particles.length - 1; i >= 0; i--) {
        const p = particles[i];
        p.x += p.vx;
        p.y += p.vy;
        p.alpha -= p.decay;
        if (p.alpha <= 0) {
          particles.splice(i, 1);
          continue;
        }
        ctx.save();
        ctx.globalAlpha = p.alpha;
        ctx.fillStyle = p.color;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
      }

      if (particles.length > 0) {
        requestAnimationFrame(renderParticles);
      }
    }

    function handleRotate() {
      currentAngle += 90;
      die.style.transform = `rotate(${currentAngle}deg)`;
      playPopSound();

      const isVertical = (currentAngle / 90) % 2 === 0;
      label.textContent = isVertical ? 'Vertical: 2 × 3' : 'Horizontal: 3 × 2';

      spawnParticles();
      if (particles.length <= 14) {
        requestAnimationFrame(renderParticles);
      }
    }

    btn.addEventListener('click', handleRotate);
  </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;
      -webkit-tap-highlight-color: transparent;
      user-select: none;
    }

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

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

    .die-card {
      flex: 1;
      min-width: 90px;
      max-width: 170px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
    }

    .die-box {
      width: 100%;
      aspect-ratio: 1 / 1;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 20%;
      box-shadow: 0 4px 12px rgba(30, 41, 69, 0.08), 0 1px 3px rgba(30, 41, 69, 0.05);
      position: relative;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

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

    .die-card.active .die-box {
      border-color: #22b7ff;
      box-shadow: 0 6px 16px rgba(34, 183, 255, 0.25), 0 0 0 2px rgba(34, 183, 255, 0.3);
    }

    svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    .pip {
      transition: transform 0.3s ease;
      transform-origin: center;
    }

    .pip-dark { fill: #1e2945; }
    .pip-red { fill: #ef4444; }

    .pattern-line {
      stroke: #22b7ff;
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      opacity: 0;
      stroke-dasharray: 120;
      stroke-dashoffset: 120;
      transition: stroke-dashoffset 0.45s ease, opacity 0.3s ease;
    }

    .pattern-ring {
      stroke: #ef4444;
      stroke-width: 3.5;
      fill: rgba(239, 68, 68, 0.12);
      opacity: 0;
      transform: scale(0.6);
      transform-origin: 50px 50px;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    }

    .die-card.active .pattern-line {
      opacity: 1;
      stroke-dashoffset: 0;
    }

    .die-card.active .pattern-ring {
      opacity: 1;
      transform: scale(1);
    }

    .label-box {
      margin-top: 10px;
      text-align: center;
    }

    .num-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }

    .pattern-desc {
      font-size: 13px;
      font-weight: 500;
      color: #64748b;
      margin-top: 2px;
    }

    .die-card.active .num-title {
      color: #0284c7;
    }

    .die-card.active .pattern-desc {
      color: #1e2945;
      font-weight: 600;
    }

    .hint {
      font-size: 13px;
      font-weight: 500;
      color: #64748b;
      text-align: center;
      background: #f1f5f9;
      padding: 6px 14px;
      border-radius: 999px;
    }

    @media (max-width: 400px) {
      .dice-grid {
        gap: 10px;
      }
      .num-title {
        font-size: 14px;
      }
      .pattern-desc {
        font-size: 12px;
      }
    }
  </style>
</head>
<body>

  <div class="dice-grid">
    
    <div class="die-card active" onclick="toggleDie(this)">
      <div class="die-box">
        <svg viewBox="0 0 100 100">
          <circle class="pattern-ring" cx="50" cy="50" r="28" />
          <circle class="pip pip-red" cx="50" cy="50" r="14" />
        </svg>
      </div>
      <div class="label-box">
        <div class="num-title">1</div>
        <div class="pattern-desc">Center dot</div>
      </div>
    </div>

    
    <div class="die-card active" onclick="toggleDie(this)">
      <div class="die-box">
        <svg viewBox="0 0 100 100">
          <line class="pattern-line" x1="28" y1="28" x2="72" y2="72" />
          <circle class="pip pip-dark" cx="28" cy="28" r="10" />
          <circle class="pip pip-dark" cx="72" cy="72" r="10" />
        </svg>
      </div>
      <div class="label-box">
        <div class="num-title">2</div>
        <div class="pattern-desc">Diagonal line</div>
      </div>
    </div>

    
    <div class="die-card active" onclick="toggleDie(this)">
      <div class="die-box">
        <svg viewBox="0 0 100 100">
          <line class="pattern-line" x1="25" y1="25" x2="75" y2="75" />
          <circle class="pip pip-dark" cx="25" cy="25" r="9" />
          <circle class="pip pip-dark" cx="50" cy="50" r="9" />
          <circle class="pip pip-dark" cx="75" cy="75" r="9" />
        </svg>
      </div>
      <div class="label-box">
        <div class="num-title">3</div>
        <div class="pattern-desc">Three in a row</div>
      </div>
    </div>
  </div>

  <div class="hint">Tap a die to see its pattern</div>

  <script>
    function toggleDie(el) {
      el.classList.toggle('active');
    }
  </script>
</body>
</html>

Conteo de objetos uno a uno hasta 10

Representación de cantidades con marcas y dibujos hasta 10

Lectura y escritura de números del 0 al 10

El número cero como ausencia de cantidad

Conteo hacia adelante y hacia atrás hasta 20

Conteo de dos en dos hasta 20

Identificación de números pares e impares con parejas

Números ordinales del primero al décimo

math

Conteo, representación y patrones hasta 20

Dénombrer une collection d'objets jusqu'à 10

Dénombrer par groupements de 5 jusqu'à 20

Dénombrer en organisant des paquets de 10

Dénombrer de grandes collections jusqu'à 100

Comparer deux collections par alignement et comptage

Construire une collection de cardinal donné jusqu'à 10

Construire une collection de cardinal donné jusqu'à 20

Construire une collection de cardinal donné jusqu'à 60

Construire des collections de cardinal donné jusqu'à 100

Dénombrer et construire des collections au CP

Dénombrer une collection en pointant et déplaçant les objets

Organiser une collection en ligne ou en paquets de 5

Reconnaître instantanément les constellations et doigts jusqu'à 10

Comparer deux collections par correspondance terme à terme

Constituer une collection de taille donnée jusqu'à 10

Compléter une collection pour obtenir une quantité cible

Diminuer une collection pour obtenir un cardinal donné

Dénombrer et manipuler les collections jusqu'à 10

O que são números? Quantidade e ordem

Números como código de identificação

Números no nosso dia a dia

Contagem exata: um a um

Contagem por agrupamentos de 2

Contagem por agrupamentos de 5

Contagem por agrupamentos de 10

Estratégias de pareamento

Contagem aproximada: estimando quantidades

Estimando quantidades pequenas

Números no cotidiano e estratégias de contagem

Recognizing Quantities 11 to 20 on Ten-Frames

Subitizing Small Quantities with Ten-Frames

Recognizing Quantities on a Rekenrek

Using Subitizing to Solve Real-World Problems

Recognizing Quantities in Structured Arrangements

Arranging Objects in a Straight Horizontal Line

Arranging Objects in a Vertical Column

Arranging Objects in a Circle Path

Arranging Objects in Pairs (Two by Two)

Arranging Objects in a Five-Frame Grid

Arranging Objects in a Ten-Frame Grid

Structuring Quantities with Lines, Loops, and Frames

Seeing Dot Patterns up to 10 Quickly

Instant Recognition on Single Ten-Frames

Seeing Numbers on Double Ten-Frames to 20

Seeing Tally Marks and Finger Patterns Quickly

Spreading Things Out Doesnt Change the Count

Moving Up to 10 Things Doesnt Change the Count

Moving Up to 20 Things Doesnt Change the Count

Subitizing, Ten-Frames, and Conservation of Quantity

Comparando conjuntos: tem mais, tem menos

Correspondência um a um

Correspondência dois a dois

Igualdade de quantidades: tem a mesma quantidade

Contando até 20 objetos

Contando até 50 objetos

Contando até 100 objetos

Registrando contagens com desenhos

Registrando contagens com números

Contagem em jogos e brincadeiras

Comparando coleções e contando até 100

Conteo y agrupación hasta 50 elementos

Conteo de cinco en cinco hasta 50

Conteo de diez en diez hasta 100

Exploración del cuadro numérico del 1 al 100

Identificación del número anterior y posterior hasta 100

Conteo hacia atrás desde 100

Patrones de sumar y restar dos en el tablero de 100

Estimación visual de cantidades hasta 50

Conteo, patrones y sentido numérico hasta 100

Counting Objects by Twos Up to 120

Counting Objects by Fives Up to 120

Counting Objects by Tens Up to 120

Instantly Recognizing Quantities in Ten Frames

Instantly Recognizing Quantities in Dice and Dominoes

Counting Objects and Instantly Recognizing Quantities

Dénombrer jusqu'à 20 en faisant un groupement de 10

Construire une collection entre 11 et 20 objets

Comparer des collections proches entre 10 et 20 éléments

Partager une collection en deux parts égales jusqu'à 20

Décomposer les nombres jusqu'à 10 en deux sous-collections

Estimer rapidement une quantité visuelle avant de compter

Construire des collections équipotentes en configurations variées

Résoudre un défi de dénombrement et tri de collections au CP

Structurer et explorer les collections de 10 à 20

Arranging Objects Like Dice Dots

Arranging Objects Like Dominoes

Arranging Objects in a Scattered Cloud

Rearranging a Set into Three Different Shapes

Matching Different Layouts of the Same Number

Designing Creative Patterns With a Fixed Set

Visual Patterns, Scatters, and Number Rearrangements

Same Objects, Different Arrangement

Spreading Out a Row Does Not Make More

Pushing Objects Close Together Does Not Make Fewer

Moving Objects Across a Table Stays the Same

Putting Objects into Different-Shaped Plates

Sorting into Two Piles and Pushing Them Together

Checking Conservation With One-to-One Matching

Predicting the Count Before and After Shuffling

Spotting Tricks When Spacing Looks Bigger

Proving Conservation Champion Challenge

Number Conservation and Invariance

Counting Objects in a Line

Counting Objects in a Circle

Counting Objects in a Scatter

Counting Objects in a Ten-Frame

Counting Scattered Objects up to 5

Counting Strategies and Spatial Arrangements

Construcción de la centena con bloques multibase

Lectura y escritura de centenas completas hasta 900

Representación de números de tres cifras en la tabla de posición

Descomposición expandida de números de tres cifras

Equivalencias entre centenas, decenas y unidades

Valor de un dígito según su posición en el número

Uso del ábaco para números hasta 999

Introducción al número 1.000: la unidad de mil

Cambio y canje de unidades por decenas y centenas

Lectura y escritura de números hasta 1.000

Valor posicional y centenas hasta 1.000

Comparación de colecciones: más que, menos que e igual que

Símbolos de comparación: mayor que, menor que e igual

Comparación de números de dos cifras usando decenas

Ordenamiento de grupos de números de menor a mayor

Ordenamiento de grupos de números de mayor a menor

Comparación de números de tres cifras

Comparación y orden de números naturales

Instant Recognition of 1, 2, and 3 Dots

Instant Recognition of 4 and 5 Dots

Reading Finger Patterns from 1 to 5

Reading Finger Patterns from 6 to 10

Identifying Quantities in Five-Frames Instantly

Identifying Quantities in Ten-Frames Instantly

Conceptual Subitizing: Seeing Two Smaller Groups

Quick Images Flash Challenges to 10

Perceptual and Conceptual Subitizing

Adding With Objects: Combining Two Groups

Ways to Compose 2 and 3

Ways to Compose 4 With Connecting Cubes

Number Bonds for 5: Different Ways to Make 5

Finding All Ways to Make 5

Composing Numbers 2 Through 5

Ubicación de números en la recta numérica hasta 100

Redondeo a la decena más cercana en la recta numérica

Redondeo a la centena más cercana

Patrones de paridad en la tabla de multiplicar por 2

Patrones de múltiplos de cinco y diez

Resolución de acertijos numéricos con pistas de orden y posición

Recta numérica, redondeo y patrones numéricos

Composing 5 on One Hand With Fingers

Composing 5 Using a Five-Frame

Composing 5 With a Part-Part-Whole Mat

Story Problems: Putting Together to Make 5

Finding the Hidden Partner to Make 5

Making 5 With Three Small Groups

Celebrating All Ways to Make 5

Visual Models and Story Problems for 5

Finding All Ways to Make 6

Finding All Ways to Make 7

Finding All Ways to Make 8

Finding All Ways to Make 9

Number Bonds for 9: Different Ways to Make 9

Finding All Ways to Make 10

Number Pairs for 6 to 10

Suma de decenas completas

Suma en la recta numérica avanzando pasos

Suma de dos cifras sin reagrupar en columnas

Comprensión de la reagrupación en la suma con bloques

Algoritmo de la suma de dos cifras con reagrupación

Suma de dos cifras: valor posicional y algoritmo con reagrupación

Composing 6 to 9 as 5 and Some More

Making Towers of 10 With Two Colors

Composing Numbers With a Bead String to 10

Composing Equal Doubles up to 10

Finding the Missing Partner on a Ten-Frame

Decomposing and Recomposing Quantities to 10

Story Problems: Composing Quantities up to 10

Strategies for Composing up to 10

Rainbow Pairs That Make 10

Ten Fingers Up: Bending Fingers to Make Pairs

Making 5 Versus Making 10 Comparison

Fill the Ten-Frame Game

Mystery Partner Clues for 5

Mystery Partner Clues for 10

Making 10 With an Egg Carton Ten-Frame

Using Zero When Making 5 and 10

Rapid Recall of Partners for 5

Fluency with Anchors 5 and 10

OGM.2.CC.1

Aligned learning resources

Related diagrams