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

    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      width: 100%;
      flex-grow: 1;
    }

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

    .tool-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
      user-select: none;
    }

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

    .tool-card.active {
      background: #f0f9ff;
    }

    .tool-name {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.2;
      min-height: 34px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .svg-wrap {
      height: 130px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 6px 0;
    }

    .svg-wrap svg {
      height: 100%;
      max-width: 100%;
      overflow: visible;
    }

    .badge {
      font-size: 11px;
      font-weight: 600;
      padding: 3px 6px;
      border-radius: 6px;
      margin-bottom: 6px;
      line-height: 1.2;
      display: inline-block;
    }

    .badge-beaker   { background: #f1f5f9; color: #475569; }
    .badge-cylinder { background: #e0f2fe; color: #0284c7; }
    .badge-pipette  { background: #ccfbf1; color: #0d9488; }
    .badge-burette  { background: #ede9fe; color: #7c3aed; }

    .resolution-box {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 4px 2px;
    }

    .res-label {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      font-weight: 600;
    }

    .res-val {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
    }

    .precision-bar {
      margin-top: 10px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
    }

    .bar-track {
      flex-grow: 1;
      height: 6px;
      background: linear-gradient(90deg, #94a3b8 0%, #38bdf8 40%, #2dd4bf 75%, #a855f7 100%);
      border-radius: 3px;
      margin: 0 10px;
      position: relative;
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="tool-card" id="card-0" onclick="selectTool(0)">
      <div class="tool-name">Beaker</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 80 120" width="70">
          
          <path d="M 12,20 L 12,108 Q 12,114 20,114 L 60,114 Q 68,114 68,108 L 68,20 L 73,15 L 73,12 L 67,12 L 67,20 Z" fill="none" stroke="#64748b" stroke-width="2.5" stroke-linejoin="round"/>
          <path d="M 7,12 L 13,12 L 13,20" stroke="#64748b" stroke-width="2.5" fill="none" stroke-linecap="round"/>
          
          <path d="M 14.5,60 Q 28,58 40,60 T 65.5,60 L 65.5,108 Q 65.5,111.5 60,111.5 L 20,111.5 Q 14.5,111.5 14.5,108 Z" fill="#bae6fd" opacity="0.75"/>
          
          <path d="M 14.5,60 Q 28,56 40,60 T 65.5,60" fill="none" stroke="#0284c7" stroke-width="1.5" stroke-dasharray="3,2"/>
          
          <line x1="15" y1="40" x2="30" y2="40" stroke="#94a3b8" stroke-width="2" stroke-linecap="round"/>
          <line x1="15" y1="65" x2="32" y2="65" stroke="#0369a1" stroke-width="2" stroke-linecap="round"/>
          <line x1="15" y1="90" x2="26" y2="90" stroke="#0369a1" stroke-width="2" stroke-linecap="round"/>
          <text x="35" y="43" font-size="9" fill="#94a3b8" font-family="sans-serif">100</text>
          <text x="36" y="68" font-size="9" fill="#0369a1" font-family="sans-serif">50</text>
        </svg>
      </div>
      <div class="badge badge-beaker">Rough / Heating</div>
      <div class="resolution-box">
        <div class="res-label">Resolution</div>
        <div class="res-val">±5 – 10 mL</div>
      </div>
    </div>

    
    <div class="tool-card" id="card-1" onclick="selectTool(1)">
      <div class="tool-name">Measuring<br>Cylinder</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 80 120" width="70">
          
          <ellipse cx="40" cy="112" rx="26" ry="6" fill="none" stroke="#64748b" stroke-width="2"/>
          
          <path d="M 28,14 L 28,110 M 52,14 L 52,110" stroke="#64748b" stroke-width="2.5"/>
          <path d="M 24,14 L 28,14 M 52,14 L 56,10 L 56,14" stroke="#64748b" stroke-width="2" fill="none"/>
          
          <rect x="29.5" y="45" width="21" height="64" fill="#7dd3fc" opacity="0.75"/>
          <ellipse cx="40" cy="45" rx="10.5" ry="2.5" fill="#38bdf8" stroke="#0284c7" stroke-width="1.5"/>
          
          <line x1="29" y1="28" x2="38" y2="28" stroke="#94a3b8" stroke-width="1.5"/>
          <line x1="29" y1="34" x2="34" y2="34" stroke="#94a3b8" stroke-width="1"/>
          <line x1="29" y1="40" x2="34" y2="40" stroke="#94a3b8" stroke-width="1"/>
          <line x1="29" y1="46" x2="39" y2="46" stroke="#0369a1" stroke-width="1.5"/>
          <line x1="29" y1="52" x2="34" y2="52" stroke="#0369a1" stroke-width="1"/>
          <line x1="29" y1="58" x2="34" y2="58" stroke="#0369a1" stroke-width="1"/>
          <line x1="29" y1="64" x2="38" y2="64" stroke="#0369a1" stroke-width="1.5"/>
          <line x1="29" y1="70" x2="34" y2="70" stroke="#0369a1" stroke-width="1"/>
          <line x1="29" y1="76" x2="34" y2="76" stroke="#0369a1" stroke-width="1"/>
          <line x1="29" y1="82" x2="38" y2="82" stroke="#0369a1" stroke-width="1.5"/>
          <line x1="29" y1="88" x2="34" y2="88" stroke="#0369a1" stroke-width="1"/>
          <line x1="29" y1="94" x2="34" y2="94" stroke="#0369a1" stroke-width="1"/>
          <line x1="29" y1="100" x2="38" y2="100" stroke="#0369a1" stroke-width="1.5"/>
        </svg>
      </div>
      <div class="badge badge-cylinder">General Lab Work</div>
      <div class="resolution-box">
        <div class="res-label">Resolution</div>
        <div class="res-val">±0.5 – 1.0 mL</div>
      </div>
    </div>

    
    <div class="tool-card" id="card-2" onclick="selectTool(2)">
      <div class="tool-name">Volumetric<br>Pipette</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 80 120" width="70">
          
          <path d="M 37,8 L 43,8 
                   L 43,42 
                   C 43,46 52,50 52,60 
                   L 52,72 
                   C 52,82 43,86 43,96 
                   L 41,114 L 39,114 
                   L 37,96 
                   C 37,86 28,82 28,72 
                   L 28,60 
                   C 28,50 37,46 37,42 Z" 
                fill="none" stroke="#64748b" stroke-width="2"/>
          
          <path d="M 38,28 L 42,28 
                   L 42,42 
                   C 42,46 51,50 51,60 
                   L 51,72 
                   C 51,82 42,86 42,96 
                   L 41,113 L 39,113 
                   L 38,96 
                   C 38,86 29,82 29,72 
                   L 29,60 
                   C 29,50 38,46 38,42 Z" 
                fill="#5eead4" opacity="0.75"/>
          
          <line x1="33" y1="28" x2="47" y2="28" stroke="#ef4444" stroke-width="2" stroke-linecap="round"/>
          <text x="50" y="31" font-size="8" font-weight="700" fill="#ef4444" font-family="sans-serif">25</text>
        </svg>
      </div>
      <div class="badge badge-pipette">Exact Single Vol.</div>
      <div class="resolution-box">
        <div class="res-label">Resolution</div>
        <div class="res-val">±0.06 mL</div>
      </div>
    </div>

    
    <div class="tool-card" id="card-3" onclick="selectTool(3)">
      <div class="tool-name">Burette</div>
      <div class="svg-wrap">
        <svg viewBox="0 0 80 120" width="70">
          
          <path d="M 34,8 L 34,92 L 38,96 L 38,102 M 42,102 L 42,96 L 46,92 L 46,8" stroke="#64748b" stroke-width="2" fill="none"/>
          <path d="M 39,106 L 41,106 L 40.5,116 L 39.5,116 Z" fill="#64748b"/>
          
          <rect x="35.5" y="32" width="9" height="61" fill="#c4b5fd" opacity="0.85"/>
          <ellipse cx="40" cy="32" rx="4.5" ry="1.5" fill="#a78bfa" stroke="#7c3aed" stroke-width="1"/>
          
          <line x1="35" y1="16" x2="40" y2="16" stroke="#94a3b8" stroke-width="1.2"/>
          <text x="42" y="18" font-size="6.5" fill="#94a3b8" font-family="sans-serif">0</text>
          <line x1="35" y1="22" x2="38" y2="22" stroke="#94a3b8" stroke-width="0.8"/>
          <line x1="35" y1="27" x2="38" y2="27" stroke="#94a3b8" stroke-width="0.8"/>
          <line x1="35" y1="32" x2="40" y2="32" stroke="#7c3aed" stroke-width="1.2"/>
          <line x1="35" y1="38" x2="38" y2="38" stroke="#7c3aed" stroke-width="0.8"/>
          <line x1="35" y1="44" x2="39" y2="44" stroke="#7c3aed" stroke-width="1"/>
          <line x1="35" y1="50" x2="38" y2="50" stroke="#7c3aed" stroke-width="0.8"/>
          <line x1="35" y1="56" x2="40" y2="56" stroke="#7c3aed" stroke-width="1.2"/>
          <text x="42" y="58" font-size="6.5" fill="#7c3aed" font-family="sans-serif">25</text>
          <line x1="35" y1="62" x2="38" y2="62" stroke="#7c3aed" stroke-width="0.8"/>
          <line x1="35" y1="68" x2="39" y2="68" stroke="#7c3aed" stroke-width="1"/>
          <line x1="35" y1="74" x2="38" y2="74" stroke="#7c3aed" stroke-width="0.8"/>
          <line x1="35" y1="80" x2="40" y2="80" stroke="#7c3aed" stroke-width="1.2"/>
          <text x="42" y="82" font-size="6.5" fill="#7c3aed" font-family="sans-serif">50</text>
          
          <circle cx="40" cy="100" r="3.5" fill="#475569"/>
          <rect x="31" y="98.5" width="18" height="3" rx="1.5" fill="#334155"/>
        </svg>
      </div>
      <div class="badge badge-burette">Titration / Variable</div>
      <div class="resolution-box">
        <div class="res-label">Resolution</div>
        <div class="res-val">±0.05 mL</div>
      </div>
    </div>
  </div>

  
  <div class="precision-bar">
    <span>Low Precision</span>
    <div class="bar-track"></div>
    <span>High Precision</span>
  </div>

  <script>
    function selectTool(index) {
      document.querySelectorAll('.tool-card').forEach((card, idx) => {
        if (idx === index) {
          card.classList.toggle('active');
        } else {
          card.classList.remove('active');
        }
      });
    }
  </script>
</body>
</html>

Selecting Appropriate Measuring Instruments for Volume and Mass

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

    .nav-bar {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn-toggle {
      background: #ffffff;
      border: 2px solid #cbd5e1;
      color: #1e2945;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }

    .btn-toggle:hover {
      border-color: #94a3b8;
    }

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

    .btn-toggle.active.correct {
      background: #10b981;
      border-color: #10b981;
      color: #ffffff;
    }

    .svg-wrap {
      width: 100%;
      max-width: 480px;
      height: auto;
    }

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

    .sight-line {
      transition: all 0.35s ease;
    }

    .eye-group {
      transition: transform 0.35s ease;
    }

    .reading-badge {
      font-size: 14px;
      font-weight: 700;
      transition: fill 0.3s ease;
    }
  </style>
</head>
<body>

  <div class="nav-bar">
    <button class="btn-toggle" id="btn-high" onclick="setView('high')">Too High ↗</button>
    <button class="btn-toggle active correct" id="btn-level" onclick="setView('level')">Eye Level 👁</button>
    <button class="btn-toggle" id="btn-low" onclick="setView('low')">Too Low ↘</button>
  </div>

  <div class="svg-wrap">
    <svg viewBox="0 0 460 330" aria-label="Burette meniscus measurement">
      <defs>
        
        <linearGradient id="liquidGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#bae6fd" stop-opacity="0.85"/>
          <stop offset="50%" stop-color="#e0f2fe" stop-opacity="0.6"/>
          <stop offset="100%" stop-color="#7dd3fc" stop-opacity="0.9"/>
        </linearGradient>
        
        <linearGradient id="glassGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#64748b" stop-opacity="0.25"/>
          <stop offset="15%" stop-color="#ffffff" stop-opacity="0.6"/>
          <stop offset="85%" stop-color="#ffffff" stop-opacity="0.1"/>
          <stop offset="100%" stop-color="#64748b" stop-opacity="0.3"/>
        </linearGradient>
      </defs>

      
      <g transform="translate(10, 24)">
        <text x="0" y="0" font-size="12" font-weight="700" fill="#64748b">0.00 mL (Top)</text>
        <path d="M 40,6 L 40,24 M 36,20 L 40,26 L 44,20" fill="none" stroke="#94a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <text x="0" y="38" font-size="11" font-weight="600" fill="#64748b">Scale increases ↓</text>
      </g>

      
      <rect x="130" y="15" width="80" height="300" rx="4" fill="#f1f5f9" stroke="#94a3b8" stroke-width="2.5"/>
      <rect x="130" y="15" width="80" height="300" rx="4" fill="url(#glassGrad)"/>

      
      
      <path d="M 130,135 Q 170,165 210,135 L 210,315 L 130,315 Z" fill="url(#liquidGrad)"/>
      <path d="M 130,135 Q 170,165 210,135" fill="none" stroke="#0284c7" stroke-width="3" stroke-linecap="round"/>

      
      <circle cx="170" cy="165" r="3.5" fill="#0369a1"/>

      
      
      
      
      <g stroke="#334155" stroke-linecap="round">
        
        <line x1="130" y1="69" x2="146" y2="69" stroke-width="1.5"/>
        <line x1="130" y1="81" x2="139" y2="81" stroke-width="1"/>
        <line x1="130" y1="93" x2="139" y2="93" stroke-width="1"/>
        <line x1="130" y1="105" x2="139" y2="105" stroke-width="1"/>
        <line x1="130" y1="117" x2="139" y2="117" stroke-width="1"/>

        
        <line x1="130" y1="129" x2="152" y2="129" stroke-width="2"/>
        <text x="122" y="133" font-size="12" font-weight="700" text-anchor="end" fill="#1e2945" stroke="none">24</text>

        
        <line x1="130" y1="141" x2="139" y2="141" stroke-width="1"/>
        <line x1="130" y1="153" x2="139" y2="153" stroke-width="1"/>
        <line x1="130" y1="165" x2="148" y2="165" stroke-width="1.8"/> 
        <line x1="130" y1="177" x2="139" y2="177" stroke-width="1"/>

        
        <line x1="130" y1="189" x2="146" y2="189" stroke-width="1.5"/>
        <line x1="130" y1="201" x2="139" y2="201" stroke-width="1"/>
        <line x1="130" y1="213" x2="139" y2="213" stroke-width="1"/>
        <line x1="130" y1="225" x2="139" y2="225" stroke-width="1"/>
        <line x1="130" y1="237" x2="139" y2="237" stroke-width="1"/>

        
        <line x1="130" y1="249" x2="152" y2="249" stroke-width="2"/>
        <text x="122" y="253" font-size="12" font-weight="700" text-anchor="end" fill="#1e2945" stroke="none">25</text>

        
        <line x1="130" y1="261" x2="139" y2="261" stroke-width="1"/>
        <line x1="130" y1="273" x2="139" y2="273" stroke-width="1"/>
        <line x1="130" y1="285" x2="146" y2="285" stroke-width="1.5"/>
      </g>

      
      <line id="sightLine" class="sight-line"
            x1="126" y1="165" x2="368" y2="165"
            stroke="#10b981" stroke-width="2.5" stroke-dasharray="none"/>

      
      <circle id="scaleMarker" cx="130" cy="165" r="4.5" fill="#10b981" class="sight-line"/>

      
      <g id="eyeGroup" class="eye-group" transform="translate(375, 165)">
        
        <path d="M 0,-14 Q 22,0 44,-14 Q 22,-28 0,-14 Z" fill="#ffffff" stroke="#1e2945" stroke-width="2"/>
        
        <circle cx="16" cy="-14" r="6" fill="#1e2945"/>
        <circle cx="14" cy="-16" r="2" fill="#ffffff"/>
        
        <path d="M 8,-23 L 6,-28 M 22,-26 L 22,-32 M 36,-23 L 38,-28" stroke="#1e2945" stroke-width="1.5" stroke-linecap="round"/>
      </g>

      
      <g id="resultCard" transform="translate(235, 270)">
        <rect x="0" y="0" width="210" height="48" rx="8" fill="#ffffff" stroke="#10b981" stroke-width="2" id="cardBorder"/>
        <text x="14" y="22" font-size="12" font-weight="600" fill="#64748b">Reading:</text>
        <text x="14" y="40" font-size="15" font-weight="800" fill="#10b981" id="readingVal">24.30 mL ✓ Correct</text>
      </g>
    </svg>
  </div>

  <script>
    const configs = {
      high: {
        eyeY: 75,
        targetY: 138, // apparent line on left scale
        color: '#ef4444',
        dash: '5,5',
        reading: '24.08 mL ✗ Parallax Error',
        btnId: 'btn-high'
      },
      level: {
        eyeY: 165,
        targetY: 165,
        color: '#10b981',
        dash: 'none',
        reading: '24.30 mL ✓ Correct (Bottom)',
        btnId: 'btn-level'
      },
      low: {
        eyeY: 255,
        targetY: 192,
        color: '#ef4444',
        dash: '5,5',
        reading: '24.52 mL ✗ Parallax Error',
        btnId: 'btn-low'
      }
    };

    function setView(view) {
      const cfg = configs[view];

      // Update buttons
      ['btn-high', 'btn-level', 'btn-low'].forEach(id => {
        const b = document.getElementById(id);
        b.classList.remove('active', 'correct');
      });
      const activeBtn = document.getElementById(cfg.btnId);
      activeBtn.classList.add('active');
      if (view === 'level') activeBtn.classList.add('correct');

      // Update SVG elements
      const sightLine = document.getElementById('sightLine');
      const scaleMarker = document.getElementById('scaleMarker');
      const eyeGroup = document.getElementById('eyeGroup');
      const readingVal = document.getElementById('readingVal');
      const cardBorder = document.getElementById('cardBorder');

      // Sight line endpoints: touches left scale (x=130, cfg.targetY) through meniscus bottom (170, 165) to eye (375, cfg.eyeY)
      sightLine.setAttribute('x1', '130');
      sightLine.setAttribute('y1', cfg.targetY);
      sightLine.setAttribute('x2', '375');
      sightLine.setAttribute('y2', cfg.eyeY);
      sightLine.setAttribute('stroke', cfg.color);
      sightLine.setAttribute('stroke-dasharray', cfg.dash);

      scaleMarker.setAttribute('cy', cfg.targetY);
      scaleMarker.setAttribute('fill', cfg.color);

      eyeGroup.setAttribute('transform', `translate(375, ${cfg.eyeY})`);

      readingVal.textContent = cfg.reading;
      readingVal.setAttribute('fill', cfg.color);
      cardBorder.setAttribute('stroke', cfg.color);
    }
  </script>
</body>
</html>

<!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 {
      background: #f8f9fa;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 14px 10px;
      min-height: 100vh;
      user-select: none;
    }
    .wrapper {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .header {
      text-align: center;
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.3;
    }
    .subtitle {
      font-size: 12px;
      color: #64748b;
      text-align: center;
      margin-top: -6px;
    }
    .instruments-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
      align-items: end;
      margin-top: 4px;
    }
    .instrument-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      position: relative;
    }
    .svg-container {
      width: 100%;
      height: 170px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      position: relative;
    }
    svg {
      overflow: visible;
      max-height: 100%;
      width: auto;
    }
    .liquid-base {
      fill: #38bdf8;
      transition: all 0.4s ease;
    }
    .liquid-added {
      fill: #0ea5e9;
      transition: opacity 0.4s ease;
      opacity: 0;
    }
    .liquid-added.active {
      opacity: 0.95;
    }
    .glass-outline {
      stroke: #64748b;
      stroke-width: 1.5;
      fill: rgba(255, 255, 255, 0.55);
    }
    .tick {
      stroke: #94a3b8;
      stroke-width: 1;
    }
    .delta-arrow {
      stroke: #e11d48;
      stroke-width: 1.5;
      stroke-dasharray: 2, 2;
      opacity: 0;
      transition: opacity 0.35s ease;
    }
    .delta-arrow.active {
      opacity: 1;
    }
    .delta-text {
      fill: #e11d48;
      font-size: 10px;
      font-weight: 700;
      opacity: 0;
      transition: opacity 0.35s ease;
      text-anchor: start;
    }
    .delta-text.active {
      opacity: 1;
    }
    .card-label {
      width: 100%;
      text-align: center;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 6px 3px;
      margin-top: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      min-height: 52px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .inst-name {
      font-size: 11px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }
    .inst-unc {
      font-size: 10.5px;
      font-weight: 600;
      color: #0284c7;
      margin-top: 2px;
      line-height: 1.15;
    }
    .inst-sub {
      font-size: 9.5px;
      font-weight: 500;
      color: #64748b;
      display: block;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-top: 4px;
    }
    .btn {
      background: #0ea5e9;
      color: #ffffff;
      border: none;
      padding: 8px 20px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(14, 165, 233, 0.25);
      transition: background-color 0.2s, box-shadow 0.2s;
    }
    .btn:hover {
      background: #0284c7;
    }
    .btn.reset {
      background: #e2e8f0;
      color: #334155;
      box-shadow: none;
    }
    .btn.reset:hover {
      background: #cbd5e1;
    }

    @media (max-width: 420px) {
      .instruments-grid {
        gap: 4px;
      }
      .inst-name {
        font-size: 10px;
      }
      .inst-unc {
        font-size: 9.5px;
      }
      .inst-sub {
        font-size: 8.5px;
      }
      .delta-text {
        font-size: 9px;
      }
    }
  </style>
</head>
<body>

  <div class="wrapper">
    <div class="header">Effect of +1 mL on Liquid Height (&Delta;<i>h</i>)</div>
    <div class="subtitle">Narrower glass cross-section &rarr; Greater height change &rarr; Higher sensitivity</div>

    <div class="instruments-grid">
      
      <div class="instrument-col">
        <div class="svg-container">
          <svg width="74" height="150" viewBox="0 0 74 150">
            <defs>
              <clipPath id="beaker-clip">
                <path d="M 6 10 L 6 138 Q 6 144 12 144 L 62 144 Q 68 144 68 138 L 68 10 Z" />
              </clipPath>
            </defs>
            
            <path d="M 3 10 L 6 10 L 6 138 Q 6 144 12 144 L 62 144 Q 68 144 68 138 L 68 10 L 71 10" class="glass-outline" />
            
            <g clip-path="url(#beaker-clip)">
              <rect x="0" y="80" width="74" height="70" class="liquid-base" />
              <rect id="beaker-add" x="0" y="78" width="74" height="2" class="liquid-added" />
            </g>
            
            <line x1="6" y1="40" x2="16" y2="40" class="tick" />
            <line x1="6" y1="60" x2="14" y2="60" class="tick" />
            <line x1="6" y1="80" x2="16" y2="80" class="tick" />
            <line x1="6" y1="100" x2="14" y2="100" class="tick" />
            <line x1="6" y1="120" x2="16" y2="120" class="tick" />
            
            <line x1="69" y1="80" x2="69" y2="78" class="delta-arrow" />
            <text x="70" y="75" class="delta-text">~0.2 mm</text>
          </svg>
        </div>
        <div class="card-label">
          <div class="inst-name">Beaker</div>
          <div class="inst-unc">~±5%</div>
        </div>
      </div>

      
      <div class="instrument-col">
        <div class="svg-container">
          <svg width="60" height="160" viewBox="0 0 60 160">
            <defs>
              <clipPath id="cyl-clip">
                <path d="M 17 15 L 17 140 L 43 140 L 43 15 Z" />
              </clipPath>
            </defs>
            
            <path d="M 10 148 L 50 148 L 43 140 L 17 140 Z" fill="#cbd5e1" stroke="#64748b" stroke-width="1.5" />
            
            <path d="M 14 15 L 17 15 L 17 140 L 43 140 L 43 15 L 46 15" class="glass-outline" />
            
            <g clip-path="url(#cyl-clip)">
              <rect x="17" y="85" width="26" height="60" class="liquid-base" />
              <rect id="cyl-add" x="17" y="75" width="26" height="10" class="liquid-added" />
            </g>
            
            <line x1="17" y1="35" x2="25" y2="35" class="tick" />
            <line x1="17" y1="55" x2="22" y2="55" class="tick" />
            <line x1="17" y1="75" x2="25" y2="75" class="tick" />
            <line x1="17" y1="95" x2="22" y2="95" class="tick" />
            <line x1="17" y1="115" x2="25" y2="115" class="tick" />
            
            <line x1="45" y1="85" x2="45" y2="75" class="delta-arrow" />
            <text x="46" y="73" class="delta-text">+3 mm</text>
          </svg>
        </div>
        <div class="card-label">
          <div class="inst-name">Cylinder</div>
          <div class="inst-unc">±0.5 mL</div>
        </div>
      </div>

      
      <div class="instrument-col">
        <div class="svg-container">
          <svg width="60" height="165" viewBox="0 0 60 165">
            <defs>
              <clipPath id="pipette-clip">
                <path d="M 26 5 L 26 65 Q 26 72 17 85 Q 15 95 17 105 Q 26 118 26 125 L 27 155 L 33 155 L 34 125 Q 34 118 43 105 Q 45 95 43 85 Q 34 72 34 65 L 34 5 Z" />
              </clipPath>
            </defs>
            
            <path d="M 26 5 L 26 65 Q 26 72 17 85 Q 15 95 17 105 Q 26 118 26 125 L 27 155 L 33 155 L 34 125 Q 34 118 43 105 Q 45 95 43 85 Q 34 72 34 5 Z" class="glass-outline" />
            
            <g clip-path="url(#pipette-clip)">
              <rect x="10" y="62" width="40" height="100" class="liquid-base" />
              <rect id="pip-add" x="26" y="22" width="8" height="40" class="liquid-added" />
            </g>
            
            <line x1="24" y1="62" x2="36" y2="62" stroke="#0ea5e9" stroke-width="1.5" />
            
            <line x1="36" y1="62" x2="36" y2="22" class="delta-arrow" />
            <text x="38" y="20" class="delta-text">+25 mm</text>
          </svg>
        </div>
        <div class="card-label">
          <div class="inst-name">Pipette</div>
          <div class="inst-unc">±0.06 mL <span class="inst-sub">(fixed)</span></div>
        </div>
      </div>

      
      <div class="instrument-col">
        <div class="svg-container">
          <svg width="60" height="165" viewBox="0 0 60 165">
            <defs>
              <clipPath id="burette-clip">
                <path d="M 24 5 L 24 135 L 28 143 L 28 158 L 32 158 L 32 143 L 36 135 L 36 5 Z" />
              </clipPath>
            </defs>
            
            <path d="M 24 5 L 24 135 L 28 143 L 28 158 L 32 158 L 32 143 L 36 135 L 36 5 Z" class="glass-outline" />
            
            <rect x="21" y="141" width="18" height="4" rx="2" fill="#64748b" />
            
            <g clip-path="url(#burette-clip)">
              <rect x="20" y="65" width="20" height="95" class="liquid-base" />
              <rect id="bur-add" x="20" y="35" width="20" height="30" class="liquid-added" />
            </g>
            
            <line x1="24" y1="20" x2="30" y2="20" class="tick" />
            <line x1="24" y1="35" x2="33" y2="35" class="tick" />
            <line x1="24" y1="50" x2="30" y2="50" class="tick" />
            <line x1="24" y1="65" x2="33" y2="65" class="tick" />
            <line x1="24" y1="80" x2="30" y2="80" class="tick" />
            <line x1="24" y1="95" x2="33" y2="95" class="tick" />
            
            <line x1="38" y1="65" x2="38" y2="35" class="delta-arrow" />
            <text x="40" y="33" class="delta-text">+18 mm</text>
          </svg>
        </div>
        <div class="card-label">
          <div class="inst-name">Burette</div>
          <div class="inst-unc">±0.05 mL <span class="inst-sub">(variable)</span></div>
        </div>
      </div>
    </div>

    <div class="controls">
      <button id="toggleBtn" class="btn">Add +1 mL Liquid</button>
    </div>
  </div>

  <script>
    const btn = document.getElementById('toggleBtn');
    let added = false;

    const addedElements = document.querySelectorAll('.liquid-added');
    const arrows = document.querySelectorAll('.delta-arrow');
    const texts = document.querySelectorAll('.delta-text');

    function updateState() {
      if (added) {
        addedElements.forEach(el => el.classList.add('active'));
        arrows.forEach(el => el.classList.add('active'));
        texts.forEach(el => el.classList.add('active'));
        btn.textContent = "Reset to Base Volume";
        btn.classList.add('reset');
      } else {
        addedElements.forEach(el => el.classList.remove('active'));
        arrows.forEach(el => el.classList.remove('active'));
        texts.forEach(el => el.classList.remove('active'));
        btn.textContent = "Add +1 mL Liquid";
        btn.classList.remove('reset');
      }
    }

    btn.addEventListener('click', () => {
      added = !added;
      updateState();
    });
  </script>
</body>
</html>

UK-GCSE-SCIENCE-WS-2-03

Aligned learning resources

Related diagrams