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

    /* Top interactive filter tabs */
    .tab-bar {
      display: flex;
      gap: 6px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .tab-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.2s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }
    .tab-btn:hover {
      background: #f1f5f9;
      color: #1e293b;
    }
    .tab-btn.active-all {
      background: #334155;
      color: #ffffff;
      border-color: #334155;
    }
    .tab-btn.active-claim {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
    .tab-btn.active-evidence {
      background: #16a34a;
      color: #ffffff;
      border-color: #16a34a;
    }
    .tab-btn.active-reasoning {
      background: #ea580c;
      color: #ffffff;
      border-color: #ea580c;
    }

    /* Experiment mini visual banner */
    .experiment-strip {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
    }
    .scale-box {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #f8fafc;
      padding: 4px 8px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
    }
    .scale-readout {
      font-family: ui-monospace, monospace;
      background: #0f172a;
      color: #38bdf8;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    /* Cards container */
    .cards-container {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .cer-card {
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      border-left-width: 5px;
      padding: 10px 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      cursor: pointer;
      transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }
    .cer-card:hover {
      box-shadow: 0 3px 8px rgba(0,0,0,0.06);
    }

    .cer-card.dimmed {
      opacity: 0.35;
      transform: scale(0.985);
    }
    .cer-card.highlighted {
      transform: scale(1.01);
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }

    /* Color coding */
    .card-claim {
      border-left-color: #0284c7;
    }
    .card-evidence {
      border-left-color: #16a34a;
    }
    .card-reasoning {
      border-left-color: #ea580c;
    }

    /* Header */
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .header-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .icon-badge {
      width: 26px;
      height: 26px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }
    .card-claim .icon-badge {
      background: #e0f2fe;
      color: #0284c7;
    }
    .card-evidence .icon-badge {
      background: #dcfce7;
      color: #16a34a;
    }
    .card-reasoning .icon-badge {
      background: #ffedd5;
      color: #ea580c;
    }

    .card-title {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .card-claim .card-title { color: #0284c7; }
    .card-evidence .card-title { color: #16a34a; }
    .card-reasoning .card-title { color: #ea580c; }

    .role-tag {
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      background: #f1f5f9;
      padding: 2px 6px;
      border-radius: 4px;
    }

    /* Content */
    .card-body {
      font-size: 13.5px;
      line-height: 1.45;
      color: #334155;
      padding-left: 34px;
    }

    .keyword {
      font-weight: 700;
    }
    .card-claim .keyword { color: #0369a1; }
    .card-evidence .keyword { color: #15803d; }
    .card-reasoning .keyword { color: #c2410c; }

    /* Key question hint footer */
    .prompt-footer {
      text-align: center;
      font-size: 12px;
      color: #64748b;
      padding-top: 2px;
    }

    @media (max-width: 480px) {
      body { padding: 8px; gap: 8px; }
      .card-body { padding-left: 0; font-size: 13px; }
      .experiment-strip { font-size: 11px; }
      .scale-readout { font-size: 11px; }
    }
  </style>
</head>
<body>

  
  <div class="tab-bar">
    <button class="tab-btn active-all" id="btnAll" onclick="setMode('all')">✦ View All</button>
    <button class="tab-btn" id="btnClaim" onclick="setMode('claim')">🎯 Claim</button>
    <button class="tab-btn" id="btnEvidence" onclick="setMode('evidence')">📊 Evidence</button>
    <button class="tab-btn" id="btnReasoning" onclick="setMode('reasoning')">⚙️ Reasoning</button>
  </div>

  
  <div class="experiment-strip">
    <div class="scale-box">
      <span>🧪 Before Mix:</span>
      <span class="scale-readout">60.0 g</span>
    </div>
    <span style="color:#cbd5e1;font-weight:bold;">➔</span>
    <div class="scale-box">
      <span>🎈 Gas Formed:</span>
      <span class="scale-readout">60.0 g</span>
    </div>
  </div>

  
  <div class="cards-container">
    
    
    <div class="cer-card card-claim" id="cardClaim" onclick="setMode('claim')">
      <div class="card-header">
        <div class="header-left">
          <div class="icon-badge">🎯</div>
          <span class="card-title">Claim</span>
        </div>
        <span class="role-tag">Direct Answer</span>
      </div>
      <div class="card-body">
        <span class="keyword">Mass is conserved</span> during the chemical reaction.
      </div>
    </div>

    
    <div class="cer-card card-evidence" id="cardEvidence" onclick="setMode('evidence')">
      <div class="card-header">
        <div class="header-left">
          <div class="icon-badge">📊</div>
          <span class="card-title">Evidence</span>
        </div>
        <span class="role-tag">Measured Data</span>
      </div>
      <div class="card-body">
        The balance measured <span class="keyword">60.0 g before mixing</span> and <span class="keyword">60.0 g after</span> the gas was produced.
      </div>
    </div>

    
    <div class="cer-card card-reasoning" id="cardReasoning" onclick="setMode('reasoning')">
      <div class="card-header">
        <div class="header-left">
          <div class="icon-badge">⚙️</div>
          <span class="card-title">Reasoning</span>
        </div>
        <span class="role-tag">Scientific Principle</span>
      </div>
      <div class="card-body">
        According to the <span class="keyword">Law of Conservation of Mass</span>, atoms are rearranged rather than created or destroyed, so the total mass inside a closed system cannot change.
      </div>
    </div>

  </div>

  <div class="prompt-footer" id="statusText">
    Tap any card or button to inspect each CER component.
  </div>

  <script>
    const modes = {
      all: {
        text: 'Tap any card or button to inspect each CER component.',
        claim: false,
        evidence: false,
        reasoning: false
      },
      claim: {
        text: '🎯 CLAIM: A testable conclusion that answers the scientific question.',
        activeCard: 'cardClaim',
        activeBtn: 'btnClaim',
        btnClass: 'active-claim'
      },
      evidence: {
        text: '📊 EVIDENCE: Measurable data and direct observations from the experiment.',
        activeCard: 'cardEvidence',
        activeBtn: 'btnEvidence',
        btnClass: 'active-evidence'
      },
      reasoning: {
        text: '⚙️ REASONING: Explains HOW the evidence connects to the claim using scientific laws.',
        activeCard: 'cardReasoning',
        activeBtn: 'btnReasoning',
        btnClass: 'active-reasoning'
      }
    };

    let currentMode = 'all';

    function setMode(mode) {
      if (currentMode === mode && mode !== 'all') {
        mode = 'all';
      }
      currentMode = mode;

      const cards = {
        claim: document.getElementById('cardClaim'),
        evidence: document.getElementById('cardEvidence'),
        reasoning: document.getElementById('cardReasoning')
      };

      const buttons = {
        all: document.getElementById('btnAll'),
        claim: document.getElementById('btnClaim'),
        evidence: document.getElementById('btnEvidence'),
        reasoning: document.getElementById('btnReasoning')
      };

      // Reset all buttons
      Object.keys(buttons).forEach(k => {
        buttons[k].className = 'tab-btn';
      });

      // Reset all cards
      Object.keys(cards).forEach(k => {
        cards[k].classList.remove('dimmed', 'highlighted');
      });

      if (mode === 'all') {
        buttons.all.classList.add('active-all');
        document.getElementById('statusText').textContent = modes.all.text;
      } else {
        const config = modes[mode];
        buttons[mode].classList.add(config.btnClass);
        document.getElementById('statusText').textContent = config.text;

        Object.keys(cards).forEach(k => {
          if (k === mode) {
            cards[k].classList.add('highlighted');
          } else {
            cards[k].classList.add('dimmed');
          }
        });
      }
    }
  </script>
</body>
</html>

Distinguishing Between Claims, Evidence, and Reasoning

<!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: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .header-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 4px;
    }
    .title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.2px;
    }
    .hint {
      font-size: 12px;
      color: #64748b;
    }
    .cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
      width: 100%;
    }
    .reason-card {
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 10px;
      background: #ffffff;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
      user-select: none;
    }
    .weak-card {
      border: 2px solid #ef4444;
      background: #fffafa;
    }
    .weak-card.active, .weak-card:active {
      box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
    }
    .strong-card {
      border: 2px solid #10b981;
      background: #f6fdf9;
    }
    .strong-card.active, .strong-card:active {
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
    }
    .card-top {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 13px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
    }
    .weak-badge {
      background: #fee2e2;
      color: #b91c1c;
    }
    .strong-badge {
      background: #d1fae5;
      color: #047857;
    }
    .statement-text {
      font-size: 14px;
      line-height: 1.45;
      color: #1e2945;
      background: #ffffff;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }
    .weak-text em {
      font-style: normal;
      background: #fee2e2;
      color: #b91c1c;
      padding: 0 3px;
      border-radius: 3px;
      font-weight: 600;
    }
    .strong-text em {
      font-style: normal;
      background: #d1fae5;
      color: #047857;
      padding: 0 3px;
      border-radius: 3px;
      font-weight: 600;
    }
    .analysis-box {
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .weak-analysis {
      background: #fef2f2;
      border: 1px dashed #f87171;
      color: #991b1b;
    }
    .strong-analysis {
      background: #ecfdf5;
      border: 1px dashed #34d399;
      color: #065f46;
    }
    .icon {
      font-size: 15px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .icon-cross {
      background: #ef4444;
      color: #ffffff;
    }
    .icon-check {
      background: #10b981;
      color: #ffffff;
    }
    .breakdown-row {
      display: flex;
      justify-content: space-around;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 4px;
      font-size: 11px;
      font-weight: 600;
      text-align: center;
    }
    .col-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }
    .tag {
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }
  </style>
</head>
<body>

  <div class="header-bar">
    <span class="title">Reasoning Quality</span>
    <span class="hint">Tap a card to inspect</span>
  </div>

  <div class="cards-grid">
    
    <div class="reason-card weak-card" id="cardWeak" onclick="selectCard('weak')">
      <div class="card-top">
        <span class="badge weak-badge">
          <span class="icon icon-cross">✕</span>
          Weak Reasoning
        </span>
      </div>

      <div class="statement-text weak-text">
        "The mass stayed the same because <em>the scale read 60g before and 60g after</em>."
      </div>

      <div class="breakdown-row">
        <div class="col-item">
          <span class="tag">Claim</span>
          <span>Same Mass</span>
        </div>
        <div class="col-item">
          <span class="tag">Because</span>
          <span>🔁 Echo</span>
        </div>
        <div class="col-item">
          <span class="tag">Science Principle</span>
          <span style="color:#ef4444">✕ Missing</span>
        </div>
      </div>

      <div class="analysis-box weak-analysis">
        <span>⚠️ <strong>Echo Trap:</strong> Just restates data! No science concept.</span>
      </div>
    </div>

    
    <div class="reason-card strong-card" id="cardStrong" onclick="selectCard('strong')">
      <div class="card-top">
        <span class="badge strong-badge">
          <span class="icon icon-check">✓</span>
          Strong Reasoning
        </span>
      </div>

      <div class="statement-text strong-text">
        "Because no gas escaped the sealed bag, <em>all reactant atoms remained trapped</em> inside to form products, keeping mass constant."
      </div>

      <div class="breakdown-row">
        <div class="col-item">
          <span class="tag">Claim</span>
          <span>Same Mass</span>
        </div>
        <div class="col-item">
          <span class="tag">Evidence</span>
          <span>Sealed Bag</span>
        </div>
        <div class="col-item">
          <span class="tag">Science Principle</span>
          <span style="color:#10b981">✓ Atom Conservation</span>
        </div>
      </div>

      <div class="analysis-box strong-analysis">
        <span>💡 <strong>Mechanism:</strong> Connects evidence using atomic theory.</span>
      </div>
    </div>
  </div>

  <script>
    function selectCard(type) {
      const cardWeak = document.getElementById('cardWeak');
      const cardStrong = document.getElementById('cardStrong');

      if (type === 'weak') {
        cardWeak.classList.add('active');
        cardStrong.classList.remove('active');
      } else {
        cardStrong.classList.add('active');
        cardWeak.classList.remove('active');
      }
    }
  </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>CER Bridge Framework</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: #ffffff;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .nav-tabs {
      display: flex;
      gap: 6px;
      width: 100%;
      max-width: 480px;
      margin-bottom: 12px;
    }

    .tab-btn {
      flex: 1;
      padding: 6px 4px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #f8fafc;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
    }

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

    .main-stage {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    /* Question Box */
    .question-card {
      width: 100%;
      background: #f8fafc;
      border: 2px solid #cbd5e1;
      border-radius: 12px;
      padding: 10px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: all 0.3s ease;
    }

    .question-card.highlight {
      border-color: #6366f1;
      background: #eef2ff;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    }

    .badge-q {
      background: #6366f1;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }

    .q-text {
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
    }

    /* Bridge Structure */
    .bridge-structure {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    /* Spanning Arch (Reasoning) */
    .arch-container {
      width: 100%;
      background: #fffbeb;
      border: 2px solid #fcd34d;
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      z-index: 2;
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1);
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .arch-container.highlight {
      border-color: #f59e0b;
      box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3), 0 6px 16px rgba(245, 158, 11, 0.15);
      background: #fef3c7;
    }

    .arch-title {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
      color: #b45309;
    }

    .arch-subtitle {
      font-size: 12px;
      font-weight: 500;
      color: #d97706;
      margin-top: 2px;
    }

    /* Connective span beam */
    .bridge-connector {
      width: calc(100% - 60px);
      height: 12px;
      background: repeating-linear-gradient(
        90deg,
        #f59e0b,
        #f59e0b 8px,
        #fbbf24 8px,
        #fbbf24 16px
      );
      margin: -2px 0;
      border-radius: 2px;
      position: relative;
      z-index: 1;
    }

    /* Pillars Row */
    .pillars-row {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }

    /* Pillar Styles */
    .pillar {
      border-radius: 12px;
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      min-height: 140px;
      justify-content: space-between;
      position: relative;
      border: 2px solid transparent;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .pillar-claim {
      background: #eff6ff;
      border-color: #bfdbfe;
    }

    .pillar-claim.highlight {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
      background: #dbeafe;
    }

    .pillar-evidence {
      background: #ecfdf5;
      border-color: #a7f3d0;
    }

    .pillar-evidence.highlight {
      border-color: #10b981;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
      background: #d1fae5;
    }

    .pillar-tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 6px;
    }

    .claim-tag {
      background: #3b82f6;
      color: #ffffff;
    }

    .evidence-tag {
      background: #10b981;
      color: #ffffff;
    }

    .pillar-name {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
      margin: 6px 0 2px;
    }

    .pillar-role {
      font-size: 12px;
      font-weight: 600;
    }

    .claim-role { color: #2563eb; }
    .evidence-role { color: #059669; }

    .pillar-base {
      width: 100%;
      padding: 6px;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 8px;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      margin-top: 6px;
    }

    /* Foundation ground */
    .bridge-ground {
      width: 100%;
      height: 6px;
      background: #cbd5e1;
      border-radius: 4px;
      margin-top: 8px;
    }
  </style>
</head>
<body>

  
  <div class="nav-tabs">
    <button class="tab-btn active" onclick="setMode('all')">All</button>
    <button class="tab-btn" onclick="setMode('claim')">Claim</button>
    <button class="tab-btn" onclick="setMode('evidence')">Evidence</button>
    <button class="tab-btn" onclick="setMode('reasoning')">Reasoning</button>
  </div>

  <div class="main-stage">
    
    <div id="card-q" class="question-card">
      <span class="badge-q">Question</span>
      <span class="q-text">Which block conducts heat faster?</span>
    </div>

    
    <div class="bridge-structure">
      
      <div id="arch-r" class="arch-container" onclick="setMode('reasoning')">
        <div class="arch-title">
          <span>🌉 Reasoning</span>
        </div>
        <div class="arch-subtitle">Scientific Principle connects Evidence to Claim</div>
      </div>

      
      <div class="bridge-connector"></div>

      
      <div class="pillars-row">
        
        <div id="pillar-c" class="pillar pillar-claim" onclick="setMode('claim')">
          <span class="pillar-tag claim-tag">C</span>
          <div>
            <div class="pillar-name">Claim</div>
            <div class="pillar-role claim-role">The Answer</div>
          </div>
          <div class="pillar-base">Direct Conclusion</div>
        </div>

        
        <div id="pillar-e" class="pillar pillar-evidence" onclick="setMode('evidence')">
          <span class="pillar-tag evidence-tag">E</span>
          <div>
            <div class="pillar-name">Evidence</div>
            <div class="pillar-role evidence-role">Data &amp; Facts</div>
          </div>
          <div class="pillar-base">Observations</div>
        </div>
      </div>

      
      <div class="bridge-ground"></div>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const q = document.getElementById('card-q');
      const c = document.getElementById('pillar-c');
      const e = document.getElementById('pillar-e');
      const r = document.getElementById('arch-r');
      const tabs = document.querySelectorAll('.tab-btn');

      tabs.forEach(tab => {
        tab.classList.toggle('active', tab.textContent.toLowerCase() === mode);
      });

      q.classList.toggle('highlight', mode === 'all');
      c.classList.toggle('highlight', mode === 'all' || mode === 'claim');
      e.classList.toggle('highlight', mode === 'all' || mode === 'evidence');
      r.classList.toggle('highlight', mode === 'all' || mode === 'reasoning');
    }
  </script>
</body>
</html>

Diferencia entre opinión, creencia y evidencia científica

Argumentar con evidencias en ciencias

La escucha activa en diálogos y mesas de discusión científica

Comparar hipótesis y posturas frente a un fenómeno

Evaluar la solidez de las fuentes de información

Cambiar de opinión a la luz de nuevas pruebas

science

Fundamentos del pensamiento crítico y argumentación con evidencias

Developing Mechanistic Hypotheses from Scientific Models

Formulating Testable Scientific Questions from Phenomena

Defining Engineering Problems and Design Constraints

Differentiating Hypotheses, Laws, Theories, and Models

Using Books and Digital Sources to Verify Scientific Claims

Scientific Inquiry, Questions, Hypotheses, and Laws

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

El escepticismo científico como herramienta de conocimiento

Recibir preguntas y críticas a los propios proyectos

Formular preguntas críticas respetuosas ante afirmaciones ajenas

Identificar falacias y sesgos en discusiones cotidianas

Preparación documental para un debate escolar

Participación y moderación en debates sobre temas de actualidad

Síntesis y consensos después de una discusión académica

Diálogo crítico, falacias y debate científico

Understanding Scientific Hypotheses, Theories, and Laws

Assessing the Quality of Experimental and Engineering Designs

Building Explanations From Scientific Evidence

Sharing and Defending Scientific Conclusions

Evaluating and Communicating Scientific and Engineering Conclusions

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

La ciencia como empresa colectiva y multidisciplinaria

Roles en el laboratorio escolar: coordinación, registro y materiales

Cumplir mi responsabilidad en el equipo de ciencias

Respetar el ritmo y los aportes de cada integrante

Protocolos de seguridad compartida en el laboratorio

Resolución asertiva de desacuerdos durante la experimentación

Registro colectivo y bitácoras de investigación

Revisión por pares en el aula: coevaluación de informes

Apoyar a un compañero que necesita ayuda en el laboratorio

Celebrar los logros del trabajo en equipo

Ética en la comunicación de resultados y autoría compartida

Trabajo colaborativo y roles en la investigación científica

¿Qué es una controversia sociocientífica?

Debate sobre organismos genéticamente modificados: transgénicos

Energía nuclear, combustibles fósiles y energías renovables

Cambio climático global: causas antrópicas y acuerdos mundiales

Minería, desarrollo económico y protección de cuencas hídricas

Vacunación e inmunización colectiva: salud pública vs. desinformación

Uso de animales en la investigación científica y bioética

Inteligencia artificial y automatización en las ciencias

Análisis de noticias científicas y detección de pseudociencia

Controversias sociocientíficas: análisis crítico de dilemas actuales

Constructing Written Scientific Arguments with Evidence

Citing Scientific Sources and Avoiding Plagiarism

Engaging in Scientific Peer Review and Constructive Critique

Presenting Scientific Findings via Digital and Oral Media

Scientific Argumentation and Communication

Dialogar con la comunidad sobre problemas ambientales

El principio de precaución en políticas ambientales

Participación juvenil en veedurías y proyectos ciudadanos

Redacción de un manifiesto escolar de compromiso científico

Participación ciudadana frente a los desafíos sociocientíficos

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

Proposing Solutions Supported by Data and Models

Using Scientific Principles to Guide Design Requirements

Constructing Evidence-Based Explanations in Science

Summarizing Information From Charts and Graphs

Communicating Science Findings in Multiple Formats

Developing and Communicating Explanations

What Is Scientific Argumentation?

Using Evidence to Support Scientific Claims

Evaluating Counterarguments in Science

Respectful Debate in Scientific Discussions

Separating Correlation From Causation in Data

Scientific Argumentation

Búsqueda y curación de fuentes científicas confiables

Estrategias de búsqueda con palabras clave y operadores básicos

Detección de pseudociencia, mitos y noticias falsas en ciencias

Selección de información pertinente para la pregunta de investigación

Dar el crédito correspondiente a las fuentes y autores

¿Cómo hacer fichas bibliográficas y referencias escolares?

El plagio y la honestidad académica en los informes de ciencias

Búsqueda, evaluación y crédito académico en ciencias

Cruce de información bibliográfica con datos del laboratorio

Contrastación de modelos teóricos con observaciones de campo

Saberes ancestrales, tradicionales y conocimiento científico

Síntesis integrada de antecedentes para un proyecto escolar

Integración y contrastación de fuentes para la indagación científica

Macronutrientes: carbohidratos, proteínas y lípidos en la dieta

Micronutrientes: vitaminas y minerales para el crecimiento

Balance energético: calorías, metabolismo basal y gasto calórico

El plato saludable de la familia colombiana y guías alimentarias

Lectura crítica del etiquetado nutricional y sellos frontales

Impacto de los alimentos ultraprocesados y bebidas azucaradas

Hidratación fisiológica: el agua como regulador vital

Alimentación equilibrada y nutrición humana

Scientific Responses to Contemporary Issues

Ethical Considerations in Science

Environmental and Economic Impacts of Science

Debating Ethical Issues in Science

Science Communication and Public Viewpoints

How Science Informs Policy and Regulation

Assessing Scientific Claims in Media and Online

Science, Ethics, and Society

Fisiología del ejercicio: cardiovascular, fuerza y flexibilidad

Riesgos del sedentarismo y el tiempo excesivo frente a pantallas

Higiene del sueño y descanso en el rendimiento escolar

Prevención de trastornos de la conducta alimentaria (TCA)

Seguridad alimentaria e higiene en la manipulación de comidas

Diseño de un plan personal de actividad física y alimentación

Propuestas para una tienda escolar saludable

Actividad física, hábitos de vida y planificación de la salud

Saco conclusiones de los experimentos que realizo

¿Qué hacer cuando los resultados no coinciden con la hipótesis?

Identificación de errores sistemáticos y errores aleatorios

Repetir una experiencia para comprobar los resultados

Relación entre mis conclusiones y las de otros autores

Redacción de la sección de discusión y conclusiones en un informe

Análisis de datos, errores y redacción de conclusiones

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

Identifying Sources of Error in Investigations

Collecting and Analysing Scientific Data

La persistencia como valor fundamental del trabajo científico

Modificación de procedimientos ante obstáculos experimentales

Cambiar de opinión ante nuevas pruebas

Formulación de nuevas preguntas derivadas de una investigación

Estudio de caso: el descubrimiento de la penicilina y la serendipia

Persistencia, escepticismo y evolución científica

Estructura de un argumento científico: afirmación, evidencia y razonamiento

Análisis de gráficos y tablas para sustentar posturas

Sustentación con diversos tipos de argumentos en ciencias

Comparar mis conclusiones con las de otros grupos

Comparación de respuestas escolares con teorías científicas establecidas

Argumentación y evidencia en ciencias

Evaluating Methods, Conclusions and 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

Wyodrębnianie głównej tezy i pytania badawczego w artykule popularnonaukowym

Fakty doświadczalne a modele teoretyczne i hipotezy robocze w publikacjach

Parafraza i streszczanie skomplikowanych koncepcji fizycznych własnym językiem

Analiza metafor i analogii dydaktycznych w popularyzacji fizyki

Struktura argumentacji naukowej: przesłanki, dowody i konkluzje w tekście

Integracja tekstu ciągłego z infografikami, wykresami i schematami aparatury

Krytyczna weryfikacja nagłówków medialnych typu 'clickbait' w doniesieniach o fizyce

Krytyczna analiza i struktura tekstów popularnonaukowych z fizyki

Cuidado y bienestar de animales domésticos y de compañía

Conservación del suelo: erosión y técnicas de reforestación

Cuidado y mantenimiento del mobiliario y espacios escolares

Huertos escolares y jardines para polinizadores

Ciencia ciudadana: monitoreo de aves y calidad del agua

Diseño de un proyecto escolar de restauración ecológica

Compromiso ético con las generaciones futuras y la Tierra

Cuidado del entorno y participación ciudadana

Fizyka lotu samolotu — siła nośna, profil skrzydła i opory powietrza

Fizyka sportu — biomechanika skoku, biegu i rotacji w pływaniu oraz gimnastyce

Zjawiska termiczne w klimacie — efekt szklarniowy, albedo i pojemność cieplna oceanów

Zjawiska indukcji elektromagnetycznej w transformatorach, silnikach i kuchenkach indukcyjnych

Promieniowanie jonizujące w medycynie — rentgenodiagnostyka, tomografia i radioterapia

Zjawiska w skali astronomicznej — pływy morskie, ciążenie i zjawiska zaćmieniowe

Oddzielanie czynników głównych od fluktuacji w złożonej sytuacji problemowej

Studium przypadku — kompleksowa fizyczna analiza wypadku drogowego lub awarii technicznej

OGS.8.SEP.8

Aligned learning resources

Related diagrams