<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="1:1">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    body {
      background-color: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 100%;
      user-select: none;
    }

    /* Warning Banner */
    .banner {
      background: #fef2f2;
      border: 1px solid #fecaca;
      color: #991b1b;
      padding: 8px 12px;
      border-radius: 10px;
      text-align: center;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }

    /* Comparison Grid */
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .pot-card {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 12px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .pot-title {
      font-size: 15px;
      font-weight: 800;
      text-align: center;
      padding-bottom: 4px;
      border-bottom: 1px solid #f0f0f0;
      color: #1e2945;
    }

    .var-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .var-row {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 8px;
      border-radius: 8px;
      background: #f8fafc;
      border: 1px solid transparent;
      transition: all 0.25s ease;
    }

    .var-row.highlight {
      background: #fff7ed;
      border-color: #fdba74;
      box-shadow: 0 0 0 1px #fdba74;
    }

    .var-icon {
      font-size: 16px;
      width: 20px;
      text-align: center;
    }

    .var-text {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Result Stage */
    .result-box {
      margin-top: 2px;
      padding: 8px;
      border-radius: 8px;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .result-a {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      color: #166534;
    }

    .result-b {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      color: #475569;
    }

    .result-icon {
      font-size: 26px;
      line-height: 1.1;
    }

    /* Interactive Filter Bar */
    .controls {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      margin-top: 2px;
    }

    .prompt {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      text-align: center;
    }

    .btn-group {
      display: flex;
      gap: 6px;
      width: 100%;
    }

    .filter-btn {
      flex: 1;
      padding: 7px 4px;
      font-size: 12px;
      font-weight: 700;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #334155;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }

    .filter-btn:active {
      transform: translateY(1px);
    }

    .filter-btn.active {
      background: #ea580c;
      border-color: #ea580c;
      color: #ffffff;
    }
  </style>
</head>
<body>

  
  <div class="banner">
    <span>⚠️</span>
    <span>Unfair Test: 3 Differences!</span>
  </div>

  
  <div class="grid">
    
    <div class="pot-card">
      <div class="pot-title">Pot A</div>
      <div class="var-list">
        <div class="var-row" data-type="sun">
          <span class="var-icon">☀️</span>
          <span class="var-text">Sunlight</span>
        </div>
        <div class="var-row" data-type="water">
          <span class="var-icon">💧</span>
          <span class="var-text">Water</span>
        </div>
        <div class="var-row" data-type="soil">
          <span class="var-icon">🏖️</span>
          <span class="var-text">Sand Soil</span>
        </div>
      </div>
      <div class="result-box result-a">
        <span class="result-icon">🌱</span>
        <span>Sprouted</span>
      </div>
    </div>

    
    <div class="pot-card">
      <div class="pot-title">Pot B</div>
      <div class="var-list">
        <div class="var-row" data-type="sun">
          <span class="var-icon">☁️</span>
          <span class="var-text">No Sun</span>
        </div>
        <div class="var-row" data-type="water">
          <span class="var-icon">🚫</span>
          <span class="var-text">No Water</span>
        </div>
        <div class="var-row" data-type="soil">
          <span class="var-icon">🪨</span>
          <span class="var-text">Rich Soil</span>
        </div>
      </div>
      <div class="result-box result-b">
        <span class="result-icon">❌</span>
        <span>No Sprout</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <div class="prompt" id="promptText">Tap a difference to compare:</div>
    <div class="btn-group">
      <button class="filter-btn" data-target="sun">☀️ Sun?</button>
      <button class="filter-btn" data-target="water">💧 Water?</button>
      <button class="filter-btn" data-target="soil">🪴 Soil?</button>
    </div>
  </div>

  <script>
    const buttons = document.querySelectorAll('.filter-btn');
    const rows = document.querySelectorAll('.var-row');
    const promptText = document.getElementById('promptText');

    let current = null;

    buttons.forEach(btn => {
      btn.addEventListener('click', () => {
        const type = btn.getAttribute('data-target');

        if (current === type) {
          // Toggle off
          current = null;
          buttons.forEach(b => b.classList.remove('active'));
          rows.forEach(r => r.classList.remove('highlight'));
          promptText.textContent = 'Too many changes to know why!';
        } else {
          // Toggle on
          current = type;
          buttons.forEach(b => b.classList.toggle('active', b === btn));
          rows.forEach(r => {
            r.classList.toggle('highlight', r.getAttribute('data-type') === type);
          });

          if (type === 'sun') {
            promptText.textContent = 'Was it sun? We cannot be sure!';
          } else if (type === 'water') {
            promptText.textContent = 'Was it water? We cannot be sure!';
          } else if (type === 'soil') {
            promptText.textContent = 'Was it soil? We cannot be sure!';
          }
        }
      });
    });
  </script>
</body>
</html>

What Makes a Science Test Fair?

Asking Science Questions From What We See

Designing Investigations to Answer Scientific Questions

Safety First: Rules for Science Time

Science Tools: Hand Lenses, Thermometers, and More

Collecting What We Observe as Evidence

Recording Data with Pictures, Numbers, and Graphs

Building Models to Show How Things Work

science

Being a Young Scientist

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

Regulamin i ogólne zasady bezpieczeństwa w szkolnej pracowni fizycznej

Zasady bezpieczeństwa podczas doświadczeń w klasie

Zasady bezpieczeństwa podczas obserwacji w terenie

Rozróżnianie pojęć: obserwacja, pomiar i doświadczenie

Stawianie pytań badawczych i hipotez w fizyce

Planowanie doświadczenia fizycznego krok po kroku

Opis pokazu fizycznego — kroki postępowania i rola zjawisk towarzyszących

Rola przyrządów i pomocy dydaktycznych w eksperymencie

Wyodrębnianie zjawiska fizycznego z otoczenia

Czynniki istotne a nieistotne w ruchach pojazdów — tarcie, opory aerodynamiczne i masa

Planowanie liczby pomiarów i kroku zmiany parametru w serii pomiarowej

Modyfikacja przebiegu doświadczenia w przypadku nieoczekiwanych wyników

Metodyka badań fizycznych i zasady bezpieczeństwa

Co to jest obserwacja przyrodnicza — zmysły a badanie

Narzędzia obserwacji — lupa, lornetka i mikroskop

Pomiar długości — linijka i miarka

Pomiar masy — waga i jednostki masy

Pomiar temperatury — termometr

Pomiar czasu — stoper i zegar

Notowanie wyników — tabele i wykresy

Hipotezy i przewidywania w prostych doświadczeniach

Obserwacja i badanie przyrody

Czym jest obserwacja przyrodnicza — definicja i cele

Obserwacja a eksperyment — czym się różnią

Doświadczenie i eksperyment — podobieństwa i różnice

Rodzaje obserwacji — krótkotrwałe i długotrwałe

Obserwacje w terenie vs obserwacje w klasie

Wykorzystanie zmysłu wzroku w obserwacjach

Wykorzystanie zmysłu słuchu w obserwacjach przyrodniczych

Wykorzystanie zmysłu węchu i smaku w obserwacjach

Wykorzystanie zmysłu dotyku w obserwacjach

Ograniczenia ludzkich zmysłów w obserwacjach

Obserwacja i eksperyment — podstawy poznawania przyrody

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ę

Bezpieczne obchodzenie się z materiałami w doświadczeniach

Postępowanie według instrukcji słownej w doświadczeniach

Postępowanie według instrukcji tekstowej w doświadczeniach

Postępowanie według instrukcji graficznej w doświadczeniach

Uważne obserwowanie zjawisk — precyzja i dokładność

Skrupulatność w przeprowadzaniu doświadczeń

Formułowanie wniosków po obserwacji

Formułowanie wniosków po doświadczeniu

Bezpieczeństwo i sprawność w badaniach przyrodniczych

Using Tables to Organise Data That Supports Your Conclusion

Asking Scientific Questions from Observations

Respect for Life in Scientific Investigations

Recording Observations of Living Things

Communicating What We Found About Living Things

Investigating Living Things

Changing One Thing While Keeping Others the Same

Following Step-by-Step Investigation Directions

Planning a Descriptive Plant Growth Investigation

Testing How Surfaces Change How Objects Roll and Slide

Identifying Conditions That Influence Investigation Results

Repeating an Investigation to Be Sure of Results

Planning and Conducting Safe, Fair Investigations

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

Przedrostki wielokrotności — kilo-, hekto- i mega-

Przedrostki podwielokrotności — centy-, mili- i mikro-

Pomiary długości i grubości — linijka i suwmiarka

Pomiary masy za pomocą wagi szalkowej i elektronicznej

Pomiary objętości cieczy i ciał stałych cylindrem miarowym

Trening przeliczania złożonych jednostek i przedrostków SI

Przedrostki SI i praktyczne pomiary wielkości fizycznych

Los pasos para hacer un experimento en el aula

Experimento: ¿qué necesita una semilla para germinar?

¿Qué es una condición o variable en un experimento?

Experimento con rampas: ¿cómo influye la inclinación?

Experimento con superficies: suave frente a rugoso

Experimento de derretimiento: ¿dónde se derrite más rápido el hielo?

Primeros pasos en la experimentación: pasos y variables

Notatki z obserwacji — co i jak zapisywać

Notatki z doświadczeń — krok po kroku

Tabele do zapisywania wyników pomiarów

Wykresy jako sposób prezentacji danych

Rysunki i schematy w dokumentacji badań

Fotografowanie zjawisk przyrodniczych w badaniach

Filmowanie doświadczeń — zalety i ograniczenia

Dziennik obserwacji — dokumentowanie zmian długotrwałych

Dokumentacja obserwacji i doświadczeń

Experimento de flotación: cambiar la forma del objeto

Experimento con luz: bloquear la luz con diferentes materiales

Experimento de absorción: ¿qué papel o tela absorbe más agua?

Hacer una prueba justa: cambiar solo una cosa a la vez

Experimento de sonido: ¿cómo cambia al tapar el recipiente?

Seguridad y cuidado al realizar experimentos escolares

Pruebas justas y exploración de nuevos fenómenos

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

Podsumowanie zastosowań fal radiowych, mikrofal i podczerwieni

Promieniowanie podczerwone i przegląd pasm fal

Droga jako długość toru ruchu i jej jednostki

Różnica między drogą a przemieszczeniem

Pomiary drogi w laboratorium i na mapie

Przeliczanie jednostek drogi w zadaniach fizycznych

Analiza złożonych torów ruchu — ruchy obrotowe i postępowe

Studium przypadku — opis ruchu pojazdów w różnych układach odniesienia

Droga, przemieszczenie i rodzaje ruchu

Making Predictions Based on Experience

Staying Safe in Science Investigations

Planning Science Investigations

Jednostki czasu – doba, godzina, minuta, sekunda

Chwila czasu a przedział czasu Δt

Pomiary czasu — stoper ręczny, bramki fotooptyczne i czujniki ruchu

Przeliczanie godzin i minut na sekundy

Przeliczanie sekund na minuty i godziny — ułamki dziesiętne i zwykłe

Podwielokrotności sekundy — milisekundy i mikrosekundy

Obliczanie czasu trwania podróży z rozkładów jazdy

Czas reakcji kierowcy jako parametr bezpieczeństwa ruchu

Zaokrąglanie i szacowanie przedziałów czasu w obliczeniach

Trening płynności przeliczania jednostek czasu w zadaniach

Czas i jednostki czasu w kinematyce

Using Models to Predict Outcomes

Comparing Results with Predictions

Is This a Fair Test?

Communicating Findings with Words and Pictures

Using Science Vocabulary

Science in Our Daily Lives

Analyzing and Communicating Science Findings

Definicja fali mechanicznej i konieczność obecności ośrodka sprężystego

Brak wymogu ośrodka materialnego dla fal elektromagnetycznych

Cechy wspólne wszystkich fal — przenoszenie energii i pędu bez transportu masy

Zjawiska falowe wspólne dla obu typów fal — odbicie i załamanie

Interferencja i dyfrakcja jako uniwersalne zjawiska falowe

Porównanie prędkości rozchodzenia się dźwięku i światła w powietrzu

Dlaczego najpierw widzimy błyskawicę, a dopiero później słyszymy grzmot?

Fale poprzeczne i podłużne w mechanice a charakter poprzeczny fal elektromagnetycznych

Doświadczenie: dzwonek elektryczny i latarka pod kloszem pompy próżniowej

Tłumienie i pochłanianie fal w różnych ośrodkach — porównanie

Tabela zbiorcza: porównanie cech fal mechanicznych i elektromagnetycznych

Podsumowanie cech wspólnych i różnic fal mechanicznych oraz elektromagnetycznych

Porównanie fal mechanicznych i elektromagnetycznych

Definicja ruchu jednostajnego prostoliniowego

Stała wartość prędkości w ruchu jednostajnym

Doświadczenie: Badanie ruchu pęcherzyka powietrza w rurce z wodą

Droga w kolejnych sekundach ruchu jednostajnego

Obliczanie drogi w ruchu jednostajnym s = v·t

Obliczanie czasu ruchu jednostajnego t = s/v

Proporcjonalność prosta drogi do czasu w ruchu jednostajnym

Ruch jednostajny prostoliniowy — pojęcia i podstawowe zależności

Etapy metody naukowej w fizyce — od obserwacji do prawa fizycznego

Jak poprawnie sformułować problem badawczy w doświadczeniu fizycznym?

Stawianie weryfikowalnych hipotez naukowych w naukach ścisłych

Identyfikacja zmiennej niezależnej, zależnej i zmiennych kontrolowanych

Rola próby kontrolnej i próby badawczej w doświadczeniach

Metodologia naukowa w fizyce — hipotezy, zmienne i próby badawcze

Zjawisko załamania światła (refrakcja) — definicja i obserwacja

Przyczyna załamania światła: Różnica prędkości rozchodzenia się światła

OGS.2.SEP.2

Aligned learning resources

Related diagrams