<!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-color: #f8f9fa;
      color: #1e2945;
      font-family: system-ui, -apple-system, sans-serif;
      width: 100%;
      min-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }
    .grid {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: stretch;
      gap: 16px;
      width: 100%;
      max-width: 620px;
    }
    .panel {
      flex: 1;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 14px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      min-width: 0;
    }
    .title {
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      line-height: 1.2;
    }
    .subtitle {
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      margin-top: 2px;
      text-align: center;
    }
    .visual-box {
      position: relative;
      width: 100%;
      height: 190px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
    .legend {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      color: #0284c7;
      background: #f0f9ff;
      border: 1px solid #bae6fd;
      padding: 3px 8px;
      border-radius: 12px;
    }
    .dot {
      width: 8px;
      height: 8px;
      background: #0284c7;
      border-radius: 50%;
      box-shadow: 0 0 4px #38bdf8;
    }
    @media (max-width: 480px) {
      .grid {
        gap: 8px;
      }
      .visual-box {
        height: 160px;
      }
      .title {
        font-size: 13px;
      }
      .subtitle {
        font-size: 11px;
      }
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="panel">
      <div>
        <div class="title">Empty Balloon</div>
        <div class="subtitle">Small Volume</div>
      </div>
      
      <div class="visual-box">
        <svg viewBox="0 0 160 190" width="100%" height="100%" style="max-height: 180px;">
          
          <path d="M 80 150 C 72 150, 68 156, 68 162 C 68 166, 92 166, 92 162 C 92 156, 88 150, 80 150 Z" fill="#e11d48"/>
          
          <ellipse cx="80" cy="164" rx="9" ry="4" fill="#be123c"/>
          
          <path d="M 76 150 
                   C 68 135, 62 120, 65 95 
                   C 68 70, 72 50, 75 42 
                   C 78 35, 84 35, 86 42 
                   C 88 52, 90 75, 93 100 
                   C 95 125, 88 140, 84 150 Z" 
                fill="#f43f5e" 
                stroke="#e11d48" 
                stroke-width="2"/>
          
          <path d="M 73 65 Q 77 90 76 125" stroke="#be123c" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.6"/>
          <path d="M 83 75 Q 85 105 82 135" stroke="#be123c" stroke-width="1.5" stroke-linecap="round" fill="none" opacity="0.5"/>
          
          <path d="M 70 80 Q 72 60 76 48" stroke="#fda4af" stroke-width="2" stroke-linecap="round" fill="none" opacity="0.8"/>
        </svg>
      </div>

      <div style="height: 24px;"></div>
    </div>

    
    <div class="panel">
      <div>
        <div class="title">Filled with Air</div>
        <div class="subtitle">Larger Volume</div>
      </div>

      <div class="visual-box">
        <canvas id="particleCanvas"></canvas>
      </div>

      <div class="legend">
        <div class="dot"></div>
        <span>Air Particles</span>
      </div>
    </div>
  </div>

  <script>
    const canvas = document.getElementById('particleCanvas');
    const ctx = canvas.getContext('2d');

    let width, height;
    function resize() {
      const rect = canvas.getBoundingClientRect();
      const dpr = window.devicePixelRatio || 1;
      width = rect.width;
      height = rect.height;
      canvas.width = width * dpr;
      canvas.height = height * dpr;
      ctx.scale(dpr, dpr);
    }
    window.addEventListener('resize', resize);
    resize();

    // Particle simulation inside inflated balloon
    const particles = [];
    const numParticles = 24;

    for (let i = 0; i < numParticles; i++) {
      const angle = Math.random() * Math.PI * 2;
      const r = Math.random() * 0.7;
      particles.push({
        rx: Math.cos(angle) * r,
        ry: Math.sin(angle) * r,
        vx: (Math.random() - 0.5) * 0.015,
        vy: (Math.random() - 0.5) * 0.015,
        radius: 3.5 + Math.random() * 1.5,
        pulse: Math.random() * Math.PI
      });
    }

    function draw() {
      ctx.clearRect(0, 0, width, height);

      const cx = width / 2;
      const cy = height * 0.45;
      const rx = Math.min(width * 0.38, 62);
      const ry = rx * 1.18;

      // Draw Balloon Knot
      const knotY = cy + ry + 4;
      ctx.beginPath();
      ctx.moveTo(cx - 7, knotY);
      ctx.lineTo(cx + 7, knotY);
      ctx.lineTo(cx + 10, knotY + 12);
      ctx.lineTo(cx - 10, knotY + 12);
      ctx.closePath();
      ctx.fillStyle = '#e11d48';
      ctx.fill();

      // Tie ring
      ctx.beginPath();
      ctx.ellipse(cx, knotY + 12, 10, 4, 0, 0, Math.PI * 2);
      ctx.fillStyle = '#be123c';
      ctx.fill();

      // Balloon Body (Inflated)
      ctx.save();
      ctx.beginPath();
      ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
      
      // Balloon fill
      const grad = ctx.createRadialGradient(cx - rx * 0.3, cy - ry * 0.3, rx * 0.1, cx, cy, rx * 1.1);
      grad.addColorStop(0, '#fb7185');
      grad.addColorStop(0.5, '#f43f5e');
      grad.addColorStop(1, '#e11d48');
      ctx.fillStyle = grad;
      ctx.fill();
      ctx.strokeStyle = '#be123c';
      ctx.lineWidth = 2;
      ctx.stroke();

      // Specular 3D highlight
      ctx.beginPath();
      ctx.ellipse(cx - rx * 0.45, cy - ry * 0.4, rx * 0.22, ry * 0.35, -Math.PI / 6, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
      ctx.fill();

      // Clip particles inside balloon
      ctx.beginPath();
      ctx.ellipse(cx, cy, rx - 4, ry - 4, 0, 0, Math.PI * 2);
      ctx.clip();

      // Update & Draw Air Particles
      particles.forEach(p => {
        p.rx += p.vx;
        p.ry += p.vy;
        p.pulse += 0.05;

        // Elliptical bounce boundary
        const dist = Math.hypot(p.rx, p.ry);
        if (dist > 0.82) {
          const nx = p.rx / dist;
          const ny = p.ry / dist;
          const dot = p.vx * nx + p.vy * ny;
          p.vx = (p.vx - 2 * dot * nx) * 0.98;
          p.vy = (p.vy - 2 * dot * ny) * 0.98;
          p.rx = nx * 0.82;
          p.ry = ny * 0.82;
        }

        const px = cx + p.rx * rx;
        const py = cy + p.ry * ry;

        // Sparkle / Glow
        const glow = ctx.createRadialGradient(px, py, 1, px, py, p.radius * 2.2);
        glow.addColorStop(0, '#ffffff');
        glow.addColorStop(0.4, '#38bdf8');
        glow.addColorStop(1, 'rgba(56, 189, 248, 0)');

        ctx.beginPath();
        ctx.arc(px, py, p.radius * 2.2, 0, Math.PI * 2);
        ctx.fillStyle = glow;
        ctx.fill();

        // Particle Core
        ctx.beginPath();
        ctx.arc(px, py, p.radius, 0, Math.PI * 2);
        ctx.fillStyle = '#f0f9ff';
        ctx.fill();
      });

      ctx.restore();

      // Outward force arrows around the inflated balloon
      const arrowCount = 6;
      for (let i = 0; i < arrowCount; i++) {
        const a = (i / arrowCount) * Math.PI * 2;
        const startR = 1.08;
        const endR = 1.20;
        const x1 = cx + Math.cos(a) * rx * startR;
        const y1 = cy + Math.sin(a) * ry * startR;
        const x2 = cx + Math.cos(a) * rx * endR;
        const y2 = cy + Math.sin(a) * ry * endR;

        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.strokeStyle = '#38bdf8';
        ctx.lineWidth = 2;
        ctx.stroke();

        // Tiny arrow head
        const headAngle = Math.PI / 6;
        const headLen = 4;
        ctx.beginPath();
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headLen * Math.cos(a - headAngle), y2 - headLen * Math.sin(a - headAngle));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headLen * Math.cos(a + headAngle), y2 - headLen * Math.sin(a + headAngle));
        ctx.stroke();
      }

      requestAnimationFrame(draw);
    }

    requestAnimationFrame(draw);
  </script>
</body>
</html>

Air Takes Up Space and Has Volume

Pojęcie ciśnienia, parcia i jednostka paskal (Pa)

Obliczanie ciśnienia i przekształcanie wzoru p = F / S

Jednostki ciśnienia i ich przeliczanie: hektopaskale, bary i atmosfery

Powstawanie ciśnienia atmosferycznego i ciężar powietrza

Doświadczenie Torricellego i pomiar ciśnienia atmosferycznego

Przyrządy do pomiaru ciśnienia: barometr i manometr

Zmiana ciśnienia atmosferycznego z wysokością i wpływ na pogodę

Doświadczenia pokazujące działanie ciśnienia atmosferycznego

science

Ciśnienie i ciśnienie atmosferyczne

Describing Materials by Color, Texture, and Hardness

Observing Color and Texture to Identify Materials

Testing Flexibility: Bending and Stretching Materials

Transparent, Translucent, or Opaque: Seeing Through Materials

Comparing Heavy and Light: Relative Weight and Size

Sink or Float: Testing Buoyancy in Water

Natural Materials Versus Human-Made Objects

Choosing the Best Material for a Job

Exploring Properties of Materials and Objects

Materiais ao nosso redor: identificando do que os objetos são feitos

De onde vêm os materiais: a origem da madeira, do metal e do vidro

Objetos do passado e do presente: como os materiais mudaram

Propriedades dos materiais: flexibilidade, dureza e transparência

Estados da matéria: sólidos, líquidos e gases no dia a dia

Misturas no cotidiano: identificando componentes e propriedades

Construindo objetos: escolha de materiais e processo de design

Descarte consciente: reciclagem e reaproveitamento de materiais

Materiais e suas propriedades

杯子倒扣入水：探究空气占据空间

针筒里的秘密：空气可以被压缩

袋子飞起来了：观察热空气上升现象

自制风的形成演示箱：冷热空气对流

空气的性质与热空气探秘

Proving Air Has Weight and Mass

Feeling Air Pressure and Wind Resistance

Water Takes the Shape of Its Container

Exploring Water Surface Tension and Droplets

Solid Ice, Liquid Water, and Invisible Vapor

Floating and Upward Water Force

Investigating Air and Water

Medir longitudes con partes del cuerpo: pasos y palmos

Medir objetos con patrones iguales: clips y bloques

Introducción a la regla y el centímetro

El metro para medir grandes distancias y alturas

Comparar pesos con las manos: pesado y liviano

Usar la balanza de platos para comparar sólidos

Conocer el gramo y el kilogramo en alimentos cotidianos

Medición de longitud y masa en sólidos

Treść i sens fizyczny prawa Pascala

Zasada działania prasy hydraulicznej i podnośnika

Obliczenia sił i powierzchni tłoków w prasie hydraulicznej

Zastosowanie prawa Pascala w technice: hamulce i pneumatyka

Prawo Pascala i układy hydrauliczne

观察水的颜色、气味、味道与透明度

探究水的流动性与无固定形状特点

观察不同物体在水中的沉浮现象

通过装空气、扇风感知空气的存在与流动

观察空气无色、无味、透明、无固定形状的特点

观察食盐和白糖在水中的溶解过程

对比沙子、面粉与食盐在水中的不同状态

探究搅拌与加热对固体在水中溶解快慢的影响

水与空气的特征及溶解现象探究

Pojęcie ciśnienia hydrostatycznego i jego przyczyna

Wyprowadzenie wzoru na ciśnienie hydrostatyczne: p = d · g · h

Zależność ciśnienia hydrostatycznego od głębokości zanurzenia

Wpływ gęstości cieczy na wartość ciśnienia hydrostatycznego

Paradoks hydrostatyczny i niezależność od kształtu naczynia

Obliczenia ciśnienia hydrostatycznego w wodzie i innych cieczach

Ciśnienie całkowite na dnie zbiornika — suma ciśnień

Ciśnienie hydrostatyczne i ciśnienie całkowite

Medir líquidos con recipientes no estandarizados: vasos y cucharas

El litro y el mililitro en botellas y jarras graduadas

Conservación de la cantidad de líquido en recipientes distintos

Elegir el instrumento adecuado para cada medición

Registrar datos de medición en tablas sencillas

Medición de líquidos y registro de datos

Patterns in Day and Night, Weather, and Seasons

Cause and Effect: Pushes, Pulls, and How Things Move

Big and Small: Comparing Size and Quantity

Parts Make Up a Whole: Systems in Nature

Energy and Matter: Light, Sound, and Materials

Structure and Function: Plants, Animals, and Senses

What Makes Things Change or Stay the Same

Patterns, Systems, and Change in Our World

Mechanizm przewodnictwa cieplnego w ciałach stałych

Przewodniki i izolatory ciepła — klasyfikacja materiałów

Uwięzione powietrze jako doskonały izolator termiczny

Doświadczenie: porównanie przewodnictwa cieplnego metali

Mechanizm konwekcji — dlaczego ciepły płyn unosi się do góry

Konwekcja w atmosferze i instalacjach domowych

Promieniowanie cieplne (podczerwień) — przekazywanie energii bez nośnika

Wpływ barwy powierzchni na pochłanianie i emisję ciepła

Jak działa termos — blokowanie przewodnictwa, konwekcji i promieniowania

Termomodernizacja i izolacja cieplna w budownictwie

Podsumowanie i zadania: przewodnictwo, konwekcja czy promieniowanie?

Sposoby przekazywania ciepła: przewodnictwo, konwekcja i promieniowanie

¿Qué es la materia?: Masa y volumen

Los sólidos: forma fija y volumen definido

Los líquidos: fluyen y toman la forma del recipiente

Los gases: el aire que nos rodea y llena los globos

El agua en la naturaleza: hielo, agua líquida y vapor

De sólido a líquido: la fusión del hielo y la mantequilla

De líquido a sólido: la solidificación al enfriar

De líquido a gas: la evaporación del agua al sol

De gas a líquido: la condensación en el espejo y vasos fríos

Cambios de estado por efecto de la temperatura

Experimento del ciclo del agua en una bolsa sellada

Estados de la materia y cambios por temperatura

Naczynia połączone z jedną cieczą — zasada równowagi poziomów

Naczynia połączone z cieczami o różnych gęstościach (rurka U)

Zastosowanie naczyń połączonych: wodociągi, wieże ciśnień i poziomice

Parcie hydrostatyczne na ścianki i dno zbiornika

Doświadczenie: badanie ciśnienia hydrostatycznego za pomocą sondy

Zadania złożone z ciśnienia hydrostatycznego i atmosferycznego

Naczynia połączone i zaawansowana statyka cieczy

Obserwacja pozornej utraty ciężaru ciała w wodzie

Przyczyna powstawania siły wyporu — różnica parć

Sformułowanie prawa Archimedesa

Wzór na siłę wyporu: Fw = d · V · g

Doświadczalna weryfikacja prawa Archimedesa z wiaderkiem Archimedesa

Obliczenia siły wyporu dla ciał całkowicie zanurzonych

Siła wyporu i prawo Archimedesa

Starting, Stopping, and Changing Direction with Forces

Big Pushes Versus Small Pushes: Force and Speed

Investigating Friction Across Different Surfaces

Reducing and Increasing Friction: Rollers and Treads

Gravity: The Downward Pull on All Objects

Air Resistance: Parachutes and Falling Shapes

Changing Object Shapes with Squashing and Stretching

Pushes, Pulls, and Forces in Motion

Siła wyporu Archimedesa i warunki pływania ciał w cieczach

Warunki pływania ciał: tonięcie, pływanie w głębi i wynurzanie

Pływanie ciał częściowo zanurzonych i równanie pływania

Dlaczego stalowe statki pływają — pojęcie średniej gęstości

Zasada działania łodzi podwodnej i nurka Kartezjusza

Siła wyporu w gazach: balony i sterowce

Areometr i gęstościomierz — praktyczny pomiar gęstości płynów

Zadania rachunkowe ze statyki pływania ciał i siły wyporu

Warunki i zastosowania pływania ciał w płynach

Oddziaływania międzycząsteczkowe: siły spójności (kohezji)

Siły przylegania (adhezji) — oddziaływanie cieczy ze ściankami

Zjawisko napięcia powierzchniowego — błona na powierzchni cieczy

Mikroskopowy mechanizm napięcia powierzchniowego — asymetria sił

Dlaczego krople i bańki mydlane są kuliste

Doświadczenia z pływającą igłą i nartnikiem na wodzie

Wpływ detergentów i temperatury na napięcie powierzchniowe

Napięcie powierzchniowe i siły międzycząsteczkowe

Parowanie jako zjawisko powierzchniowe — mechanizm mikroskopowy

Czynniki wpływające na szybkość parowania

Dlaczego parująca ciecz się ochładza — pocenie się i termoregulacja

Wrzenie jako gwałtowne parowanie w całej objętości cieczy

Stałość temperatury wrzenia i ciepło parowania

Wpływ ciśnienia zewnętrznego na temperaturę wrzenia cieczy

Skraplanie (kondensacja) pary — oddawanie ciepła i powstawanie mgły

Ciepło sublimacji i resublimacji — suchy lód oraz powstawanie szronu i śniegu

Analiza pełnej krzywej ogrzewania: od lodu przez wodę do pary wodnej

Wieloetapowe bilanse cieplne z udziałem przemian fazowych

Cykl hydrologiczny Ziemi jako globalny wymiennik ciepła

Parowanie, wrzenie, sublimacja i resublimacja

Doświadczenie: demonstracja topnienia, wrzenia i skraplania wody

Doświadczenie: pomiar temperatury podczas topnienia i krzepnięcia

Doświadczenie: badanie przewodnictwa cieplnego prętów metalowych i niemetalowych

Doświadczenie: obserwacja prądów konwekcyjnych za pomocą barwnika lub dymu

Kalorymetr szkolny — budowa, zasada izolacji i obsługa

Doświadczenie: wyznaczanie ciepła właściwego wody z użyciem czajnika elektrycznego

Doświadczenie: wyznaczanie ciepła właściwego wody z grzałką o znanej mocy i wagą

OGS.2.PS.2

Aligned learning resources

Related diagrams