<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }
    .panel {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .header {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }
    .items-container {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      align-items: center;
    }
    .pair-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 7px;
      padding: 3px 5px;
      font-size: 17px;
      line-height: 1.1;
    }
    .odd-single {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #fef2f2;
      border: 2px dashed #ef4444;
      border-radius: 7px;
      padding: 3px 5px;
      font-size: 17px;
      line-height: 1.1;
      min-height: 44px;
    }
    .status-bar {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-top: 2px;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 6px;
    }
    .badge-even {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #86efac;
    }
    .badge-odd {
      background: #fee2e2;
      color: #b91c1c;
      border: 1px solid #fca5a5;
    }
  </style>
</head>
<body>

  
  <div class="panel">
    <div class="header">14 Balls</div>
    <div class="items-container">
      <div class="pair-col"><span>⚽</span><span>⚽</span></div>
      <div class="pair-col"><span>⚽</span><span>⚽</span></div>
      <div class="pair-col"><span>⚽</span><span>⚽</span></div>
      <div class="pair-col"><span>⚽</span><span>⚽</span></div>
      <div class="pair-col"><span>⚽</span><span>⚽</span></div>
      <div class="pair-col"><span>⚽</span><span>⚽</span></div>
      <div class="pair-col"><span>⚽</span><span>⚽</span></div>
    </div>
    <div class="status-bar">
      <span class="badge badge-even">7 pairs + 0 leftover = EVEN</span>
    </div>
  </div>

  
  <div class="panel">
    <div class="header">23 Cards</div>
    <div class="items-container">
      <div class="pair-col"><span>🃏</span><span>🃏</span></div>
      <div class="pair-col"><span>🃏</span><span>🃏</span></div>
      <div class="pair-col"><span>🃏</span><span>🃏</span></div>
      <div class="pair-col"><span>🃏</span><span>🃏</span></div>
      <div class="pair-col"><span>🃏</span><span>🃏</span></div>
      <div class="pair-col"><span>🃏</span><span>🃏</span></div>
      <div class="pair-col"><span>🃏</span><span>🃏</span></div>
      <div class="pair-col"><span>🃏</span><span>🃏</span></div>
      <div class="pair-col"><span>🃏</span><span>🃏</span></div>
      <div class="pair-col"><span>🃏</span><span>🃏</span></div>
      <div class="pair-col"><span>🃏</span><span>🃏</span></div>
      <div class="odd-single"><span>🃏</span></div>
    </div>
    <div class="status-bar">
      <span class="badge badge-odd">11 pairs + 1 leftover = ODD</span>
    </div>
  </div>

</body>
</html>

Identifying Even and Odd Numbers by Pairing

