<!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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 16px 12px;
      min-height: 100%;
      user-select: none;
    }

    /* Top Equation Header */
    .header-badge {
      background: #f0f7ff;
      border: 1px solid #cce3ff;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 17px;
      font-weight: 700;
      color: #0066cc;
      text-align: center;
      letter-spacing: 0.2px;
    }

    /* Bags Container */
    .bags-row {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 12px;
      width: 100%;
      max-width: 480px;
      margin: 12px 0 8px;
    }

    .bag-col {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
    }

    /* Bag Shape */
    .bag {
      position: relative;
      width: 100%;
      max-width: 110px;
      height: 120px;
      background: linear-gradient(180deg, rgba(235, 245, 255, 0.6) 0%, rgba(215, 235, 255, 0.9) 100%);
      border: 2px solid #8ec5fc;
      border-radius: 18px 18px 28px 28px;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.12), inset 0 2px 6px rgba(255, 255, 255, 0.8);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      padding: 18px 8px 8px;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    /* Bag Tie on top */
    .bag::before {
      content: '';
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 24px;
      height: 10px;
      background: #e0a96d;
      border-radius: 4px;
      border: 1px solid #b87a38;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      z-index: 2;
    }

    .bag-col.active .bag {
      border-color: #22b7ff;
      transform: translateY(-4px);
      box-shadow: 0 8px 18px rgba(34, 183, 255, 0.25), inset 0 2px 8px rgba(255, 255, 255, 0.9);
    }

    /* Marbles Grid inside bag */
    .marbles-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 6px;
      width: 100%;
      height: 100%;
    }

    .marble {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      position: relative;
      box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.25), inset 2px 2px 4px rgba(255, 255, 255, 0.8), 0 2px 4px rgba(0,0,0,0.15);
      animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
    }

    /* Marble Highlight (Glass Sparkle) */
    .marble::after {
      content: '';
      position: absolute;
      top: 3px;
      left: 4px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.85);
    }

    /* Marble Color Variants */
    .m-blue   { background: radial-gradient(circle at 35% 35%, #60a5fa, #2563eb); }
    .m-green  { background: radial-gradient(circle at 35% 35%, #4ade80, #16a34a); }
    .m-purple { background: radial-gradient(circle at 35% 35%, #c084fc, #9333ea); }
    .m-amber  { background: radial-gradient(circle at 35% 35%, #fcd34d, #d97706); }
    .m-pink   { background: radial-gradient(circle at 35% 35%, #f472b6, #db2777); }

    /* Skip Count Tag */
    .skip-tag {
      margin-top: 8px;
      font-size: 16px;
      font-weight: 700;
      color: #64748b;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 3px 12px;
      transition: all 0.2s ease;
    }

    .bag-col.active .skip-tag {
      color: #0066cc;
      background: #e0f2fe;
      border-color: #7dd3fc;
      transform: scale(1.08);
    }

    /* Math Addition Sentence */
    .calc-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 18px;
      font-weight: 700;
      color: #1e2945;
      background: #f8fafc;
      border: 1px solid #e6e6e6;
      border-radius: 14px;
      padding: 8px 16px;
      margin-top: 6px;
      width: 100%;
      max-width: 380px;
    }

    .num-box {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: #fff;
      border: 1px solid #cbd5e1;
      color: #334155;
      transition: all 0.2s ease;
    }

    .num-box.active {
      background: #0284c7;
      color: #fff;
      border-color: #0284c7;
      box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
    }

    .total-box {
      background: #f0fdf4;
      color: #15803d;
      border: 1px solid #86efac;
      padding: 2px 8px;
      border-radius: 8px;
    }

    @keyframes popIn {
      0% { transform: scale(0.3); opacity: 0; }
      70% { transform: scale(1.15); }
      100% { transform: scale(1); opacity: 1; }
    }

    @keyframes sparkleGlow {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(1.25); }
    }

    .bag-col.active .marble {
      animation: sparkleGlow 1.4s ease-in-out infinite;
    }
  </style>
</head>
<body>

  
  <div class="header-badge">
    3 groups of 5 = 15
  </div>

  
  <div class="bags-row">
    
    <div class="bag-col active" onclick="selectBag(0)">
      <div class="bag">
        <div class="marbles-grid">
          <div class="marble m-blue" style="animation-delay: 0.05s"></div>
          <div class="marble m-pink" style="animation-delay: 0.1s"></div>
          <div class="marble m-green" style="animation-delay: 0.15s"></div>
          <div class="marble m-amber" style="animation-delay: 0.2s"></div>
          <div class="marble m-purple" style="animation-delay: 0.25s"></div>
        </div>
      </div>
      <div class="skip-tag">5</div>
    </div>

    
    <div class="bag-col" onclick="selectBag(1)">
      <div class="bag">
        <div class="marbles-grid">
          <div class="marble m-pink" style="animation-delay: 0.3s"></div>
          <div class="marble m-green" style="animation-delay: 0.35s"></div>
          <div class="marble m-blue" style="animation-delay: 0.4s"></div>
          <div class="marble m-purple" style="animation-delay: 0.45s"></div>
          <div class="marble m-amber" style="animation-delay: 0.5s"></div>
        </div>
      </div>
      <div class="skip-tag">10</div>
    </div>

    
    <div class="bag-col" onclick="selectBag(2)">
      <div class="bag">
        <div class="marbles-grid">
          <div class="marble m-green" style="animation-delay: 0.55s"></div>
          <div class="marble m-amber" style="animation-delay: 0.6s"></div>
          <div class="marble m-purple" style="animation-delay: 0.65s"></div>
          <div class="marble m-blue" style="animation-delay: 0.7s"></div>
          <div class="marble m-pink" style="animation-delay: 0.75s"></div>
        </div>
      </div>
      <div class="skip-tag">15</div>
    </div>
  </div>

  
  <div class="calc-row">
    <span class="num-box active" id="nb-0">5</span>
    <span>+</span>
    <span class="num-box" id="nb-1">5</span>
    <span>+</span>
    <span class="num-box" id="nb-2">5</span>
    <span>=</span>
    <span class="total-box">15</span>
  </div>

  <script>
    const bags = document.querySelectorAll('.bag-col');
    const numBoxes = [
      document.getElementById('nb-0'),
      document.getElementById('nb-1'),
      document.getElementById('nb-2')
    ];

    let currentIdx = 0;
    let autoInterval = null;

    function selectBag(idx) {
      currentIdx = idx;
      bags.forEach((bag, i) => {
        if (i <= idx) {
          bag.classList.add('active');
          numBoxes[i].classList.add('active');
        } else {
          bag.classList.remove('active');
          numBoxes[i].classList.remove('active');
        }
      });
    }

    // Auto-cycle through skip counting for pedagogical pacing
    function startCycle() {
      autoInterval = setInterval(() => {
        currentIdx = (currentIdx + 1) % 3;
        selectBag(currentIdx);
      }, 2400);
    }

    // Stop auto-cycle when student interacts
    bags.forEach((bag, i) => {
      bag.addEventListener('pointerdown', () => {
        clearInterval(autoInterval);
        selectBag(i);
      });
    });

    // Start initial sequence
    selectBag(0);
    startCycle();
  </script>
</body>
</html>

Identifying Equal and Unequal Groups

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

    .group-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 12px 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    .header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 4px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      line-height: 1;
    }

    .badge-equal {
      background: #ecfdf5;
      color: #059669;
      border: 1px solid #a7f3d0;
    }

    .badge-unequal {
      background: #fef2f2;
      color: #dc2626;
      border: 1px solid #fecaca;
    }

    .math-pill {
      font-size: 13px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      padding: 3px 8px;
      border-radius: 6px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #64748b;
    }

    .plates-container {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      gap: 8px;
    }

    .plate-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      flex: 1;
      max-width: 90px;
      cursor: pointer;
    }

    .plate {
      width: 68px;
      height: 68px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.06), 0 3px 6px rgba(0,0,0,0.06);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      position: relative;
    }

    .plate-wrapper:active .plate {
      transform: scale(0.96);
    }

    .plate-blue { background: #e0f2fe; border: 3px solid #bae6fd; }
    .plate-amber { background: #fef3c7; border: 3px solid #fde68a; }
    .plate-purple { background: #f3e8ff; border: 3px solid #e9d5ff; }

    .plate-inner {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 1px dashed rgba(0, 0, 0, 0.12);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      padding: 3px;
      gap: 3px;
    }

    .cookie {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 4px 4px, #422006 1.2px, transparent 1.3px),
        radial-gradient(circle at 11px 5px, #422006 1.2px, transparent 1.3px),
        radial-gradient(circle at 8px 11px, #422006 1.2px, transparent 1.3px),
        #d97706;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
      flex-shrink: 0;
    }

    .count-tag {
      font-size: 12px;
      font-weight: 700;
      border-radius: 12px;
      padding: 2px 10px;
      line-height: 1.2;
    }

    .tag-equal {
      background: #d1fae5;
      color: #065f46;
      border: 1px solid #a7f3d0;
    }

    .tag-unequal {
      background: #fee2e2;
      color: #991b1b;
      border: 1px solid #fecaca;
    }
  </style>
</head>
<body>

  
  <div class="group-card">
    <div class="header-row">
      <div class="badge badge-equal">
        <span>✓</span> Equal Groups (4 in each)
      </div>
      <div class="math-pill">4 = 4 = 4</div>
    </div>
    
    <div class="plates-container">
      <div class="plate-wrapper">
        <div class="plate plate-blue">
          <div class="plate-inner">
            <div class="cookie"></div>
            <div class="cookie"></div>
            <div class="cookie"></div>
            <div class="cookie"></div>
          </div>
        </div>
        <div class="count-tag tag-equal">4</div>
      </div>

      <div class="plate-wrapper">
        <div class="plate plate-amber">
          <div class="plate-inner">
            <div class="cookie"></div>
            <div class="cookie"></div>
            <div class="cookie"></div>
            <div class="cookie"></div>
          </div>
        </div>
        <div class="count-tag tag-equal">4</div>
      </div>

      <div class="plate-wrapper">
        <div class="plate plate-purple">
          <div class="plate-inner">
            <div class="cookie"></div>
            <div class="cookie"></div>
            <div class="cookie"></div>
            <div class="cookie"></div>
          </div>
        </div>
        <div class="count-tag tag-equal">4</div>
      </div>
    </div>
  </div>

  
  <div class="group-card">
    <div class="header-row">
      <div class="badge badge-unequal">
        <span>✕</span> Unequal Groups (not the same)
      </div>
      <div class="math-pill">2 ≠ 5 ≠ 3</div>
    </div>

    <div class="plates-container">
      <div class="plate-wrapper">
        <div class="plate plate-blue">
          <div class="plate-inner">
            <div class="cookie"></div>
            <div class="cookie"></div>
          </div>
        </div>
        <div class="count-tag tag-unequal">2</div>
      </div>

      <div class="plate-wrapper">
        <div class="plate plate-amber">
          <div class="plate-inner">
            <div class="cookie"></div>
            <div class="cookie"></div>
            <div class="cookie"></div>
            <div class="cookie"></div>
            <div class="cookie"></div>
          </div>
        </div>
        <div class="count-tag tag-unequal">5</div>
      </div>

      <div class="plate-wrapper">
        <div class="plate plate-purple">
          <div class="plate-inner">
            <div class="cookie"></div>
            <div class="cookie"></div>
            <div class="cookie"></div>
          </div>
        </div>
        <div class="count-tag tag-unequal">3</div>
      </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;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 10px;
    }
    .diagram-svg {
      width: 100%;
      max-width: 460px;
      height: auto;
      display: block;
      overflow: visible;
    }
    .nest-group {
      cursor: pointer;
      transition: transform 0.2s ease;
    }
    .nest-group:hover {
      filter: drop-shadow(0 4px 8px rgba(34, 183, 255, 0.25));
    }
    .nest-group.active .nest-highlight {
      opacity: 1;
    }
    .count-badge {
      opacity: 0;
      transition: opacity 0.25s ease, transform 0.25s ease;
      transform-origin: center;
    }
    .nest-group.active .count-badge {
      opacity: 1;
    }
  </style>
</head>
<body>
  <svg class="diagram-svg" viewBox="0 0 460 345" xmlns="http://www.w3.org/2000/svg">
    <defs>
      
      <marker id="arrow-blue" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#0284c7" />
      </marker>
      
      <marker id="arrow-navy" viewBox="0 0 10 10" refX="6" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M 0 1.5 L 8 5 L 0 8.5 z" fill="#1e2945" />
      </marker>
      
      <radialGradient id="eggGrad" cx="35%" cy="30%" r="65%">
        <stop offset="0%" stop-color="#bae6fd" />
        <stop offset="60%" stop-color="#7dd3fc" />
        <stop offset="100%" stop-color="#38bdf8" />
      </radialGradient>
      
      <linearGradient id="nestGrad" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stop-color="#b45309" />
        <stop offset="100%" stop-color="#78350f" />
      </linearGradient>
    </defs>

    
    <g id="top-bracket">
      
      <path d="M 35 48 L 35 34 Q 35 24 45 24 L 175 24 Q 185 24 190 14 Q 195 24 205 24 L 415 24 Q 425 24 425 34 L 425 48" 
            fill="none" stroke="#0284c7" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
      
      
      <rect x="135" y="2" width="110" height="26" rx="13" fill="#e0f2fe" stroke="#38bdf8" stroke-width="1.5" />
      <text x="190" y="19" text-anchor="middle" fill="#0369a1" font-size="13" font-weight="700" letter-spacing="0.2">4 groups</text>
    </g>

    

    
    <g class="nest-group" id="nest-1" transform="translate(18, 68)">
      <circle class="nest-highlight" cx="45" cy="50" r="48" fill="#e0f2fe" opacity="0" />
      
      <g>
        
        <g transform="translate(31, 38) rotate(-18)">
          <ellipse cx="0" cy="0" rx="9" ry="13" fill="url(#eggGrad)" stroke="#0284c7" stroke-width="1" />
          <circle cx="-2" cy="-4" r="1.2" fill="#0369a1" opacity="0.6" />
          <circle cx="3" cy="2" r="1.4" fill="#0369a1" opacity="0.6" />
          <circle cx="-3" cy="5" r="1" fill="#0369a1" opacity="0.6" />
        </g>
        
        <g transform="translate(59, 38) rotate(18)">
          <ellipse cx="0" cy="0" rx="9" ry="13" fill="url(#eggGrad)" stroke="#0284c7" stroke-width="1" />
          <circle cx="2" cy="-3" r="1.3" fill="#0369a1" opacity="0.6" />
          <circle cx="-3" cy="3" r="1.1" fill="#0369a1" opacity="0.6" />
          <circle cx="1" cy="6" r="1.2" fill="#0369a1" opacity="0.6" />
        </g>
        
        <g transform="translate(45, 33)">
          <ellipse cx="0" cy="0" rx="9" ry="13.5" fill="url(#eggGrad)" stroke="#0284c7" stroke-width="1" />
          <circle cx="-2" cy="-5" r="1.2" fill="#0369a1" opacity="0.6" />
          <circle cx="2" cy="1" r="1.5" fill="#0369a1" opacity="0.6" />
          <circle cx="-1" cy="6" r="1.1" fill="#0369a1" opacity="0.6" />
        </g>
      </g>
      
      <path d="M 8 42 Q 45 32 82 42 Q 90 76 45 76 Q 0 76 8 42 Z" fill="url(#nestGrad)" stroke="#592506" stroke-width="1.5" />
      
      <path d="M 5 45 Q 45 58 85 45" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round" />
      <path d="M 12 55 Q 45 68 78 55" fill="none" stroke="#92400e" stroke-width="2.5" stroke-linecap="round" />
      <path d="M 20 63 Q 45 72 70 63" fill="none" stroke="#d97706" stroke-width="1.8" stroke-linecap="round" />
      
      <g class="count-badge" transform="translate(45, 88)">
        <rect x="-16" y="-9" width="32" height="18" rx="9" fill="#0284c7" />
        <text x="0" y="4" text-anchor="middle" fill="#ffffff" font-size="11" font-weight="700">3</text>
      </g>
    </g>

    
    <g class="nest-group" id="nest-2" transform="translate(125, 68)">
      <circle class="nest-highlight" cx="45" cy="50" r="48" fill="#e0f2fe" opacity="0" />
      
      <g>
        
        <g transform="translate(31, 38) rotate(-18)">
          <ellipse cx="0" cy="0" rx="9" ry="13" fill="url(#eggGrad)" stroke="#0284c7" stroke-width="1" />
          <circle cx="-2" cy="-4" r="1.2" fill="#0369a1" opacity="0.6" />
          <circle cx="3" cy="2" r="1.4" fill="#0369a1" opacity="0.6" />
          <circle cx="-3" cy="5" r="1" fill="#0369a1" opacity="0.6" />
        </g>
        
        <g transform="translate(59, 38) rotate(18)">
          <ellipse cx="0" cy="0" rx="9" ry="13" fill="url(#eggGrad)" stroke="#0284c7" stroke-width="1" />
          <circle cx="2" cy="-3" r="1.3" fill="#0369a1" opacity="0.6" />
          <circle cx="-3" cy="3" r="1.1" fill="#0369a1" opacity="0.6" />
          <circle cx="1" cy="6" r="1.2" fill="#0369a1" opacity="0.6" />
        </g>
        
        <g transform="translate(45, 33)">
          <ellipse cx="0" cy="0" rx="9" ry="13.5" fill="url(#eggGrad)" stroke="#0284c7" stroke-width="1" />
          <circle cx="-2" cy="-5" r="1.2" fill="#0369a1" opacity="0.6" />
          <circle cx="2" cy="1" r="1.5" fill="#0369a1" opacity="0.6" />
          <circle cx="-1" cy="6" r="1.1" fill="#0369a1" opacity="0.6" />
        </g>
      </g>
      
      <path d="M 8 42 Q 45 32 82 42 Q 90 76 45 76 Q 0 76 8 42 Z" fill="url(#nestGrad)" stroke="#592506" stroke-width="1.5" />
      <path d="M 5 45 Q 45 58 85 45" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round" />
      <path d="M 12 55 Q 45 68 78 55" fill="none" stroke="#92400e" stroke-width="2.5" stroke-linecap="round" />
      <path d="M 20 63 Q 45 72 70 63" fill="none" stroke="#d97706" stroke-width="1.8" stroke-linecap="round" />
      
      <g class="count-badge" transform="translate(45, 88)">
        <rect x="-16" y="-9" width="32" height="18" rx="9" fill="#0284c7" />
        <text x="0" y="4" text-anchor="middle" fill="#ffffff" font-size="11" font-weight="700">6</text>
      </g>
    </g>

    
    <g class="nest-group" id="nest-3" transform="translate(232, 68)">
      <circle class="nest-highlight" cx="45" cy="50" r="48" fill="#e0f2fe" opacity="0" />
      
      <g>
        
        <g transform="translate(31, 38) rotate(-18)">
          <ellipse cx="0" cy="0" rx="9" ry="13" fill="url(#eggGrad)" stroke="#0284c7" stroke-width="1" />
          <circle cx="-2" cy="-4" r="1.2" fill="#0369a1" opacity="0.6" />
          <circle cx="3" cy="2" r="1.4" fill="#0369a1" opacity="0.6" />
          <circle cx="-3" cy="5" r="1" fill="#0369a1" opacity="0.6" />
        </g>
        
        <g transform="translate(59, 38) rotate(18)">
          <ellipse cx="0" cy="0" rx="9" ry="13" fill="url(#eggGrad)" stroke="#0284c7" stroke-width="1" />
          <circle cx="2" cy="-3" r="1.3" fill="#0369a1" opacity="0.6" />
          <circle cx="-3" cy="3" r="1.1" fill="#0369a1" opacity="0.6" />
          <circle cx="1" cy="6" r="1.2" fill="#0369a1" opacity="0.6" />
        </g>
        
        <g transform="translate(45, 33)">
          <ellipse cx="0" cy="0" rx="9" ry="13.5" fill="url(#eggGrad)" stroke="#0284c7" stroke-width="1" />
          <circle cx="-2" cy="-5" r="1.2" fill="#0369a1" opacity="0.6" />
          <circle cx="2" cy="1" r="1.5" fill="#0369a1" opacity="0.6" />
          <circle cx="-1" cy="6" r="1.1" fill="#0369a1" opacity="0.6" />
        </g>
      </g>
      
      <path d="M 8 42 Q 45 32 82 42 Q 90 76 45 76 Q 0 76 8 42 Z" fill="url(#nestGrad)" stroke="#592506" stroke-width="1.5" />
      <path d="M 5 45 Q 45 58 85 45" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round" />
      <path d="M 12 55 Q 45 68 78 55" fill="none" stroke="#92400e" stroke-width="2.5" stroke-linecap="round" />
      <path d="M 20 63 Q 45 72 70 63" fill="none" stroke="#d97706" stroke-width="1.8" stroke-linecap="round" />
      
      <g class="count-badge" transform="translate(45, 88)">
        <rect x="-16" y="-9" width="32" height="18" rx="9" fill="#0284c7" />
        <text x="0" y="4" text-anchor="middle" fill="#ffffff" font-size="11" font-weight="700">9</text>
      </g>
    </g>

    
    <g class="nest-group" id="nest-4" transform="translate(339, 68)">
      <circle class="nest-highlight" cx="45" cy="50" r="48" fill="#e0f2fe" opacity="0" />
      
      <g>
        
        <g transform="translate(31, 38) rotate(-18)">
          <ellipse cx="0" cy="0" rx="9" ry="13" fill="url(#eggGrad)" stroke="#0284c7" stroke-width="1" />
          <circle cx="-2" cy="-4" r="1.2" fill="#0369a1" opacity="0.6" />
          <circle cx="3" cy="2" r="1.4" fill="#0369a1" opacity="0.6" />
          <circle cx="-3" cy="5" r="1" fill="#0369a1" opacity="0.6" />
        </g>
        
        <g transform="translate(59, 38) rotate(18)">
          <ellipse cx="0" cy="0" rx="9" ry="13" fill="url(#eggGrad)" stroke="#0284c7" stroke-width="1" />
          <circle cx="2" cy="-3" r="1.3" fill="#0369a1" opacity="0.6" />
          <circle cx="-3" cy="3" r="1.1" fill="#0369a1" opacity="0.6" />
          <circle cx="1" cy="6" r="1.2" fill="#0369a1" opacity="0.6" />
        </g>
        
        <g transform="translate(45, 33)">
          <ellipse cx="0" cy="0" rx="9" ry="13.5" fill="url(#eggGrad)" stroke="#0284c7" stroke-width="1" />
          <circle cx="-2" cy="-5" r="1.2" fill="#0369a1" opacity="0.6" />
          <circle cx="2" cy="1" r="1.5" fill="#0369a1" opacity="0.6" />
          <circle cx="-1" cy="6" r="1.1" fill="#0369a1" opacity="0.6" />
        </g>
      </g>
      
      <path d="M 8 42 Q 45 32 82 42 Q 90 76 45 76 Q 0 76 8 42 Z" fill="url(#nestGrad)" stroke="#592506" stroke-width="1.5" />
      <path d="M 5 45 Q 45 58 85 45" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round" />
      <path d="M 12 55 Q 45 68 78 55" fill="none" stroke="#92400e" stroke-width="2.5" stroke-linecap="round" />
      <path d="M 20 63 Q 45 72 70 63" fill="none" stroke="#d97706" stroke-width="1.8" stroke-linecap="round" />
      
      <g class="count-badge" transform="translate(45, 88)">
        <rect x="-16" y="-9" width="32" height="18" rx="9" fill="#0284c7" />
        <text x="0" y="4" text-anchor="middle" fill="#ffffff" font-size="11" font-weight="700">12</text>
      </g>
    </g>

    
    <g id="each-group-callout">
      
      <rect x="92" y="196" width="156" height="30" rx="8" fill="#ffffff" stroke="#cbd5e1" stroke-width="1.5" filter="drop-shadow(0 2px 4px rgba(0,0,0,0.06))" />
      <text x="170" y="216" text-anchor="middle" fill="#1e2945" font-size="14" font-weight="600">3 in each group</text>
      
      <path d="M 170 196 Q 170 160 170 138" fill="none" stroke="#1e2945" stroke-width="2.2" marker-end="url(#arrow-navy)" stroke-linecap="round" />
    </g>

    
    <g id="bottom-phrase" transform="translate(80, 262)">
      <rect x="0" y="0" width="300" height="54" rx="14" fill="#eff6ff" stroke="#3b82f6" stroke-width="2.5" />
      <text x="150" y="34" text-anchor="middle" fill="#1d4ed8" font-size="20" font-weight="800" letter-spacing="0.3">4 groups of 3</text>
    </g>
  </svg>

  <script>
    // Subtle interactivity: click nests to toggle counting highlight
    const nests = document.querySelectorAll('.nest-group');
    nests.forEach((nest) => {
      nest.addEventListener('click', () => {
        nest.classList.toggle('active');
      });
    });
  </script>
</body>
</html>

Dodawanie w pamięci – liczby jednocyfrowe

Odejmowanie w pamięci – liczby jednocyfrowe

Dodawanie i odejmowanie wielokrotności 10

Dodawanie i odejmowanie wielokrotności 100

Dodawanie liczb dwucyfrowych bez przejścia

Odejmowanie liczb dwucyfrowych bez przejścia

Dodawanie liczb dwucyfrowych z przejściem

Odejmowanie liczb dwucyfrowych z przejściem

math

Dodawanie i odejmowanie w pamięci

Comprendre le sens d'ajouter et le signe « + »

Comprendre le sens d'enlever et le signe « - »

Comprendre la soustraction comme recherche d'une différence

Comprendre le rôle du signe « = » comme une équivalence

Traduire une situation problème par une écriture avec + ou -

Découvrir l'addition réitérée pour compter des paquets identiques

Comprendre la multiplication sur un quadrillage

Associer des groupements au mot « fois »

Le sens des opérations : addition, soustraction et multiplication au CP

20以内进位加法“凑十法”算理与操作

9、8、7加几的口算规律与速度提升

20以内退位减法“破十法”算理与操作

20以内退位减法“想加算减法”

20以内加减法口算综合熟练度冲刺

20以内进位加法与退位减法

Writing Repeated Addition from Equal Groups

Skip-Counting to Find Totals in Equal Groups

Exploring Rectangular Arrays: Rows and Columns

Writing Repeated Addition Equations for Arrays

Equal Sharing: Fair Shares into Groups

Connecting Sharing into Equal Groups to Division

Solving Word Problems with Equal Groups and Arrays

Even and Odd Numbers as Equal Pairs and Groups of Two

Equal Groups, Arrays, and Early Multiplication

Dodawanie trzech i więcej liczb

Obliczenia typu 250 + 50, 180 – 30

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

Sprawdzanie dodawania odejmowaniem

Sprawdzanie odejmowania dodawaniem

Szacowanie sum i różnic

Równania z okienkiem – dodawanie i odejmowanie

Zadania tekstowe – dodawanie i odejmowanie

Sprawdzenie – dodawanie i odejmowanie

Sprawność w dodawaniu i odejmowaniu – zastosowania

整十数加减整十数的口算方法

两位数加一位数（不进位）口算

两位数减一位数（不退位）口算

两位数加整十数的口算策略

两位数减整十数的口算策略

两位数加一位数（进位）口算与进位意识

两位数减一位数（退位）口算与退位分解

100以内简单连加、连减口算

100以内加减混合口算与小括号的作用

100以内口算易错题辨析与综合技能提升

100以内加减法口算与混合运算

Concepto de suma: juntar y añadir colecciones

El signo más y la frase numérica aditiva

Sumas básicas hasta 10 con marcos de diez

Propiedad conmutativa de la adición

Propiedad modulativa: sumar cero

Estrategia de dobles y casi dobles hasta 20

Estrategia de completar a la decena para sumar

Suma: conceptos básicos y estrategias de cálculo mental hasta 20

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

Tabliczka mnożenia przez 2 i 3

Tabliczka mnożenia przez 4 i 5

Tabliczka mnożenia przez 6 i 7

Tabliczka mnożenia przez 8 i 9

Mnożenie przez 0, 1 i 10

Przemienność mnożenia

Łączność mnożenia – trzy czynniki

Rozdzielność mnożenia względem dodawania

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

两位数加两位数（不进位）竖式计算

两位数加两位数（进位）竖式算理与“满十进一”

两位数减两位数（不退位）竖式计算

两位数减两位数（退位）竖式算理与“借一当十”

被减数是整十数的两位数退位减法竖式

100以内连加的竖式连写与简便计算

100以内连减的竖式连写与简便计算

100以内加减混合竖式计算

加法与减法的互逆关系与验算方法

100以内竖式填空与趣味加减数字谜

100以内竖式计算常见错误诊断与过关测试

100以内笔算加法与减法

Mnożenie przez 10 liczb mniejszych od 20

Mnożenie liczb dwucyfrowych przez 2

Mnożenie liczb dwucyfrowych przez 3, 4 i 5

Mnożenie liczb dwucyfrowych przez 6–9

Mnożenie liczb z zerami na końcu

Mnożenie pisemne przez liczbę jednocyfrową

Mnożenie pisemne przez liczbę dwucyfrową – wprowadzenie

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

Mnożenie w pamięci i pisemne

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

Suma de tres sumandos de una y dos cifras

Suma de números de tres cifras sin reagrupación

Suma de números de tres cifras con reagrupación de unidades y decenas

Problemas aditivos de composición y transformación positiva

Estimación de sumas y verificación de razonabilidad

Suma de tres cifras, problemas aditivos y estimación

Szacowanie iloczynów

Równania z okienkiem – mnożenie

Równania z okienkiem – dzielenie

Zadania tekstowe – mnożenie

Wiązki między mnożeniem a dodawaniem

Sprawdzenie – mnożenie

Zastosowanie mnożenia w zadaniach

整百、整千数的口算加减法

几百几十加减几百几十的口算

三位数加两位数或三位数（不进位）竖式

三位数加法（一次进位）竖式计算

三位数加法（连续进位）竖式计算

万以内的加法口算与笔算

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

Dzielenie jako wielokrotne odejmowanie

Tabliczka dzielenia przez 2 i 3

Tabliczka dzielenia przez 4 i 5

Tabliczka dzielenia przez 6, 7, 8 i 9

Dzielenie przez 10

Dzielenie z resztą – wprowadzenie

Dzielenie z resztą – ćwiczenia

Sprawdzanie dzielenia mnożeniem

Dzielenie w pamięci i z resztą

Making Equal Groups with Counters and Objects

Describing Equal Groups with Stem Sentences

Repeated Addition with Groups of 2

Repeated Addition with Groups of 5

Repeated Addition with Groups of 10

Doubling Numbers as Two Equal Groups

Solving Multiplication Word Problems with Equal Groups

Equal Groups and Skip Counting for Multiplication

Significados de la resta: quitar y separar elementos

La resta como comparación: cuánto falta o cuánto sobra

Hechos básicos de la resta hasta 10

Relación inversa entre suma y resta: familias de operaciones

Resta en la recta numérica retrocediendo pasos

Resta de decenas completas

Significados y cálculo mental de la resta

三位数减两位数或三位数（不退位）竖式

三位数减法（一次退位）竖式计算

三位数减法（连续退位）竖式计算

被减数中间或末尾有0的连续退位减法难点

三位数加减法的验算与自我检查策略

万以内加减法笔算总法则归纳

加减法估算与精算结合解决实际问题

万以内的减法笔算与加减综合应用

Resta de dos cifras sin desagrupación en columnas

Comprensión de la desagrupación en la resta con bloques

Algoritmo de la resta de dos cifras con desagrupación

Resta de números de tres cifras sin desagrupación

Resta de tres cifras desagrupando decenas y centenas

Resta con ceros en el minuendo

Comprobación de la resta mediante la suma

Problemas aditivos de transformación negativa y cambio

Problemas de dos pasos combinando suma y resta

Algoritmos de la sustracción, desagrupación y problemas

Building Arrays in Rows and Columns

Reading Arrays by Rows and Columns

Using Arrays to Solve Multiplication Problems

Sharing Equally Between Two Groups

Sharing Equally Between Three or Four Groups

Grouping Objects Into Equal Sets

Distinguishing Between Sharing and Grouping

Solving One-Step Division Word Problems

Arrays, Sharing, and Early Division

Dzielenie liczb dwucyfrowych przez jednocyfrowe

Dzielenie pisemne przez liczbę jednocyfrową

Dzielenie liczb z zerami na końcu

Zadania tekstowe – dzielenie

Dzielenie pisemne i zadania tekstowe

乘法的初步认识：几个几相加与乘法的意义

认识乘号、乘数与积及乘法算式的读写

5的乘法口诀探究与记忆

2、3、4的乘法口诀编创与记忆

乘法中交换两个乘数积不变的直观感悟

乘法的初步认识与2~5的乘法口诀

6的乘法口诀与点阵模型

7的乘法口诀与七巧板、星期周期问题

8的乘法口诀与数线跳跃模型

9的乘法口诀规律与手指魔术记忆

0和1的乘法特性与算理理解

九九乘法表的整体结构与对称规律探究

乘加和乘减两步混合运算与看图列式

表内乘法口算速度与自动化对决

6~9的乘法口诀与表内乘法综合应用

La multiplicación como suma repetida de grupos iguales

El signo por y la frase multiplicativa

Modelado de multiplicaciones con arreglos rectangulares

Propiedad conmutativa en arreglos rectangulares

Multiplicar por cero y por uno

Conceptos fundamentales de la multiplicación: grupos y arreglos

OGM.2.OA.6

Aligned learning resources

Related diagrams