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

    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 580px;
      margin: 0 auto;
    }

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

    .panel {
      border-radius: 8px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
    }

    .panel-bad {
      background: #fff5f5;
      border: 1.5px dashed #fca5a5;
      cursor: pointer;
    }

    .panel-good {
      background: #f0fdf4;
      border: 1.5px dashed #86efac;
    }

    .panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 800;
    }

    .badge-bad { color: #dc2626; }
    .badge-good { color: #16a34a; }

    .tap-hint {
      font-size: 11px;
      color: #dc2626;
      background: #fee2e2;
      padding: 2px 6px;
      border-radius: 4px;
      font-weight: 600;
    }

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

    .stick-orange-shift {
      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="panel panel-bad" id="leftPanel" title="Tap to see the trick!">
      <div class="panel-header">
        <span class="badge-bad">❌ Not Lined Up</span>
        <span class="tap-hint">Tap to align</span>
      </div>

      <svg viewBox="0 0 250 150">
        
        <g id="mismatchWarning">
          <line x1="25" y1="20" x2="25" y2="130" stroke="#fca5a5" stroke-width="1.5" stroke-dasharray="3,3" />
          <line x1="75" y1="75" x2="75" y2="130" stroke="#fca5a5" stroke-width="1.5" stroke-dasharray="3,3" />
          <path d="M 25 125 L 75 125" stroke="#dc2626" stroke-width="2" marker-start="url(#dot)" marker-end="url(#dot)" />
          <text x="50" y="142" font-size="11" font-weight="700" fill="#dc2626" text-anchor="middle">Uneven Start!</text>
        </g>

        
        <g transform="translate(25, 30)">
          <rect x="0" y="0" width="160" height="22" rx="11" fill="#2563eb" />
          <rect x="3" y="3" width="154" height="6" rx="3" fill="#60a5fa" opacity="0.6" />
        </g>

        
        <g id="slidingStick" class="stick-orange-shift" transform="translate(75, 75)">
          <rect x="0" y="0" width="115" height="22" rx="11" fill="#ea580c" />
          <rect x="3" y="3" width="109" height="6" rx="3" fill="#fb923c" opacity="0.6" />
        </g>
      </svg>
    </div>

    
    <div class="panel panel-good">
      <div class="panel-header">
        <span class="badge-good">✅ Lined Up</span>
      </div>

      <svg viewBox="0 0 250 150">
        
        <line x1="30" y1="20" x2="30" y2="135" stroke="#dc2626" stroke-width="2" stroke-dasharray="4,3" />
        <rect x="6" y="4" width="48" height="15" rx="4" fill="#dc2626" />
        <text x="30" y="15" font-size="8" font-weight="800" fill="#ffffff" text-anchor="middle">START LINE</text>

        
        <g transform="translate(30, 30)">
          <rect x="0" y="0" width="160" height="22" rx="11" fill="#2563eb" />
          <rect x="3" y="3" width="154" height="6" rx="3" fill="#60a5fa" opacity="0.6" />
          
          <rect x="166" y="3" width="46" height="16" rx="8" fill="#dbeafe" />
          <text x="189" y="15" font-size="10" font-weight="700" fill="#1d4ed8" text-anchor="middle">Longer</text>
        </g>

        
        <g transform="translate(30, 75)">
          <rect x="0" y="0" width="115" height="22" rx="11" fill="#ea580c" />
          <rect x="3" y="3" width="109" height="6" rx="3" fill="#fb923c" opacity="0.6" />
          
          <rect x="121" y="3" width="46" height="16" rx="8" fill="#ffedd5" />
          <text x="144" y="15" font-size="10" font-weight="700" fill="#c2410c" text-anchor="middle">Shorter</text>
        </g>

        
        <path d="M 148 78 L 148 60 L 193 60 L 193 54" fill="none" stroke="#16a34a" stroke-width="1.5" stroke-dasharray="3,3" />
      </svg>
    </div>
  </div>

  <script>
    const leftPanel = document.getElementById('leftPanel');
    const stick = document.getElementById('slidingStick');
    const warning = document.getElementById('mismatchWarning');
    let aligned = false;

    leftPanel.addEventListener('click', () => {
      aligned = !aligned;
      if (aligned) {
        stick.style.transform = 'translate(25px, 75px)';
        warning.style.opacity = '0.2';
      } else {
        stick.style.transform = 'translate(75px, 75px)';
        warning.style.opacity = '1';
      }
    });
  </script>
</body>
</html>

Comparing Lengths: Longer and Shorter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      background: transparent;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 12px 16px;
      gap: 16px;
      overflow-x: hidden;
    }

    .container {
      position: relative;
      width: 100%;
      max-width: 560px;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 24px 0 20px 0;
    }

    /* Start Line Guide */
    .start-guide {
      position: absolute;
      left: 54px;
      top: 24px;
      bottom: 12px;
      width: 3px;
      background: #94a3b8;
      border-radius: 2px;
      z-index: 10;
    }

    .start-label {
      position: absolute;
      top: 0;
      left: 54px;
      transform: translateX(-50%);
      background: #475569;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 5px;
      white-space: nowrap;
      z-index: 12;
    }

    /* Ribbon Rows */
    .ribbon-row {
      position: relative;
      width: 100%;
      height: 48px;
      display: flex;
      align-items: center;
    }

    .ribbon-track {
      position: absolute;
      left: 57px;
      right: 28px;
      height: 38px;
      display: flex;
      align-items: center;
    }

    /* Ribbon Styling */
    .ribbon {
      position: relative;
      height: 38px;
      border-radius: 0 6px 6px 0;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 8px;
    }

    /* Satin Ribbon Sheen */
    .ribbon::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 45%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.05) 100%);
      border-radius: 0 6px 0 0;
      pointer-events: none;
    }

    .ribbon-red {
      width: 80%;
      background: linear-gradient(180deg, #f87171 0%, #dc2626 100%);
    }

    .ribbon-blue {
      width: 40%;
      background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
    }

    /* Badges */
    .badge {
      position: absolute;
      right: -10px;
      top: -12px;
      padding: 3px 9px;
      border-radius: 14px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.3px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
      white-space: nowrap;
      z-index: 15;
      animation: gentleBounce 2.4s ease-in-out infinite;
    }

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

    .badge-longer {
      background: #ffe4e6;
      color: #be123c;
      border: 1.5px solid #f43f5e;
      animation-delay: 0.3s;
    }

    .badge-shorter {
      background: #dbeafe;
      color: #1d4ed8;
      border: 1.5px solid #3b82f6;
    }

    /* Match Line & Highlight */
    .match-line {
      position: absolute;
      top: 24px;
      bottom: 12px;
      width: 2px;
      border-left: 2px dashed #0284c7;
      opacity: 0;
      transition: opacity 0.35s ease;
      z-index: 9;
      pointer-events: none;
    }

    .match-tag {
      position: absolute;
      bottom: -4px;
      transform: translateX(-50%);
      background: #0284c7;
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 5px;
      white-space: nowrap;
    }

    .extra-segment {
      position: absolute;
      top: 0;
      bottom: 0;
      background: repeating-linear-gradient(
        -45deg,
        rgba(255, 255, 255, 0.28),
        rgba(255, 255, 255, 0.28) 6px,
        rgba(255, 255, 255, 0.08) 6px,
        rgba(255, 255, 255, 0.08) 12px
      );
      border-left: 2px dashed rgba(255, 255, 255, 0.9);
      opacity: 0;
      transition: opacity 0.35s ease;
      border-radius: 0 6px 6px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      color: #ffffff;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    }

    .container.matched .match-line,
    .container.matched .extra-segment {
      opacity: 1;
    }

    /* Controls */
    .controls {
      display: flex;
      gap: 12px;
      width: 100%;
      max-width: 560px;
      justify-content: center;
    }

    button {
      appearance: none;
      background: #f8fafc;
      border: 1.5px solid #cbd5e1;
      color: #334155;
      padding: 8px 18px;
      font-size: 13.5px;
      font-weight: 700;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
    }

    button.primary {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }

    button:hover {
      opacity: 0.92;
    }

    button:active {
      opacity: 0.8;
    }

    @media (max-width: 440px) {
      .start-guide {
        left: 46px;
      }
      .start-label {
        left: 46px;
        font-size: 10px;
        padding: 2px 6px;
      }
      .ribbon-track {
        left: 49px;
        right: 18px;
      }
      .badge {
        font-size: 11px;
        padding: 2px 7px;
      }
      button {
        font-size: 12.5px;
        padding: 7px 14px;
      }
    }
  </style>
</head>
<body>

  <div class="container" id="container">
    
    <div class="start-label">Start Line</div>
    <div class="start-guide"></div>

    
    <div class="match-line" id="matchLine">
      <div class="match-tag">Match Line</div>
    </div>

    
    <div class="ribbon-row">
      <div class="ribbon-track">
        <div class="ribbon ribbon-red" id="redRibbon">
          <div class="extra-segment" id="extraSegment">Extra Length</div>
          <div class="badge badge-longer">Longer ✦</div>
        </div>
      </div>
    </div>

    
    <div class="ribbon-row">
      <div class="ribbon-track">
        <div class="ribbon ribbon-blue" id="blueRibbon">
          <div class="badge badge-shorter">Shorter</div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button type="button" class="primary" id="toggleBtn">Show Match Line</button>
    <button type="button" id="resetBtn">Reset</button>
  </div>

  <script>
    const container = document.getElementById('container');
    const toggleBtn = document.getElementById('toggleBtn');
    const resetBtn = document.getElementById('resetBtn');
    const matchLine = document.getElementById('matchLine');
    const extraSegment = document.getElementById('extraSegment');
    const redRibbon = document.getElementById('redRibbon');
    const blueRibbon = document.getElementById('blueRibbon');

    function updatePositions() {
      const redRect = redRibbon.getBoundingClientRect();
      const blueRect = blueRibbon.getBoundingClientRect();
      const containerRect = container.getBoundingClientRect();

      const matchX = blueRect.right - containerRect.left;
      matchLine.style.left = matchX + 'px';

      const blueWidth = blueRect.width;
      const redWidth = redRect.width;
      const extraWidth = Math.max(0, redWidth - blueWidth);

      extraSegment.style.left = blueWidth + 'px';
      extraSegment.style.width = extraWidth + 'px';
    }

    let isMatched = false;

    function setMatched(state) {
      isMatched = state;
      if (isMatched) {
        container.classList.add('matched');
        toggleBtn.textContent = 'Hide Match Line';
        toggleBtn.classList.remove('primary');
      } else {
        container.classList.remove('matched');
        toggleBtn.textContent = 'Show Match Line';
        toggleBtn.classList.add('primary');
      }
    }

    toggleBtn.addEventListener('click', () => {
      setMatched(!isMatched);
    });

    resetBtn.addEventListener('click', () => {
      setMatched(false);
    });

    window.addEventListener('resize', updatePositions);
    // Initial positioning
    requestAnimationFrame(updatePositions);
  </script>
</body>
</html>

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

    .canvas-box {
      width: 100%;
      max-width: 580px;
      position: relative;
    }

    svg {
      width: 100%;
      height: auto;
      display: block;
      overflow: visible;
    }

    .crayon {
      cursor: pointer;
      transition: filter 0.2s ease;
    }
    .crayon:hover {
      filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
    }

    .diff-zone {
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .diff-zone.visible {
      opacity: 1;
    }

    .controls {
      display: flex;
      gap: 12px;
      margin-top: 14px;
      justify-content: center;
    }

    .btn {
      appearance: none;
      border: none;
      outline: none;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 700;
      border-radius: 999px;
      cursor: pointer;
      background: #f1f5f9;
      color: #475569;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn:hover {
      background: #e2e8f0;
      color: #1e2945;
    }
    .btn.active {
      background: #22b7ff;
      color: #ffffff;
      box-shadow: 0 3px 8px rgba(34, 183, 255, 0.35);
    }
  </style>
</head>
<body>

  <div class="canvas-box">
    <svg viewBox="0 0 540 300" aria-label="Comparing crayon lengths">
      <defs>
        
        <filter id="softShadow" x="-5%" y="-10%" width="115%" height="130%">
          <feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#000000" flood-opacity="0.08"/>
        </filter>
        <filter id="glowGreen" x="-10%" y="-10%" width="120%" height="120%">
          <feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#22c55e" flood-opacity="0.4"/>
        </filter>
        <filter id="glowOrange" x="-10%" y="-10%" width="120%" height="120%">
          <feDropShadow dx="0" dy="0" stdDeviation="3" flood-color="#f97316" flood-opacity="0.4"/>
        </filter>
      </defs>

      
      <g id="diffZone" class="diff-zone">
        <rect x="250" y="55" width="125" height="170" fill="#f0fdf4" rx="10" stroke="#86efac" stroke-width="2" stroke-dasharray="4,4"/>
        <line x1="250" y1="45" x2="250" y2="235" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3,3"/>
        <line x1="375" y1="45" x2="375" y2="235" stroke="#22c55e" stroke-width="1.5" stroke-dasharray="3,3"/>
        <text x="312" y="258" text-anchor="middle" font-size="13" font-weight="700" fill="#15803d">Extra Length ✦</text>
      </g>

      
      <g>
        <line x1="100" y1="40" x2="100" y2="250" stroke="#3b82f6" stroke-width="3" stroke-dasharray="6,5" stroke-linecap="round"/>
        <rect x="52" y="10" width="96" height="24" rx="6" fill="#eff6ff" stroke="#bfdbfe" stroke-width="1"/>
        <text x="100" y="26" text-anchor="middle" font-size="12" font-weight="800" fill="#1d4ed8" letter-spacing="0.3">START LINE</text>
        <polygon points="100,38 96,33 104,33" fill="#3b82f6"/>
      </g>

      
      <g class="crayon" id="crayonLong" filter="url(#softShadow)" onclick="inspect('long')">
        
        <rect x="100" y="65" width="240" height="42" fill="#22c55e" rx="3"/>
        
        <rect x="135" y="65" width="160" height="42" fill="#16a34a"/>
        
        <path d="M 145 65 Q 150 86 145 107 M 150 65 Q 155 86 150 107" stroke="#15803d" stroke-width="2.5" fill="none"/>
        <path d="M 280 65 Q 285 86 280 107 M 285 65 Q 290 86 285 107" stroke="#15803d" stroke-width="2.5" fill="none"/>
        <circle cx="215" cy="86" r="13" fill="#15803d" opacity="0.4"/>
        
        <polygon points="340,65 375,86 340,107" fill="#15803d"/>
        <polygon points="340,73 375,86 340,99" fill="#22c55e"/>

        
        <g id="badgeLong">
          <line x1="390" y1="86" x2="430" y2="86" stroke="#15803d" stroke-width="2.5" stroke-linecap="round"/>
          <polygon points="383,86 392,82 392,90" fill="#15803d"/>
          <rect x="430" y="70" width="85" height="32" rx="16" fill="#22c55e" filter="url(#glowGreen)"/>
          <text x="472" y="91" text-anchor="middle" font-size="14" font-weight="800" fill="#ffffff">Longer</text>
        </g>
      </g>

      
      <g class="crayon" id="crayonShort" filter="url(#softShadow)" onclick="inspect('short')">
        
        <rect x="100" y="145" width="125" height="42" fill="#f97316" rx="3"/>
        
        <rect x="125" y="145" width="75" height="42" fill="#ea580c"/>
        
        <path d="M 133 145 Q 137 166 133 187" stroke="#c2410c" stroke-width="2.5" fill="none"/>
        <path d="M 190 145 Q 194 166 190 187" stroke="#c2410c" stroke-width="2.5" fill="none"/>
        <circle cx="162" cy="166" r="13" fill="#c2410c" opacity="0.4"/>
        
        <polygon points="225,145 250,166 225,187" fill="#c2410c"/>
        <polygon points="225,152 250,166 225,180" fill="#f97316"/>

        
        <g id="badgeShort">
          <line x1="265" y1="166" x2="305" y2="166" stroke="#c2410c" stroke-width="2.5" stroke-linecap="round"/>
          <polygon points="258,166 267,162 267,170" fill="#c2410c"/>
          <rect x="305" y="150" width="85" height="32" rx="16" fill="#f97316" filter="url(#glowOrange)"/>
          <text x="347" y="171" text-anchor="middle" font-size="14" font-weight="800" fill="#ffffff">Shorter</text>
        </g>
      </g>
    </svg>
  </div>

  <div class="controls">
    <button class="btn" id="diffBtn" onclick="toggleDiff()">
      <span>✦</span> Compare Difference
    </button>
  </div>

  <script>
    let diffActive = false;

    function playTone(freq, dur = 0.25) {
      try {
        const ctx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.frequency.value = freq;
        osc.type = 'sine';
        osc.connect(gain);
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.18, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
        osc.start();
        osc.stop(ctx.currentTime + dur);
      } catch (e) {}
    }

    function toggleDiff() {
      diffActive = !diffActive;
      const zone = document.getElementById('diffZone');
      const btn = document.getElementById('diffBtn');
      if (diffActive) {
        zone.classList.add('visible');
        btn.classList.add('active');
        playTone(523.25, 0.3); // High C
      } else {
        zone.classList.remove('visible');
        btn.classList.remove('active');
        playTone(392.00, 0.2); // G
      }
    }

    function inspect(type) {
      if (type === 'long') {
        playTone(587.33, 0.3); // D5
      } else {
        playTone(329.63, 0.3); // E4
      }
      if (!diffActive) toggleDiff();
    }
  </script>
</body>
</html>

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

    .stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 240px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: auto 0;
    }

    /* Baseline reference line to show tilt/dip */
    .reference-line {
      position: absolute;
      top: 50%;
      left: 10%;
      right: 10%;
      height: 2px;
      border-top: 2px dashed #cbd5e1;
      z-index: 0;
    }

    .hand-column {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 45%;
      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .hand-heavy {
      transform: translateY(28px);
    }

    .hand-light {
      transform: translateY(-24px);
    }

    .badge {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 8px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

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

    .badge-lighter {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #bbf7d0;
    }

    .item-display {
      font-size: 48px;
      line-height: 1;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
      transition: transform 0.3s ease;
    }

    .hand-graphic {
      font-size: 56px;
      line-height: 1;
      margin-top: -6px;
    }

    .arrow-indicator {
      font-size: 14px;
      font-weight: 800;
      margin-top: 4px;
    }

    .arrow-down {
      color: #0284c7;
    }

    .arrow-up {
      color: #16a34a;
    }

    .controls {
      display: flex;
      gap: 10px;
      width: 100%;
      max-width: 400px;
      justify-content: center;
    }

    .btn {
      flex: 1;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 10px;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }

    .btn.active {
      background: #eff6ff;
      border-color: #3b82f6;
      color: #1d4ed8;
    }
  </style>
</head>
<body>

  <div class="stage">
    <div class="reference-line"></div>

    
    <div class="hand-column hand-heavy" id="leftHand">
      <span class="badge badge-heavier">Heavier</span>
      <div class="item-display" id="leftItem">🍎</div>
      <div class="hand-graphic">🤲</div>
      <span class="arrow-indicator arrow-down">▼ Dips Down</span>
    </div>

    
    <div class="hand-column hand-light" id="rightHand">
      <span class="badge badge-lighter">Lighter</span>
      <div class="item-display" id="rightItem">🖍️</div>
      <div class="hand-graphic">🤲</div>
      <span class="arrow-indicator arrow-up">▲ Stays Up</span>
    </div>
  </div>

  <div class="controls">
    <button class="btn active" id="btn1" onclick="selectPair(0)">
      <span>🍎</span> vs <span>🖍️</span>
    </button>
    <button class="btn" id="btn2" onclick="selectPair(1)">
      <span>🧴</span> vs <span>🍃</span>
    </button>
  </div>

  <script>
    const pairs = [
      { heavy: '🍎', light: '🖍️' },
      { heavy: '🧴', light: '🍃' }
    ];

    function selectPair(index) {
      const leftItem = document.getElementById('leftItem');
      const rightItem = document.getElementById('rightItem');
      const leftHand = document.getElementById('leftHand');
      const rightHand = document.getElementById('rightHand');
      const btn1 = document.getElementById('btn1');
      const btn2 = document.getElementById('btn2');

      btn1.classList.toggle('active', index === 0);
      btn2.classList.toggle('active', index === 1);

      // Trigger soft bounce reset
      leftHand.style.transform = 'translateY(0px)';
      rightHand.style.transform = 'translateY(0px)';

      setTimeout(() => {
        leftItem.textContent = pairs[index].heavy;
        rightItem.textContent = pairs[index].light;
        leftHand.style.transform = 'translateY(28px)';
        rightHand.style.transform = 'translateY(-24px)';
      }, 150);
    }
  </script>
</body>
</html>

Comparing Weights: Heavier and Lighter by Hand

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      min-height: 100%;
      background: #f8fafc;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px 8px;
      gap: 10px;
      user-select: none;
      color: #1e2945;
    }
    .top-badge {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      padding: 6px 16px;
      border-radius: 20px;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.5px;
      color: #1e293b;
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .stage {
      width: 100%;
      max-width: 540px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 300px;
      display: block;
    }
    .side-group {
      transition: transform 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
    }
    .tag-bubble {
      font-family: system-ui, sans-serif;
      font-size: 13px;
      font-weight: 700;
      text-anchor: middle;
      dominant-baseline: middle;
    }
    .btn-wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }
    button {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }
    button:active {
      background: #f1f5f9;
    }
    button.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
    }
  </style>
</head>
<body>

  <div class="top-badge">Size ≠ Weight</div>

  <div class="stage">
    <svg viewBox="0 0 540 290" aria-label="Comparison between light balloon and heavy rock in hands">
      <defs>
        
        <linearGradient id="balloonGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#c084fc" />
          <stop offset="50%" stop-color="#9333ea" />
          <stop offset="100%" stop-color="#6b21a8" />
        </linearGradient>
        <linearGradient id="rockGrad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#94a3b8" />
          <stop offset="60%" stop-color="#475569" />
          <stop offset="100%" stop-color="#1e293b" />
        </linearGradient>
        <filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="3" stdDeviation="3" flood-opacity="0.12" />
        </filter>
      </defs>

      
      <line x1="50" y1="186" x2="490" y2="186" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="6 6" />
      <text x="270" y="180" font-size="12" font-weight="700" fill="#334155" text-anchor="middle" letter-spacing="0.2px">Starting Level</text>

      
      <g id="leftSide" class="side-group" transform="translate(0, -28)">
        
        <rect x="75" y="32" width="130" height="28" rx="14" fill="#ecfdf5" stroke="#10b981" stroke-width="1.5" />
        <text x="140" y="46" class="tag-bubble" fill="#047857">Big but Lighter 🎈</text>

        
        <path d="M 140 70 L 140 63 M 136 67 L 140 63 L 144 67" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />

        
        <g filter="url(#softShadow)">
          <ellipse cx="140" cy="112" rx="44" ry="50" fill="url(#balloonGrad)" />
          
          <ellipse cx="124" cy="94" rx="11" ry="16" fill="#ffffff" opacity="0.32" transform="rotate(-20 124 94)" />
          
          <polygon points="135,162 145,162 140,156" fill="#6b21a8" />
          
          <path d="M 140 162 Q 143 174 138 184 T 140 198" fill="none" stroke="#94a3b8" stroke-width="1.5" />
        </g>

        
        <g fill="#fed7aa" stroke="#ea580c" stroke-width="1.5" stroke-linejoin="round">
          
          <path d="M 88 230 L 116 204 L 132 202 L 153 206 L 173 206 C 183 206 186 202 183 198 C 178 192 163 192 148 196 L 130 197 L 120 190 C 112 188 100 198 88 212 Z" />
          
          <path d="M 122 191 C 126 184 136 184 140 190 C 136 195 128 196 122 191 Z" fill="#fed7aa" />
        </g>
      </g>

      
      <g id="rightSide" class="side-group" transform="translate(0, 28)">
        
        <rect x="335" y="90" width="130" height="28" rx="14" fill="#fef2f2" stroke="#ef4444" stroke-width="1.5" />
        <text x="400" y="104" class="tag-bubble" fill="#b91c1c">Small but Heavier 🪨</text>

        
        <path d="M 400 126 L 400 133 M 396 129 L 400 133 L 404 129" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />

        
        <g filter="url(#softShadow)">
          <polygon points="384,166 404,160 422,168 424,184 410,192 388,190 380,178" fill="url(#rockGrad)" stroke="#1e293b" stroke-width="1" stroke-linejoin="round" />
          <polygon points="384,166 404,160 412,176 388,178" fill="#ffffff" opacity="0.18" />
        </g>

        
        <g fill="#fed7aa" stroke="#ea580c" stroke-width="1.5" stroke-linejoin="round">
          
          <path d="M 452 228 L 424 202 L 408 200 L 387 204 L 367 204 C 357 204 354 200 357 196 C 362 190 377 190 392 194 L 410 195 L 420 188 C 428 186 440 196 452 210 Z" />
          
          <path d="M 418 189 C 414 182 404 182 400 188 C 404 193 412 194 418 189 Z" fill="#fed7aa" />
        </g>
      </g>
    </svg>
  </div>

  <div class="btn-wrap">
    <button id="weighBtn" class="active" onclick="toggleWeight()">
      <span>⚖️</span> Weigh in Hands
    </button>
    <button id="levelBtn" onclick="setLevel()">
      <span>🔄</span> Reset Level
    </button>
  </div>

  <script>
    const leftSide = document.getElementById('leftSide');
    const rightSide = document.getElementById('rightSide');
    const weighBtn = document.getElementById('weighBtn');
    const levelBtn = document.getElementById('levelBtn');

    function toggleWeight() {
      leftSide.style.transform = 'translate(0, -28px)';
      rightSide.style.transform = 'translate(0, 28px)';
      weighBtn.classList.add('active');
      levelBtn.classList.remove('active');
    }

    function setLevel() {
      leftSide.style.transform = 'translate(0, 0px)';
      rightSide.style.transform = 'translate(0, 0px)';
      weighBtn.classList.remove('active');
      levelBtn.classList.add('active');
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Hands as a Balance Scale</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      width: 100%;
      min-height: 100%;
      background: #ffffff;
      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: 12px;
      user-select: none;
    }

    .canvas-wrap {
      width: 100%;
      max-width: 580px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .cards-row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 8px;
    }

    .weight-card {
      flex: 1;
      padding: 8px 12px;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: transform 0.4s ease, background-color 0.4s ease;
    }

    .card-heavy {
      background: #eff6ff;
      border: 1px solid #bfdbfe;
    }

    .card-light {
      background: #fefce8;
      border: 1px solid #fef08a;
    }

    .badge {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.2px;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .card-heavy .badge {
      color: #1d4ed8;
    }

    .card-light .badge {
      color: #b45309;
    }

    .sub-text {
      font-size: 12px;
      font-weight: 600;
      color: #64748b;
      margin-top: 2px;
    }

    .svg-container {
      width: 100%;
      aspect-ratio: 16 / 9;
      max-height: 300px;
      position: relative;
    }

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

    .item-icon {
      font-size: 42px;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
      transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .indicator-arrow {
      font-size: 20px;
      animation: gentleBob 2s ease-in-out infinite;
    }

    @keyframes gentleBob {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(4px); }
    }

    .controls {
      display: flex;
      gap: 8px;
      margin-top: 8px;
    }

    .btn-toggle {
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      transition: all 0.2s ease;
    }

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

    .btn-toggle:hover:not(.active) {
      background: #f8fafc;
    }
  </style>
</head>
<body>

  <div class="canvas-wrap">
    
    
    <div class="cards-row">
      <div class="weight-card card-heavy" id="cardLeft">
        <div class="badge">
          <span>⬇️</span> <span id="labelLeft">Heavier</span>
        </div>
        <div class="sub-text" id="descLeft">Pulls down more</div>
      </div>

      <div class="weight-card card-light" id="cardRight">
        <div class="badge">
          <span>⬆️</span> <span id="labelRight">Lighter</span>
        </div>
        <div class="sub-text" id="descRight">Easy to hold</div>
      </div>
    </div>

    
    <div class="svg-container">
      <svg viewBox="0 0 540 270">
        <defs>
          <linearGradient id="armGrad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#fdba74" />
            <stop offset="50%" stop-color="#fed7aa" />
            <stop offset="100%" stop-color="#fdba74" />
          </linearGradient>
          <filter id="shadow" x="-10%" y="-10%" width="120%" height="130%">
            <feDropShadow dx="0" dy="4" stdDeviation="3" flood-opacity="0.08" />
          </filter>
        </defs>

        
        <line x1="40" y1="245" x2="500" y2="245" stroke="#e2e8f0" stroke-width="2" stroke-dasharray="6,6" />

        
        <g id="bodyGroup" filter="url(#shadow)">
          
          <path d="M 240 245 L 300 245 L 285 160 L 255 160 Z" fill="#e2e8f0" />
          
          
          <rect x="250" y="110" width="40" height="75" rx="20" fill="#38bdf8" />
          
          
          <circle cx="270" cy="80" r="26" fill="#fed7aa" />
          
          <path d="M 246 76 C 246 54 294 54 294 76 C 286 64 254 64 246 76 Z" fill="#78350f" />
          
          <circle cx="262" cy="80" r="3" fill="#1e2945" />
          <circle cx="278" cy="80" r="3" fill="#1e2945" />
          
          <path d="M 264 90 Q 270 96 276 90" fill="none" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round" />
          
          <circle cx="258" cy="87" r="3.5" fill="#fca5a5" opacity="0.6" />
          <circle cx="282" cy="87" r="3.5" fill="#fca5a5" opacity="0.6" />
          
          
          <circle cx="270" cy="130" r="7" fill="#0284c7" stroke="#ffffff" stroke-width="2" />
        </g>

        
        <g id="armsScale" style="transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 270px 130px; transform: rotate(10deg);">
          
          
          <rect x="70" y="125" width="400" height="10" rx="5" fill="#cbd5e1" opacity="0.6" />
          
          
          <g id="leftArm">
            
            <path d="M 252 122 L 190 120 L 190 138 L 252 136 Z" fill="#0284c7" />
            
            <path d="M 190 123 L 86 123 L 86 135 L 190 135 Z" fill="url(#armGrad)" />
            
            <path d="M 88 135 C 70 135 60 126 58 116 C 58 112 64 110 68 114 C 72 118 78 122 88 122 Z" fill="#fed7aa" />
            
            <rect x="58" y="115" width="30" height="7" rx="3.5" fill="#fed7aa" />
          </g>

          
          <g id="rightArm">
            
            <path d="M 288 122 L 350 120 L 350 138 L 288 136 Z" fill="#0284c7" />
            
            <path d="M 350 123 L 454 123 L 454 135 L 350 135 Z" fill="url(#armGrad)" />
            
            <path d="M 452 135 C 470 135 480 126 482 116 C 482 112 476 110 472 114 C 468 118 462 122 452 122 Z" fill="#fed7aa" />
            
            <rect x="452" y="115" width="30" height="7" rx="3.5" fill="#fed7aa" />
          </g>

          
          <g id="leftItemContainer" transform="translate(68, 108)">
            <g id="leftItemRotator" style="transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transform: rotate(-10deg);">
              <text id="leftItemEmoji" x="0" y="0" text-anchor="middle" dominant-baseline="central" class="item-icon">📕</text>
              
              <g transform="translate(0, 32)">
                <line x1="0" y1="0" x2="0" y2="16" stroke="#2563eb" stroke-width="3.5" stroke-linecap="round" />
                <polyline points="-5,10 0,17 5,10" fill="none" stroke="#2563eb" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
              </g>
            </g>
          </g>

          
          <g id="rightItemContainer" transform="translate(472, 108)">
            <g id="rightItemRotator" style="transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transform: rotate(-10deg);">
              <text id="rightItemEmoji" x="0" y="-8" text-anchor="middle" dominant-baseline="central" class="item-icon">🪶</text>
              
              <g transform="translate(0, -32)">
                <text x="0" y="0" font-size="16" text-anchor="middle" fill="#d97706">✨</text>
              </g>
            </g>
          </g>

        </g>
      </svg>
    </div>

    
    <div class="controls">
      <button class="btn-toggle active" id="btnBook" onclick="setPair('book')">Book vs Feather</button>
      <button class="btn-toggle" id="btnSpoon" onclick="setPair('spoon')">Spoon vs Feather</button>
      <button class="btn-toggle" id="btnEqual" onclick="setPair('equal')">Equal Weights</button>
    </div>

  </div>

  <script>
    const pairs = {
      book: {
        angle: 11,
        leftEmoji: '📕',
        rightEmoji: '🪶',
        leftTitle: 'Heavier',
        leftDesc: 'Pulls down more',
        rightTitle: 'Lighter',
        rightDesc: 'Easy to hold'
      },
      spoon: {
        angle: 7,
        leftEmoji: '🥄',
        rightEmoji: '🪶',
        leftTitle: 'Heavier',
        leftDesc: 'Pulls down more',
        rightTitle: 'Lighter',
        rightDesc: 'Easy to hold'
      },
      equal: {
        angle: 0,
        leftEmoji: '🪶',
        rightEmoji: '🪶',
        leftTitle: 'Same Weight',
        leftDesc: 'Balanced hands',
        rightTitle: 'Same Weight',
        rightDesc: 'Balanced hands'
      }
    };

    function setPair(type) {
      const data = pairs[type];
      if (!data) return;

      // Update buttons
      document.querySelectorAll('.btn-toggle').forEach(btn => btn.classList.remove('active'));
      if (type === 'book') document.getElementById('btnBook').classList.add('active');
      if (type === 'spoon') document.getElementById('btnSpoon').classList.add('active');
      if (type === 'equal') document.getElementById('btnEqual').classList.add('active');

      // Update Tilt
      const arms = document.getElementById('armsScale');
      const leftRot = document.getElementById('leftItemRotator');
      const rightRot = document.getElementById('rightItemRotator');

      arms.style.transform = `rotate(${data.angle}deg)`;
      leftRot.style.transform = `rotate(${-data.angle}deg)`;
      rightRot.style.transform = `rotate(${-data.angle}deg)`;

      // Update emojis
      document.getElementById('leftItemEmoji').textContent = data.leftEmoji;
      document.getElementById('rightItemEmoji').textContent = data.rightEmoji;

      // Update cards
      document.getElementById('labelLeft').textContent = data.leftTitle;
      document.getElementById('descLeft').textContent = data.leftDesc;
      document.getElementById('labelRight').textContent = data.rightTitle;
      document.getElementById('descRight').textContent = data.rightDesc;

      const cardL = document.getElementById('cardLeft');
      const cardR = document.getElementById('cardRight');

      if (type === 'equal') {
        cardL.className = 'weight-card card-light';
        cardR.className = 'weight-card card-light';
      } else {
        cardL.className = 'weight-card card-heavy';
        cardR.className = 'weight-card card-light';
      }
    }
  </script>
</body>
</html>

Aligning Endpoints to Compare Length Accurately

Comparing Heights: Taller and Shorter

Ordering Three Objects by Length

Ordering Three Objects by Height

Comparing Distances: Nearer and Farther

Explaining Reasons for Length Comparisons

math

Comparing Length, Height, and Distance Directly

Comparing Sizes: Big and Small

Ordering Three Objects by Size

Ordering Lengths from Shortest to Longest

Measuring Length with Cubes and Counters

Comparing Size, Length, and Height

Comparing Weights Using a Pan Balance

Ordering Three Objects by Weight

Comparing Capacity: Holds More and Holds Less

Ordering Three Containers by Capacity

Comparing Flat Surfaces: Covers More and Covers Less

Sorting Objects by Size, Shape, and Weight

Comparing Weight, Capacity, and Area Directly

Comparing Weights: Heavy and Light

Comparing Weights Using a Balance Scale

Comparing Capacity: Full, Empty, and Half Full

Comparing Containers: Holds More and Holds Less

Measuring Capacity with Cups and Scoops

Solving Everyday Measurement Puzzles

Exploring Weight and Capacity

Measuring Length with Non-Standard Units: Cubes and Paperclips

Measuring Height Using Connecting Cube Towers

Measuring with Body Units: Handspans and Footsteps

Estimating Lengths Before Measuring with Cubes

Understanding No Gaps and No Overlaps in Measurement

Comparing Lengths Measured with the Same Unit

Discovering Why We Need Standard Rulers

Measuring Length and Height with Non-Standard Units

Measuring Weight Using Marbles as Units

Measuring Weight Using Wooden Blocks

Comparing Objects Measured with Non-Standard Units

Estimating Capacity Using Non-Standard Units

Measuring Capacity with Cups and Spoons

Measuring Surface Area with Square Tiles

Exploring Scales, Measuring Cups, and Measuring Tools

Measuring Weight, Capacity, and Area with Non-Standard Units

Counting Forward from 1 to 10 on a Number Track

Counting Backward from 10 to 0

Counting on from Any Starting Number to 10

Finding the Missing Number on a 1 to 10 Line

Identifying the Number Before and After to 10

Ordering Mixed Numerals from 1 to 10

Estimating Small Quantities up to 10

Showing Numbers to 10 in Many Different Ways

Counting Sequences and Ordering Numbers to 10

Comparing Groups: More and Less by Matching

Identifying Groups with the Same Number of Objects

Using the Words Fewer and Less Correctly

Comparing Two Numbers up to 5 Using Towers

Comparing Two Numbers up to 10 on Ten-Frames

Finding How Many More in One Group Than Another

Finding How Many Fewer in a Group

Comparing Numbers on a Number Track to 10

Making Two Groups Equal by Adding or Removing Items

Comparing Three Groups to Find Most and Least

Comparing Quantities and Numbers

Aligning Starting Points for Fair Length Tests

Direct Comparison and Ordering of Length and Height

Measuring Length with Interlocking Cubes

Measuring Length with Paperclips and Counters

Measuring Distance Using Footsteps and Handspans

Estimating Lengths in Cubes Before Measuring

Why We Keep Units the Same Size in Measuring

Measuring with Halves of a Unit

Introducing the Metre Stick

Solving Length Comparison Story Problems

Measuring and Estimating Length with Units

Heavier and Lighter: Hefting in Hands

The Size and Weight Puzzle: Big Does Not Always Mean Heavy

Using a Balance Scale to Compare Two Items

Balancing Two Sides: Finding Equal Weights

Measuring Weight in Wooden Blocks or Cubes

Estimating Weight Before Weighing on the Balance

Exploring Half a Unit of Weight

Introducing the 1-Kilogram Weight

Solving Weight and Balance Story Challenges

Exploring Weight, Mass, and Balance

Full, Nearly Full, Nearly Empty, and Empty

Holds More and Holds Less: Direct Pouring

The Tall and Narrow Container Illusion

Measuring Capacity with Egg Cups and Spoons

Measuring Capacity with Standard Cups

Estimating Capacity Before Pouring

Exploring Half Full and Fractional Capacity

Introducing the 1-Litre Carton

Exploring Capacity and Liquid Measurement

Building 3D Structures and Counting Volume Cubes

Covering Surfaces: Larger and Smaller Area

Measuring Surface Area by Tiling with Squares

Solving Practical Capacity and Area Tasks

Exploring Volume and Surface Area

Partes iguales y partes desiguales de una figura

La mitad o un medio: partir en dos partes iguales

Un tercio: partir en tres partes iguales

Un cuarto: partir en cuatro partes iguales

Lectura y escritura de fracciones con numerador y denominador

Fracciones como partes de una colección o conjunto

Fracciones comunes: parte-todo y representación básica

Fracciones en la recta numérica entre 0 y 1

Fracciones equivalentes simples con modelos de barras

Comparación de fracciones con igual denominador

Fracciones en recetas y medidas: medio litro y cuarto de litro

Fracciones en la medición del tiempo: media hora y cuarto de hora

Problemas cotidianos con fracciones comunes

Fracciones comunes: recta numérica, equivalencia y medida

Comparing Length: Longer and Shorter

Comparing Height: Taller and Shorter

Comparing Objects by Different Attributes

Directly Comparing Length Side by Side

Comparing Capacity: Full and Empty

Comparing Capacity: Holds More, Holds Less

Directly Comparing Capacity by Pouring

Ordering Containers by Capacity

Directly Comparing Length, Height, and Capacity

Comparing Mass: Heavier and Lighter

Using a Balance to Compare Mass

Ordering Objects by Mass

Comparing Duration: Faster and Slower

Comparing Duration: Longer and Shorter Time

Which Takes Longer? Comparing Events

Comparing Mass and Duration

Measuring Length With Informal Units

Measuring Capacity With Informal Units

Measuring Mass With Informal Units

Comparing Area: Covers More, Covers Less

Directly Comparing Area by Overlapping

Measuring with Informal Units and Comparing Area

Using Words to Describe Measurement Comparisons

Explaining Why One Object Is Longer

Explaining Why One Container Holds More

Sorting Objects by Measurement Attributes

Everyday Measurement Comparisons

Communicating and Applying Measurement Comparisons

Arriba, abajo, delante, detrás, encima y debajo

Izquierda y derecha para moverme en el espacio

Lateralidad relativa: la izquierda y derecha del otro

Puntos de referencia para no perderse

Seguimiento de trayectorias en cuadrículas con flechas

Escritura de instrucciones de rutas y desplazamientos

Elaboración de un croquis del salón de clases

Localización en tableros de coordenadas: filas y columnas

Distancias cortas y largas en mapas sencillos

Orientación espacial, posición y desplazamiento

Comparación directa de longitudes: más largo, más corto e igual

Ordenamiento de objetos según su longitud

Medir longitud con objetos: clips, bloques y lápices

Medición con partes del cuerpo: pasos, pies y cuartas

El centímetro como unidad estándar de longitud

Uso correcto de la regla graduada desde el cero

El metro como unidad de longitud para objetos grandes

Selección del instrumento adecuado: regla, cinta métrica o metro

Medición de longitud: comparación y unidades estándar

Estimación de longitudes en centímetros y metros

Concepto de perímetro: el contorno de las figuras

Cálculo del perímetro en polígonos sencillos

Problemas de longitud y perímetro en la vida cotidiana

Estimación de longitudes y perímetro de figuras

Superficie como atributo medible de las figuras

Comparación directa de superficies por superposición

Recubrimiento de superficies con patrones arbitrarios: tarjetas y baldosas

Conteo de unidades cuadradas en cuadrículas

Figuras con diferente forma pero igual área

Cálculo del área en rectángulos mediante filas y columnas

Diferencia fundamental entre perímetro y área

Problemas sencillos de recubrimiento y área

Medición de superficie y área: cuadrículas y recubrimientos

Comparación cualitativa de peso: pesado y liviano

Medir la masa usando canicas o cubos como pesas

El kilogramo y el gramo como unidades estándar de masa

Medios kilos y cuartos de kilo en el mercado

Comparación directa de capacidad: cabe más y cabe menos

Medición de capacidad con vasos y tazas no estándar

El litro como unidad estándar de capacidad

Equivalencias prácticas del litro: medios litros y cuartos

Volumen: conteo de cubos que ocupan un espacio

Resolución de problemas con peso y capacidad

Medición de masa, peso, capacidad y volumen

Secuencias temporales: antes, ahora y después

Días de la semana y su orden cronológico

Los doce meses del año y las estaciones o temporadas

Lectura del calendario: fechas, cumpleaños y semanas

El calendario: días, meses y estaciones

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 y cálculo de duraciones

OGM.1.MD.1

Aligned learning resources

Related diagrams