<!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;
    }

    body {
      background: #fafafa;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
    }

    /* Controls & Header */
    .header-bar {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
    }

    .title-wrap h1 {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
    }

    .nav-tabs {
      display: flex;
      gap: 4px;
      background: #e2e8f0;
      padding: 3px;
      border-radius: 8px;
    }

    .tab-btn {
      background: transparent;
      border: none;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .tab-btn.active {
      background: #ffffff;
      color: #7c3aed;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    /* Main Diagram Container */
    .diagram-grid {
      display: grid;
      grid-template-columns: 3fr 1.15fr;
      gap: 10px;
      align-items: stretch;
    }

    @media (max-width: 540px) {
      .diagram-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Section Cards */
    .section-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 10px;
      transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .tens-card {
      border: 2px solid #ddd6fe;
      background: #fdfcff;
    }

    .ones-card {
      border: 2px solid #fde68a;
      background: #fffdf5;
      position: relative;
    }

    .card-label {
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .tens-label { color: #6d28d9; }
    .ones-label { color: #b45309; }

    .tag-badge {
      font-size: 11px;
      padding: 2px 8px;
      border-radius: 999px;
      font-weight: 600;
    }
    .tag-tens { background: #ede9fe; color: #6d28d9; }
    .tag-ones { background: #fef3c7; color: #b45309; }

    /* Ten Frames */
    .tens-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    @media (max-width: 400px) {
      .tens-row {
        grid-template-columns: 1fr;
      }
    }

    .frame-box {
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .frame-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 3px;
      width: 100%;
      max-width: 150px;
    }

    .pair-capsule {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 3px 2px;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      align-items: center;
    }

    .math-coin {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      transition: transform 0.2s ease;
    }

    .coin-purple {
      background: #8b5cf6;
      border: 1.5px solid #6d28d9;
    }

    .coin-gold {
      background: #f59e0b;
      border: 1.5px solid #d97706;
    }

    .coin-leftover {
      background: #f59e0b;
      border: 2px dashed #b45309;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
      animation: pulse 1.8s ease-in-out infinite;
    }

    .coin-empty {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 1.5px dashed #cbd5e1;
      background: transparent;
    }

    .pair-capsule.solo {
      background: #fffbeb;
      border: 1.5px solid #fcd34d;
    }

    .frame-caption {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
    }

    /* Leftover Callout */
    .leftover-callout {
      margin-top: 4px;
      background: #fee2e2;
      border: 1px solid #fca5a5;
      color: #b91c1c;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 6px;
      border-radius: 6px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
    }

    /* Dimming Modes */
    .dimmed {
      opacity: 0.28;
      filter: grayscale(0.4);
    }

    .highlighted {
      transform: scale(1.01);
    }

    /* Summary Bar */
    .summary-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      text-align: center;
    }

    .part-pill {
      padding: 3px 8px;
      border-radius: 6px;
      font-weight: 700;
    }
    .pill-tens { background: #ede9fe; color: #6d28d9; }
    .pill-ones { background: #fef3c7; color: #b45309; }
    .pill-result { background: #fee2e2; color: #dc2626; border: 1px solid #f87171; }

    @keyframes pulse {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3); }
      50% { transform: scale(1.1); box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.5); }
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <div class="title-wrap">
      <h1>Why is 37 Odd?</h1>
    </div>
    <div class="nav-tabs">
      <button class="tab-btn active" onclick="setMode('all')">All 37</button>
      <button class="tab-btn" onclick="setMode('tens')">Tens: 30</button>
      <button class="tab-btn" onclick="setMode('ones')">Ones: 7</button>
    </div>
  </div>

  <div class="diagram-grid">
    
    <div class="section-card tens-card" id="tensCard">
      <div class="card-label tens-label">
        <span>Tens: 30</span>
        <span class="tag-badge tag-tens">Always Paired</span>
      </div>

      <div class="tens-row">
        
        <div class="frame-box">
          <div class="frame-grid">
            <div class="pair-capsule"><div class="math-coin coin-purple"></div><div class="math-coin coin-purple"></div></div>
            <div class="pair-capsule"><div class="math-coin coin-purple"></div><div class="math-coin coin-purple"></div></div>
            <div class="pair-capsule"><div class="math-coin coin-purple"></div><div class="math-coin coin-purple"></div></div>
            <div class="pair-capsule"><div class="math-coin coin-purple"></div><div class="math-coin coin-purple"></div></div>
            <div class="pair-capsule"><div class="math-coin coin-purple"></div><div class="math-coin coin-purple"></div></div>
          </div>
          <span class="frame-caption">10 (5 pairs)</span>
        </div>

        
        <div class="frame-box">
          <div class="frame-grid">
            <div class="pair-capsule"><div class="math-coin coin-purple"></div><div class="math-coin coin-purple"></div></div>
            <div class="pair-capsule"><div class="math-coin coin-purple"></div><div class="math-coin coin-purple"></div></div>
            <div class="pair-capsule"><div class="math-coin coin-purple"></div><div class="math-coin coin-purple"></div></div>
            <div class="pair-capsule"><div class="math-coin coin-purple"></div><div class="math-coin coin-purple"></div></div>
            <div class="pair-capsule"><div class="math-coin coin-purple"></div><div class="math-coin coin-purple"></div></div>
          </div>
          <span class="frame-caption">20 (10 pairs)</span>
        </div>

        
        <div class="frame-box">
          <div class="frame-grid">
            <div class="pair-capsule"><div class="math-coin coin-purple"></div><div class="math-coin coin-purple"></div></div>
            <div class="pair-capsule"><div class="math-coin coin-purple"></div><div class="math-coin coin-purple"></div></div>
            <div class="pair-capsule"><div class="math-coin coin-purple"></div><div class="math-coin coin-purple"></div></div>
            <div class="pair-capsule"><div class="math-coin coin-purple"></div><div class="math-coin coin-purple"></div></div>
            <div class="pair-capsule"><div class="math-coin coin-purple"></div><div class="math-coin coin-purple"></div></div>
          </div>
          <span class="frame-caption">30 (15 pairs)</span>
        </div>
      </div>
    </div>

    
    <div class="section-card ones-card" id="onesCard">
      <div class="card-label ones-label">
        <span>Ones: 7</span>
        <span class="tag-badge tag-ones">Decides Odd/Even</span>
      </div>

      <div class="frame-box" style="background:#ffffff; border-color:#fde68a;">
        <div class="frame-grid">
          <div class="pair-capsule"><div class="math-coin coin-gold"></div><div class="math-coin coin-gold"></div></div>
          <div class="pair-capsule"><div class="math-coin coin-gold"></div><div class="math-coin coin-gold"></div></div>
          <div class="pair-capsule"><div class="math-coin coin-gold"></div><div class="math-coin coin-gold"></div></div>
          <div class="pair-capsule solo">
            <div class="math-coin coin-leftover"></div>
            <div class="coin-empty"></div>
          </div>
          <div class="pair-capsule" style="background:transparent; border-color:transparent;">
            <div class="coin-empty"></div>
            <div class="coin-empty"></div>
          </div>
        </div>
        <span class="frame-caption" style="color:#b45309;">3 pairs + 1 leftover</span>
      </div>

      <div class="leftover-callout">
        <span>✦ 1 Leftover = ODD</span>
      </div>
    </div>
  </div>

  
  <div class="summary-card">
    <span class="part-pill pill-tens">30 (15 Pairs)</span>
    <span>+</span>
    <span class="part-pill pill-ones">7 (3 Pairs + 1 Leftover)</span>
    <span>=</span>
    <span class="part-pill pill-result">37 is ODD</span>
  </div>

  <script>
    function setMode(mode) {
      const tabs = document.querySelectorAll('.tab-btn');
      const tensCard = document.getElementById('tensCard');
      const onesCard = document.getElementById('onesCard');

      tabs.forEach(t => t.classList.remove('active'));

      if (mode === 'all') {
        tabs[0].classList.add('active');
        tensCard.classList.remove('dimmed', 'highlighted');
        onesCard.classList.remove('dimmed', 'highlighted');
      } else if (mode === 'tens') {
        tabs[1].classList.add('active');
        tensCard.classList.remove('dimmed');
        tensCard.classList.add('highlighted');
        onesCard.classList.add('dimmed');
        onesCard.classList.remove('highlighted');
      } else if (mode === 'ones') {
        tabs[2].classList.add('active');
        tensCard.classList.add('dimmed');
        tensCard.classList.remove('highlighted');
        onesCard.classList.remove('dimmed');
        onesCard.classList.add('highlighted');
      }
    }
  </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: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 12px 8px;
    }

    .split-layout {
      display: grid;
      grid-template-columns: 1fr 1px 1fr;
      gap: 8px;
      align-items: stretch;
      max-width: 640px;
      margin: 0 auto;
      width: 100%;
    }

    .divider {
      background: repeating-linear-gradient(
        to bottom,
        #cbd5e1,
        #cbd5e1 6px,
        transparent 6px,
        transparent 12px
      );
      width: 1px;
      height: 100%;
    }

    .column {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 4px 6px;
      gap: 14px;
    }

    /* Top Headers */
    .header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .pill-num {
      font-size: 18px;
      font-weight: 800;
      padding: 4px 14px;
      border-radius: 9999px;
      letter-spacing: 0.5px;
    }

    .even-pill {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }

    .odd-pill {
      background: #fef3c7;
      color: #b45309;
      border: 1px solid #fde68a;
    }

    .subtitle {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
    }

    /* Middle Pods Area */
    .pods-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: nowrap;
      min-height: 130px;
      position: relative;
    }

    .pod {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: #f0fdf4;
      border: 1.5px solid #86efac;
      border-radius: 20px;
      padding: 8px 6px;
      cursor: pointer;
      position: relative;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .pod:active {
      transform: scale(0.95);
    }

    .pod.bounce {
      animation: microBounce 0.35s ease;
    }

    @keyframes microBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    .counter {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
    }

    .counter-blue {
      background: #0284c7;
    }

    .counter-orange {
      background: #ea580c;
    }

    .buddy-link {
      width: 4px;
      height: 10px;
      background: #86efac;
      border-radius: 2px;
    }

    /* Lone Pod (Odd) */
    .lone-pod {
      background: #fefce8;
      border: 2px dashed #f59e0b;
      border-radius: 20px;
      padding: 8px 6px;
      cursor: pointer;
      position: relative;
      animation: pulseGlow 2.5s infinite ease-in-out;
      height: 84px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    @keyframes pulseGlow {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
      }
      50% {
        box-shadow: 0 0 8px 2px rgba(245, 158, 11, 0.3);
      }
    }

    .lone-pod.wobble {
      animation: boingWobble 0.4s ease;
    }

    @keyframes boingWobble {
      0%, 100% { transform: rotate(0deg) scale(1); }
      25% { transform: rotate(-8deg) scale(1.08); }
      75% { transform: rotate(8deg) scale(0.95); }
    }

    .lone-tag {
      position: absolute;
      top: -20px;
      background: #f59e0b;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 6px;
      white-space: nowrap;
      pointer-events: none;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .lone-tag::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 4px 4px 0;
      border-style: solid;
      border-color: #f59e0b transparent transparent transparent;
    }

    .emoji-pop {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s, transform 0.3s;
    }

    .emoji-pop.show {
      opacity: 1;
      transform: translate(-50%, -140%);
    }

    /* Bottom Badges */
    .badge {
      font-size: 12px;
      font-weight: 700;
      padding: 6px 12px;
      border-radius: 8px;
      text-align: center;
      letter-spacing: 0.2px;
    }

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

    .odd-badge {
      background: #ffedd5;
      color: #c2410c;
    }

    @media (max-width: 380px) {
      .pod, .lone-pod {
        padding: 6px 4px;
        gap: 4px;
      }
      .counter {
        width: 20px;
        height: 20px;
      }
      .pods-container {
        gap: 4px;
      }
      .pill-num {
        font-size: 16px;
        padding: 3px 10px;
      }
      .badge {
        font-size: 11px;
        padding: 5px 8px;
      }
    }
  </style>
</head>
<body>

  <div class="split-layout">
    
    <div class="column">
      <div class="header">
        <div class="pill-num even-pill">6 (Even)</div>
        <div class="subtitle">3 complete pairs</div>
      </div>

      <div class="pods-container">
        <div class="pod" onclick="handlePairClick(this)">
          <div class="counter counter-blue"></div>
          <div class="buddy-link"></div>
          <div class="counter counter-blue"></div>
        </div>
        <div class="pod" onclick="handlePairClick(this)">
          <div class="counter counter-blue"></div>
          <div class="buddy-link"></div>
          <div class="counter counter-blue"></div>
        </div>
        <div class="pod" onclick="handlePairClick(this)">
          <div class="counter counter-blue"></div>
          <div class="buddy-link"></div>
          <div class="counter counter-blue"></div>
        </div>
      </div>

      <div class="badge even-badge">✓ All paired → EVEN</div>
    </div>

    <div class="divider"></div>

    
    <div class="column">
      <div class="header">
        <div class="pill-num odd-pill">7 (Odd)</div>
        <div class="subtitle">3 pairs + 1 leftover</div>
      </div>

      <div class="pods-container">
        <div class="pod" onclick="handlePairClick(this)">
          <div class="counter counter-orange"></div>
          <div class="buddy-link" style="background:#fed7aa;"></div>
          <div class="counter counter-orange"></div>
        </div>
        <div class="pod" onclick="handlePairClick(this)">
          <div class="counter counter-orange"></div>
          <div class="buddy-link" style="background:#fed7aa;"></div>
          <div class="counter counter-orange"></div>
        </div>
        <div class="pod" onclick="handlePairClick(this)">
          <div class="counter counter-orange"></div>
          <div class="buddy-link" style="background:#fed7aa;"></div>
          <div class="counter counter-orange"></div>
        </div>
        <div class="lone-pod" onclick="handleLoneClick(this)">
          <div class="lone-tag">No buddy!</div>
          <div class="counter counter-orange"></div>
          <div class="emoji-pop" id="loneEmoji">❓</div>
        </div>
      </div>

      <div class="badge odd-badge">★ 1 leftover → ODD</div>
    </div>
  </div>

  <script>
    let audioCtx = null;

    function getAudioContext() {
      if (!audioCtx) {
        audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (audioCtx.state === 'suspended') {
        audioCtx.resume();
      }
      return audioCtx;
    }

    function playChime() {
      try {
        const ctx = getAudioContext();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'sine';
        osc.frequency.setValueAtTime(523.25, ctx.currentTime); // C5
        osc.frequency.exponentialRampToValueAtTime(659.25, ctx.currentTime + 0.15); // E5
        gain.gain.setValueAtTime(0.18, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.35);
      } catch (e) {}
    }

    function playBoing() {
      try {
        const ctx = getAudioContext();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.type = 'triangle';
        osc.frequency.setValueAtTime(320, ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(140, ctx.currentTime + 0.25);
        gain.gain.setValueAtTime(0.2, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.3);
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.start();
        osc.stop(ctx.currentTime + 0.3);
      } catch (e) {}
    }

    function handlePairClick(el) {
      playChime();
      el.classList.remove('bounce');
      void el.offsetWidth;
      el.classList.add('bounce');
    }

    function handleLoneClick(el) {
      playBoing();
      el.classList.remove('wobble');
      void el.offsetWidth;
      el.classList.add('wobble');

      const emoji = document.getElementById('loneEmoji');
      emoji.classList.add('show');
      setTimeout(() => {
        emoji.classList.remove('show');
      }, 600);
    }
  </script>
</body>
</html>

Soustraire 1, 2 ou 3 en reculant sur la file numérique

Soustraire des unités sans franchir la dizaine

Soustraire un nombre inférieur à 9 en passant par la dizaine

Soustraire 8 en faisant moins 10 plus 2

Soustraire 9 en passant par -10 + 1

Trouver la moitié d'un petit nombre pair

Calculer la moitié des dizaines entières paires

Calculer la moitié d'un nombre pair par décomposition

Résoudre des problèmes de partage en deux moitiés

math

Calcul mental : soustractions astucieuses et moitiés

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

Conteo, representación y patrones hasta 20

Découvrir les paires et les nombres pairs avec du matériel

Découvrir les nombres impairs avec le reste isolé

Partager une collection en deux parties égales sans reste

Reconnaître les nombres pairs jusqu'à 10

Reconnaître les nombres impairs jusqu'à 10

Observer l'alternance pair et impair sur la bande numérique

Identifier le chiffre des unités pour reconnaître un nombre pair

Identifier le chiffre des unités pour reconnaître un nombre impair

Classer les nombres de 11 à 20 en pairs et impairs

Classer les nombres à deux chiffres en pairs et impairs

Découvrir et identifier les nombres pairs et impairs

Identifying Groups with the Same Number of Objects

Sharing Objects Fairly Between Two People

Sharing Objects Fairly Among Three or Four People

Making Groups of Two with Objects

Making Groups of Three and Four with Objects

Grouping Objects Into Sets of a Given Size

Sharing Objects Equally Among Groups

Partitioning a Whole Set into Equal Groups

Counting Equal Groups

Equal Sharing and Grouping with Objects

Identifying Even and Odd Numbers

Explaining Why a Number Is Even or Odd

Pairing Objects to Show Even Numbers

Pairing Objects to Show Odd Numbers

Even and Odd Patterns on a Number Line

Addition Rules for Even and Odd Numbers

Subtraction Rules for Even and Odd Numbers

Even and Odd Numbers in Real Life

Even and Odd Numbers Up to 40

Faire le lien entre moitiés et nombres pairs

Entraînement mixte : soustractions rapides et moitiés

Calcul mental au CE1 : trouver la moitié d'un nombre pair

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

Sharing into Two Equal Groups

Even Numbers as Two Equal Parts

Patterns of Ones Digits in Even and Odd Numbers

Adding and Subtracting Odd and Even Numbers

Odd and Even Numbers: Pairing, Doubles, and Halves

Faire le lien entre doubles et nombres pairs

Somme de deux nombres pairs : toujours paire

Somme de deux nombres impairs : toujours paire

Somme d'un nombre pair et d'un nombre impair

Ajouter ou enlever 1 à un nombre pair ou impair

Compter de 2 en 2 à partir d'un nombre pair

Compter de 2 en 2 à partir d'un nombre impair

Résoudre des énigmes sur les nombres pairs et impairs

Bilan et jeux de parité des nombres au CE1

Propriétés et calculs avec les nombres pairs et impairs

Sharing Leftovers: What Happens When It's Not Equal

Grouping with Leftovers: What Is Left Over?

Partitioning Sets of Objects with and Without Remainders

Modeling Fair Sharing Word Problems with Leftovers

Grouping Word Problems with Leftovers

Exploring Remainders and Leftovers When Sharing and Grouping

Sharing into Two Equal Groups with No Leftovers

Modeling Even Numbers Up to 10 with Pairs

Modeling Even Numbers Up to 20 with Pairs

Recognizing Even Quantities in Ten-Frames and Dot Cards

Understanding Even Numbers with Pairs and Groups

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

Partager en deux paquets égaux sans reste : la notion de nombre pair

Grouper par deux (paires) et identifier les nombres impairs

Reconnaître la parité des nombres jusqu'à 20

Déterminer la parité d'un nombre à deux chiffres jusqu'à 100

Explorer l'alternance pair/impair sur la bande numérique

Résoudre des problèmes de partage équitable liés à la parité

Nombres pairs et nombres impairs : la parité

Making Pairs with an Odd Number: The Extra One Left Over

Splitting an Odd Number into Two Groups: Remainder of One

Modeling Odd Numbers Up to 10 with Pairs and Ones

Modeling Odd Numbers Up to 20 with Pairs and Ones

Recognizing Odd Quantities in Ten-Frames and Dot Cards

Understanding Odd Numbers with Pairs and Leftovers

Identifying Even and Odd Numbers with Pairs

Every Counting Number Is Either Even or Odd

Representing Odd and Even Numbers With Models

Sorting Quantities and Numbers as Even or Odd

Even and Odd Patterns on the Number Line and Hundred Chart

Solving Word Problems with Even and Odd Sharing

Even and Odd Numbers: Classification and Problem Solving

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

Recognising Equal Groups for Multiplication

Connecting Repeated Addition to Equal Groups

Writing Multiplication Sentences with the × Symbol

Representing Multiplication with Arrays

Showing That Multiplication Is Commutative

Mastering the 2 Times Table

Identifying Odd and Even Numbers

Mastering the 5 Times Table

Mastering the 10 Times Table

Solving Multiplication Word Problems

Multiplication Concepts & Times Tables

Understanding Division as Equal Sharing

Understanding Division as Grouping

Writing Division Sentences with the ÷ Symbol

Demonstrating That Division Is Not Commutative

Dividing by 2 Using Halving

Dividing by 5

Dividing by 10

Multiplication and Division Fact Families (2, 5, 10)

Finding Missing Numbers in Multiplication and Division

Solving Division Word Problems

Division Concepts & Inverse Relationships

Pairing Objects to Show Even Numbers (up to 20)

Pairing Objects to Show Odd Numbers (up to 20)

Even Numbers as Equal Pairs (up to 40)

Odd Numbers with a Leftover One (up to 40)

Determining Even or Odd by Pairing (up to 40)

Explaining Even and Odd Using Pairing Models

Even and Odd Numbers by Pairing

Partes del reloj analógico: el horario y el minutero

Lectura de horas en punto en reloj analógico y digital

Lectura de horas y media en relojes

Lectura de cuartos de hora: y cuarto y menos cuarto

Lectura del reloj de cinco en cinco minutos

Distinción entre la mañana, tarde y noche: a.m. y p.m.

Duración de eventos y tiempo transcurrido en horas y minutos

Problemas cotidianos con horarios y cronogramas

Lectura del reloj y cálculo de duraciones

OGM.3.OA.3

OGM.3.OA.3

Aligned learning resources

Related diagrams