<!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%;
      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: 16px;
    }
    .diagram-wrap {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    .controls {
      display: flex;
      gap: 8px;
      width: 100%;
      justify-content: center;
    }
    .btn {
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 20px;
      border: 1px solid #cbd5e1;
      background: #f8fafc;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn.active {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
    }
    svg {
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .grid-line {
      stroke: #f1f5f9;
      stroke-width: 1;
    }
    .start-line {
      stroke: #64748b;
      stroke-width: 2;
      stroke-dasharray: 4, 4;
    }
    .bar {
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .bar-red {
      fill: #f43f5e;
    }
    .bar-blue {
      fill: #3b82f6;
    }
    .bar-diff-fill {
      fill: #ffe4e6;
      stroke: #f43f5e;
      stroke-width: 1.5;
      stroke-dasharray: 4, 4;
    }
    .bar-label {
      font-size: 13px;
      font-weight: 700;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: middle;
    }
    .item-title {
      font-size: 14px;
      font-weight: 700;
      dominant-baseline: middle;
    }
    .ruler-text {
      font-size: 11px;
      font-weight: 600;
      fill: #94a3b8;
      text-anchor: middle;
    }
    .bracket-line {
      stroke: #e11d48;
      stroke-width: 2;
      fill: none;
    }
    .diff-badge-bg {
      fill: #fff1f2;
      stroke: #f43f5e;
      stroke-width: 1.5;
      rx: 6px;
    }
    .diff-badge-text {
      font-size: 13px;
      font-weight: 800;
      fill: #be123c;
      text-anchor: middle;
      dominant-baseline: middle;
    }
    .equation-box {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 20px;
      font-size: 18px;
      font-weight: 800;
    }
    .eq-num {
      padding: 3px 8px;
      border-radius: 6px;
    }
    .eq-red {
      background: #ffe4e6;
      color: #e11d48;
    }
    .eq-blue {
      background: #dbeafe;
      color: #1d4ed8;
    }
    .eq-diff {
      background: #fef3c7;
      color: #b45309;
      border: 1px dashed #d97706;
    }
    .eq-op {
      color: #64748b;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    <div class="controls">
      <button class="btn active" id="btnAll" onclick="setMode('all')">Compare Lengths</button>
      <button class="btn" id="btnDiff" onclick="setMode('diff')">Show Difference</button>
    </div>

    
    
    
    <svg viewBox="0 0 500 230" aria-label="Tape diagram comparing 12 cm red plank and 7 cm blue plank">
      
      <g>
        
        <line x1="100" y1="20" x2="100" y2="185" class="start-line" />
        <text x="100" y="198" class="ruler-text">0 cm</text>

        
        <line x1="310" y1="20" x2="310" y2="185" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3, 3" />
        <text x="310" y="198" class="ruler-text">7 cm</text>

        
        <line x1="460" y1="20" x2="460" y2="185" stroke="#cbd5e1" stroke-width="1.5" stroke-dasharray="3, 3" />
        <text x="460" y="198" class="ruler-text">12 cm</text>

        
        <text x="96" y="22" font-size="11" font-weight="700" fill="#64748b" text-anchor="end">Start (0 cm)</text>
      </g>

      
      <g>
        <text x="15" y="62" class="item-title" fill="#e11d48">Red Plank</text>
        
        <rect x="100" y="44" width="360" height="36" rx="6" class="bar bar-red" />
        <text x="280" y="63" class="bar-label">12 cm</text>
      </g>

      
      <g>
        <text x="15" y="122" class="item-title" fill="#1d4ed8">Blue Plank</text>
        <rect x="100" y="104" width="210" height="36" rx="6" class="bar bar-blue" />
        <text x="205" y="123" class="bar-label">7 cm</text>
      </g>

      
      <g id="diffGroup">
        
        <rect x="310" y="104" width="150" height="36" rx="6" class="bar-diff-fill" />
        <text x="385" y="123" font-size="12" font-weight="700" fill="#e11d48" text-anchor="middle" dominant-baseline="middle">? extra</text>

        
        <path d="M 312 152 L 312 160 L 385 160 L 385 168 L 385 160 L 458 160 L 458 152" class="bracket-line" />

        
        <rect x="315" y="170" width="140" height="24" class="diff-badge-bg" />
        <text x="385" y="183" class="diff-badge-text">Difference = 5 cm</text>
      </g>
    </svg>

    
    <div class="equation-box">
      <span class="eq-num eq-red">12 cm</span>
      <span class="eq-op">−</span>
      <span class="eq-num eq-blue">7 cm</span>
      <span class="eq-op">=</span>
      <span class="eq-num eq-diff">5 cm</span>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const diffGroup = document.getElementById('diffGroup');
      const btnAll = document.getElementById('btnAll');
      const btnDiff = document.getElementById('btnDiff');

      if (mode === 'diff') {
        diffGroup.style.opacity = '1';
        btnDiff.classList.add('active');
        btnAll.classList.remove('active');
      } else {
        diffGroup.style.opacity = '1';
        btnAll.classList.add('active');
        btnDiff.classList.remove('active');
      }
    }
  </script>
</body>
</html>

Comparing and Ordering Lengths in Standard Units

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

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

    .main-wrap {
      width: 100%;
      max-width: 640px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .svg-container {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

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

    .plank {
      cursor: pointer;
      transition: opacity 0.25s ease, filter 0.25s ease;
    }

    .plank:hover {
      filter: brightness(1.05);
    }

    .plank.dimmed {
      opacity: 0.35;
    }

    .guide-line {
      stroke-dasharray: 4, 4;
      transition: opacity 0.25s ease;
    }

    .badges-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
    }

    .badge-btn {
      appearance: none;
      border: 2px solid transparent;
      border-radius: 10px;
      padding: 8px 6px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
      background: #f1f5f9;
      color: #1e2945;
    }

    .badge-btn .badge-title {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      opacity: 0.85;
    }

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

    .badge-green {
      background: #ecfdf5;
      color: #065f46;
      border-color: #a7f3d0;
    }

    .badge-blue {
      background: #eff6ff;
      color: #1e40af;
      border-color: #bfdbfe;
    }

    .badge-red {
      background: #fef2f2;
      color: #991b1b;
      border-color: #fecaca;
    }

    .badge-btn.active {
      box-shadow: 0 0 0 2px #1e2945;
      transform: translateY(-1px);
    }

    .order-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
      flex-wrap: wrap;
    }

    .order-chip {
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 12px;
    }

    .order-chip.green { background: #d1fae5; color: #065f46; }
    .order-chip.blue { background: #dbeafe; color: #1e40af; }
    .order-chip.red { background: #fee2e2; color: #991b1b; }
  </style>
</head>
<body>

<div class="main-wrap">
  <div class="svg-container">
    <svg viewBox="0 0 600 300" id="diagramSvg">
      <defs>
        
        <linearGradient id="greenWood" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#10b981" />
          <stop offset="100%" stop-color="#059669" />
        </linearGradient>
        <linearGradient id="blueWood" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#3b82f6" />
          <stop offset="100%" stop-color="#2563eb" />
        </linearGradient>
        <linearGradient id="redWood" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#f43f5e" />
          <stop offset="100%" stop-color="#e11d48" />
        </linearGradient>

        
        <linearGradient id="rulerBg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#fef9c3" />
          <stop offset="100%" stop-color="#fef08a" />
        </linearGradient>
      </defs>

      
      <line x1="50" y1="20" x2="50" y2="260" stroke="#94a3b8" stroke-width="2" stroke-dasharray="3,3" />
      <text x="50" y="16" fill="#64748b" font-size="11" font-weight="700" text-anchor="middle">START (0 cm)</text>

      
      <g id="plankA" class="plank" onclick="selectPlank('green')">
        <rect x="50" y="32" width="160" height="38" rx="6" fill="url(#greenWood)" stroke="#047857" stroke-width="1.5" />
        <circle cx="62" cy="51" r="3" fill="#047857" opacity="0.6" />
        <circle cx="198" cy="51" r="3" fill="#047857" opacity="0.6" />
        <text x="130" y="56" fill="#ffffff" font-size="13" font-weight="700" text-anchor="middle">Green: 4 cm</text>
        <line id="guideA" class="guide-line" x1="210" y1="70" x2="210" y2="205" stroke="#059669" stroke-width="2" />
      </g>

      
      <g id="plankC" class="plank" onclick="selectPlank('blue')">
        <rect x="50" y="86" width="280" height="38" rx="6" fill="url(#blueWood)" stroke="#1d4ed8" stroke-width="1.5" />
        <circle cx="62" cy="105" r="3" fill="#1d4ed8" opacity="0.6" />
        <circle cx="318" cy="105" r="3" fill="#1d4ed8" opacity="0.6" />
        <text x="190" y="110" fill="#ffffff" font-size="13" font-weight="700" text-anchor="middle">Blue: 7 cm</text>
        <line id="guideC" class="guide-line" x1="330" y1="124" x2="330" y2="205" stroke="#2563eb" stroke-width="2" />
      </g>

      
      <g id="plankB" class="plank" onclick="selectPlank('red')">
        <rect x="50" y="140" width="480" height="38" rx="6" fill="url(#redWood)" stroke="#be123c" stroke-width="1.5" />
        <circle cx="62" cy="159" r="3" fill="#be123c" opacity="0.6" />
        <circle cx="518" cy="159" r="3" fill="#be123c" opacity="0.6" />
        <text x="290" y="164" fill="#ffffff" font-size="13" font-weight="700" text-anchor="middle">Red: 12 cm</text>
        <line id="guideB" class="guide-line" x1="530" y1="178" x2="530" y2="205" stroke="#e11d48" stroke-width="2" />
      </g>

      
      <g id="ruler">
        <rect x="30" y="205" width="540" height="52" rx="4" fill="url(#rulerBg)" stroke="#d97706" stroke-width="1.5" />
        <text x="560" y="246" fill="#b45309" font-size="11" font-weight="800" text-anchor="end">cm</text>

        
        
        <line x1="50" y1="205" x2="50" y2="225" stroke="#1e2945" stroke-width="2" />
        <text x="50" y="244" fill="#1e2945" font-size="13" font-weight="800" text-anchor="middle">0</text>
        <line x1="70" y1="205" x2="70" y2="216" stroke="#78350f" stroke-width="1" />

        
        <line x1="90" y1="205" x2="90" y2="223" stroke="#1e2945" stroke-width="1.5" />
        <text x="90" y="244" fill="#1e2945" font-size="12" font-weight="700" text-anchor="middle">1</text>
        <line x1="110" y1="205" x2="110" y2="216" stroke="#78350f" stroke-width="1" />

        
        <line x1="130" y1="205" x2="130" y2="223" stroke="#1e2945" stroke-width="1.5" />
        <text x="130" y="244" fill="#1e2945" font-size="12" font-weight="700" text-anchor="middle">2</text>
        <line x1="150" y1="205" x2="150" y2="216" stroke="#78350f" stroke-width="1" />

        
        <line x1="170" y1="205" x2="170" y2="223" stroke="#1e2945" stroke-width="1.5" />
        <text x="170" y="244" fill="#1e2945" font-size="12" font-weight="700" text-anchor="middle">3</text>
        <line x1="190" y1="205" x2="190" y2="216" stroke="#78350f" stroke-width="1" />

        
        <line x1="210" y1="205" x2="210" y2="225" stroke="#059669" stroke-width="2.5" />
        <rect x="200" y="230" width="20" height="18" rx="4" fill="#d1fae5" />
        <text x="210" y="244" fill="#065f46" font-size="13" font-weight="900" text-anchor="middle">4</text>
        <line x1="230" y1="205" x2="230" y2="216" stroke="#78350f" stroke-width="1" />

        
        <line x1="250" y1="205" x2="250" y2="223" stroke="#1e2945" stroke-width="1.5" />
        <text x="250" y="244" fill="#1e2945" font-size="12" font-weight="700" text-anchor="middle">5</text>
        <line x1="270" y1="205" x2="270" y2="216" stroke="#78350f" stroke-width="1" />

        
        <line x1="290" y1="205" x2="290" y2="223" stroke="#1e2945" stroke-width="1.5" />
        <text x="290" y="244" fill="#1e2945" font-size="12" font-weight="700" text-anchor="middle">6</text>
        <line x1="310" y1="205" x2="310" y2="216" stroke="#78350f" stroke-width="1" />

        
        <line x1="330" y1="205" x2="330" y2="225" stroke="#2563eb" stroke-width="2.5" />
        <rect x="320" y="230" width="20" height="18" rx="4" fill="#dbeafe" />
        <text x="330" y="244" fill="#1e40af" font-size="13" font-weight="900" text-anchor="middle">7</text>
        <line x1="350" y1="205" x2="350" y2="216" stroke="#78350f" stroke-width="1" />

        
        <line x1="370" y1="205" x2="370" y2="223" stroke="#1e2945" stroke-width="1.5" />
        <text x="370" y="244" fill="#1e2945" font-size="12" font-weight="700" text-anchor="middle">8</text>
        <line x1="390" y1="205" x2="390" y2="216" stroke="#78350f" stroke-width="1" />

        
        <line x1="410" y1="205" x2="410" y2="223" stroke="#1e2945" stroke-width="1.5" />
        <text x="410" y="244" fill="#1e2945" font-size="12" font-weight="700" text-anchor="middle">9</text>
        <line x1="430" y1="205" x2="430" y2="216" stroke="#78350f" stroke-width="1" />

        
        <line x1="450" y1="205" x2="450" y2="223" stroke="#1e2945" stroke-width="1.5" />
        <text x="450" y="244" fill="#1e2945" font-size="12" font-weight="700" text-anchor="middle">10</text>
        <line x1="470" y1="205" x2="470" y2="216" stroke="#78350f" stroke-width="1" />

        
        <line x1="490" y1="205" x2="490" y2="223" stroke="#1e2945" stroke-width="1.5" />
        <text x="490" y="244" fill="#1e2945" font-size="12" font-weight="700" text-anchor="middle">11</text>
        <line x1="510" y1="205" x2="510" y2="216" stroke="#78350f" stroke-width="1" />

        
        <line x1="530" y1="205" x2="530" y2="225" stroke="#e11d48" stroke-width="2.5" />
        <rect x="517" y="230" width="26" height="18" rx="4" fill="#fee2e2" />
        <text x="530" y="244" fill="#991b1b" font-size="13" font-weight="900" text-anchor="middle">12</text>
      </g>
    </svg>
  </div>

  
  <div class="badges-row">
    <button class="badge-btn badge-green" id="btnGreen" onclick="selectPlank('green')">
      <span class="badge-title">Shortest</span>
      <span class="badge-val">Green = 4 cm</span>
    </button>
    <button class="badge-btn badge-blue" id="btnBlue" onclick="selectPlank('blue')">
      <span class="badge-title">Medium</span>
      <span class="badge-val">Blue = 7 cm</span>
    </button>
    <button class="badge-btn badge-red" id="btnRed" onclick="selectPlank('red')">
      <span class="badge-title">Longest</span>
      <span class="badge-val">Red = 12 cm</span>
    </button>
  </div>

  
  <div class="order-bar">
    <span>Order:</span>
    <span class="order-chip green">4 cm</span>
    <span>&lt;</span>
    <span class="order-chip blue">7 cm</span>
    <span>&lt;</span>
    <span class="order-chip red">12 cm</span>
  </div>
</div>

<script>
  let activePlank = null;

  function selectPlank(color) {
    if (activePlank === color) {
      activePlank = null;
    } else {
      activePlank = color;
    }
    updateDisplay();
  }

  function updateDisplay() {
    const planks = {
      green: { el: document.getElementById('plankA'), btn: document.getElementById('btnGreen'), guide: document.getElementById('guideA') },
      blue: { el: document.getElementById('plankC'), btn: document.getElementById('btnBlue'), guide: document.getElementById('guideC') },
      red: { el: document.getElementById('plankB'), btn: document.getElementById('btnRed'), guide: document.getElementById('guideB') }
    };

    for (const key in planks) {
      const item = planks[key];
      if (!activePlank) {
        item.el.classList.remove('dimmed');
        item.btn.classList.remove('active');
        item.guide.style.opacity = '1';
      } else if (activePlank === key) {
        item.el.classList.remove('dimmed');
        item.btn.classList.add('active');
        item.guide.style.opacity = '1';
      } else {
        item.el.classList.add('dimmed');
        item.btn.classList.remove('active');
        item.guide.style.opacity = '0.15';
      }
    }
  }
</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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
    }

    body {
      background: #ffffff;
      color: #1e293b;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-wrapper {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Plank row styling */
    .plank-row {
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 12px;
      transition: background-color 0.2s ease, border-color 0.2s ease;
    }

    .plank-row.active {
      background: #f0f9ff;
      border-color: #38bdf8;
    }

    .row-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

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

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

    .badge-blue {
      background: #e0f2fe;
      color: #0369a1;
    }

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

    .length-tag {
      font-size: 14px;
      font-weight: 800;
      color: #334155;
    }

    /* Visual plank bar area */
    .bar-track {
      width: 100%;
      height: 28px;
      background: #e2e8f0;
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      position: relative;
    }

    .plank-bar {
      height: 100%;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 10px;
      color: #ffffff;
      font-weight: 800;
      font-size: 13px;
      letter-spacing: 0.5px;
      box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
      transition: opacity 0.2s ease, filter 0.2s ease;
      cursor: pointer;
    }

    .plank-bar:hover {
      filter: brightness(1.05);
    }

    .bar-green {
      width: calc((4 / 12) * 100%);
      background: linear-gradient(90deg, #10b981, #059669);
    }

    .bar-blue {
      width: calc((7 / 12) * 100%);
      background: linear-gradient(90deg, #0ea5e9, #0284c7);
    }

    .bar-orange {
      width: 100%;
      background: linear-gradient(90deg, #f97316, #ea580c);
    }

    /* Comparison divider between rows */
    .comp-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: #64748b;
      font-weight: 800;
      font-size: 14px;
      margin: -4px 0;
    }

    .comp-pill {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 12px;
      padding: 2px 10px;
      font-size: 12px;
      color: #475569;
    }

    /* Ruler Axis */
    .ruler-container {
      margin-top: 4px;
      padding: 0 12px;
      width: 100%;
    }

    .ruler-ticks {
      position: relative;
      height: 18px;
      width: 100%;
      border-top: 2px solid #94a3b8;
    }

    .tick {
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .tick-line {
      width: 1.5px;
      height: 6px;
      background: #94a3b8;
    }

    .tick-label {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 2px;
    }
  </style>
</head>
<body>

  <div class="main-wrapper">

    
    <div class="plank-row" id="row-4" onclick="selectPlank(4)">
      <div class="row-header">
        <span class="badge badge-green">1st (Shortest)</span>
        <span class="length-tag">4 cm</span>
      </div>
      <div class="bar-track">
        <div class="plank-bar bar-green">4 cm</div>
      </div>
    </div>

    
    <div class="comp-divider">
      <span class="comp-pill">4 cm &lt; 7 cm</span>
      <span>▼</span>
    </div>

    
    <div class="plank-row" id="row-7" onclick="selectPlank(7)">
      <div class="row-header">
        <span class="badge badge-blue">2nd</span>
        <span class="length-tag">7 cm</span>
      </div>
      <div class="bar-track">
        <div class="plank-bar bar-blue">7 cm</div>
      </div>
    </div>

    
    <div class="comp-divider">
      <span class="comp-pill">7 cm &lt; 12 cm</span>
      <span>▼</span>
    </div>

    
    <div class="plank-row" id="row-12" onclick="selectPlank(12)">
      <div class="row-header">
        <span class="badge badge-orange">3rd (Longest)</span>
        <span class="length-tag">12 cm</span>
      </div>
      <div class="bar-track">
        <div class="plank-bar bar-orange">12 cm</div>
      </div>
    </div>

    
    <div class="ruler-container">
      <div class="ruler-ticks">
        <div class="tick" style="left: 0%;">
          <div class="tick-line"></div>
          <span class="tick-label">0</span>
        </div>
        <div class="tick" style="left: calc((4 / 12) * 100%);">
          <div class="tick-line"></div>
          <span class="tick-label">4</span>
        </div>
        <div class="tick" style="left: calc((7 / 12) * 100%);">
          <div class="tick-line"></div>
          <span class="tick-label">7</span>
        </div>
        <div class="tick" style="left: 100%;">
          <div class="tick-line"></div>
          <span class="tick-label">12 cm</span>
        </div>
      </div>
    </div>

  </div>

  <script>
    function selectPlank(length) {
      document.querySelectorAll('.plank-row').forEach(row => {
        row.classList.remove('active');
      });
      const selected = document.getElementById('row-' + length);
      if (selected) {
        selected.classList.add('active');
      }
    }
  </script>
</body>
</html>

Comparer des longueurs : plus long, plus court

Aligner les extrémités pour comparer deux longueurs

Comparer des longueurs avec un objet intermédiaire

Mesurer avec des unités non standard

Comprendre la nécessité d'une unité universelle de longueur

math

Comparer des longueurs et découvrir le besoin de mesurer au CE1

Découvrir le millimètre et son symbole mm

Découvrir le décimètre et son symbole dm

Mesurer et tracer des segments avec la règle graduée au millimètre

Tracer un segment d'une longueur donnée en centimètres

Tracer un segment en centimètres et millimètres

Tracer une ligne brisée de longueur totale donnée

Mesurer des objets du quotidien en millimètres et centimètres

Utiliser le mètre ruban et la règle de tableau

Mesurer et tracer avec précision : mm, cm, dm et m

Finding Differences Between Two Lengths

Drawing Line Segments of Specified Length

Solving Practical Word Problems with Lengths and Heights

Representing Lengths and Distances on Number Lines

Finding the Perimeter of Rectangles and Triangles

Finding Missing Side Lengths from Perimeter

Comparing Lengths, Perimeter, and Distance Problems

Utiliser le tableau de conversion pour les longueurs

Comparer des longueurs exprimées dans des unités différentes

Estimer la longueur d'objets du quotidien sans mesurer

Estimer une distance sur un trajet ou dans la cour

Additionner les longueurs de plusieurs segments

Convertir, mesurer et tracer des longueurs au CE2

Comprendre le kilomètre pour mesurer les grandes distances

Reconnaître et ordonner les symboles mm, cm, dm, m et km

Longueurs repères pour le millimètre et le centimetre

Longueurs repères pour le décimètre et le mètre

Longueurs et distances repères pour le kilomètre

Choisir l'unité de longueur adaptée à chaque situation

Comparer directement des segments par superposition ou règle

Reporter une longueur au compas sur une droite

Défis et enquêtes de mesure de longueurs au CE2

Du millimètre au kilomètre : repères, unités et comparaisons

Representing Whole Numbers as Distances on a Number Line

Finding Distances Between Points on a Number Line

Adding and Subtracting Using Number Lines

Length Problems Using Number Lines

Justifying Distances on Number Lines

Number Lines and Distance

Comprendre ce qu'est le périmètre d'une figure plane

Distinguer le périmètre du contenu d'une figure

Reporter les côtés d'un polygone au compas sur une ligne

Comparer le périmètre de polygones sans règle graduée

Mesurer chaque côté d'un polygone avec la règle

Calculer le périmètre d'un triangle

Calculer le périmètre du carré et du rectangle

Calculer le périmètre de polygones à 5 côtés ou plus

Résoudre des problèmes de la vie courante liés au périmètre

Calculer et comparer les périmètres au CE2

Relation : 1 cm = 10 mm

Relations : 1 dm = 10 cm = 100 mm

Relations : 1 m = 10 dm = 100 cm

Relation : 1 m = 1 000 mm

Relation : 1 km = 1 000 m

Découvrir le tableau de conversion des longueurs (du mm au km)

Convertir mentalement des longueurs simples

Ranger des longueurs hétérogènes en ordre croissant ou décroissant

Unités de longueur et conversions au CE2

Comparer des longueurs de même unité

Comparer entre différentes unités de longueur

Estimer la taille d'objets usuels en mètres ou centimètres

Calculer la longueur d'une ligne brisée

Résoudre des problèmes d'addition de longueurs

Résoudre des problèmes d'écart de longueur

Comparer, estimer et résoudre des problèmes de longueurs au CE1

Estimer des hauteurs et des distances dans l'école

Estimer des distances routières et géographiques en kilomètres

Problèmes additifs et soustractifs avec conversions de longueurs

Problèmes de répétition et partage de longueurs

Problèmes de trajets, parcours sportifs et randonnées en km et m

Problèmes de parcours et de longueurs à étapes

Vérifier la vraisemblance d'une longueur calculée

Synthèse et défis experts sur les longueurs au CE2

Estimation et problèmes de longueurs au CE2

Comprendre la notion de périmètre : faire le tour d'une figure

Distinguer le périmètre (contour) et l'intérieur d'une figure

Reporter les côtés d'un polygone au compas sur une ligne droite

Classer plusieurs figures selon leur périmètre avec le compas

Découvrir et comparer les périmètres

Calculer le périmètre d'un triangle avec la règle graduée

Calculer le périmètre des triangles isocèles et équilatéraux

Calculer le périmètre d'un carré : côté × 4

Calculer le périmètre d'un rectangle : (L + l) × 2

Calculer le périmètre d'un losange

Calculer le périmètre d'un polygone à 4, 5 ou 6 côtés

Calculer le périmètre des polygones usuels

Calculer le périmètre d'une figure sur un quadrillage

Trouver un côté manquant à partir du périmètre connu

Problèmes de clôtures, bordures et rubans

Problèmes de tours de terrain de sport et de circuits

Tracer une figure ayant un périmètre imposé

Comparer des figures de même périmètre mais de formes distinctes

Grand défi des géomètres : périmètres et polygones

Problèmes de périmètre et tracés géométriques

Choosing Standard Units for Length (m and cm)

Measuring Length and Height in Centimetres

Measuring Lengths in Metres

Comparing and Ordering Lengths Using <, >, and =

Measuring Length and Height

Choosing Standard Units for Mass (kg and g)

Reading Weighing Scales in Grams and Kilograms

Comparing and Ordering Mass Using <, >, and =

Choosing Standard Units for Capacity (l and ml)

Reading Measuring Jugs in Millilitres and Litres

Comparing and Ordering Capacity Using <, >, and =

Measuring Temperature in Degrees Celsius (°C)

Solving Word Problems Involving Measures

Measuring Mass, Capacity, and Temperature

Identifier la grandeur en jeu : longueur, masse, temps ou monnaie

Associer chaque unité de mesure à sa grandeur correspondante

Problèmes de pesées et de recettes de cuisine

Problèmes d'achats, monnaie et budget avec des listes de prix

Problèmes de planning : organiser une journée

Grand bilan : résoudre des énigmes de grandeurs et mesures

Résolution de problèmes sur les grandeurs et mesures au CE1

Punkt, prosta, odcinek – podstawy

Położenia prostych na płaszczyźnie

Łamane – rysowanie i mierzenie

Prostokąt – rozpoznawanie i własności

Kwadrat – rozpoznawanie i własności

Trójkąt – rozpoznawanie i rodzaje

Koło i okrąg – różnice

Rysowanie figur na siatce kwadratowej

Figury w otoczeniu – rozpoznawanie

Podstawy geometrii i figury płaskie

Using Place Value to Solve Number Puzzles

Solving Two-Step Addition and Subtraction Problems

Solving Problems Combining Multiplication and Addition

Solving Problems Linking Fractions and Division

Solving Practical Measurement Investigations

Reasoning About Equality in Number Sentences

Problem Solving & Mathematical Reasoning

Mierzenie długości – centymetr i metr

Mierzenie długości – milimetr

Przeliczanie jednostek długości

Wyrażenia dwumianowane długości

Kilometr – jednostka i zastosowanie

Szacowanie długości

Pomiary długości i jednostki

Obwód figury – mierzenie

Obwód prostokąta i kwadratu

Obwód trójkąta

Obwód figur złożonych

Obwody figur

Pole figury – wprowadzenie na siatce

Pole prostokąta i kwadratu

Pole figur złożonych z kwadratów

Szacowanie pola figur

Jednostki pola – cm² i m²

Porównywanie obwodów i pól

Zadania z obwodem i polem

Sprawdzenie – pomiary, obwody i pola

Pola figur

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

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

OGM.3.MD.2

Aligned learning resources

Related diagrams