<!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 {
      font-family: system-ui, -apple-system, sans-serif;
      color: #0f172a;
      background: #ffffff;
      padding: 10px;
      user-select: none;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      max-width: 700px;
      margin: 0 auto;
    }
    @media (max-width: 520px) {
      .grid { grid-template-columns: 1fr; gap: 20px; }
    }
    .panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .panel-title {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 4px;
      text-align: center;
    }
    .svg-container {
      width: 100%;
      height: 190px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .calc-box {
      margin-top: 8px;
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      border-radius: 6px;
      padding: 6px 8px;
      font-size: 12px;
      font-weight: 700;
      color: #0369a1;
      text-align: center;
      width: 100%;
      min-height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .calc-box-success {
      background: #f0fdf4;
      border-color: #bbf7d0;
      color: #15803d;
    }
    .btn-toggle {
      margin-top: 6px;
      padding: 6px 14px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 6px;
      border: none;
      background: #0284c7;
      color: #ffffff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background 0.2s, opacity 0.2s;
    }
    .btn-toggle:hover {
      background: #0369a1;
    }
    .water-fill {
      transition: height 0.6s ease, y 0.6s ease;
    }
    .rock-anim {
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="panel">
      <div class="panel-title">Meniscus: Eye Level at Bottom</div>
      <div class="svg-container">
        <svg viewBox="0 0 240 180">
          
          <rect x="50" y="10" width="70" height="160" rx="3" fill="#f8fafc" stroke="#64748b" stroke-width="2" />
          
          
          <path d="M 51 90 Q 85 105 119 90 L 119 168 L 51 168 Z" fill="#38bdf8" opacity="0.65" stroke="#0284c7" stroke-width="1.5" />

          
          
          <line x1="50" y1="40" x2="68" y2="40" stroke="#475569" stroke-width="1.5" />
          <text x="44" y="44" font-size="11" font-weight="600" fill="#475569" text-anchor="end">32</text>
          
          
          <line x1="50" y1="70" x2="62" y2="70" stroke="#475569" stroke-width="1.5" />
          
          
          <line x1="50" y1="100" x2="70" y2="100" stroke="#0369a1" stroke-width="2" />
          <text x="44" y="104" font-size="12" font-weight="700" fill="#0369a1" text-anchor="end">30.0</text>

          
          <line x1="50" y1="130" x2="62" y2="130" stroke="#475569" stroke-width="1.5" />

          
          <line x1="70" y1="100" x2="185" y2="100" stroke="#dc2626" stroke-width="1.5" stroke-dasharray="4,3" />

          
          <g transform="translate(195, 100)">
            <text x="0" y="5" font-size="18" text-anchor="middle">👁️</text>
            <text x="24" y="5" font-size="16" font-weight="bold" fill="#16a34a">✓</text>
          </g>

          
          <line x1="185" y1="40" x2="105" y2="92" stroke="#dc2626" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.75" />
          <g transform="translate(195, 38)">
            <text x="0" y="5" font-size="18" text-anchor="middle">👁️</text>
            <text x="24" y="5" font-size="16" font-weight="bold" fill="#dc2626">✗</text>
          </g>
        </svg>
      </div>
      <div class="calc-box calc-box-success">
        True Volume = 30.0 mL
      </div>
    </div>

    
    <div class="panel">
      <div class="panel-title">Water Displacement</div>
      <div class="svg-container">
        <svg viewBox="0 0 240 180">
          
          <rect x="75" y="15" width="60" height="155" rx="3" fill="#f8fafc" stroke="#64748b" stroke-width="2" />
          
          
          <rect id="waterRect" class="water-fill" x="76" y="110" width="58" height="59" fill="#38bdf8" opacity="0.65" stroke="#0284c7" stroke-width="1.5" />

          
          
          <line x1="75" y1="30" x2="88" y2="30" stroke="#475569" stroke-width="1.5" />
          <text x="70" y="34" font-size="11" font-weight="600" fill="#475569" text-anchor="end">50</text>

          
          <line x1="75" y1="60" x2="92" y2="60" stroke="#0369a1" stroke-width="2" />
          <text id="txtV2" x="70" y="64" font-size="11" font-weight="800" fill="#0f172a" text-anchor="end" opacity="0.5">V₂: 42.5</text>

          
          <line x1="75" y1="110" x2="92" y2="110" stroke="#0369a1" stroke-width="2" />
          <text x="70" y="114" font-size="11" font-weight="800" fill="#0369a1" text-anchor="end">V₁: 30.0</text>

          
          <line id="lineV2" x1="92" y1="60" x2="145" y2="60" stroke="#0369a1" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.5" />
          <line x1="92" y1="110" x2="145" y2="110" stroke="#0369a1" stroke-width="1.5" stroke-dasharray="3,3" />

          
          <path id="rock" class="rock-anim" d="M 160 20 Q 175 16 182 28 Q 188 42 178 52 Q 165 56 156 46 Q 150 32 160 20 Z" fill="#64748b" stroke="#334155" stroke-width="1.5" />

          
          <text id="diffLabel" x="150" y="88" font-size="12" font-weight="800" fill="#0369a1" opacity="0">+12.5 mL</text>
        </svg>
      </div>
      
      <button id="toggleBtn" class="btn-toggle" onclick="toggleRock()">
        <span>Drop Rock</span> 🪨
      </button>

      <div id="calcBox" class="calc-box">
        Volume of Rock = V₂ − V₁
      </div>
    </div>
  </div>

  <script>
    let submerged = false;

    function toggleRock() {
      submerged = !submerged;
      const rock = document.getElementById('rock');
      const water = document.getElementById('waterRect');
      const lineV2 = document.getElementById('lineV2');
      const txtV2 = document.getElementById('txtV2');
      const diffLabel = document.getElementById('diffLabel');
      const btn = document.getElementById('toggleBtn');
      const calcBox = document.getElementById('calcBox');

      if (submerged) {
        rock.style.transform = 'translate(-60px, 105px)';
        water.setAttribute('y', '60');
        water.setAttribute('height', '109');
        lineV2.style.opacity = '1';
        txtV2.style.opacity = '1';
        txtV2.setAttribute('fill', '#0369a1');
        diffLabel.style.opacity = '1';
        btn.innerHTML = '<span>Reset</span> ↺';
        calcBox.innerHTML = 'Volume of Rock = 42.5 − 30.0 = 12.5 mL = 12.5 cm³';
        calcBox.style.background = '#e0f2fe';
        calcBox.style.borderColor = '#7dd3fc';
      } else {
        rock.style.transform = 'translate(0, 0)';
        water.setAttribute('y', '110');
        water.setAttribute('height', '59');
        lineV2.style.opacity = '0.5';
        txtV2.style.opacity = '0.5';
        txtV2.setAttribute('fill', '#0f172a');
        diffLabel.style.opacity = '0';
        btn.innerHTML = '<span>Drop Rock</span> 🪨';
        calcBox.innerHTML = 'Volume of Rock = V₂ − V₁';
        calcBox.style.background = '#f0f9ff';
        calcBox.style.borderColor = '#bae6fd';
      }
    }
  </script>
</body>
</html>

Measuring Mass, Volume, and Density with SI 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="1:1">
  <title>Density Formula Triangle & Particle Model</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Top: Formula Triangle Section */
    .section-title {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }

    .triangle-container {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 360px;
    }

    svg.triangle-svg {
      width: 150px;
      height: 125px;
      overflow: visible;
      flex-shrink: 0;
    }

    .t-sector {
      cursor: pointer;
      transition: fill 0.2s ease, filter 0.2s ease;
    }
    .t-sector:hover {
      filter: brightness(0.95);
    }
    .t-sector.active {
      filter: drop-shadow(0 0 4px rgba(34, 183, 255, 0.6));
    }

    .t-text {
      font-weight: 800;
      font-size: 20px;
      pointer-events: none;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .formula-card {
      flex: 1;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 80px;
    }

    .formula-display {
      font-size: 22px;
      font-weight: 800;
      color: #0f172a;
      letter-spacing: 1px;
    }
    .formula-sub {
      font-size: 11px;
      color: #64748b;
      margin-top: 4px;
      font-weight: 600;
    }

    /* Bottom: Particle Model */
    .cubes-wrapper {
      display: flex;
      justify-content: center;
      gap: 16px;
      width: 100%;
      max-width: 360px;
    }

    .cube-card {
      flex: 1;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
    }

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

    .cube-box {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      position: relative;
      background: #ffffff;
      border: 2px solid #94a3b8;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.04);
      display: flex;
      flex-wrap: wrap;
      align-content: space-evenly;
      justify-content: space-evenly;
      padding: 3px;
      overflow: hidden;
    }

    .cube-box.wood {
      border-color: #d97706;
      background: #fffbeb;
    }
    .cube-box.copper {
      border-color: #ea580c;
      background: #fff7ed;
    }

    .dot {
      border-radius: 50%;
      flex-shrink: 0;
    }
    .dot-wood {
      width: 8px;
      height: 8px;
      background: #d97706;
    }
    .dot-copper {
      width: 5px;
      height: 5px;
      background: #ea580c;
    }

    .cube-stat {
      font-size: 12px;
      font-weight: 700;
      color: #334155;
    }

    .footer-pill {
      font-size: 12px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 6px 14px;
      border-radius: 20px;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="triangle-container">
    <svg class="triangle-svg" viewBox="0 0 160 130">
      
      <polygon id="sec-m" class="t-sector active" points="80,8 118,65 42,65" fill="#bae6fd" stroke="#0284c7" stroke-width="2" />
      <text x="80" y="44" class="t-text" fill="#0369a1">m</text>

      
      <polygon id="sec-d" class="t-sector" points="40,69 78,69 78,124 5,124" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="2" />
      <text x="50" y="100" class="t-text" fill="#475569">D</text>

      
      <polygon id="sec-v" class="t-sector" points="82,69 120,69 155,124 82,124" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="2" />
      <text x="110" y="100" class="t-text" fill="#475569">V</text>

      
      <line x1="42" y1="67" x2="118" y2="67" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" />
      <line x1="80" y1="67" x2="80" y2="124" stroke="#0f172a" stroke-width="2.5" stroke-linecap="round" />
    </svg>

    <div class="formula-card">
      <div id="formulaText" class="formula-display">m = D × V</div>
      <div id="formulaSub" class="formula-sub">Tap triangle to solve</div>
    </div>
  </div>

  <div class="cubes-wrapper">
    
    <div class="cube-card">
      <div class="cube-header">Wood (1 cm³)</div>
      <div id="boxWood" class="cube-box wood"></div>
      <div class="cube-stat">0.6 g/cm³</div>
    </div>

    
    <div class="cube-card">
      <div class="cube-header">Copper (1 cm³)</div>
      <div id="boxCopper" class="cube-box copper"></div>
      <div class="cube-stat">8.9 g/cm³</div>
    </div>
  </div>

  <div class="footer-pill">
    Same Volume (1 cm³) • More Mass = Higher Density
  </div>

  <script>
    // Populate Wood (6 particles)
    const boxWood = document.getElementById('boxWood');
    for (let i = 0; i < 6; i++) {
      const d = document.createElement('div');
      d.className = 'dot dot-wood';
      boxWood.appendChild(d);
    }

    // Populate Copper (89 particles)
    const boxCopper = document.getElementById('boxCopper');
    for (let i = 0; i < 89; i++) {
      const d = document.createElement('div');
      d.className = 'dot dot-copper';
      boxCopper.appendChild(d);
    }

    // Interactive Triangle Logic
    const formulas = {
      m: { eq: 'm = D × V', sub: 'Mass = Density × Volume' },
      d: { eq: 'D = m ÷ V', sub: 'Density = Mass ÷ Volume' },
      v: { eq: 'V = m ÷ D', sub: 'Volume = Mass ÷ Density' }
    };

    const sectors = {
      m: document.getElementById('sec-m'),
      d: document.getElementById('sec-d'),
      v: document.getElementById('sec-v')
    };

    const formulaText = document.getElementById('formulaText');
    const formulaSub = document.getElementById('formulaSub');

    function selectSector(key) {
      Object.keys(sectors).forEach(k => {
        const sec = sectors[k];
        const text = sec.nextElementSibling;
        if (k === key) {
          sec.setAttribute('fill', '#bae6fd');
          sec.setAttribute('stroke', '#0284c7');
          sec.classList.add('active');
          text.setAttribute('fill', '#0369a1');
        } else {
          sec.setAttribute('fill', '#f1f5f9');
          sec.setAttribute('stroke', '#cbd5e1');
          sec.classList.remove('active');
          text.setAttribute('fill', '#64748b');
        }
      });
      formulaText.textContent = formulas[key].eq;
      formulaSub.textContent = formulas[key].sub;
    }

    sectors.m.addEventListener('click', () => selectSector('m'));
    sectors.d.addEventListener('click', () => selectSector('d'));
    sectors.v.addEventListener('click', () => selectSector('v'));
  </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, sans-serif;
      background: #ffffff;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

    /* Stepper Tabs */
    .steps-bar {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 460px;
      justify-content: center;
    }
    .step-btn {
      flex: 1;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      border-radius: 6px;
      cursor: pointer;
      text-align: center;
      transition: background 0.2s, color 0.2s, border-color 0.2s;
    }
    .step-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }

    /* Graphic Area */
    .vis-container {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin: 4px 0;
    }

    svg {
      width: 100%;
      max-width: 420px;
      height: auto;
      overflow: visible;
    }

    /* Math Formula Area */
    .math-card {
      width: 100%;
      max-width: 460px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 10px 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 600;
      color: #0f172a;
      flex-wrap: wrap;
    }

    .fraction {
      display: inline-flex;
      flex-direction: column;
      vertical-align: middle;
      text-align: center;
      padding: 0 3px;
      font-size: 13px;
    }
    .numerator {
      border-bottom: 1.5px solid #475569;
      padding-bottom: 2px;
    }
    .denominator {
      padding-top: 2px;
    }

    .strike {
      position: relative;
      display: inline-block;
    }
    .strike::after {
      content: '';
      position: absolute;
      left: -2px;
      top: 45%;
      width: calc(100% + 4px);
      height: 2px;
      background: #ef4444;
      transform: rotate(-15deg);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .struck .strike::after {
      opacity: 1;
    }

    .highlight-val {
      color: #0284c7;
      font-weight: 700;
    }

    /* Conversion Rule Banner */
    .rule-box {
      width: 100%;
      max-width: 460px;
      background: #f0fdf4;
      border: 1.5px dashed #22c55e;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-weight: 700;
      font-size: 15px;
      color: #166534;
    }
    .arrow-badge {
      background: #22c55e;
      color: #fff;
      padding: 3px 10px;
      border-radius: 12px;
      font-size: 13px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
  </style>
</head>
<body>

  
  <div class="steps-bar">
    <button class="step-btn active" onclick="setStep(0)">1. Unit Cube</button>
    <button class="step-btn" onclick="setStep(1)">2. 1 m³ Volume</button>
    <button class="step-btn" onclick="setStep(2)">3. Math Flow</button>
    <button class="step-btn" onclick="setStep(3)">4. Rule</button>
  </div>

  
  <div class="vis-container">
    <svg viewBox="0 0 420 150">
      <defs>
        
        <linearGradient id="cTop" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#38bdf8"/><stop offset="100%" stop-color="#0284c7"/></linearGradient>
        <linearGradient id="cLeft" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#0284c7"/><stop offset="100%" stop-color="#0369a1"/></linearGradient>
        <linearGradient id="cRight" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#0369a1"/><stop offset="100%" stop-color="#075985"/></linearGradient>
        
        
        <pattern id="grid" width="7" height="7" patternUnits="userSpaceOnUse">
          <path d="M 7 0 L 0 0 0 7" fill="none" stroke="#94a3b8" stroke-width="0.5" stroke-opacity="0.4"/>
        </pattern>
      </defs>

      
      <g id="small-cube-group" transform="translate(10, 0)">
        
        <polygon points="65,65 85,53 105,65 85,77" fill="url(#cTop)"/>
        <polygon points="65,65 85,77 85,107 65,95" fill="url(#cLeft)"/>
        <polygon points="85,77 105,65 105,95 85,107" fill="url(#cRight)"/>
        
        
        <text x="85" y="42" text-anchor="middle" font-size="12" font-weight="700" fill="#0369a1">1 cm³</text>
        <text x="85" y="125" text-anchor="middle" font-size="12" font-weight="600" fill="#64748b">Mass = 1 g</text>
      </g>

      
      <g transform="translate(150, 75)">
        <path d="M 0,0 L 32,0" stroke="#0284c7" stroke-width="2" stroke-dasharray="3 3"/>
        <polygon points="32,-4 40,0 32,4" fill="#0284c7"/>
        <text x="18" y="-8" text-anchor="middle" font-size="11" font-weight="700" fill="#0284c7">× 10⁶</text>
      </g>

      
      <g id="large-cube-group" transform="translate(190, 0)">
        
        <polygon points="120,20 180,5 240,20 180,35" fill="#e2e8f0" stroke="#64748b" stroke-width="1.2"/>
        <polygon points="120,20 180,5 240,20 180,35" fill="url(#grid)" transform="rotate(30 180 20)"/>
        
        
        <polygon points="120,20 180,35 180,95 120,80" fill="#cbd5e1" stroke="#64748b" stroke-width="1.2"/>
        
        
        <polygon points="180,35 240,20 240,80 180,95" fill="#94a3b8" stroke="#64748b" stroke-width="1.2"/>

        
        <polygon points="174,33.5 180,32 186,33.5 180,35" fill="#38bdf8"/>
        <polygon points="174,33.5 180,35 180,41 174,39.5" fill="#0284c7"/>
        <polygon points="180,35 186,33.5 186,39.5 180,41" fill="#0369a1"/>

        
        <line x1="132" y1="32" x2="192" y2="47" stroke="#64748b" stroke-width="0.5" stroke-dasharray="2 2"/>
        <line x1="144" y1="44" x2="204" y2="59" stroke="#64748b" stroke-width="0.5" stroke-dasharray="2 2"/>
        <line x1="156" y1="56" x2="216" y2="71" stroke="#64748b" stroke-width="0.5" stroke-dasharray="2 2"/>
        <line x1="168" y1="68" x2="228" y2="83" stroke="#64748b" stroke-width="0.5" stroke-dasharray="2 2"/>

        
        <text x="180" y="115" text-anchor="middle" font-size="12" font-weight="700" fill="#0f172a">1 m³ = 1,000,000 cm³</text>
        <text x="180" y="132" text-anchor="middle" font-size="12" font-weight="600" fill="#64748b">Mass = 1,000,000 g = 1,000 kg</text>
      </g>
    </svg>

    
    <div id="mathCard" class="math-card">
      <span>1</span>
      <div class="fraction">
        <span class="numerator strike">g</span>
        <span class="denominator strike">cm³</span>
      </div>
      <span>×</span>
      <div class="fraction">
        <span class="numerator">1 kg</span>
        <span class="denominator strike">1,000 g</span>
      </div>
      <span>×</span>
      <div class="fraction">
        <span class="numerator strike">1,000,000 cm³</span>
        <span class="denominator">1 m³</span>
      </div>
      <span>=</span>
      <span class="highlight-val">1,000 kg/m³</span>
    </div>
  </div>

  
  <div class="rule-box">
    <span>1 g/cm³</span>
    <div class="arrow-badge">× 1,000 →</div>
    <span>1,000 kg/m³</span>
  </div>

  <script>
    let currentStep = 0;
    const buttons = document.querySelectorAll('.step-btn');
    const mathCard = document.getElementById('mathCard');
    const smallCube = document.getElementById('small-cube-group');
    const largeCube = document.getElementById('large-cube-group');

    function setStep(idx) {
      currentStep = idx;
      buttons.forEach((btn, i) => btn.classList.toggle('active', i === idx));

      // Visual focus based on step
      if (idx === 0) {
        smallCube.style.opacity = '1';
        largeCube.style.opacity = '0.35';
        mathCard.classList.remove('struck');
      } else if (idx === 1) {
        smallCube.style.opacity = '0.5';
        largeCube.style.opacity = '1';
        mathCard.classList.remove('struck');
      } else if (idx === 2) {
        smallCube.style.opacity = '0.8';
        largeCube.style.opacity = '0.8';
        mathCard.classList.add('struck');
      } else {
        smallCube.style.opacity = '1';
        largeCube.style.opacity = '1';
        mathCard.classList.add('struck');
      }
    }

    // Auto-advance stepper smoothly
    let timer = setInterval(() => {
      setStep((currentStep + 1) % 4);
    }, 3800);

    // Pause auto-cycle on student interaction
    buttons.forEach((btn) => {
      btn.addEventListener('click', () => clearInterval(timer));
    });

    setStep(0);
  </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 {
      background: #f8f9fa;
      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;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }

    .stepper-nav {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 620px;
    }

    .step-btn {
      flex: 1;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      padding: 6px 4px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.2s ease;
      user-select: none;
    }

    .step-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.35);
    }

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

    .stage-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .stage-card.active {
      border-color: #22b7ff;
      box-shadow: 0 4px 12px rgba(34, 183, 255, 0.15);
    }

    .card-title {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 6px;
      color: #1e2945;
      text-align: center;
    }

    .svg-container {
      width: 100%;
      height: auto;
      max-height: 230px;
      display: block;
    }

    @keyframes pulseGlow {
      0%, 100% {
        filter: drop-shadow(0 0 2px #22b7ff);
        opacity: 0.9;
      }
      50% {
        filter: drop-shadow(0 0 6px #22b7ff);
        opacity: 1;
      }
    }

    .tare-glow {
      animation: pulseGlow 1.8s infinite ease-in-out;
    }
  </style>
</head>
<body>

  <div class="stepper-nav">
    <button class="step-btn active" onclick="setStep(0)">1. Empty Beaker</button>
    <button class="step-btn" onclick="setStep(1)">2. Tare (Zero)</button>
    <button class="step-btn" onclick="setStep(2)">3. Liquid Only</button>
  </div>

  <div class="cards-grid">
    
    <div class="stage-card active" onclick="setStep(0)">
      <div class="card-title">1. Weigh Beaker</div>
      <svg class="svg-container" viewBox="0 0 160 210">
        
        <path d="M 44 48 L 44 116 Q 44 122 50 122 L 110 122 Q 116 122 116 116 L 116 48 L 120 44 L 40 44 Z" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linejoin="round"/>
        
        <line x1="48" y1="65" x2="62" y2="65" stroke="#cbd5e1" stroke-width="1.5" />
        <line x1="48" y1="82" x2="68" y2="82" stroke="#cbd5e1" stroke-width="1.5" />
        <line x1="48" y1="99" x2="62" y2="99" stroke="#cbd5e1" stroke-width="1.5" />

        
        <rect x="25" y="122" width="110" height="7" rx="3" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1"/>
        
        
        <rect x="18" y="129" width="124" height="66" rx="8" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.5"/>
        
        
        <rect x="30" y="142" width="62" height="26" rx="4" fill="#0f172a"/>
        <text x="61" y="159" fill="#38bdf8" font-size="12" font-family="monospace" font-weight="700" text-anchor="middle">45.20 g</text>
        
        
        <g class="tare-glow">
          <rect x="100" y="143" width="34" height="24" rx="4" fill="#22b7ff" stroke="#0284c7" stroke-width="1"/>
          <text x="117" y="158" fill="#ffffff" font-size="8.5" font-weight="800" text-anchor="middle">TARE</text>
        </g>

        
        <path d="M 117 190 L 117 174 M 113 178 L 117 172 L 121 178" fill="none" stroke="#0284c7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>

    
    <div class="stage-card" onclick="setStep(1)">
      <div class="card-title">2. Press Tare</div>
      <svg class="svg-container" viewBox="0 0 160 210">
        
        <path d="M 44 48 L 44 116 Q 44 122 50 122 L 110 122 Q 116 122 116 116 L 116 48 L 120 44 L 40 44 Z" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linejoin="round"/>
        
        <line x1="48" y1="65" x2="62" y2="65" stroke="#cbd5e1" stroke-width="1.5" />
        <line x1="48" y1="82" x2="68" y2="82" stroke="#cbd5e1" stroke-width="1.5" />
        <line x1="48" y1="99" x2="62" y2="99" stroke="#cbd5e1" stroke-width="1.5" />

        
        <rect x="25" y="122" width="110" height="7" rx="3" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1"/>
        
        
        <rect x="18" y="129" width="124" height="66" rx="8" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.5"/>
        
        
        <rect x="30" y="142" width="62" height="26" rx="4" fill="#0f172a"/>
        <text x="61" y="159" fill="#4ade80" font-size="12" font-family="monospace" font-weight="700" text-anchor="middle">0.00 g</text>
        
        
        <rect x="100" y="143" width="34" height="24" rx="4" fill="#0284c7" stroke="#0369a1" stroke-width="1"/>
        <text x="117" y="158" fill="#ffffff" font-size="8.5" font-weight="800" text-anchor="middle">TARE</text>

        
        <circle cx="117" cy="184" r="7" fill="#4ade80" opacity="0.2"/>
        <path d="M 113 184 L 116 187 L 122 181" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>

    
    <div class="stage-card" onclick="setStep(2)">
      <div class="card-title">3. Add Liquid</div>
      <svg class="svg-container" viewBox="0 0 160 210">
        
        <path d="M 45 78 L 45 116 Q 45 121 50 121 L 110 121 Q 115 121 115 116 L 115 78 Q 80 82 45 78 Z" fill="#22b7ff" opacity="0.6"/>
        <path d="M 45 78 Q 80 82 115 78" fill="none" stroke="#0284c7" stroke-width="2"/>

        
        <path d="M 44 48 L 44 116 Q 44 122 50 122 L 110 122 Q 116 122 116 116 L 116 48 L 120 44 L 40 44 Z" fill="none" stroke="#94a3b8" stroke-width="2.5" stroke-linejoin="round"/>
        
        <line x1="48" y1="65" x2="62" y2="65" stroke="#cbd5e1" stroke-width="1.5" />
        <line x1="48" y1="82" x2="68" y2="82" stroke="#ffffff" stroke-width="1.5" />
        <line x1="48" y1="99" x2="62" y2="99" stroke="#ffffff" stroke-width="1.5" />

        
        <rect x="25" y="122" width="110" height="7" rx="3" fill="#cbd5e1" stroke="#94a3b8" stroke-width="1"/>
        
        
        <rect x="18" y="129" width="124" height="66" rx="8" fill="#f1f5f9" stroke="#cbd5e1" stroke-width="1.5"/>
        
        
        <rect x="30" y="142" width="62" height="26" rx="4" fill="#0f172a"/>
        <text x="61" y="159" fill="#38bdf8" font-size="12" font-family="monospace" font-weight="700" text-anchor="middle">25.00 g</text>
        
        
        <rect x="100" y="143" width="34" height="24" rx="4" fill="#e2e8f0" stroke="#cbd5e1" stroke-width="1"/>
        <text x="117" y="158" fill="#64748b" font-size="8.5" font-weight="800" text-anchor="middle">TARE</text>

        
        <text x="80" y="186" fill="#0284c7" font-size="9.5" font-weight="700" text-anchor="middle">Liquid Mass Only</text>
      </svg>
    </div>
  </div>

  <script>
    let activeIdx = 0;
    const cards = document.querySelectorAll('.stage-card');
    const btns = document.querySelectorAll('.step-btn');

    function setStep(index) {
      activeIdx = index;
      cards.forEach((card, i) => card.classList.toggle('active', i === index));
      btns.forEach((btn, i) => btn.classList.toggle('active', i === index));
    }
  </script>
</body>
</html>

La observación científica: más allá de mirar

Observación de fenómenos naturales cambiantes en el tiempo

Observaciones cualitativas y cuantitativas en el laboratorio

Uso de lupas y microscopios para observaciones detalladas

Identificación de anomalías y patrones en la naturaleza

science

Observación científica sistemática

Siedem jednostek podstawowych układu SI i ich współczesne definicje

Wyprowadzanie jednostek pochodnych z jednostek podstawowych

Przedrostki SI — wielokrotności od kilo do jotta

Przedrostki SI — podwielokrotności od mili do jokto

Zamiana jednostek powierzchni i objętości w systemie metrycznym

Przeliczanie jednostek prędkości km/h na m/s i jednostek złożonych

Przeliczanie jednostek energii — dżul, kilowatogodzina i elektronowolt

Jednostki ciśnienia — paskal, bar, atmosfera fizyczna i milimetr słupa rtęci

Układ SI, przedrostki i przeliczanie jednostek fizycznych

Analiza wymiarowa — sprawdzanie jednorodności równań fizycznych

Wyprowadzanie postaci zależności fizycznych metodą analizy wymiarowej

Bezwymiarowe wielkości fizyczne — kąt, współczynnik tarcia i współczynnik załamania

Kąt płaski i bryłowy — radian oraz steradian w układzie SI

Pozaukładowe jednostki w astronomii — rok świetlny, AU i parsek

Temperatura bezwzględna — kelwin a skale Celsjusza i Fahrenheita

Trening przeliczania złożonych jednostek i analizy wymiarowej

Analiza wymiarowa i jednostki specjalne w fizyce

Identifying Variables: Independent, Dependent, and Controlled

Designing Controlled and Reproducible Experiments

Conducting Comparative and Descriptive Field Studies

Using Lab Tools and Instruments Safely

Mitigating Risks and Hazard Controls in the Science Lab

Experimental Design, Variables, and Laboratory Safety

Explaining Density with Particle Theory

Explaining Compressibility with Particle Theory

Diffusion and Particle Theory

Particle Theory and Pressure in Gases

Using Particle Models to Explain Dissolving

Using Particle Models to Explain Conservation

Relating Particle Behaviour to Substance Properties

Investigating State Changes with Particle Models

Particle Theory: Explaining Substance Properties and Behaviours

Using Safety Equipment During Investigations

Using Hot Plates Safely in the Laboratory

Using Graduated Cylinders to Measure Volume

Using Metric Rulers for Precise Length Measurement

Using Mass Sets with Triple Beam Balances

Using Celsius Thermometers for Temperature Measurement

Using Timing Devices: Stopwatches and Timers

Using Spring Scales to Measure Force

Laboratory Safety and Measurement Tools

Timing Investigations with Stopwatches and Digital Timers

Using Digital Sensors and Data Loggers for Continuous Tracking

Precision, Accuracy, and Instrument Resolution

Recording Systematic Qualitative and Quantitative Field Notes

SI Precision Measurement and Digital Data Acquisition

Measuring Mass With Laboratory Balances

Using Thermometers and Temperature Probes in the Lab

Using pH Indicators in the Laboratory

Using Data-Collecting Probes and Sensors

Using Microscopes and Slides in Life Science

Using Magnets in Scientific Investigations

Using Petri Dishes and Dissecting Kits

Laboratory Safety and Tools

Using the Periodic Table as a Science Tool

Measuring pH With Indicators and Probes

Using Tools That Model Wave Behavior

Analyzing Satellite Images in Earth Science

Specialized Science Tools

The International System of Units (SI)

Recording Quantitative Data with Correct Units

Collecting Qualitative Observations as Evidence

Making Bar Graphs from Experimental Data

Comparative Analysis Using Bar Charts

Creating Line Graphs for Science Data

Building Data Tables With Repeated Trials and Averages

Collecting and Organizing Data

Gathering SI and Qualitative Data in Investigations

Graphing Results With Repeated Trials

Evaluating Model Size, Scale, Properties, and Materials

Identifying Sources of Error in Investigations

Using Math to Compare Science Data

Identifying Key Features and Patterns in Science Data

Using Input-Output Tables for Cause and Effect

Data Collection and Analysis

Introduction to the Periodic Table

Finding Elements on the Periodic Table

Chemical Symbols for Elements

Counting Each Kind of Atom in a Formula

Using the Periodic Table to Identify Atoms in a Formula

Interpreting Chemical Formulas in Real-World Contexts

Elements vs. Compounds: What Makes Them Different

Building a Model Periodic Table Using Eco-Friendly Materials

Elements, Compounds, and Chemical Formulas

Identifying Physical and Chemical Changes in Everyday Life

Recognizing Signs of Chemical Changes

Using Evidence to Explain Matter Changes

Using Particle Models to Explain State Changes

How Temperature Changes Affect Matter

Measuring Temperature During State Changes

Recording State Changes in a Data Table

Understanding Aqueous Solutions and Their Properties

Solid, Liquid, and Gas Solutes in Aqueous Solutions

Concentration and Dilution Word Problems

Changes in Matter and Solutions

Gravitational Force and Mass

How Mass Affects Acceleration

Force Magnitude and Acceleration

Measuring Forces with a Newton Meter

Force, Mass and Acceleration

Magnitudes fundamentales y derivadas en ciencias naturales

El Sistema Internacional de Unidades (SI) en Colombia

Medición de longitud y espesor: regla, cinta y calibrador

Medición de masa: balanza granataria y balanza digital

Medición de volumen de líquidos: probetas, buretas y pipetas

Medición de volumen de sólidos irregulares por desplazamiento

Propiedades específicas: densidad, dureza y solubilidad

Magnitudes, unidades del SI y mediciones básicas de laboratorio

Medición de temperatura: termómetros de alcohol y sensores

Medición de tiempo y rapidez: cronómetro y velocidad media

Medición de fuerza y peso: el dinamómetro y el newton

Precisión, exactitud y cifras significativas básicas

Selección del instrumento adecuado según la escala del objeto

Medición de variables térmicas, temporales y de fuerza con análisis metrológico

Thermal Energy and Its Properties

How Heat Moves Through Materials

Explaining Conduction, Convection, and Radiation

Comparing Conduction, Convection, and Radiation

Factors That Affect How Fast Equilibrium Is Reached

Comparing Temperatures of Different Objects

Materials That Conduct Both Heat and Electricity

Engineering Solutions for Thermal Insulation

Thermal Energy and Heat Transfer

Proporcjonalność prosta na wykresie i równanie y = ax

Ogólna funkcja liniowa y = ax + b w fizyce

Geometryczne dopasowanie prostej najlepszego dopasowania — reguła oka

Wyznaczanie współczynnika kierunkowego prostej ze wzoru delta y przez delta x

Fizyczna interpretacja współczynnika kierunkowego — prędkość, opór, przyspieszenie

Jednostka współczynnika kierunkowego z analizy jednostek osi

Interpretacja fizyczna punktu przecięcia z osią Y — wyraz wolny b

Interpretacja fizyczna miejsca zerowego — punkt przecięcia z osią X

Pole pod wykresem jako wielkość fizyczna — droga, praca, ładunek

Interpretacja i dopasowanie wykresów liniowych w fizyce

What Is a Dichotomous Key?

Using a Dichotomous Key to Identify Organisms

Building Your Own Dichotomous Key

Using Online Classification Tools

Classification and Biodiversity

Identifying Organisms with Dichotomous Keys

How Scientific Research Shapes Society

Cost-Benefit Analysis in Scientific Research

Evaluating the Credibility and Accuracy of Sources

Evaluating the Credibility of Quantitative Data in Media Sources

Using the Internet for Scientific Research

Exploring STEM Career Pathways

Science, Society, and STEM Careers

Identifying Patterns and Relationships in Questions

Writing Hypotheses and Reasoned Predictions

Designing Investigations to Answer Scientific Questions

Identifying Variables in Investigations

Managing Risks in Investigations

Ensuring Reproducibility in Investigations

Selecting Appropriate Equipment for Investigations

Formulating Questions and Designing Investigations

Using Equipment to Generate Precise Data

Using Tables to Organise Data That Supports Your Conclusion

Using Graphs to Communicate Your Findings Visually

Analysing Data for Patterns and Trends

Identifying Anomalies in Data

Collecting and Analysing Scientific Data

Evaluating Methods, Conclusions and Claims

Using Evidence to Support Scientific Claims

Constructing Evidence-Based Arguments for Conclusions

Writing Scientific Reports for a Specific Purpose

Presenting Science for Different Audiences

Collecting Data to Answer Scientific Questions

Evaluating Evidence and Communicating Findings

Struktura i nawigacja po karcie wybranych wzorów i stałych fizycznych CKE

Stałe uniwersalne przyrody (c, G, h, k, NA) i ich wymiary oraz dokładność

Odczytywanie właściwości materii z tablic — gęstość, ciepło właściwe, oporność właściwa i praca wyjścia

Tablice astronomiczne — masy, promienie i parametry orbit planet oraz księżyców

Układ okresowy i tabele mas izotopów w obliczeniach deficytu masy

Karta wzorów, stałe uniwersalne i tablice fizykochemiczne

Algorytm krok po kroku rozwiązywania złożonych zadań z fizyki

Rozwiązywanie zadań na symbolach — zalety zapisu analitycznego i kontroli wymiarowej

Zadania wielodziałowe — łączenie mechaniki z termodynamiką (zamiana pracy na ciepło)

Zadania wielodziałowe — łączenie elektrodynamiki z mechaniką (ruch ładunku w polach E i B)

Zadania wielodziałowe — łączenie optyki z fizyką kwantową i atomową

Bilanse energii i pędu jako uniwersalny klucz do rozwiązywania problemów fizycznych

Przekształcanie złożonych układów równań nieliniowych w zadaniach fizycznych

Analiza przypadków granicznych jako metoda weryfikacji poprawności wzoru końcowego

Zaawansowany trening maturalny — rozwiązywanie nietypowych zadań problemowych CKE

Wielka synteza metodologiczna — warsztat fizyka-badacza i egzamin mistrzowski

Strategie rozwiązywania złożonych zadań wielodziałowych z fizyki

OGS.8.SEP.3

OGS.8.SEP.3

Aligned learning resources

Related diagrams