<!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 {
      width: 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;
      overflow-x: hidden;
    }

    .diagram-wrap {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }

    /* Inequality Header Box */
    .inequality-badge {
      background: #f0fdf4;
      border: 1.5px solid #16a34a;
      border-radius: 8px;
      padding: 8px 16px;
      font-size: 17px;
      font-weight: 700;
      color: #16a34a;
      letter-spacing: 0.2px;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    .inequality-badge .var {
      color: #1e2945;
      font-weight: 600;
      font-style: italic;
    }

    /* SVG container */
    .svg-container {
      width: 100%;
      position: relative;
    }

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

    /* Tester interactive bar */
    .interactive-tester {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 14px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-size: 14px;
      color: #1e2945;
    }

    .test-feedback {
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .test-feedback.in-bounds {
      color: #16a34a;
    }

    .test-feedback.out-bounds {
      color: #64748b;
    }

    .slider-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-grow: 1;
      min-width: 180px;
    }

    input[type="range"] {
      flex: 1;
      accent-color: #2563eb;
      cursor: pointer;
      height: 6px;
    }
  </style>
</head>
<body>
  <div class="diagram-wrap">
    
    <div class="inequality-badge">
      <span>13.5 cm</span>
      <span>≤</span>
      <span class="var">true length</span>
      <span>&lt;</span>
      <span>14.5 cm</span>
    </div>

    
    <div class="svg-container">
      <svg viewBox="0 0 540 220" aria-label="Error bounds for 14 cm measurement">
        
        <path d="M 170 38 L 170 24 L 370 24 L 370 38" fill="none" stroke="#16a34a" stroke-width="2" stroke-linejoin="round" />
        <path d="M 270 24 L 270 14" fill="none" stroke="#16a34a" stroke-width="2" />
        <text x="270" y="10" text-anchor="middle" font-size="12" font-weight="700" fill="#16a34a">
          Interval Width: 1.0 cm (±0.5 cm)
        </text>

        
        <rect x="170" y="44" width="200" height="32" fill="#dcfce7" opacity="0.6" rx="4" />

        
        <line x1="40" y1="60" x2="500" y2="60" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round" />

        
        
        <line x1="70" y1="50" x2="70" y2="70" stroke="#94a3b8" stroke-width="2" />
        <text x="70" y="86" text-anchor="middle" font-size="13" font-weight="600" fill="#64748b">13.0</text>

        
        <line x1="170" y1="52" x2="170" y2="68" stroke="#16a34a" stroke-width="2" stroke-dasharray="2 2" />
        <text x="170" y="86" text-anchor="middle" font-size="13" font-weight="700" fill="#16a34a">13.5</text>

        
        <line x1="270" y1="46" x2="270" y2="74" stroke="#2563eb" stroke-width="2.5" />
        <text x="270" y="88" text-anchor="middle" font-size="14" font-weight="800" fill="#2563eb">14.0</text>

        
        <line x1="370" y1="52" x2="370" y2="68" stroke="#16a34a" stroke-width="2" stroke-dasharray="2 2" />
        <text x="370" y="86" text-anchor="middle" font-size="13" font-weight="700" fill="#16a34a">14.5</text>

        
        <line x1="470" y1="50" x2="470" y2="70" stroke="#94a3b8" stroke-width="2" />
        <text x="470" y="86" text-anchor="middle" font-size="13" font-weight="600" fill="#64748b">15.0</text>

        
        <line x1="170" y1="60" x2="370" y2="60" stroke="#16a34a" stroke-width="5" />

        
        <circle cx="270" cy="60" r="4.5" fill="#2563eb" />

        
        <circle cx="170" cy="60" r="7" fill="#16a34a" stroke="#ffffff" stroke-width="2" />

        
        <circle cx="370" cy="60" r="6" fill="#ffffff" stroke="#16a34a" stroke-width="3" />

        
        <g id="probeGroup" transform="translate(270, 0)">
          <polygon points="0,48 -5,38 5,38" fill="#2563eb" />
          <line x1="0" y1="48" x2="0" y2="72" stroke="#2563eb" stroke-width="2" stroke-dasharray="2 2" opacity="0.8" />
        </g>

        
        <g transform="translate(170, 108)">
          
          <line x1="0" y1="-8" x2="0" y2="6" stroke="#16a34a" stroke-width="1.5" />
          <rect x="-80" y="6" width="160" height="58" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" filter="drop-shadow(0 2px 4px rgba(0,0,0,0.04))" />
          <text x="0" y="24" text-anchor="middle" font-size="12" font-weight="700" fill="#16a34a">
            ● Lower Bound
          </text>
          <text x="0" y="40" text-anchor="middle" font-size="11" font-weight="600" fill="#1e2945">
            14 − 0.5 = 13.5 cm
          </text>
          <text x="0" y="54" text-anchor="middle" font-size="10" font-weight="500" fill="#64748b">
            [Included: rounds up]
          </text>
        </g>

        
        <g transform="translate(270, 168)">
          <text x="0" y="16" text-anchor="middle" font-size="12" font-weight="700" fill="#2563eb">
            Measured: 14 cm
          </text>
          <text x="0" y="30" text-anchor="middle" font-size="10" font-weight="500" fill="#64748b">
            (Nearest 1 cm)
          </text>
        </g>

        
        <g transform="translate(370, 108)">
          
          <line x1="0" y1="-8" x2="0" y2="6" stroke="#16a34a" stroke-width="1.5" />
          <rect x="-80" y="6" width="160" height="58" rx="6" fill="#ffffff" stroke="#e2e8f0" stroke-width="1" filter="drop-shadow(0 2px 4px rgba(0,0,0,0.04))" />
          <text x="0" y="24" text-anchor="middle" font-size="12" font-weight="700" fill="#16a34a">
            ○ Upper Bound
          </text>
          <text x="0" y="40" text-anchor="middle" font-size="11" font-weight="600" fill="#1e2945">
            14 + 0.5 = 14.5 cm
          </text>
          <text x="0" y="54" text-anchor="middle" font-size="10" font-weight="500" fill="#64748b">
            [Excluded: rounds to 15]
          </text>
        </g>
      </svg>
    </div>

    
    <div class="interactive-tester">
      <div class="slider-wrap">
        <label for="valSlider" style="font-weight:600; font-size:13px; white-space:nowrap;">Test value:</label>
        <input id="valSlider" type="range" min="13.0" max="15.0" step="0.05" value="14.0">
        <span id="sliderVal" style="font-weight:700; width:52px; font-variant-numeric: tabular-nums;">14.00 cm</span>
      </div>
      <div id="testStatus" class="test-feedback in-bounds">
        ✓ Rounds to 14 cm
      </div>
    </div>
  </div>

  <script>
    const slider = document.getElementById('valSlider');
    const sliderVal = document.getElementById('sliderVal');
    const testStatus = document.getElementById('testStatus');
    const probeGroup = document.getElementById('probeGroup');

    // Number line coordinate mapping: 13.0 -> 70px, 15.0 -> 470px (width 400px for 2.0cm => 200px / cm)
    function update(val) {
      const num = parseFloat(val);
      sliderVal.textContent = num.toFixed(2) + ' cm';
      
      const svgX = 70 + (num - 13.0) * 200;
      probeGroup.setAttribute('transform', `translate(${svgX}, 0)`);

      if (num >= 13.5 && num < 14.5) {
        testStatus.className = 'test-feedback in-bounds';
        testStatus.innerHTML = '✓ Rounds to 14 cm';
      } else if (num < 13.5) {
        testStatus.className = 'test-feedback out-bounds';
        testStatus.innerHTML = '↳ Rounds to 13 cm';
      } else {
        testStatus.className = 'test-feedback out-bounds';
        testStatus.innerHTML = '↳ Rounds to 15 cm';
      }
    }

    slider.addEventListener('input', (e) => update(e.target.value));
    update(slider.value);
  </script>
</body>
</html>

Metric Units of Length and Precision in Measurement

<!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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }

    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      background: #f8fafc;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
    }

    .header-title {
      font-size: 14px;
      font-weight: 700;
      color: #1e2945;
    }

    .header-val {
      font-size: 14px;
      font-weight: 700;
      color: #2563eb;
      background: #eff6ff;
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid #bfdbfe;
    }

    /* Number line visual */
    .vis-container {
      position: relative;
      height: 70px;
      background: #f8fafc;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      overflow: hidden;
    }

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

    /* Step Cards List */
    .steps-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .step-card {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
      opacity: 0.55;
    }

    .step-card.active {
      opacity: 1;
      border-color: #2563eb;
      background: #f0f7ff;
      box-shadow: 0 0 0 1px #2563eb;
    }

    .step-card.completed {
      opacity: 0.9;
    }

    .badge {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #e2e8f0;
      color: #1e2945;
      font-size: 12px;
      font-weight: 700;
      flex-shrink: 0;
      transition: all 0.25s ease;
    }

    .step-card.active .badge {
      background: #2563eb;
      color: #ffffff;
    }

    .step-card.completed .badge {
      background: #dbeafe;
      color: #2563eb;
    }

    .step-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      font-size: 13px;
    }

    .step-label {
      font-weight: 600;
      color: #1e2945;
    }

    .step-math {
      font-weight: 700;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      color: #2563eb;
      background: #ffffff;
      padding: 2px 6px;
      border-radius: 4px;
      border: 1px solid #e2e8f0;
    }

    .step-card.active .step-math {
      border-color: #bfdbfe;
    }

    /* Controls */
    .controls {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 2px;
    }

    .btn-group {
      display: flex;
      gap: 6px;
    }

    .btn {
      background: #f8fafc;
      border: 1px solid #e6e6e6;
      color: #1e2945;
      padding: 6px 14px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease;
    }

    .btn:active {
      background: #e2e8f0;
    }

    .btn-primary {
      background: #2563eb;
      border-color: #2563eb;
      color: #ffffff;
    }

    .btn-primary:active {
      background: #1d4ed8;
    }

    .indicators {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s ease;
    }

    .dot.active {
      background: #2563eb;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <span class="header-title">Given Measurement</span>
    <span class="header-val">W = 3.4 m</span>
  </div>

  
  <div class="vis-container">
    <svg viewBox="0 0 400 70" preserveAspectRatio="xMidYMid meet">
      
      <line x1="30" y1="36" x2="370" y2="36" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" />
      
      
      <rect id="intervalBand" x="120" y="24" width="160" height="24" rx="4" fill="#dbeafe" opacity="0" style="transition: opacity 0.3s ease;" />

      
      <line x1="120" y1="28" x2="120" y2="44" stroke="#64748b" stroke-width="2" />
      <line x1="200" y1="22" x2="200" y2="50" stroke="#2563eb" stroke-width="2.5" />
      <line x1="280" y1="28" x2="280" y2="44" stroke="#64748b" stroke-width="2" />

      
      <circle cx="200" cy="36" r="4.5" fill="#2563eb" />
      <text x="200" y="62" font-size="11" font-weight="700" fill="#2563eb" text-anchor="middle">3.4 m</text>

      
      <g id="lowerGroup" opacity="0" style="transition: opacity 0.3s ease;">
        <circle cx="120" cy="36" r="4" fill="#2563eb" />
        <text x="120" y="62" font-size="10" font-weight="700" fill="#1e2945" text-anchor="middle">3.35 m [≤</text>
        <path d="M 200 20 L 125 20" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="3,2" marker-end="url(#arrow)" />
        <text x="160" y="14" font-size="9" font-weight="700" fill="#2563eb" text-anchor="middle">-0.05</text>
      </g>

      
      <g id="upperGroup" opacity="0" style="transition: opacity 0.3s ease;">
        <circle cx="280" cy="36" r="4" fill="#ffffff" stroke="#2563eb" stroke-width="2" />
        <text x="280" y="62" font-size="10" font-weight="700" fill="#1e2945" text-anchor="middle">&lt;) 3.45 m</text>
        <path d="M 200 20 L 275 20" stroke="#2563eb" stroke-width="1.5" stroke-dasharray="3,2" />
        <text x="240" y="14" font-size="9" font-weight="700" fill="#2563eb" text-anchor="middle">+0.05</text>
      </g>
    </svg>
  </div>

  
  <div class="steps-list" id="stepsList">
    <div class="step-card active" data-step="0">
      <div class="badge">1</div>
      <div class="step-content">
        <span class="step-label">Precision Unit</span>
        <span class="step-math">0.1 m</span>
      </div>
    </div>

    <div class="step-card" data-step="1">
      <div class="badge">2</div>
      <div class="step-content">
        <span class="step-label">Half-Unit (±)</span>
        <span class="step-math">0.1 ÷ 2 = 0.05 m</span>
      </div>
    </div>

    <div class="step-card" data-step="2">
      <div class="badge">3</div>
      <div class="step-content">
        <span class="step-label">Lower Bound</span>
        <span class="step-math">3.4 − 0.05 = 3.35 m</span>
      </div>
    </div>

    <div class="step-card" data-step="3">
      <div class="badge">4</div>
      <div class="step-content">
        <span class="step-label">Upper Bound</span>
        <span class="step-math">3.4 + 0.05 = 3.45 m</span>
      </div>
    </div>

    <div class="step-card" data-step="4">
      <div class="badge">5</div>
      <div class="step-content">
        <span class="step-label">Inequality</span>
        <span class="step-math">3.35 m ≤ W &lt; 3.45 m</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <div class="btn-group">
      <button class="btn" id="prevBtn">← Prev</button>
      <button class="btn btn-primary" id="nextBtn">Next →</button>
    </div>

    <div class="indicators" id="indicators">
      <div class="dot active" data-idx="0"></div>
      <div class="dot" data-idx="1"></div>
      <div class="dot" data-idx="2"></div>
      <div class="dot" data-idx="3"></div>
      <div class="dot" data-idx="4"></div>
    </div>

    <button class="btn" id="playBtn">⏸ Pause</button>
  </div>

  <script>
    const TOTAL_STEPS = 5;
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const cards = document.querySelectorAll('.step-card');
    const dots = document.querySelectorAll('.dot');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    const playBtn = document.getElementById('playBtn');

    const lowerGroup = document.getElementById('lowerGroup');
    const upperGroup = document.getElementById('upperGroup');
    const intervalBand = document.getElementById('intervalBand');

    function updateVisuals(step) {
      // Step cards styling
      cards.forEach((card, i) => {
        card.classList.remove('active', 'completed');
        if (i === step) {
          card.classList.add('active');
        } else if (i < step) {
          card.classList.add('completed');
        }
      });

      // Dots
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === step);
      });

      // Diagram diagrammatic state
      if (step === 0 || step === 1) {
        lowerGroup.style.opacity = '0';
        upperGroup.style.opacity = '0';
        intervalBand.style.opacity = '0';
      } else if (step === 2) {
        lowerGroup.style.opacity = '1';
        upperGroup.style.opacity = '0';
        intervalBand.style.opacity = '0.3';
      } else if (step === 3 || step === 4) {
        lowerGroup.style.opacity = '1';
        upperGroup.style.opacity = '1';
        intervalBand.style.opacity = '0.7';
      }
    }

    function setStep(step) {
      currentStep = (step + TOTAL_STEPS) % TOTAL_STEPS;
      updateVisuals(currentStep);
    }

    function startAutoPlay() {
      if (timer) clearInterval(timer);
      timer = setInterval(() => {
        setStep(currentStep + 1);
      }, 3500);
      isPlaying = true;
      playBtn.textContent = '⏸ Pause';
    }

    function pauseAutoPlay() {
      if (timer) clearInterval(timer);
      isPlaying = false;
      playBtn.textContent = '▶ Play';
    }

    // Card click handlers
    cards.forEach((card, index) => {
      card.addEventListener('click', () => {
        pauseAutoPlay();
        setStep(index);
      });
    });

    // Dot click handlers
    dots.forEach((dot, index) => {
      dot.addEventListener('click', () => {
        pauseAutoPlay();
        setStep(index);
      });
    });

    // Controls
    prevBtn.addEventListener('click', () => {
      pauseAutoPlay();
      setStep(currentStep - 1);
    });

    nextBtn.addEventListener('click', () => {
      pauseAutoPlay();
      setStep(currentStep + 1);
    });

    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        pauseAutoPlay();
      } else {
        startAutoPlay();
      }
    });

    // Initialize
    updateVisuals(0);
    startAutoPlay();
  </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;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      user-select: none;
    }

    /* Scale progression chain */
    .scale-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f8fafc;
      border: 1px solid #e6e6e6;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 700;
    }

    .scale-node {
      color: #64748b;
      transition: color 0.25s ease, transform 0.25s ease;
      cursor: pointer;
    }

    .scale-node.active {
      color: #2563eb;
      transform: scale(1.1);
    }

    .scale-arrow {
      color: #94a3b8;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 2px;
    }

    /* 4 Unit Cards */
    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    @media (min-width: 560px) {
      .grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .unit-card {
      background: #ffffff;
      border: 1.5px solid #e6e6e6;
      border-radius: 10px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .unit-card:hover {
      border-color: #cbd5e1;
    }

    .unit-card.active {
      border-color: #2563eb;
      background: #f0f7ff;
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
    }

    .badge {
      font-size: 18px;
      font-weight: 800;
      color: #2563eb;
      line-height: 1.1;
    }

    .visual-box {
      width: 52px;
      height: 52px;
      border-radius: 8px;
      background: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      position: relative;
    }

    .unit-card.active .visual-box {
      background: #e0edff;
    }

    .ref-label {
      font-size: 13px;
      font-weight: 600;
      color: #1e2945;
    }

    .equiv-pill {
      font-size: 11px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 3px 6px;
      border-radius: 4px;
      margin-top: 2px;
    }

    /* Relative visual bar */
    .ruler-vis {
      height: 4px;
      border-radius: 2px;
      background: #2563eb;
      margin-top: 2px;
      transition: width 0.3s ease;
    }
  </style>
</head>
<body>

  
  <div class="scale-bar">
    <span class="scale-node active" id="node-0" onclick="selectUnit(0)">1 mm</span>
    <span class="scale-arrow">×10 →</span>
    <span class="scale-node" id="node-1" onclick="selectUnit(1)">1 cm</span>
    <span class="scale-arrow">×100 →</span>
    <span class="scale-node" id="node-2" onclick="selectUnit(2)">1 m</span>
    <span class="scale-arrow">×1000 →</span>
    <span class="scale-node" id="node-3" onclick="selectUnit(3)">1 km</span>
  </div>

  
  <div class="grid">
    
    <div class="unit-card active" id="card-0" onclick="selectUnit(0)">
      <div class="badge">1 mm</div>
      <div class="visual-box">💳</div>
      <div class="ref-label">Card edge</div>
      <div class="ruler-vis" style="width: 8px;"></div>
      <div class="equiv-pill">0.1 cm</div>
    </div>

    
    <div class="unit-card" id="card-1" onclick="selectUnit(1)">
      <div class="badge">1 cm</div>
      <div class="visual-box">📎</div>
      <div class="ref-label">Fingertip</div>
      <div class="ruler-vis" style="width: 24px;"></div>
      <div class="equiv-pill">10 mm</div>
    </div>

    
    <div class="unit-card" id="card-2" onclick="selectUnit(2)">
      <div class="badge">1 m</div>
      <div class="visual-box">🎸</div>
      <div class="ref-label">Guitar</div>
      <div class="ruler-vis" style="width: 44px;"></div>
      <div class="equiv-pill">100 cm</div>
    </div>

    
    <div class="unit-card" id="card-3" onclick="selectUnit(3)">
      <div class="badge">1 km</div>
      <div class="visual-box">🏟️</div>
      <div class="ref-label">10 Fields</div>
      <div class="ruler-vis" style="width: 100%;"></div>
      <div class="equiv-pill">1000 m</div>
    </div>
  </div>

  <script>
    let activeIdx = 0;

    function selectUnit(idx) {
      activeIdx = idx;
      for (let i = 0; i < 4; i++) {
        document.getElementById(`card-${i}`).classList.toggle('active', i === idx);
        document.getElementById(`node-${i}`).classList.toggle('active', i === idx);
      }
    }
  </script>
</body>
</html>

Perimeter of Irregular and Composite Polygons

Circumference and Arc Length of Circles

Arc Length Word Problems and Practical Applications

Converting Metric Units of Area and Choosing Precision

Area of Regular Polygons Using Apothem

Area of Sectors and Circular Segments

Area of Composite Figures Combining Polygons and Circles

Real-World Area Problems with Waste and Boundaries

Estimating Areas of Irregular Shapes Using Grids and Trapezoids

math

Plane Measurement: Perimeter, Arc Length, Composite Area, and Sectors

Propiedades de la potenciación con exponentes enteros

Simplificación de expresiones con exponentes enteros

Concepto de notación científica y orden de magnitud

Conversión entre notación decimal y notación científica

Suma y resta en notación científica

Multiplicación y división en notación científica

Notación científica y operaciones

Potenciación con exponentes enteros y notación científica

Concepto de logaritmo y relación con la potenciación

Propiedades operacionales de los logaritmos

Ecuaciones logarítmicas básicas y aplicaciones

Logaritmación: conceptos, propiedades y aplicaciones

Interpretación geométrica de la multiplicación algebraica

Cuadrado de la suma y de la diferencia de un binomio

Producto de la suma por la diferencia de dos cantidades

Producto de dos binomios con un término común

Cubo de la suma y de la diferencia de un binomio

Triángulo de Pascal y teorema del binomio

Productos notables y teorema del binomio

Factorización de suma y diferencia de potencias iguales impares

Factorización por evaluación y regla de Ruffini

Estrategia general para la combinación de casos de factorización

Aplicación de la factorización al cálculo de áreas y volúmenes

Factorización avanzada y aplicaciones

Perimeter of Composite Shapes

Area of Composite Shapes

Area of Irregular Shapes Using Estimation

Circumference of a Circle

Area of a Circle

Semi-Circles and Quarter Circles: Perimeter and Area

Mixed Perimeter and Area Problems

Solving Surface Area and Volume Problems with Missing Dimensions

Choosing Appropriate Units for Area and Perimeter

Real-World Perimeter and Area Problems

Perimeter, Area and Circles

Understanding Volume of Right Prisms

Volume of Rectangular Prisms

Volume of Triangular Prisms

Volume of Other Right Prisms

Understanding Capacity and Its Units

Converting Between Volume and Capacity

Mixed Surface Area and Volume Problems with Real Objects

Real-World Volume and Capacity Problems

Volume and Capacity of Right Prisms

Concepto de igualdad, ecuación e identidad

Propiedades de las igualdades y transposición de términos

Resolución de ecuaciones lineales con paréntesis

Resolución de ecuaciones lineales con coeficientes fraccionarios

Clasificación de ecuaciones lineales: solución única, infinita o vacía

Despeje de variables en fórmulas de física y geometría

Planteamiento y resolución de problemas verbales lineales

Ecuaciones lineales en una variable

弧长计算公式：从圆周长到n度圆心角所对弧长的推导与计算

扇形面积公式：圆心角表达式与弧长半径表达式 S = 1/2 lr

弓形与阴影部分面积：割补法、代数和差法与旋转法求面积

圆锥的侧面积与全面积：圆锥侧面展开图与扇形参数转化

弧长与扇形面积计算

Teorema de Pitágoras: demostración geométrica y algebraica

Cálculo de hipotenusa y catetos en triángulos rectángulos

Recíproco del teorema de Pitágoras y clasificación de triángulos

Resolución de problemas contextualizados con Pitágoras

Teoremas de las alturas y del cateto en el triángulo rectángulo

Razones trigonométricas en el triángulo rectángulo: seno, coseno y tangente

Cálculo de lados y ángulos usando trigonometría

Problemas de ángulos de elevación y de depresión

Geometría del triángulo rectángulo: Pitágoras, relaciones métricas y trigonometría

OGM.9.MEAS.1

Aligned learning resources

Related diagrams