<!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 Visual</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      color: #1e2945;
      background: #f0f7ff;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      user-select: none;
    }

    .diagram-view {
      position: relative;
      width: 100%;
      max-width: 600px;
      height: 280px;
      background: linear-gradient(180deg, #dbeafe 0%, #eff6ff 60%, #e2e8f0 100%);
      border-radius: 16px;
      overflow: hidden;
    }

    /* Cliffs */
    .cliff {
      position: absolute;
      bottom: 0;
      width: 28%;
      height: 58%;
      background: #8b5a2b;
      border-top: 14px solid #16a34a;
      z-index: 2;
    }
    .cliff-left {
      left: 0;
      border-top-right-radius: 8px;
    }
    .cliff-right {
      right: 0;
      border-top-left-radius: 8px;
    }

    /* Gorge depth */
    .gorge-bg {
      position: absolute;
      bottom: 0;
      left: 28%;
      right: 28%;
      height: 45%;
      background: linear-gradient(180deg, #94a3b8 0%, #475569 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.4);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
    }

    /* Golden Bridge */
    .bridge-wrap {
      position: absolute;
      bottom: 46%;
      left: 25%;
      width: 50%;
      height: 48px;
      z-index: 3;
      cursor: pointer;
      transition: transform 0.2s ease;
    }
    .bridge-span {
      width: 100%;
      height: 14px;
      background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
      border-radius: 7px;
      box-shadow: 0 0 16px rgba(245, 158, 11, 0.7), 0 3px 6px rgba(0,0,0,0.15);
      position: relative;
    }
    .bridge-arch {
      position: absolute;
      top: 10px;
      left: 6%;
      width: 88%;
      height: 28px;
      border: 3px dashed #d97706;
      border-top: none;
      border-radius: 0 0 40px 40px;
    }
    .bridge-card {
      position: absolute;
      top: -54px;
      left: 50%;
      transform: translateX(-50%);
      background: #fffbeb;
      border: 2px solid #f59e0b;
      padding: 4px 8px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 800;
      color: #92400e;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
      text-align: center;
    }

    /* Signposts on cliffs */
    .sign {
      position: absolute;
      top: 18%;
      z-index: 4;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 26%;
      transition: transform 0.2s ease;
    }
    .sign-left { left: 2%; }
    .sign-right { right: 2%; }

    .sign-box {
      width: 100%;
      padding: 8px 6px;
      border-radius: 8px;
      text-align: center;
      box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    }
    .sign-box.claim {
      background: #ecfdf5;
      border: 2px solid #059669;
      color: #065f46;
    }
    .sign-box.evidence {
      background: #eff6ff;
      border: 2px solid #2563eb;
      color: #1e40af;
    }
    .sign-tag {
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: block;
      margin-bottom: 2px;
    }
    .sign-text {
      font-size: 12px;
      font-weight: 700;
      line-height: 1.2;
    }
    .sign-pole {
      width: 6px;
      height: 38px;
      background: #64748b;
      border-radius: 2px;
    }

    /* Animated Toy Car */
    .toy-car {
      position: absolute;
      bottom: 50%;
      left: 10%;
      font-size: 20px;
      z-index: 5;
      transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Active Highlight States */
    .active-claim .sign-left .sign-box { box-shadow: 0 0 0 3px #10b981; }
    .active-evidence .sign-right .sign-box { box-shadow: 0 0 0 3px #3b82f6; }
    .active-reasoning .bridge-span { box-shadow: 0 0 22px #f59e0b, 0 0 0 3px #f59e0b; }

    /* Controls & Explanation Banner */
    .controls {
      width: 100%;
      max-width: 600px;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .btn-group {
      display: flex;
      gap: 6px;
      justify-content: center;
    }
    .nav-btn {
      flex: 1;
      padding: 8px 4px;
      font-size: 12px;
      font-weight: 700;
      border-radius: 8px;
      border: 1px solid #cbd5e1;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: center;
    }
    .nav-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    .info-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 13px;
      line-height: 1.4;
      text-align: center;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: #334155;
    }
  </style>
</head>
<body>

  <div class="diagram-view" id="diagramView">
    
    <div class="sign sign-left" onclick="selectStep(0)">
      <div class="sign-box claim">
        <span class="sign-tag">1. Claim</span>
        <div class="sign-text">Car rolls farther<br>on tile</div>
      </div>
      <div class="sign-pole"></div>
    </div>
    <div class="cliff cliff-left"></div>

    
    <div class="gorge-bg">GORGE</div>
    <div class="bridge-wrap" onclick="selectStep(1)">
      <div class="bridge-card">⚙️ Reasoning: The Bridge</div>
      <div class="bridge-span"></div>
      <div class="bridge-arch"></div>
    </div>

    
    <div class="sign sign-right" onclick="selectStep(2)">
      <div class="sign-box evidence">
        <span class="sign-tag">2. Evidence</span>
        <div class="sign-text">120 cm on tile<br>vs 45 cm on rug</div>
      </div>
      <div class="sign-pole"></div>
    </div>
    <div class="cliff cliff-right"></div>

    
    <div class="toy-car" id="toyCar">🏎️</div>
  </div>

  <div class="controls">
    <div class="btn-group">
      <button class="nav-btn active" id="btn0" onclick="selectStep(0)">1. Claim</button>
      <button class="nav-btn" id="btn1" onclick="selectStep(1)">2. Reasoning (Bridge)</button>
      <button class="nav-btn" id="btn2" onclick="selectStep(2)">3. Evidence</button>
    </div>

    <div class="info-panel" id="infoText">
      <strong>Claim:</strong> Direct answer to the scientific question.
    </div>
  </div>

  <script>
    const steps = [
      {
        cls: 'active-claim',
        carPos: '12%',
        text: '<strong>Claim:</strong> What you think happened (The statement).'
      },
      {
        cls: 'active-reasoning',
        carPos: '48%',
        text: '<strong>Reasoning:</strong> Explains WHY friction & surface texture connect the evidence to the claim.'
      },
      {
        cls: 'active-evidence',
        carPos: '80%',
        text: '<strong>Evidence:</strong> Measurements & data (120 cm vs 45 cm) that test the claim.'
      }
    ];

    let currentStep = 0;
    const view = document.getElementById('diagramView');
    const car = document.getElementById('toyCar');
    const info = document.getElementById('infoText');

    function selectStep(idx) {
      currentStep = idx;
      
      // Update buttons
      for (let i = 0; i < 3; i++) {
        document.getElementById('btn' + i).classList.toggle('active', i === idx);
      }

      // Update view classes
      view.classList.remove('active-claim', 'active-reasoning', 'active-evidence');
      view.classList.add(steps[idx].cls);

      // Move car & text
      car.style.left = steps[idx].carPos;
      info.innerHTML = steps[idx].text;
    }

    // Auto cycle gently if learner doesn't click
    let autoTimer = setInterval(() => {
      selectStep((currentStep + 1) % 3);
    }, 4000);

    // Stop auto on first interaction
    document.body.addEventListener('click', () => {
      clearInterval(autoTimer);
    }, { once: true });
  </script>
</body>
</html>

Building Explanations From Scientific Evidence

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

    /* Top control bar */
    .controls { display: flex; justify-content: space-between; align-items: center; }
    .btn { background: #0284c7; color: #fff; border: none; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 4px; }
    .btn:active { opacity: 0.85; }

    /* Track Area */
    .sim-container { display: flex; flex-direction: column; gap: 6px; background: #fff; padding: 10px; border-radius: 8px; border: 1px solid #e2e8f0; }
    
    .lane-wrap { display: flex; align-items: center; gap: 8px; }
    .lane-label { width: 85px; font-size: 12px; font-weight: 700; flex-shrink: 0; }
    .tile-label { color: #0284c7; }
    .rug-label { color: #ea580c; }

    .track {
      position: relative;
      flex: 1;
      height: 38px;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    
    .track-tile {
      background: linear-gradient(90deg, #e0f2fe 0%, #bae6fd 100%);
      border: 1px solid #93c5fd;
    }
    .track-rug {
      background: repeating-linear-gradient(45deg, #ffedd5, #ffedd5 6px, #fed7aa 6px, #fed7aa 12px);
      border: 1px solid #fdba74;
    }

    .ramp-wedge {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 14%;
      background: #cbd5e1;
      clip-path: polygon(0 0, 100% 100%, 0 100%);
      border-right: 2px solid #94a3b8;
    }

    .car {
      position: absolute;
      left: 2%;
      font-size: 20px;
      line-height: 1;
      transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
      z-index: 2;
      transform: translateX(0);
    }

    .stop-flag {
      position: absolute;
      bottom: 4px;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 4px;
      border-radius: 3px;
      opacity: 0;
      transition: opacity 0.3s ease 1s;
    }
    .flag-tile { left: 85%; background: #0284c7; color: white; }
    .flag-rug { left: 32%; background: #ea580c; color: white; }
    .rolled .stop-flag { opacity: 1; }

    /* Ruler / Measuring tape */
    .ruler-container {
      margin-left: 93px;
      position: relative;
      height: 22px;
      background: #fef08a;
      border: 1px solid #eab308;
      border-radius: 4px;
      display: flex;
    }
    .ruler-mark {
      position: absolute;
      top: 0;
      bottom: 0;
      border-left: 1px solid #a16207;
      font-size: 9px;
      font-weight: 700;
      color: #854d0e;
      padding-left: 2px;
    }

    /* Comparison Cards */
    .cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    
    .data-card {
      padding: 8px 10px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .card-tile { background: #f0f9ff; border: 1px solid #bae6fd; }
    .card-rug { background: #fff7ed; border: 1px solid #fed7aa; }

    .card-head { font-size: 13px; font-weight: 700; }
    .trials { font-size: 11px; color: #64748b; display: flex; justify-content: space-between; }
    .avg-box {
      margin-top: 2px;
      padding: 4px 6px;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      font-weight: 700;
    }
    .avg-tile { background: #0284c7; color: #fff; }
    .avg-rug { background: #ea580c; color: #fff; }
    .avg-num { font-size: 15px; }
  </style>
</head>
<body>

  <div class="controls">
    <span style="font-size: 12px; font-weight: 700; color: #475569;">Surface Friction Test</span>
    <button class="btn" id="rollBtn" onclick="toggleRoll()">▶ Roll Cars</button>
  </div>

  <div class="sim-container" id="simArea">
    
    <div class="lane-wrap">
      <span class="lane-label tile-label">Smooth Tile</span>
      <div class="track track-tile" id="trackTile">
        <div class="ramp-wedge"></div>
        <div class="car" id="carTile">🏎️</div>
        <div class="stop-flag flag-tile">120 cm</div>
      </div>
    </div>

    
    <div class="lane-wrap">
      <span class="lane-label rug-label">Thick Rug</span>
      <div class="track track-rug" id="trackRug">
        <div class="ramp-wedge"></div>
        <div class="car" id="carRug">🚗</div>
        <div class="stop-flag flag-rug">45 cm</div>
      </div>
    </div>

    
    <div class="ruler-container">
      <div class="ruler-mark" style="left: 0%;">0</div>
      <div class="ruler-mark" style="left: 21.4%;">30 cm</div>
      <div class="ruler-mark" style="left: 32.1%; border-left: 2px solid #ea580c; color: #ea580c;">45 cm</div>
      <div class="ruler-mark" style="left: 42.8%;">60 cm</div>
      <div class="ruler-mark" style="left: 64.2%;">90 cm</div>
      <div class="ruler-mark" style="left: 85.7%; border-left: 2px solid #0284c7; color: #0284c7;">120 cm</div>
    </div>
  </div>

  
  <div class="cards-row">
    
    <div class="data-card card-tile">
      <div class="card-head tile-label">Smooth Tile Data</div>
      <div class="trials">
        <span>T1: 120</span>
        <span>T2: 122</span>
        <span>T3: 118</span>
      </div>
      <div class="avg-box avg-tile">
        <span>Average</span>
        <span class="avg-num">120 cm</span>
      </div>
    </div>

    
    <div class="data-card card-rug">
      <div class="card-head rug-label">Thick Rug Data</div>
      <div class="trials">
        <span>T1: 45</span>
        <span>T2: 42</span>
        <span>T3: 48</span>
      </div>
      <div class="avg-box avg-rug">
        <span>Average</span>
        <span class="avg-num">45 cm</span>
      </div>
    </div>
  </div>

  <script>
    let isRolled = false;
    const simArea = document.getElementById('simArea');
    const rollBtn = document.getElementById('rollBtn');
    const carTile = document.getElementById('carTile');
    const carRug = document.getElementById('carRug');
    const trackTile = document.getElementById('trackTile');

    function toggleRoll() {
      isRolled = !isRolled;
      const trackWidth = trackTile.clientWidth;
      
      if (isRolled) {
        // Calculate stop positions based on 0-140cm scale
        // Rug: 45/140 = ~32.1%, Tile: 120/140 = ~85.7%
        const rugDist = (trackWidth * 0.321) - 10;
        const tileDist = (trackWidth * 0.857) - 10;

        carRug.style.transform = `translateX(${rugDist}px)`;
        carTile.style.transform = `translateX(${tileDist}px)`;
        simArea.classList.add('rolled');
        rollBtn.textContent = '↺ Reset';
      } else {
        carRug.style.transform = 'translateX(0)';
        carTile.style.transform = 'translateX(0)';
        simArea.classList.remove('rolled');
        rollBtn.textContent = '▶ Roll Cars';
      }
    }

    // Auto-roll on first load
    setTimeout(toggleRoll, 600);
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e293b;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .builder {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .box {
      width: 100%;
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 14px;
      line-height: 1.4;
      display: flex;
      flex-direction: column;
      gap: 4px;
      transition: box-shadow 0.2s ease, opacity 0.2s ease;
    }
    .claim-box {
      background: #ecfdf5;
      border: 2px solid #10b981;
      color: #064e3b;
    }
    .data-box {
      background: #eff6ff;
      border: 2px solid #3b82f6;
      color: #1e3a8a;
    }
    .result-box {
      background: #0f172a;
      border: 2px solid #1e293b;
      color: #f8fafc;
    }
    .box-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .claim-header { color: #059669; }
    .data-header { color: #2563eb; }
    .result-header { color: #38bdf8; }
    
    .box-content {
      font-size: 14px;
      font-weight: 500;
    }
    .connector {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #64748b;
      font-size: 16px;
      font-weight: 700;
      user-select: none;
    }
    .arrow-icon {
      font-size: 18px;
      line-height: 1;
      color: #64748b;
    }
    .num-badge {
      background: #fef08a;
      color: #854d0e;
      padding: 1px 6px;
      border-radius: 4px;
      font-weight: 700;
      white-space: nowrap;
      display: inline-block;
    }
    .highlight-claim {
      color: #34d399;
      font-weight: 600;
    }
    .highlight-connector {
      color: #fbbf24;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .highlight-data {
      color: #93c5fd;
      font-weight: 600;
    }
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 4px;
    }
    .btn {
      background: #f8fafc;
      border: 1px solid #cbd5e1;
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      user-select: none;
    }
    .btn:hover {
      background: #f1f5f9;
      color: #1e293b;
    }
    .btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
  </style>
</head>
<body>
  <div class="builder">
    
    <div id="claimEl" class="box claim-box">
      <div class="box-header claim-header">
        <span>●</span> Claim
      </div>
      <div class="box-content">
        The toy car rolls farther on smooth tile than on a thick rug.
      </div>
    </div>

    
    <div class="connector">+</div>

    
    <div id="dataEl" class="box data-box">
      <div class="box-header data-header">
        <span>●</span> Empirical Data
      </div>
      <div class="box-content">
        On tile, the car averaged <span class="num-badge">120 cm</span>, compared to only <span class="num-badge">45 cm</span> on the rug.
      </div>
    </div>

    
    <div class="arrow-icon">↓</div>

    
    <div id="resultEl" class="box result-box">
      <div class="box-header result-header">
        <span>✦</span> Complete Scientific Explanation
      </div>
      <div class="box-content">
        <span class="highlight-claim">The toy car rolls farther on smooth tile than on a thick rug</span>
        <span class="highlight-connector">because</span>
        <span class="highlight-data">it rolled an average of <span class="num-badge">120 cm</span> on tile compared to only <span class="num-badge">45 cm</span> on the rug.</span>
      </div>
    </div>

    
    <div class="controls">
      <button id="btnAll" class="btn active" onclick="setMode('all')">Show Assembly</button>
      <button id="btnClaim" class="btn" onclick="setMode('claim')">Highlight Claim</button>
      <button id="btnData" class="btn" onclick="setMode('data')">Highlight Data</button>
    </div>
  </div>

  <script>
    function setMode(mode) {
      const claim = document.getElementById('claimEl');
      const data = document.getElementById('dataEl');
      const result = document.getElementById('resultEl');
      const btnAll = document.getElementById('btnAll');
      const btnClaim = document.getElementById('btnClaim');
      const btnData = document.getElementById('btnData');

      [btnAll, btnClaim, btnData].forEach(b => b.classList.remove('active'));

      if (mode === 'claim') {
        btnClaim.classList.add('active');
        claim.style.opacity = '1';
        claim.style.boxShadow = '0 0 0 2px #10b981';
        data.style.opacity = '0.35';
        data.style.boxShadow = 'none';
        result.style.opacity = '1';
      } else if (mode === 'data') {
        btnData.classList.add('active');
        claim.style.opacity = '0.35';
        claim.style.boxShadow = 'none';
        data.style.opacity = '1';
        data.style.boxShadow = '0 0 0 2px #3b82f6';
        result.style.opacity = '1';
      } else {
        btnAll.classList.add('active');
        claim.style.opacity = '1';
        claim.style.boxShadow = 'none';
        data.style.opacity = '1';
        data.style.boxShadow = 'none';
        result.style.opacity = '1';
      }
    }
  </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>Scientific Explanation Puzzle</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

    /* Header Trophy Banner */
    .trophy-banner {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #fef3c7;
      border: 2px solid #f59e0b;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 15px;
      font-weight: 700;
      color: #92400e;
      transition: all 0.3s ease;
      box-shadow: 0 2px 6px rgba(245, 158, 11, 0.2);
    }
    .trophy-icon {
      font-size: 20px;
      transition: transform 0.3s ease;
    }

    /* Puzzle Display Area */
    .puzzle-stage {
      position: relative;
      width: 100%;
      max-width: 380px;
      height: 170px;
      margin: 8px 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

    .piece {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
      cursor: pointer;
    }

    /* Strong vs Weak States */
    .state-weak #pieceData {
      transform: translate(60px, 15px) rotate(8deg);
      opacity: 0.25;
    }
    .state-weak #pieceClaim {
      transform: translate(-10px, 0);
    }
    .state-weak .trophy-banner {
      opacity: 0.45;
      border-color: #cbd5e1;
      background: #f1f5f9;
      color: #64748b;
      box-shadow: none;
    }

    /* Piece Text Styling */
    .piece-title {
      font-size: 13px;
      font-weight: 800;
      fill: #ffffff;
    }
    .piece-sub {
      font-size: 10.5px;
      font-weight: 600;
      fill: rgba(255, 255, 255, 0.92);
    }

    /* Interactive Buttons / Badges */
    .badge-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: 100%;
      max-width: 380px;
    }

    .badge-btn {
      appearance: none;
      border: 2px solid transparent;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      cursor: pointer;
      font-family: inherit;
      background: #f8fafc;
      transition: all 0.25s ease;
    }

    .badge-btn:focus-visible {
      outline: 2px solid #22b7ff;
    }

    .badge-btn .badge-header {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 13px;
      font-weight: 700;
    }

    .badge-btn .badge-sub {
      font-size: 11px;
      color: #64748b;
      font-weight: 500;
    }

    /* Strong Badge Active */
    .badge-strong {
      color: #166534;
      border-color: #bbf7d0;
    }
    .badge-strong.active {
      background: #f0fdf4;
      border-color: #22c55e;
      box-shadow: 0 3px 10px rgba(34, 197, 94, 0.18);
    }

    /* Weak Badge Active */
    .badge-weak {
      color: #991b1b;
      border-color: #fecaca;
    }
    .badge-weak.active {
      background: #fef2f2;
      border-color: #ef4444;
      box-shadow: 0 3px 10px rgba(239, 68, 68, 0.18);
    }

    .icon-mark {
      font-size: 14px;
      font-weight: 900;
    }
  </style>
</head>
<body>

  
  <div class="trophy-banner" id="trophyBanner">
    <span class="trophy-icon">🏆</span>
    <span>Scientific Explanation</span>
  </div>

  
  <div class="puzzle-stage">
    <svg class="puzzle-svg" viewBox="0 0 360 140">
      <defs>
        
        <filter id="pieceShadow" x="-10%" y="-10%" width="125%" height="130%">
          <feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#000" flood-opacity="0.12"/>
        </filter>
      </defs>

      
      
      <g id="pieceClaim" class="piece" filter="url(#pieceShadow)" onclick="setMode('strong')">
        <path d="
          M 12 12
          H 175
          C 175 42, 198 42, 198 70
          C 198 98, 175 98, 175 128
          H 12
          A 10 10 0 0 1 2 118
          V 22
          A 10 10 0 0 1 12 12
          Z"
          fill="#16a34a" />
        <text x="88" y="58" text-anchor="middle" class="piece-title">1. Claim</text>
        <text x="88" y="78" text-anchor="middle" class="piece-sub">Answer to Question</text>
      </g>

      
      
      <g id="pieceData" class="piece" filter="url(#pieceShadow)" onclick="setMode('strong')">
        <path d="
          M 175 12
          H 348
          A 10 10 0 0 1 358 22
          V 118
          A 10 10 0 0 1 348 128
          H 175
          C 175 98, 198 98, 198 70
          C 198 42, 175 42, 175 12
          Z"
          fill="#0284c7" />
        <text x="272" y="58" text-anchor="middle" class="piece-title">2. Data</text>
        <text x="272" y="78" text-anchor="middle" class="piece-sub">Clues &amp; Measurements</text>
      </g>
    </svg>
  </div>

  
  <div class="badge-grid">
    <button type="button" id="btnStrong" class="badge-btn badge-strong active" onclick="setMode('strong')">
      <div class="badge-header">
        <span class="icon-mark">✓</span>
        <span>Strong</span>
      </div>
      <div class="badge-sub">Claim + Exact Numbers</div>
    </button>

    <button type="button" id="btnWeak" class="badge-btn badge-weak" onclick="setMode('weak')">
      <div class="badge-header">
        <span class="icon-mark">✗</span>
        <span>Weak</span>
      </div>
      <div class="badge-sub">Just a Guess (No Data)</div>
    </button>
  </div>

  <script>
    function setMode(mode) {
      const isStrong = mode === 'strong';
      document.body.classList.toggle('state-weak', !isStrong);
      document.getElementById('btnStrong').classList.toggle('active', isStrong);
      document.getElementById('btnWeak').classList.toggle('active', !isStrong);
    }
  </script>
</body>
</html>

Escuchar con atención las ideas de mis compañeros

Reconocer que podemos pensar de forma diferente

Comparar mis ideas con las de otros

Argumentar con evidencias en ciencias

Hacer preguntas respetuosas ante una afirmación

¿Qué es la duda científica?

Responder con calma cuando cuestionan mis resultados

Revisar experimentos cuando surgen dudas

Cambiar de opinión ante nuevas pruebas

Construir conclusiones colectivas en el aula

Presentar descubrimientos claros y honestos

science

Diálogo científico, argumentación y escucha activa

Czym jest światło monochromatyczne — pojęcie jednobarwności

Źródła światła białego a źródła laserowe — porównanie

Doświadczenie: przejście wiązki lasera przez pryzmat

Dlaczego światło lasera nie ulega rozszczepieniu?

Spójność i równoległość wiązki laserowej

Gęstość energii i moc wiązki laserowej

Fizyczne właściwości światła laserowego i monochromatycznego

Identifying Common Trees and Wildflowers

Spotting Common Wild Plants: Dandelions, Daisies, and Buttercups

Identifying Wild Plants: Stinging Nettles, Clover, and Brambles

Recognising Spring Wildflowers: Bluebells and Primroses

Identifying Common Garden Flowers: Daffodils, Tulips, and Sunflowers

Garden Favourites: Roses, Marigolds, and Sweet Peas

Identifying Common Wild and Garden Flowers

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

Observación cualitativa y observación cuantitativa

Diferenciar observaciones directas de inferencias

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

¿Cómo nacen las preguntas científicas?

Preguntas investigables versus preguntas no investigables

Transformar preguntas generales en preguntas de prueba

Selección y priorización de preguntas de investigación

El diario de campo del pequeño naturalista

Compartir mis preguntas y escuchar las de mis compañeros

Evaluar si tenemos suficientes observaciones iniciales

Observación científica y formulación de preguntas

Forming Science Questions from What We Observe

Finding Problems in Science Books and Articles

Deciding What to Test in a Science Investigation

Designing Your Own State Change Investigation

Using Safety Equipment During Investigations

Using Evidence to Explain Matter Changes

Sharing Your Science Results with Others

Being a Good Listener in Science Talks

Science Questions and Safe Investigations

Naturalne i sztuczne źródła światła

Źródła światła a ciała oświetlone

Pojęcie promienia świetlnego i wiązki światła

Prostoliniowe rozchodzenie się światła w ośrodku jednorodnym

Doświadczenie: Badanie prostoliniowości światła za pomocą przesłon z otworkami

Ośrodki przezroczyste, półprzezroczyste i nieprzezroczyste

Prędkość światła w próżni i innych ośrodkach

Porównanie prędkości światła i prędkości dźwięku w zjawiskach przyrodniczych

Rok świetlny jako jednostka odległości w kosmosie

Źródła światła i prędkość jego rozchodzenia się

¿Qué es una explicación provisional o hipótesis?

Cómo redactar una hipótesis con "si... entonces... porque..."

Identificar condiciones que afectan un experimento

La variable independiente: lo que el científico cambia

La variable dependiente: lo que medimos y observamos

Las variables controladas: lo que mantenemos constante

Diseño experimental: Variables y pruebas controladas

El grupo control y el grupo experimental

La importancia de repetir ensayos en un experimento

Detectar errores comunes en el diseño de experimentos

Comparar hipótesis y diseños con otros investigadores

Hipótesis, variables y experimentos controlados

Comparing Deciduous and Evergreen Trees

Identifying Common British Deciduous Trees: Oak, Birch, and Horse Chestnut

Identifying Common British Evergreen Trees: Holly, Yew, and Scots Pine

Sorting Leaves by Shape, Edge, and Colour

Using a Simple Visual Key to Identify Garden and Wild Plants

Seasonal Changes in Deciduous and Evergreen Trees

Identifying British Trees and Classifying Plants

Kamera otworkowa (camera obscura) — zasada działania

Konstrukcja obrazu w kamerze otworkowej

Wpływ wielkości otworka na ostrość i jasność obrazu

Punktowe i rozciągłe źródła światła

Warunki dostrzegania przedmiotów przez oko ludzkie

Podsumowanie i zadania: Prostoliniowe rozchodzenie się światła

Kamera otworkowa i prostoliniowy bieg promieni

Aprender del trabajo de los agricultores y jardineros

El saber de los abuelos sobre el clima y las plantas

Entrevistar a personas del barrio sobre la naturaleza

Oficios de mi comunidad que cuidan el entorno

Unir el conocimiento científico con el saber popular

Respetar el trabajo y los turnos de los demás

Repartir responsabilidades en un experimento

Cumplir mi tarea para que el equipo tenga éxito

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

Evaluar juntos el resultado de nuestro proyecto

Celebrar los logros del trabajo en equipo

Saberes comunitarios y colaboración en la ciencia

Zastosowania laserów w medycynie i chirurgii

Lasery w przemyśle i telekomunikacji — cięcie oraz światłowody

Czytniki kodów, skanery i dalmierze laserowe

Zasady bezpieczeństwa podczas pracy ze źródłami lasera

Analiza doświadczenia: porównanie pryzmatu ze światłem żarówki i lasera

Podsumowanie właściwości i zastosowań światła laserowego

Zastosowania laserów, bezpieczeństwo i analiza zjawisk optycznych

Powstawanie cienia dla punktowego źródła światła

Konstrukcja geometryczna obszaru cienia dla źródła punktowego

Powstawanie cienia i półcienia dla rozciągłego źródła światła

Konstrukcja promieni wyznaczających cień i półcień

Doświadczenie: Obserwacja powstawania cienia i półcienia na ekranie

Wpływ wzajemnego położenia źródła, przeszkody i ekranu na rozmiar cienia

Zegar słoneczny jako praktyczne wykorzystanie cienia

Cień i półcień w optyce geometrycznej

Natura fali elektromagnetycznej — pole elektryczne i magnetyczne

Prędkość światła w próżni — uniwersalna stała fizyczna

Zależność między prędkością, długością i częstotliwością fali elektromagnetycznej

Uporządkowanie widma elektromagnetycznego według częstotliwości i długości

Energia fali elektromagnetycznej a jej częstotliwość

Promieniowanie jonizujące a niejonizujące — granica bezpieczeństwa

Natura i podział fal elektromagnetycznych

Honestidad científica: registrar datos sin alteraciones

Registro y análisis de datos en tablas y gráficas

Creación de gráficos de barras para comparar categorías

Gráficos de líneas para mostrar cambios en el tiempo

Esquemas y diagramas científicos rotulados

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

Evaluar la solidez de las fuentes de información

Dar el crédito correspondiente a las fuentes y autores

Determinar si la información reunida es suficiente

Identificar datos faltantes y planear búsquedas adicionales

Comunicación escrita de fichas y resúmenes de datos

Registro riguroso, tablas, gráficos y fuentes de información

Odczyt i interpretacja diagramów widma fal elektromagnetycznych

Obliczenia długości fali dla stacji radiowych i sieci komórkowych

Przenikanie fal elektromagnetycznych przez różne materiały

Okna przezroczystości atmosfery dla fal elektromagnetycznych

Analiza złożonych tabel parametrów fal elektromagnetycznych

Zagadnienia rachunkowe ze skali częstotliwości i jednostek prefiksowych (kHz, MHz, GHz, THz)

Podsumowanie struktury i właściwości widma elektromagnetycznego

Właściwości, przenikanie i analiza widma elektromagnetycznego

Geometria cienia Ziemi i Księżyca w przestrzeni kosmicznej

Całkowite i częściowe zaćmienie Słońca

Konstrukcja geometryczna zaćmienia Słońca

Całkowite i półcieniowe zaćmienie Księżyca

Konstrukcja geometryczna zaćmienia Księżyca

Dlaczego zaćmienia nie występują podczas każdego nowiu i pełni?

Bezpieczna obserwacja zaćmienia Słońca

Podsumowanie i analiza zjawisk: Cień, półcień i zaćmienia

Zaćmienia Słońca i Księżyca jako zjawiska cieniowe

Fale radiowe — wytwarzanie oraz transmisja radiowa i telewizyjna

Fale długie, średnie i krótkie oraz rola jonosfery

Mikrofale w łączności bezprzewodowej — Wi-Fi, Bluetooth i telefonia komórkowa

Zasada działania kuchenki mikrofalowej — rezonans cząsteczek wody

Radary i nawigacja satelitarna GPS — wykorzystanie mikrofal

Fale radiowe i mikrofale w technologii i łączności

Zjawisko odbicia światła na granicy ośrodków

Pojęcia promienia padającego, odbitego i normalnej powierzchni

Kąt padania i kąt odbicia — definicje i pomiar

Sformułowanie prawa odbicia światła

Doświadczenie: Weryfikacja prawa odbicia za pomocą tarczy optycznej

Odbicie zwierciadlane (kierunkowe) od powierzchni gładkich

Odbicie rozproszone (dyfuzyjne) od powierzchni chropowatych

Obowiązywanie prawa odbicia w mikrostrukturze powierzchni chropowatej

Znaczenie rozproszenia światła dla widzenia przedmiotów nieświecących

Porównanie odbicia zwierciadlanego i rozproszonego — przykłady z życia

Prawo odbicia światła: odbicie zwierciadlane i rozproszone

Drawing Evidence-Based Conclusions from Data

Analyzing Unexpected Results and Scientific Surprises

Communicating Findings Through Multi-Modal Presentations

Engaging in Respectful Scientific Argumentation and Critique

Evidence-Based Explanations, Conclusions, and Discourse

Prezentacja wyników obserwacji przed grupą

Prezentacja wyników doświadczeń — przygotowanie

Porównywanie wyników własnych z wynikami innych

Uśrednianie i wnioski — opracowywanie wyników

Tworzenie posteru badawczego

Prezentacja multimedialna wyników badań

Dyskusja nad wynikami — formułowanie pytań

Prezentacja i opracowywanie wyników badań

Promieniowanie podczerwone jako promieniowanie cieplne

Termowizja i kamery IR w budownictwie oraz medycynie

Piloty zdalnego sterowania i czujniki ruchu na podczerwień

Doświadczenie: wykrywanie podczerwieni za pomocą aparatu smartfona

Astronomia w podczerwieni — obserwacje kosmosu przez pył międzygwiezdny

Obliczenia czasu dotarcia sygnału radiowego od satelity do Ziemi

Porównanie właściwości fal radiowych, mikrofal i podczerwieni — tabela syntetyczna

OGS.4.SEP.6

Aligned learning resources

Related diagrams