<!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: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px;
      height: 100%;
      min-height: 100%;
    }

    .grid-container {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .chambers-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .chamber-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .chamber-header {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 4px;
      padding: 0 4px;
    }

    .tag-cold { color: #2563eb; }
    .tag-hot { color: #dc2626; }
    .gauge-val { color: #475569; font-variant-numeric: tabular-nums; }

    canvas {
      display: block;
      width: 100%;
      border-radius: 4px;
    }

    .plot-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    svg {
      width: 100%;
      height: 105px;
      overflow: visible;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="chambers-row">
      
      <div class="chamber-card">
        <div class="chamber-header">
          <span class="tag-cold">250 K</span>
          <span class="gauge-val">100 kPa</span>
        </div>
        <canvas id="canvasCold" width="280" height="170"></canvas>
      </div>

      
      <div class="chamber-card">
        <div class="chamber-header">
          <span class="tag-hot">500 K</span>
          <span class="gauge-val">200 kPa</span>
        </div>
        <canvas id="canvasHot" width="280" height="170"></canvas>
      </div>
    </div>

    
    <div class="plot-card">
      <svg viewBox="0 0 540 100" preserveAspectRatio="xMidYMid meet">
        
        <line x1="60" y1="80" x2="500" y2="80" stroke="#cbd5e1" stroke-width="1.5" />
        <line x1="60" y1="10" x2="60" y2="80" stroke="#cbd5e1" stroke-width="1.5" />

        
        <text x="500" y="94" font-size="12" font-weight="600" fill="#64748b" text-anchor="end">T (K)</text>
        <text x="45" y="16" font-size="12" font-weight="600" fill="#64748b" text-anchor="end">P (kPa)</text>

        
        
        
        <line x1="240" y1="80" x2="240" y2="50" stroke="#e2e8f0" stroke-dasharray="3,3" />
        <line x1="60" y1="50" x2="240" y2="50" stroke="#e2e8f0" stroke-dasharray="3,3" />
        
        <line x1="440" y1="80" x2="440" y2="20" stroke="#e2e8f0" stroke-dasharray="3,3" />
        <line x1="60" y1="20" x2="440" y2="20" stroke="#e2e8f0" stroke-dasharray="3,3" />

        
        <text x="60" y="93" font-size="10" fill="#94a3b8" text-anchor="middle">0</text>
        <text x="240" y="93" font-size="11" font-weight="600" fill="#2563eb" text-anchor="middle">250</text>
        <text x="440" y="93" font-size="11" font-weight="600" fill="#dc2626" text-anchor="middle">500</text>

        
        <text x="52" y="83" font-size="10" fill="#94a3b8" text-anchor="end">0</text>
        <text x="52" y="53" font-size="11" font-weight="600" fill="#2563eb" text-anchor="end">100</text>
        <text x="52" y="23" font-size="11" font-weight="600" fill="#dc2626" text-anchor="end">200</text>

        
        <line x1="60" y1="80" x2="480" y2="13.33" stroke="#8b5cf6" stroke-width="2.5" stroke-linecap="round" />

        
        <text x="340" y="38" font-size="13" font-weight="700" fill="#7c3aed">P ∝ T</text>

        
        <circle cx="240" cy="50" r="5" fill="#2563eb" stroke="#ffffff" stroke-width="1.5" />
        <circle cx="440" cy="20" r="5" fill="#dc2626" stroke="#ffffff" stroke-width="1.5" />
      </svg>
    </div>
  </div>

  <script>
    class ChamberSim {
      constructor(canvasId, isHot) {
        this.canvas = document.getElementById(canvasId);
        this.ctx = this.canvas.getContext('2d');
        this.isHot = isHot;
        this.w = this.canvas.width;
        this.h = this.canvas.height;

        this.speedMult = isHot ? 2.2 : 1.1;
        this.particleColor = isHot ? '#ef4444' : '#3b82f6';
        this.vectorColor = isHot ? 'rgba(220, 38, 38, ' : 'rgba(59, 130, 246, ';
        this.vectorLen = isHot ? 18 : 8;

        this.particles = [];
        this.vectors = [];
        this.radius = 4;

        const count = 18;
        for (let i = 0; i < count; i++) {
          const angle = Math.random() * Math.PI * 2;
          this.particles.push({
            x: this.radius + 15 + Math.random() * (this.w - 30 - this.radius * 2),
            y: this.radius + 15 + Math.random() * (this.h - 30 - this.radius * 2),
            vx: Math.cos(angle) * this.speedMult,
            vy: Math.sin(angle) * this.speedMult,
            history: []
          });
        }
      }

      addVector(x, y, nx, ny) {
        this.vectors.push({
          x, y,
          vx: nx * this.vectorLen,
          vy: ny * this.vectorLen,
          life: 1.0
        });
      }

      update() {
        const boundL = 10;
        const boundR = this.w - 10;
        const boundT = 10;
        const boundB = this.h - 10;

        // Update vectors
        for (let i = this.vectors.length - 1; i >= 0; i--) {
          const v = this.vectors[i];
          v.life -= 0.05;
          if (v.life <= 0) this.vectors.splice(i, 1);
        }

        // Update particles
        for (const p of this.particles) {
          if (this.isHot) {
            p.history.push({ x: p.x, y: p.y });
            if (p.history.length > 4) p.history.shift();
          }

          p.x += p.vx;
          p.y += p.vy;

          // Wall bounces + force arrows
          if (p.x <= boundL + this.radius) {
            p.x = boundL + this.radius;
            p.vx *= -1;
            this.addVector(boundL, p.y, -1, 0);
          } else if (p.x >= boundR - this.radius) {
            p.x = boundR - this.radius;
            p.vx *= -1;
            this.addVector(boundR, p.y, 1, 0);
          }

          if (p.y <= boundT + this.radius) {
            p.y = boundT + this.radius;
            p.vy *= -1;
            this.addVector(p.x, boundT, 0, -1);
          } else if (p.y >= boundB - this.radius) {
            p.y = boundB - this.radius;
            p.vy *= -1;
            this.addVector(p.x, boundB, 0, 1);
          }
        }
      }

      draw() {
        this.ctx.clearRect(0, 0, this.w, this.h);

        // Container boundary
        this.ctx.strokeStyle = '#94a3b8';
        this.ctx.lineWidth = 3;
        this.ctx.strokeRect(10, 10, this.w - 20, this.h - 20);

        // Background tint
        this.ctx.fillStyle = this.isHot ? 'rgba(254, 242, 242, 0.6)' : 'rgba(239, 246, 255, 0.6)';
        this.ctx.fillRect(11, 11, this.w - 22, this.h - 22);

        // Force vectors (arrows on collisions)
        for (const v of this.vectors) {
          this.ctx.strokeStyle = this.vectorColor + v.life + ')';
          this.ctx.fillStyle = this.ctx.strokeStyle;
          this.ctx.lineWidth = this.isHot ? 2.5 : 1.5;
          this.ctx.beginPath();
          this.ctx.moveTo(v.x, v.y);
          this.ctx.lineTo(v.x + v.vx, v.y + v.vy);
          this.ctx.stroke();

          // Arrow head
          const headLen = this.isHot ? 5 : 3;
          const angle = Math.atan2(v.vy, v.vx);
          this.ctx.beginPath();
          this.ctx.moveTo(v.x + v.vx, v.y + v.vy);
          this.ctx.lineTo(v.x + v.vx - headLen * Math.cos(angle - Math.PI / 6), v.y + v.vy - headLen * Math.sin(angle - Math.PI / 6));
          this.ctx.lineTo(v.x + v.vx - headLen * Math.cos(angle + Math.PI / 6), v.y + v.vy - headLen * Math.sin(angle + Math.PI / 6));
          this.ctx.fill();
        }

        // Particle trails for hot chamber
        if (this.isHot) {
          for (const p of this.particles) {
            for (let i = 0; i < p.history.length; i++) {
              const alpha = (i + 1) / (p.history.length * 3);
              this.ctx.fillStyle = `rgba(239, 68, 68, ${alpha})`;
              this.ctx.beginPath();
              this.ctx.arc(p.history[i].x, p.history[i].y, this.radius * 0.8, 0, Math.PI * 2);
              this.ctx.fill();
            }
          }
        }

        // Particles
        this.ctx.fillStyle = this.particleColor;
        for (const p of this.particles) {
          this.ctx.beginPath();
          this.ctx.arc(p.x, p.y, this.radius, 0, Math.PI * 2);
          this.ctx.fill();
        }
      }
    }

    const simCold = new ChamberSim('canvasCold', false);
    const simHot = new ChamberSim('canvasHot', true);

    function loop() {
      simCold.update();
      simCold.draw();

      simHot.update();
      simHot.draw();

      requestAnimationFrame(loop);
    }
    loop();
  </script>
</body>
</html>

Forming Testable Hypotheses for Investigations

<!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;
      color: #1e293b;
      background: #f8fafc;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
    }

    /* Tab Selector */
    .tab-bar {
      display: flex;
      gap: 6px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 10px;
    }
    .tab-btn {
      flex: 1;
      padding: 8px 4px;
      border: none;
      background: transparent;
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
      border-radius: 7px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.2s ease;
    }
    .tab-btn.active {
      background: #ffffff;
      color: #0284c7;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    /* Comparison Area */
    .card-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    @media (max-width: 480px) {
      .card-grid {
        grid-template-columns: 1fr;
      }
    }

    .compare-card {
      border-radius: 10px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;
    }
    .flawed-card {
      background: #fff1f2;
      border: 1.5px solid #fecdd3;
    }
    .testable-card {
      background: #ecfdf5;
      border: 1.5px solid #a7f3d0;
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 2px 8px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .flawed-badge {
      background: #fee2e2;
      color: #b91c1c;
    }
    .testable-badge {
      background: #d1fae5;
      color: #047857;
    }

    .quote-box {
      font-size: 14px;
      line-height: 1.35;
      font-weight: 600;
      color: #0f172a;
      padding: 8px 10px;
      background: #ffffff;
      border-radius: 8px;
      border: 1px dashed;
    }
    .flawed-card .quote-box {
      border-color: #fca5a5;
    }
    .testable-card .quote-box {
      border-color: #6ee7b7;
    }

    /* Visual Mechanism Box */
    .visual-box {
      background: #ffffff;
      border-radius: 8px;
      padding: 10px;
      min-height: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 4px;
      border: 1px solid #e2e8f0;
    }
    .visual-icon {
      font-size: 24px;
      line-height: 1;
    }
    .visual-label {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
    }

    /* Key contrast banner */
    .takeaway-bar {
      background: #f1f5f9;
      border-left: 4px solid #0284c7;
      padding: 8px 12px;
      border-radius: 0 8px 8px 0;
      font-size: 13px;
      font-weight: 600;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 6px;
    }
  </style>
</head>
<body>

  
  <div class="tab-bar">
    <button class="tab-btn active" id="tab0" onclick="switchFlaw(0)">
      <span>1. Measurement</span>
    </button>
    <button class="tab-btn" id="tab1" onclick="switchFlaw(1)">
      <span>2. Causality</span>
    </button>
    <button class="tab-btn" id="tab2" onclick="switchFlaw(2)">
      <span>3. Direction</span>
    </button>
  </div>

  
  <div class="card-grid">
    
    <div class="compare-card flawed-card">
      <div class="card-header">
        <span class="badge flawed-badge" id="flawBadge">⚠️ Vague Outcome</span>
        <span style="font-size: 16px;">❌</span>
      </div>
      <div class="quote-box" id="flawedQuote">"Adding salt improves the reaction."</div>
      <div class="visual-box">
        <div class="visual-icon" id="flawedIcon">🌫️ ❓</div>
        <div class="visual-label" id="flawedLabel">Unmeasurable quality</div>
      </div>
    </div>

    
    <div class="compare-card testable-card">
      <div class="card-header">
        <span class="badge testable-badge" id="fixBadge">✓ Operationalized</span>
        <span style="font-size: 16px;">✅</span>
      </div>
      <div class="quote-box" id="testableQuote">"Adding 5g NaCl reduces reaction half-life by 40%."</div>
      <div class="visual-box">
        <div class="visual-icon" id="testableIcon">⏱️ 📉 -40%</div>
        <div class="visual-label" id="testableLabel">Quantified metric</div>
      </div>
    </div>
  </div>

  
  <div class="takeaway-bar" id="takeawayText">
    <span>💡</span>
    <span>Replace vague terms with measurable variables and target units.</span>
  </div>

  <script>
    const flaws = [
      {
        tabId: 'tab0',
        flawBadge: '⚠️ Vague Outcome',
        flawedQuote: '"Adding salt improves the reaction rate."',
        flawedIcon: '🌫️ ❓',
        flawedLabel: 'Subjective / Unmeasured',
        fixBadge: '✓ Operationalized',
        testableQuote: '"5g NaCl decreases reaction half-life by 40%."',
        testableIcon: '⏱️ 📉 -40%',
        testableLabel: 'Quantified & Falsifiable',
        takeaway: 'Replace vague terms with measurable units and precise quantities.'
      },
      {
        tabId: 'tab1',
        flawBadge: '⚠️ Circular Logic',
        flawedQuote: '"Enzymes speed reactions because they are catalysts."',
        flawedIcon: '🔄 🔁',
        flawedLabel: 'Tautology: A = A',
        fixBadge: '✓ Mechanistic',
        testableQuote: '"Enzymes lower activation energy (Eₐ) by stabilizing transition states."',
        testableIcon: '⚡ 🔻 Eₐ',
        testableLabel: 'Identifies Physical Mechanism',
        takeaway: 'Explain HOW or WHY a factor acts, not just its dictionary definition.'
      },
      {
        tabId: 'tab2',
        flawBadge: '⚠️ Hedged / Neutral',
        flawedQuote: '"Altering temperature may or may not affect cell output."',
        flawedIcon: '🤷 ⚖️ 🤷',
        flawedLabel: 'Cannot Be Disproven',
        fixBadge: '✓ Directional',
        testableQuote: '"Increasing surface temperature by 10°C reduces electrical output by 5%."',
        testableIcon: '📈 🌡️ ➔ 📉 ⚡',
        testableLabel: 'Strict Directional Prediction',
        takeaway: 'Make a committed, directional claim that can clearly fail under testing.'
      }
    ];

    let currentIdx = 0;

    function switchFlaw(idx) {
      currentIdx = idx;
      for (let i = 0; i < flaws.length; i++) {
        const btn = document.getElementById('tab' + i);
        if (i === idx) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      }

      const d = flaws[idx];
      document.getElementById('flawBadge').textContent = d.flawBadge;
      document.getElementById('flawedQuote').innerHTML = d.flawedQuote;
      document.getElementById('flawedIcon').textContent = d.flawedIcon;
      document.getElementById('flawedLabel').textContent = d.flawedLabel;

      document.getElementById('fixBadge').textContent = d.fixBadge;
      document.getElementById('testableQuote').innerHTML = d.testableQuote;
      document.getElementById('testableIcon').textContent = d.testableIcon;
      document.getElementById('testableLabel').textContent = d.testableLabel;

      document.getElementById('takeawayText').innerHTML = '<span>💡</span><span>' + d.takeaway + '</span>';
    }
  </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;
      color: #1e2945;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
    }

    /* Criteria Filter Bar */
    .filter-bar {
      display: flex;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .filter-btn {
      appearance: none;
      border: 1px solid #d1d5db;
      background: #ffffff;
      color: #4b5563;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.25s ease;
    }
    .filter-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.2);
    }

    /* Cards Grid */
    .cards-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      flex: 1;
    }
    @media (max-width: 480px) {
      .cards-grid {
        grid-template-columns: 1fr;
      }
    }

    .q-card {
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e5e7eb;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
    }
    .q-card.empirical {
      border-top: 4px solid #10b981;
    }
    .q-card.non-empirical {
      border-top: 4px solid #f59e0b;
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      padding: 3px 8px;
      border-radius: 6px;
    }
    .badge-empirical {
      background: #ecfdf5;
      color: #059669;
    }
    .badge-non {
      background: #fffbeb;
      color: #d97706;
    }

    .question-box {
      font-size: 13.5px;
      font-weight: 600;
      line-height: 1.35;
      padding: 8px 10px;
      border-radius: 8px;
      min-height: 48px;
      display: flex;
      align-items: center;
    }
    .q-card.empirical .question-box {
      background: #f0fdf4;
      color: #065f46;
      border-left: 3px solid #10b981;
    }
    .q-card.non-empirical .question-box {
      background: #fffbeb;
      color: #92400e;
      border-left: 3px solid #f59e0b;
    }

    /* Criteria Breakdown Rows */
    .criteria-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: auto;
    }
    .criterion-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 10px;
      border-radius: 8px;
      background: #f9fafb;
      font-size: 12px;
      font-weight: 500;
      color: #6b7280;
      border: 1px solid transparent;
      transition: all 0.25s ease;
    }
    .criterion-item.highlight {
      background: #ffffff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }
    .q-card.empirical .criterion-item.highlight {
      border-color: #10b981;
      color: #065f46;
      font-weight: 600;
    }
    .q-card.non-empirical .criterion-item.highlight {
      border-color: #f59e0b;
      color: #92400e;
      font-weight: 600;
    }

    .status-icon {
      font-size: 13px;
      font-weight: bold;
    }
    .icon-pass { color: #10b981; }
    .icon-fail { color: #f59e0b; }
  </style>
</head>
<body>

  
  <div class="filter-bar">
    <button class="filter-btn active" data-criterion="all" onclick="selectFilter('all')">✦ All Criteria</button>
    <button class="filter-btn" data-criterion="vars" onclick="selectFilter('vars')">📏 Measurable</button>
    <button class="filter-btn" data-criterion="mech" onclick="selectFilter('mech')">⚙️ Mechanism</button>
    <button class="filter-btn" data-criterion="fals" onclick="selectFilter('fals')">🧪 Falsifiable</button>
  </div>

  
  <div class="cards-grid">
    
    <div class="q-card empirical">
      <div class="card-header">
        <span class="badge badge-empirical">Scientific</span>
        <span style="font-size:16px;">🌱 💧</span>
      </div>
      <div class="question-box">
        "Does leaf area increase transpiration rate?"
      </div>
      <div class="criteria-list">
        <div class="criterion-item highlight" data-type="vars">
          <span>Variables: Area &amp; H₂O loss</span>
          <span class="status-icon icon-pass">✓</span>
        </div>
        <div class="criterion-item highlight" data-type="mech">
          <span>Mechanism: Stomatal flow</span>
          <span class="status-icon icon-pass">✓</span>
        </div>
        <div class="criterion-item highlight" data-type="fals">
          <span>Falsifiable: Testable data</span>
          <span class="status-icon icon-pass">✓</span>
        </div>
      </div>
    </div>

    
    <div class="q-card non-empirical">
      <div class="card-header">
        <span class="badge badge-non">Value Query</span>
        <span style="font-size:16px;">🌲 🎨</span>
      </div>
      <div class="question-box">
        "Should forests be protected for beauty?"
      </div>
      <div class="criteria-list">
        <div class="criterion-item highlight" data-type="vars">
          <span>Variables: Subjective opinion</span>
          <span class="status-icon icon-fail">✕</span>
        </div>
        <div class="criterion-item highlight" data-type="mech">
          <span>Mechanism: Moral belief</span>
          <span class="status-icon icon-fail">✕</span>
        </div>
        <div class="criterion-item highlight" data-type="fals">
          <span>Falsifiable: Cannot disprove</span>
          <span class="status-icon icon-fail">✕</span>
        </div>
      </div>
    </div>
  </div>

  <script>
    function selectFilter(criterion) {
      // Update buttons
      document.querySelectorAll('.filter-btn').forEach(btn => {
        btn.classList.toggle('active', btn.dataset.criterion === criterion);
      });

      // Update criterion items highlighting
      document.querySelectorAll('.criterion-item').forEach(item => {
        if (criterion === 'all' || item.dataset.type === criterion) {
          item.classList.add('highlight');
          item.style.opacity = '1';
        } else {
          item.classList.remove('highlight');
          item.style.opacity = '0.35';
        }
      });
    }
  </script>
</body>
</html>

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

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

    /* Toggle Selector */
    .toggle-bar {
      display: flex;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 12px;
      gap: 4px;
    }

    .toggle-btn {
      flex: 1;
      border: none;
      background: transparent;
      padding: 8px 12px;
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
      text-align: center;
    }

    .toggle-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    /* Engine Flow */
    .engine-flow {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: space-between;
      gap: 8px;
      position: relative;
    }

    @media (max-width: 520px) {
      .engine-flow {
        flex-direction: column;
        gap: 12px;
      }
    }

    /* Engine Nodes */
    .node {
      flex: 1;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .node-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 6px;
      padding: 2px 6px;
      border-radius: 4px;
    }

    .node-title {
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .node-content {
      font-size: 13px;
      line-height: 1.35;
      font-weight: 500;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: color 0.25s ease;
    }

    /* Node Color Schemes */
    .node-iv { border-color: #93c5fd; }
    .node-iv .node-tag { background: #dbeafe; color: #1d4ed8; }
    .node-iv .node-title { color: #1e40af; }

    .node-mech { border-color: #c4b5fd; }
    .node-mech .node-tag { background: #ede9fe; color: #6d28d9; }
    .node-mech .node-title { color: #5b21b6; }

    .node-dv { border-color: #6ee7b7; }
    .node-dv .node-tag { background: #d1fae5; color: #047857; }
    .node-dv .node-title { color: #065f46; }

    /* Flow Arrows */
    .arrow-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 18px;
      font-weight: bold;
    }

    @media (max-width: 520px) {
      .arrow-divider {
        transform: rotate(90deg);
        height: 12px;
      }
    }

    /* Status Banner */
    .status-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 16px;
      border-left: 5px solid #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      transition: all 0.3s ease;
    }

    .status-card.testable {
      border-left-color: #10b981;
      background: #f0fdf4;
    }

    .status-card.weak {
      border-left-color: #ef4444;
      background: #fef2f2;
    }

    .status-text {
      font-size: 14px;
      font-weight: 600;
    }

    .status-badge {
      font-size: 12px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 6px;
      white-space: nowrap;
    }

    .badge-testable {
      background: #d1fae5;
      color: #065f46;
    }

    .badge-weak {
      background: #fee2e2;
      color: #991b1b;
    }

    .missing {
      color: #dc2626;
      font-style: italic;
      font-weight: 600;
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="toggle-bar">
      <button class="toggle-btn" id="btnWeak" onclick="setState('weak')">Vague Claim</button>
      <button class="toggle-btn active" id="btnTestable" onclick="setState('testable')">Testable Hypothesis</button>
    </div>

    
    <div class="engine-flow">
      
      <div class="node node-iv">
        <span class="node-tag">1. Input</span>
        <div class="node-title">Manipulated (IV)</div>
        <div class="node-content" id="ivText">Photon flux density<br><b>200 → 800 µmol/m²/s</b></div>
      </div>

      <div class="arrow-divider">➔</div>

      
      <div class="node node-mech">
        <span class="node-tag">2. Mechanism</span>
        <div class="node-title">Underlying Cause</div>
        <div class="node-content" id="mechText">Photosystem excitation accelerates Calvin cycle</div>
      </div>

      <div class="arrow-divider">➔</div>

      
      <div class="node node-dv">
        <span class="node-tag">3. Output</span>
        <div class="node-title">Measured (DV)</div>
        <div class="node-content" id="dvText">Net CO₂ uptake rate<br><b>(µmol/m²/s)</b></div>
      </div>
    </div>

    
    <div class="status-card testable" id="statusCard">
      <div class="status-text" id="statusSummary">Hypothesis connects specific cause to measurable effect.</div>
      <div class="status-badge badge-testable" id="statusBadge">✓ Falsifiable</div>
    </div>
  </div>

  <script>
    const data = {
      weak: {
        iv: '“More light”<br><span style="color:#94a3b8;font-size:12px;">(Unquantified)</span>',
        mech: '<span class="missing">❌ None Stated</span><br><span style="color:#94a3b8;font-size:12px;">(Black box)</span>',
        dv: '“Grows better”<br><span style="color:#94a3b8;font-size:12px;">(Subjective)</span>',
        summary: 'Missing mechanism and precise metric; untestable.',
        badgeText: '⚠️ Non-Falsifiable',
        badgeClass: 'badge-weak',
        cardClass: 'weak'
      },
      testable: {
        iv: 'Photon flux density<br><b>200 → 800 µmol/m²/s</b>',
        mech: 'Photosystem excitation accelerates Calvin cycle',
        dv: 'Net CO₂ uptake rate<br><b>(µmol/m²/s)</b>',
        summary: 'Hypothesis connects specific cause to measurable effect.',
        badgeText: '✓ Falsifiable',
        badgeClass: 'badge-testable',
        cardClass: 'testable'
      }
    };

    function setState(type) {
      const isTestable = type === 'testable';
      document.getElementById('btnTestable').classList.toggle('active', isTestable);
      document.getElementById('btnWeak').classList.toggle('active', !isTestable);

      const d = data[type];
      document.getElementById('ivText').innerHTML = d.iv;
      document.getElementById('mechText').innerHTML = d.mech;
      document.getElementById('dvText').innerHTML = d.dv;
      document.getElementById('statusSummary').textContent = d.summary;

      const badge = document.getElementById('statusBadge');
      badge.textContent = d.badgeText;
      badge.className = 'status-badge ' + d.badgeClass;

      const card = document.getElementById('statusCard');
      card.className = 'status-card ' + d.cardClass;
    }
  </script>
</body>
</html>

Electron Energy Levels and Shell Structure

Modeling Protons, Neutrons, and Electrons in Atoms

How Valence Electrons Determine Bonding Behavior

Relating Atomic Structure to Periodic Table Position

Periodic Table Organization: Groups and Periods

Chemical Families from Alkali Metals to Noble Gases

science

Atomic Structure and Periodic Table Foundations

Diferenciación epistemológica entre hipótesis, leyes, teorías y modelos

Formulación de preguntas investigables fundamentadas en teorías

Formulación de hipótesis mecanicistas y modelos predictivos

Identificación y operacionalización de variables dependientes, independientes y controladas

Selección, calibración y límites de precisión de instrumentos

Diseño experimental con grupos de control y aleatorización

Registro fidedigno y trazabilidad de datos en bitácora

Diseño experimental y metodología científica

The International System of Units (SI)

Using Scientific Notation for Large and Small Scales

Precision, Accuracy, and Significant Figures in Physics

Scalars vs Vectors in Physics

Adding Vectors Graphically: Tip-to-Tail Method

Adding Vectors Using Components

Vector Word Problems: Navigation and Displacement

Using Data-Collecting Probes and Sensors

Scientific Measurement and Vectors

Identifying Independent, Dependent, and Controlled Variables

Designing Controlled and Comparative Scientific Investigations

Sampling Strategies, Sample Size, and Experimental Replication

Designing Observational and Field-Based Studies

Scientific Questioning, Hypotheses, and Experimental Design

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

The Multi-Store Model of Memory: Atkinson and Shiffrin

Types of Long-Term Memory: Episodic, Semantic, and Procedural

Case Studies in Brain Research: Learning From Individual Patients

The Working Memory Model: Baddeley and Hitch

Explanations for Forgetting: Proactive and Retroactive Interference

Retrieval Failure Due to Context and State-Dependent Cues

Factors Affecting Eyewitness Testimony: Misleading Information

Factors Affecting Eyewitness Testimony: Anxiety and the Weapon Focus Effect

Improving Eyewitness Recall: The Cognitive Interview Technique

Cognitive Psychology and Memory Structures

Position, Distance, and Displacement in 1D

Speed vs Velocity in One Dimension

Acceleration: Rate of Change of Velocity

Velocity-Time Graphs: Interpreting Slope and Area

Deriving the Equations of Motion from Velocity-Time Graphs

Choosing and Applying Kinematic Equations

Free Fall: Acceleration Due to Gravity

Free Fall Calculations: Objects Thrown Upward

Designing a Kinematics Investigation with Constant Velocity Cars

1D Kinematics Multi-Step Word Problems

Kinematics in One Dimension

Caregiver-Infant Interactions: Reciprocity and Interactional Synchrony

Schaffer and Emerson's Stages of Attachment

Animal Studies of Attachment: Lorenz and Harlow

Explanations of Attachment: Learning Theory Versus Bowlby's Monotropic Theory

Ainsworth's Strange Situation and Types of Attachment

Cultural Variations in Attachment: Van IJzendoorn and Kroonenberg

Bowlby's Theory of Maternal Deprivation and the 44 Juvenile Thieves Study

Effects of Institutionalisation: Romanian Orphan Studies

The Influence of Early Attachment on Childhood and Adult Relationships

Developmental Psychology and Attachment

Position and Displacement in Two Dimensions

Velocity Vectors in Two Dimensions

Projectile Motion: Horizontal Launch

Projectile Motion: Launched at an Angle

Calculating Maximum Height and Range of a Projectile

Relative Motion in One and Two Dimensions

River Current Problems: Crossing a River

Analyzing Projectile Motion Data and Sources of Error

Kinematics in Two Dimensions

Zapis wykładniczy — notacja naukowa liczb w fizyce

Szacowanie rzędu wielkości i zaokrąglanie do najbliższej potęgi dziesięciu

Problemy Fermiego — jak szacować złożone wielkości z prostych założeń

Obliczenia szacunkowe w kinematyce i dynamice — ocena czasu i dystansu

Obliczenia szacunkowe energii i mocy w zjawiskach codziennych

Szacowanie rzędów wielkości i problemy Fermiego w fizyce

Divisions of the Nervous System: CNS, PNS, and Autonomic Branches

The Endocrine System: Glands, Hormones, and the Fight-or-Flight Response

Neuron Structure, Action Potentials, and Synaptic Transmission

Localisation of Function in the Brain and Hemispheric Lateralisation

Split-Brain Research: Sperry's Investigations

Plasticity and Functional Recovery of the Brain After Trauma

Comparing Brain Research Methods: Strengths and Limits

Biological Rhythms: Circadian, Infradian, and Ultradian Cycles

Adoption Studies: Separating Nature From Nurture

Ethical Issues in Genetic Research on Behavior

Biological Psychology and Neurobiology

Types of Forces: Contact and Field Forces

Drawing Free-Body Diagrams

Net Force: Combining Multiple Forces

Distinguishing Hypotheses, Theories, and Laws

Newton's First Law: Inertia and Equilibrium

Newton's Second Law: F = ma

Newton's Third Law: Action-Reaction Pairs

Friction: Static and Kinetic

Inclined Plane Problems: Breaking Forces into Components

Designing a Force Investigation with Dynamics Carts

Forces and Newton's Laws

Modelado cinemático con datos reales y simulaciones

Interpolación, extrapolación y límites de predicción de un modelo

Modelos exponenciales aplicados a cinética química y desintegración

Funciones trigonométricas en la descripción de ondas y oscilaciones

Validación cruzada entre datos experimentales y simulaciones interactivas

Elaboración y sustentación de informes científicos con rigor formal

Modelado matemático de fenómenos físicos, químicos y biológicos

Asking Questions About Atomic Properties and Periodic Trends

Evaluating Model Size, Scale, Properties, and Materials

Hypotheses, Theories, and Laws in Chemistry

Comparing Element Properties Across Periods

Relating Physical and Chemical Properties to Everyday Use

Scientific Practices and Modeling in Chemistry

Ultraestructura celular: compartimentación y sistemas endomembranosos

Modelo de mosaico fluido: fosfolípidos, proteínas y permeabilidad selectiva

Transporte pasivo: difusión simple, canales iónicos, transportadores y ósmosis

Transporte activo primario, secundario, endocitosis y exocitosis

Arquitectura celular y dinámica de membranas

Work: Force Applied Over a Distance

Calculating Work: W = Fd cos θ

Kinetic Energy: Energy of Motion

Work-Energy Theorem: Net Work Equals Change in KE

Gravitational Potential Energy

Energy Conservation in Mechanical Systems

Power: Rate of Doing Work

Energy Conservation Problem Solving: Roller Coasters

Work, Energy, and Power

Układ współrzędnych i rzuty wektora na osie x oraz y

Obliczanie składowych wektora za pomocą funkcji trygonometrycznych

Obliczanie wartości wektora i jego kierunku ze składowych — twierdzenie Pitagorasa

Analityczne dodawanie wektorów przez sumowanie składowych

Rozkład siły na równi pochyłej na składową styczną i normalną

Składanie prędkości w ruchu względnym — pływanie w rzece i lot z wiatrem

Iloczyn skalarny dwóch wektorów i jego zastosowanie w definicji pracy

Warunki równowagi sił dla punktu materialnego — zerowanie się sumy wektorowej

Trening rozwiązywania złożonych problemów wektorowych w mechanice

Analityczne metody wektorowe i ich zastosowanie w mechanice

Enzimas como catalizadores biológicos: energía de activación y cinética

Inhibición enzimática: modelos competitivos, no competitivos y regulación alostérica

Glucólisis y rutas anaeróbicas: fermentación láctica y alcohólica

Ciclo de Krebs y oxidación mitocondrial del piruvato

Cadena respiratoria, gradiente de protones y fosforilación oxidativa

Enzimas y respiración celular

Uniform Circular Motion: Constant Speed, Changing Velocity

Centripetal Acceleration and Force

Calculating Centripetal Force and Acceleration

Vertical Circular Motion: Top and Bottom of Loops

Newton's Law of Universal Gravitation

Gravitational Field Strength

Satellite Motion and Orbital Velocity

Kepler's Laws of Planetary Motion

Investigating Circular Motion in the Lab

Circular Motion and Gravitation

Reacciones luminosas de la fotosíntesis: fotosistemas I y II

Ciclo de Calvin: fijación de CO₂, enzima RuBisCO y síntesis de glucosa

Adaptaciones fotosintéticas en ambientes áridos: plantas C3, C4 y CAM

Eficiencia termodinámica comparada entre respiración y fotosíntesis

Fotosíntesis y balance bioenergético

Using Discharge Tubes to Observe Emission Spectra

Using Handheld Spectroscopes for Spectral Analysis

Modeling Energy Level Transitions with Diagrams

Analyzing Spectral Data for Patterns

Arguing from Evidence for Wave-Particle Duality

Absorption Spectra and Dark Lines

Energy Level Diagrams for Multi-Electron Atoms

Observing and Analyzing Atomic Spectra

Istota pomiaru fizycznego i pojęcie wartości prawdziwej

Błędy systematyczne — źródła, kalibracja i sposoby eliminacji

Błędy przypadkowe — natura fluktuacji i rozkład Gaussa

Średnia arytmetyczna jako najlepsze przybliżenie wyniku pomiaru powtarzanego

Odchylenie standardowe i niepewność typu A dla serii pomiarów

Niepewność typu B i dokładność przyrządu pomiarowego — działka elementarna

OGS.12.SEP.1

Aligned learning resources

Related diagrams