Glossar: 3 weitere Experimente + Watt-Leiter-Infografik
- Treibhauseffekt-Slider (CO2-ppm 200..800 -> Temperatur-Anomalie via IPCC-Faustformel, Moleküle füllen Atmosphäre dynamisch, Thermometer visualisiert ΔT) - Windrad-Höhenslider (0..260 m, 7 Vergleichsobjekte Mensch..modernes Windrad leuchten je nach Schieberstellung auf) - Methan-GWP-Waage (CO2-Schale variabel 1..60 kg, Waage kippt physikalisch bis bei 28 kg Balance erreicht ist) - kWh-Rennen: Fahrzeuge fahren jetzt von rechts nach links (plattformunabhängige Emoji-Orientierung), Animation auf 6,5s verlangsamt - Watt-Leiter: neue gemeinsame Infografik (log-Skala 1 W..1 GW mit 6 Haushalts- und Kraftwerks-Beispielen), verknüpft mit watt/kilowatt/megawatt - CSS für Slider-Experimente (.ge-gh-*), Waagen-Animation, Windrad-Highlighting Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,180 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 560" font-family="Inter, system-ui, sans-serif" width="900" height="560">
|
||||
<defs>
|
||||
<linearGradient id="wl-bar" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stop-color="#c85c4a"/>
|
||||
<stop offset=".25" stop-color="#e8833a"/>
|
||||
<stop offset=".55" stop-color="#f4c94e"/>
|
||||
<stop offset=".8" stop-color="#5a8a5e"/>
|
||||
<stop offset="1" stop-color="#4a7c8a"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<text x="450" y="32" font-size="17" font-weight="800" fill="#1f4e5a" text-anchor="middle">
|
||||
Die Leistungs-Leiter — Watt, Kilowatt, Megawatt, Gigawatt im Überblick
|
||||
</text>
|
||||
<text x="450" y="52" font-size="11" fill="#8a8a8a" text-anchor="middle">
|
||||
Logarithmische Skala · jeder Schritt = 10× mehr Leistung · Beispiele gerundet
|
||||
</text>
|
||||
|
||||
<!-- Vertikale Leiter im Zentrum: x=450, y 90..520 (430 px für 10 Schritte: 10⁰ W..10⁹ W) -->
|
||||
<!-- Jeweils 43 px pro Dekade -->
|
||||
<rect x="440" y="80" width="20" height="450" rx="10" fill="url(#wl-bar)"/>
|
||||
|
||||
<!-- Skala-Beschriftung: 10⁰..10⁹ Watt -->
|
||||
<!-- yByLogW: y = 520 - logW * 43. logW = log10(watt) -->
|
||||
|
||||
<!-- Beispiele links (Haushalt) -->
|
||||
<g font-family="Inter, system-ui, sans-serif">
|
||||
|
||||
<!-- 5 W — LED Lampe -->
|
||||
<g transform="translate(0, 497)">
|
||||
<line x1="420" y1="3" x2="435" y2="3" stroke="#c85c4a" stroke-width="1.5"/>
|
||||
<rect x="250" y="-18" width="170" height="40" rx="6" fill="#fff" stroke="#dae8ec"/>
|
||||
<text x="265" y="2" font-size="22" text-anchor="start">💡</text>
|
||||
<text x="300" y="-2" font-size="11" font-weight="800" fill="#1f4e5a">LED-Lampe</text>
|
||||
<text x="300" y="13" font-size="10" fill="#8a8a8a">5–10 W</text>
|
||||
</g>
|
||||
|
||||
<!-- 100 W — Mensch -->
|
||||
<g transform="translate(0, 413)">
|
||||
<line x1="420" y1="3" x2="435" y2="3" stroke="#c85c4a" stroke-width="1.5"/>
|
||||
<rect x="250" y="-18" width="170" height="40" rx="6" fill="#fff" stroke="#dae8ec"/>
|
||||
<text x="265" y="5" font-size="22">🚶</text>
|
||||
<text x="300" y="-2" font-size="11" font-weight="800" fill="#1f4e5a">Mensch beim Gehen</text>
|
||||
<text x="300" y="13" font-size="10" fill="#8a8a8a">≈ 100 W Muskelkraft</text>
|
||||
</g>
|
||||
|
||||
<!-- 2.000 W (2 kW) — Wasserkocher -->
|
||||
<g transform="translate(0, 327)">
|
||||
<line x1="420" y1="3" x2="435" y2="3" stroke="#e8833a" stroke-width="1.5"/>
|
||||
<rect x="250" y="-18" width="170" height="40" rx="6" fill="#fff" stroke="#dae8ec"/>
|
||||
<text x="265" y="5" font-size="22">🫖</text>
|
||||
<text x="300" y="-2" font-size="11" font-weight="800" fill="#1f4e5a">Wasserkocher</text>
|
||||
<text x="300" y="13" font-size="10" fill="#8a8a8a">2 kW = 2.000 W</text>
|
||||
</g>
|
||||
|
||||
<!-- 150 kW — E-Auto Motor -->
|
||||
<g transform="translate(0, 229)">
|
||||
<line x1="420" y1="3" x2="435" y2="3" stroke="#f4c94e" stroke-width="1.5"/>
|
||||
<rect x="250" y="-18" width="170" height="40" rx="6" fill="#fff" stroke="#dae8ec"/>
|
||||
<text x="265" y="5" font-size="22">🚗</text>
|
||||
<text x="300" y="-2" font-size="11" font-weight="800" fill="#1f4e5a">E-Auto-Motor</text>
|
||||
<text x="300" y="13" font-size="10" fill="#8a8a8a">150 kW · 0,15 MW</text>
|
||||
</g>
|
||||
|
||||
<!-- 6 MW — Windrad -->
|
||||
<g transform="translate(0, 155)">
|
||||
<line x1="420" y1="3" x2="435" y2="3" stroke="#5a8a5e" stroke-width="1.5"/>
|
||||
<rect x="250" y="-18" width="170" height="40" rx="6" fill="#fff" stroke="#dae8ec"/>
|
||||
<text x="265" y="5" font-size="22">🌬</text>
|
||||
<text x="300" y="-2" font-size="11" font-weight="800" fill="#1f4e5a">Modernes Windrad</text>
|
||||
<text x="300" y="13" font-size="10" fill="#8a8a8a">3–6 MW</text>
|
||||
</g>
|
||||
|
||||
<!-- 1.400 MW (1,4 GW) — AKW-Block -->
|
||||
<g transform="translate(0, 92)">
|
||||
<line x1="420" y1="3" x2="435" y2="3" stroke="#4a7c8a" stroke-width="1.5"/>
|
||||
<rect x="250" y="-18" width="170" height="40" rx="6" fill="#fff" stroke="#dae8ec"/>
|
||||
<text x="265" y="5" font-size="22">⚛</text>
|
||||
<text x="300" y="-2" font-size="11" font-weight="800" fill="#1f4e5a">AKW-Block</text>
|
||||
<text x="300" y="13" font-size="10" fill="#8a8a8a">1.400 MW = 1,4 GW</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Skala mit Einheit und Vielfachen rechts -->
|
||||
<g font-family="Inter, system-ui, sans-serif" fill="#1f4e5a">
|
||||
|
||||
<!-- 1 W (10⁰) -->
|
||||
<g transform="translate(465, 520)">
|
||||
<line x1="0" y1="0" x2="15" y2="0" stroke="#c85c4a" stroke-width="1.5"/>
|
||||
<text x="22" y="3" font-size="11" font-weight="800">1 W</text>
|
||||
<text x="22" y="16" font-size="9" fill="#8a8a8a">100 Watt</text>
|
||||
</g>
|
||||
|
||||
<!-- 10 W (10¹) -->
|
||||
<g transform="translate(465, 477)">
|
||||
<line x1="0" y1="0" x2="15" y2="0" stroke="#c85c4a" stroke-width="1"/>
|
||||
<text x="22" y="3" font-size="11" font-weight="800">10 W</text>
|
||||
</g>
|
||||
|
||||
<!-- 100 W (10²) -->
|
||||
<g transform="translate(465, 434)">
|
||||
<line x1="0" y1="0" x2="15" y2="0" stroke="#c85c4a" stroke-width="1"/>
|
||||
<text x="22" y="3" font-size="11" font-weight="800">100 W</text>
|
||||
</g>
|
||||
|
||||
<!-- 1 kW (10³) -->
|
||||
<g transform="translate(465, 391)">
|
||||
<line x1="0" y1="0" x2="15" y2="0" stroke="#e8833a" stroke-width="1.5"/>
|
||||
<text x="22" y="3" font-size="11" font-weight="800" fill="#b8641d">1 kW</text>
|
||||
<text x="22" y="16" font-size="9" fill="#8a8a8a">1.000 W</text>
|
||||
</g>
|
||||
|
||||
<!-- 10 kW (10⁴) -->
|
||||
<g transform="translate(465, 348)">
|
||||
<line x1="0" y1="0" x2="15" y2="0" stroke="#e8833a" stroke-width="1"/>
|
||||
<text x="22" y="3" font-size="11" font-weight="800" fill="#b8641d">10 kW</text>
|
||||
</g>
|
||||
|
||||
<!-- 100 kW (10⁵) -->
|
||||
<g transform="translate(465, 305)">
|
||||
<line x1="0" y1="0" x2="15" y2="0" stroke="#e8833a" stroke-width="1"/>
|
||||
<text x="22" y="3" font-size="11" font-weight="800" fill="#b8641d">100 kW</text>
|
||||
</g>
|
||||
|
||||
<!-- 1 MW (10⁶) -->
|
||||
<g transform="translate(465, 262)">
|
||||
<line x1="0" y1="0" x2="15" y2="0" stroke="#5a8a5e" stroke-width="1.5"/>
|
||||
<text x="22" y="3" font-size="11" font-weight="800" fill="#3a6b3e">1 MW</text>
|
||||
<text x="22" y="16" font-size="9" fill="#8a8a8a">1.000 kW · 1.000.000 W</text>
|
||||
</g>
|
||||
|
||||
<!-- 10 MW (10⁷) -->
|
||||
<g transform="translate(465, 219)">
|
||||
<line x1="0" y1="0" x2="15" y2="0" stroke="#5a8a5e" stroke-width="1"/>
|
||||
<text x="22" y="3" font-size="11" font-weight="800" fill="#3a6b3e">10 MW</text>
|
||||
</g>
|
||||
|
||||
<!-- 100 MW (10⁸) -->
|
||||
<g transform="translate(465, 176)">
|
||||
<line x1="0" y1="0" x2="15" y2="0" stroke="#5a8a5e" stroke-width="1"/>
|
||||
<text x="22" y="3" font-size="11" font-weight="800" fill="#3a6b3e">100 MW</text>
|
||||
</g>
|
||||
|
||||
<!-- 1 GW (10⁹) -->
|
||||
<g transform="translate(465, 133)">
|
||||
<line x1="0" y1="0" x2="15" y2="0" stroke="#4a7c8a" stroke-width="1.5"/>
|
||||
<text x="22" y="3" font-size="11" font-weight="800">1 GW</text>
|
||||
<text x="22" y="16" font-size="9" fill="#8a8a8a">1.000 MW · 1 Mrd. W</text>
|
||||
</g>
|
||||
|
||||
<!-- Weitere Beispiele rechts unten -->
|
||||
<g transform="translate(600, 455)">
|
||||
<rect x="0" y="-14" width="280" height="36" rx="6" fill="#fff" stroke="#dae8ec"/>
|
||||
<text x="10" y="2" font-size="11" font-weight="800" fill="#1f4e5a">📱 Handy-Ladegerät</text>
|
||||
<text x="10" y="16" font-size="10" fill="#8a8a8a">20 W — zwischen LED und Mensch</text>
|
||||
</g>
|
||||
<g transform="translate(600, 370)">
|
||||
<rect x="0" y="-14" width="280" height="36" rx="6" fill="#fff" stroke="#dae8ec"/>
|
||||
<text x="10" y="2" font-size="11" font-weight="800" fill="#1f4e5a">🏠 Hausdach-Solaranlage</text>
|
||||
<text x="10" y="16" font-size="10" fill="#8a8a8a">10 kWp — deckt 2 Haushalte</text>
|
||||
</g>
|
||||
<g transform="translate(600, 283)">
|
||||
<rect x="0" y="-14" width="280" height="36" rx="6" fill="#fff" stroke="#dae8ec"/>
|
||||
<text x="10" y="2" font-size="11" font-weight="800" fill="#1f4e5a">⚡ Kraftwerk Freudenau (Donau)</text>
|
||||
<text x="10" y="16" font-size="10" fill="#8a8a8a">172 MW — 230.000 Haushalte</text>
|
||||
</g>
|
||||
<g transform="translate(600, 196)">
|
||||
<rect x="0" y="-14" width="280" height="36" rx="6" fill="#fff" stroke="#dae8ec"/>
|
||||
<text x="10" y="2" font-size="11" font-weight="800" fill="#1f4e5a">🇦🇹 Österreich gesamt installiert</text>
|
||||
<text x="10" y="16" font-size="10" fill="#8a8a8a">~29.000 MW = 29 GW</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Fußzeile Quellen -->
|
||||
<g transform="translate(50, 540)">
|
||||
<rect x="0" y="-14" width="800" height="28" rx="4" fill="#fff" stroke="#dae8ec"/>
|
||||
<text x="12" y="4" font-size="10" font-weight="800" fill="#1f4e5a">Quellen:</text>
|
||||
<text x="62" y="4" font-size="10" fill="#4a4a4a">E-Control Betriebsstatistik Strom 2023 · IG Windkraft Österreich · Hersteller-Angaben Haushaltsgeräte · Physik-Richtwert Muskelarbeit</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.6 KiB |
@@ -347,11 +347,313 @@
|
||||
update();
|
||||
}
|
||||
|
||||
// =====================================================================
|
||||
// Experiment: Treibhauseffekt-Slider — CO₂-ppm → globale Erwärmung
|
||||
// =====================================================================
|
||||
function greenhouseSlider(root) {
|
||||
root.innerHTML = `
|
||||
<div class="ge-wrap">
|
||||
<div class="ge-head">
|
||||
<h3>🌡 Wie viel CO₂ verträgt das Klima?</h3>
|
||||
<p>Schiebe den Regler und beobachte, wie sich die Atmosphäre füllt und die Erde wärmer wird.</p>
|
||||
</div>
|
||||
<svg class="ge-gh-svg" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid meet" aria-hidden="true"></svg>
|
||||
<div class="ge-gh-slider">
|
||||
<label for="ge-gh-range">CO₂-Konzentration: <strong id="ge-gh-ppm">420</strong> ppm</label>
|
||||
<input id="ge-gh-range" type="range" min="200" max="800" value="420" step="10">
|
||||
<div class="ge-gh-markers">
|
||||
<span>200</span><span>280<br>1750</span><span>420<br>heute</span><span>560<br>Verdopplung</span><span>800</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ge-gh-result">
|
||||
<div class="ge-gh-pill">Temperaturanstieg gegenüber 1850: <strong id="ge-gh-dt">+1,2 °C</strong></div>
|
||||
<div class="ge-gh-pill" id="ge-gh-verdict">nahe heutiger Wert</div>
|
||||
</div>
|
||||
<p class="ge-note">Vereinfachte Faustformel: ΔT = 3 °C × log₂(CO₂ / 280 ppm). Das bildet die IPCC-Klimasensitivität (rund 3 °C pro Verdopplung) grob ab. Quellen: IPCC AR6 WG1 Kap. 7 · NOAA Mauna Loa.</p>
|
||||
</div>
|
||||
`;
|
||||
const svg = root.querySelector('.ge-gh-svg');
|
||||
const rng = root.querySelector('#ge-gh-range');
|
||||
const ppmOut = root.querySelector('#ge-gh-ppm');
|
||||
const dtOut = root.querySelector('#ge-gh-dt');
|
||||
const verdict = root.querySelector('#ge-gh-verdict');
|
||||
|
||||
// Statisches Szenen-Layout
|
||||
// Sonne
|
||||
svgEl('circle', { cx: 90, cy: 55, r: 28, fill: '#f4c94e' }, svg);
|
||||
svgEl('text', { x: 90, y: 62, 'text-anchor': 'middle', 'font-size': '22' }, svg).textContent = '☀';
|
||||
// Atmosphäre (gradient wird per Opacity per Zustand gesteuert)
|
||||
const sky = svgEl('rect', { x: 0, y: 30, width: 600, height: 190, fill: '#4a7c8a', opacity: '0.15' }, svg);
|
||||
// Erdoberfläche
|
||||
const earth = svgEl('rect', { x: 0, y: 220, width: 600, height: 80, fill: '#5a8a5e' }, svg);
|
||||
// Baum und Haus dekorativ
|
||||
svgEl('polygon', { points: '100,220 115,195 130,220', fill: '#3a6b3e' }, svg);
|
||||
svgEl('rect', { x: 112, y: 220, width: 6, height: 10, fill: '#6b4a2e' }, svg);
|
||||
svgEl('rect', { x: 470, y: 198, width: 36, height: 22, fill: '#e8d5b5', stroke: '#1f4e5a', 'stroke-width': '1' }, svg);
|
||||
svgEl('polygon', { points: '468,199 488,182 508,199', fill: '#c85c4a' }, svg);
|
||||
// Container für dynamische Moleküle
|
||||
const molGroup = svgEl('g', { class: 'ge-gh-mols' }, svg);
|
||||
// Temperatur-Anzeige rechts oben
|
||||
const thermo = svgEl('g', { transform: 'translate(540, 40)' }, svg);
|
||||
svgEl('rect', { x: -10, y: 0, width: 20, height: 140, fill: '#fff', stroke: '#1f4e5a', rx: '10' }, thermo);
|
||||
const mercury = svgEl('rect', { x: -6, y: 130, width: 12, height: 0, fill: '#c85c4a', rx: '6' }, thermo);
|
||||
svgEl('circle', { cx: 0, cy: 148, r: 10, fill: '#c85c4a' }, thermo);
|
||||
|
||||
function update() {
|
||||
const ppm = +rng.value;
|
||||
ppmOut.textContent = ppm;
|
||||
// ΔT gegen 1850 (≈ 280 ppm als Referenz)
|
||||
const dt = 3 * Math.log2(ppm / 280);
|
||||
const dtRounded = Math.round(dt * 10) / 10;
|
||||
dtOut.textContent = (dtRounded >= 0 ? '+' : '') + dtRounded.toFixed(1).replace('.', ',') + ' °C';
|
||||
|
||||
// Sky-Farbton rotläuft je höher der CO₂-Wert (rotes Leuchten)
|
||||
const warmth = Math.min(1, Math.max(0, (ppm - 280) / 520));
|
||||
const redAmount = Math.round(40 + warmth * 140);
|
||||
sky.setAttribute('fill', `rgb(${40 + redAmount}, ${140 - warmth * 50}, ${170 - warmth * 80})`);
|
||||
sky.setAttribute('opacity', (0.15 + warmth * 0.35).toFixed(2));
|
||||
earth.setAttribute('fill', warmth > 0.6 ? '#c4a97a' : (warmth > 0.3 ? '#9bab74' : '#5a8a5e'));
|
||||
|
||||
// Moleküle proportional zu ppm
|
||||
molGroup.innerHTML = '';
|
||||
const nMols = Math.round((ppm - 200) / 8); // 0..75 Moleküle
|
||||
for (let i = 0; i < nMols; i++) {
|
||||
const mx = 40 + Math.random() * 520;
|
||||
const my = 50 + Math.random() * 155;
|
||||
const isMethane = Math.random() < 0.12;
|
||||
svgEl('circle', {
|
||||
cx: mx, cy: my, r: 5,
|
||||
fill: isMethane ? '#e8833a' : '#c85c4a', opacity: '0.7'
|
||||
}, molGroup);
|
||||
}
|
||||
|
||||
// Mercury-Säule (0 °C = y=130, max +5°C bei y=10 → 120 px / 5°C = 24 px/°C)
|
||||
const mh = Math.max(0, Math.min(120, dt * 24));
|
||||
mercury.setAttribute('y', 130 - mh);
|
||||
mercury.setAttribute('height', mh);
|
||||
|
||||
// Verdict-Text
|
||||
let v, cls;
|
||||
if (ppm < 300) { v = '🟢 Vorindustrielles Klima'; cls = 'good'; }
|
||||
else if (ppm < 450) { v = '🟡 nahe heutiger Wert'; cls = 'now'; }
|
||||
else if (ppm < 600) { v = '🟠 Verdopplung — kritisch'; cls = 'warn'; }
|
||||
else { v = '🔴 weit jenseits 2 °C-Ziel'; cls = 'bad'; }
|
||||
verdict.textContent = v;
|
||||
verdict.dataset.state = cls;
|
||||
}
|
||||
rng.addEventListener('input', update);
|
||||
update();
|
||||
}
|
||||
|
||||
// =====================================================================
|
||||
// Experiment: Windrad-Höhenslider — Höhe ändern, Vergleichsobjekte leuchten
|
||||
// =====================================================================
|
||||
function windradSlider(root) {
|
||||
const objects = [
|
||||
{ label: 'Mensch', h: 1.8, color: '#1f4e5a' },
|
||||
{ label: 'Einfamilienhaus', h: 8, color: '#c85c4a' },
|
||||
{ label: 'Alter Baum', h: 25, color: '#5a8a5e' },
|
||||
{ label: 'Kirchturm', h: 60, color: '#c4a97a' },
|
||||
{ label: 'Altes Windrad', h: 100, color: '#8a8a8a' },
|
||||
{ label: 'DC Tower Wien', h: 220, color: '#4a7c8a' },
|
||||
{ label: 'Modernes Windrad',h: 240, color: '#3a6b3e' }
|
||||
];
|
||||
root.innerHTML = `
|
||||
<div class="ge-wrap">
|
||||
<div class="ge-head">
|
||||
<h3>🌬 Wie groß ist ein modernes Windrad?</h3>
|
||||
<p>Schiebe den Regler auf die vermutete Höhe. Das passende Objekt leuchtet auf — ab 240 m bist du auf Höhe des modernen Windrads.</p>
|
||||
</div>
|
||||
<svg class="ge-wind-svg" viewBox="0 0 600 360" preserveAspectRatio="xMidYMid meet" aria-hidden="true"></svg>
|
||||
<div class="ge-gh-slider">
|
||||
<label for="ge-wind-range">Vermutete Höhe: <strong id="ge-wind-m">120</strong> m</label>
|
||||
<input id="ge-wind-range" type="range" min="0" max="260" value="120" step="5">
|
||||
</div>
|
||||
<div class="ge-gh-result">
|
||||
<div class="ge-gh-pill">In dieser Höhenklasse: <strong id="ge-wind-match">Altes Windrad</strong></div>
|
||||
</div>
|
||||
<p class="ge-note">Moderne Windräder in Österreich: Nabe 100–160 m, Rotor bis 80 m Länge, Gesamthöhe bis 240 m. Quelle: IG Windkraft Österreich.</p>
|
||||
</div>
|
||||
`;
|
||||
const svg = root.querySelector('.ge-wind-svg');
|
||||
const rng = root.querySelector('#ge-wind-range');
|
||||
const mOut = root.querySelector('#ge-wind-m');
|
||||
const matchOut = root.querySelector('#ge-wind-match');
|
||||
|
||||
// Ground
|
||||
svgEl('rect', { x: 0, y: 320, width: 600, height: 40, fill: '#5a8a5e' }, svg);
|
||||
// SKALA: 1 m = 1.2 px, Boden y=320, top bei 240 m = 320 - 240*1.2 = 32
|
||||
const mToY = m => 320 - m * 1.2;
|
||||
|
||||
// Objekte als Silhouetten, jedes an fester x-Position
|
||||
const objG = objects.map((o, i) => {
|
||||
const g = svgEl('g', { class: 'ge-wind-obj' }, svg);
|
||||
const x = 80 + i * 72;
|
||||
// Silhouette: einfaches Rechteck oder Dreieck (stilisiert)
|
||||
const y = mToY(o.h);
|
||||
const h = 320 - y;
|
||||
if (o.label.includes('Baum')) {
|
||||
svgEl('ellipse', { cx: x, cy: y + 10, rx: 14, ry: 18, fill: o.color }, g);
|
||||
svgEl('rect', { x: x - 2, y: y + 25, width: 4, height: h - 25, fill: '#6b4a2e' }, g);
|
||||
} else if (o.label.includes('Mensch')) {
|
||||
svgEl('circle', { cx: x, cy: y + 2, r: 1.4, fill: o.color }, g);
|
||||
svgEl('rect', { x: x - 0.5, y: y + 2, width: 1, height: 2, fill: o.color }, g);
|
||||
} else if (o.label.includes('Haus')) {
|
||||
svgEl('rect', { x: x - 12, y: y + 4, width: 24, height: h - 4, fill: '#e8d5b5', stroke: '#1f4e5a', 'stroke-width': '0.6' }, g);
|
||||
svgEl('polygon', { points: `${x-14},${y+4} ${x},${y-4} ${x+14},${y+4}`, fill: o.color }, g);
|
||||
} else if (o.label.includes('Kirchturm')) {
|
||||
svgEl('rect', { x: x - 8, y: y + 12, width: 16, height: h - 12, fill: o.color, stroke: '#1f4e5a', 'stroke-width': '0.6' }, g);
|
||||
svgEl('polygon', { points: `${x-10},${y+12} ${x},${y} ${x+10},${y+12}`, fill: '#c85c4a' }, g);
|
||||
} else if (o.label.includes('Tower')) {
|
||||
svgEl('rect', { x: x - 7, y, width: 14, height: h, fill: o.color, stroke: '#1f4e5a', 'stroke-width': '0.6' }, g);
|
||||
// Window stripes
|
||||
for (let k = 0; k < 8; k++) {
|
||||
svgEl('rect', { x: x - 5, y: y + 8 + k * (h / 10), width: 10, height: 2, fill: '#e8d5b5', opacity: '0.7' }, g);
|
||||
}
|
||||
} else if (o.label === 'Altes Windrad') {
|
||||
svgEl('rect', { x: x - 1.5, y, width: 3, height: h, fill: o.color }, g);
|
||||
svgEl('circle', { cx: x, cy: y, r: 2.2, fill: '#1f4e5a' }, g);
|
||||
svgEl('line', { x1: x, y1: y, x2: x, y2: y - 22, stroke: '#1f4e5a', 'stroke-width': '1.6', 'stroke-linecap': 'round' }, g);
|
||||
svgEl('line', { x1: x, y1: y, x2: x + 18, y2: y + 12, stroke: '#1f4e5a', 'stroke-width': '1.6', 'stroke-linecap': 'round' }, g);
|
||||
svgEl('line', { x1: x, y1: y, x2: x - 18, y2: y + 12, stroke: '#1f4e5a', 'stroke-width': '1.6', 'stroke-linecap': 'round' }, g);
|
||||
} else if (o.label === 'Modernes Windrad') {
|
||||
svgEl('polygon', { points: `${x-3},320 ${x+3},320 ${x+2},${y+8} ${x-2},${y+8}`, fill: '#fff', stroke: '#1f4e5a', 'stroke-width': '0.8' }, g);
|
||||
svgEl('rect', { x: x - 4, y: y + 4, width: 8, height: 6, fill: '#1f4e5a' }, g);
|
||||
svgEl('circle', { cx: x, cy: y + 8, r: 3, fill: o.color }, g);
|
||||
// Rotor
|
||||
svgEl('line', { x1: x, y1: y + 8, x2: x, y2: y - 72, stroke: '#1f4e5a', 'stroke-width': '2', 'stroke-linecap': 'round' }, g);
|
||||
svgEl('line', { x1: x, y1: y + 8, x2: x + 62, y2: y + 44, stroke: '#1f4e5a', 'stroke-width': '2', 'stroke-linecap': 'round' }, g);
|
||||
svgEl('line', { x1: x, y1: y + 8, x2: x - 62, y2: y + 44, stroke: '#1f4e5a', 'stroke-width': '2', 'stroke-linecap': 'round' }, g);
|
||||
}
|
||||
// Label unter dem Objekt
|
||||
const lbl = svgEl('text', { x, y: 340, 'text-anchor': 'middle', 'font-size': '8', fill: '#4a4a4a', 'font-weight': '600' }, g);
|
||||
lbl.textContent = o.h < 10 ? o.h.toFixed(1).replace('.', ',') + ' m' : o.h + ' m';
|
||||
return { g, o };
|
||||
});
|
||||
|
||||
// Markierungslinie (aktuelle Höhe)
|
||||
const markerLine = svgEl('line', { x1: 30, y1: 200, x2: 570, y2: 200, stroke: '#c85c4a', 'stroke-width': '1.5', 'stroke-dasharray': '4 3' }, svg);
|
||||
const markerLabel = svgEl('text', { x: 34, y: 196, 'font-size': '10', fill: '#c85c4a', 'font-weight': '700' }, svg);
|
||||
|
||||
function update() {
|
||||
const m = +rng.value;
|
||||
mOut.textContent = m;
|
||||
const y = mToY(m);
|
||||
markerLine.setAttribute('y1', y);
|
||||
markerLine.setAttribute('y2', y);
|
||||
markerLabel.setAttribute('y', y - 4);
|
||||
markerLabel.textContent = m + ' m';
|
||||
// Aktives Objekt finden: Höhe ≤ m und max
|
||||
let bestIdx = -1;
|
||||
objects.forEach((o, i) => {
|
||||
if (o.h <= m + 5 && (bestIdx === -1 || o.h > objects[bestIdx].h)) bestIdx = i;
|
||||
});
|
||||
objG.forEach((ob, i) => {
|
||||
ob.g.classList.toggle('ge-wind-active', i === bestIdx);
|
||||
});
|
||||
matchOut.textContent = bestIdx >= 0 ? objects[bestIdx].label : '(noch nichts)';
|
||||
}
|
||||
rng.addEventListener('input', update);
|
||||
update();
|
||||
}
|
||||
|
||||
// =====================================================================
|
||||
// Experiment: Methan-GWP-Waage — 1 kg Methan gegen wie viel CO₂?
|
||||
// =====================================================================
|
||||
function methaneBalance(root) {
|
||||
root.innerHTML = `
|
||||
<div class="ge-wrap">
|
||||
<div class="ge-head">
|
||||
<h3>⚖ Wie stark ist 1 kg Methan?</h3>
|
||||
<p>Auf der linken Waagschale liegt 1 kg Methan. Lege so viele kg CO₂ auf die rechte Schale, bis die Waage im Gleichgewicht ist (auf 100 Jahre).</p>
|
||||
</div>
|
||||
<svg class="ge-bal-svg" viewBox="0 0 600 360" preserveAspectRatio="xMidYMid meet" aria-hidden="true"></svg>
|
||||
<div class="ge-gh-slider">
|
||||
<label for="ge-bal-range">CO₂ auf der rechten Schale: <strong id="ge-bal-kg">10</strong> kg</label>
|
||||
<input id="ge-bal-range" type="range" min="1" max="60" value="10" step="1">
|
||||
</div>
|
||||
<div class="ge-gh-result">
|
||||
<div class="ge-gh-pill" id="ge-bal-verdict">noch zu leicht</div>
|
||||
</div>
|
||||
<p class="ge-note">Laut IPCC AR6 (2021) hat 1 kg Methan auf 100 Jahre die Klimawirkung von 28 kg CO₂ (GWP-100). Auf 20 Jahre sogar 82 kg.</p>
|
||||
</div>
|
||||
`;
|
||||
const svg = root.querySelector('.ge-bal-svg');
|
||||
const rng = root.querySelector('#ge-bal-range');
|
||||
const kgOut = root.querySelector('#ge-bal-kg');
|
||||
const verdict = root.querySelector('#ge-bal-verdict');
|
||||
|
||||
// Grundaufbau: Ständer + Balken
|
||||
svgEl('rect', { x: 296, y: 200, width: 8, height: 120, fill: '#6b4a2e' }, svg);
|
||||
svgEl('rect', { x: 260, y: 316, width: 80, height: 10, fill: '#6b4a2e', rx: '3' }, svg);
|
||||
svgEl('circle', { cx: 300, cy: 200, r: 6, fill: '#1f4e5a' }, svg);
|
||||
|
||||
// Balken (rotiert um 300,200)
|
||||
const beam = svgEl('g', { transform: 'rotate(0, 300, 200)' }, svg);
|
||||
svgEl('rect', { x: 100, y: 196, width: 400, height: 8, fill: '#4a4a4a', rx: '4' }, beam);
|
||||
// Aufhängungen
|
||||
svgEl('line', { x1: 120, y1: 200, x2: 120, y2: 150, stroke: '#4a4a4a', 'stroke-width': '1.2' }, beam);
|
||||
svgEl('line', { x1: 480, y1: 200, x2: 480, y2: 150, stroke: '#4a4a4a', 'stroke-width': '1.2' }, beam);
|
||||
// Schalen
|
||||
svgEl('ellipse', { cx: 120, cy: 152, rx: 45, ry: 8, fill: '#c4a97a', stroke: '#1f4e5a', 'stroke-width': '1' }, beam);
|
||||
svgEl('path', { d: 'M 75 152 L 85 170 L 155 170 L 165 152 Z', fill: '#c4a97a', stroke: '#1f4e5a', 'stroke-width': '1' }, beam);
|
||||
svgEl('ellipse', { cx: 480, cy: 152, rx: 45, ry: 8, fill: '#c4a97a', stroke: '#1f4e5a', 'stroke-width': '1' }, beam);
|
||||
svgEl('path', { d: 'M 435 152 L 445 170 L 515 170 L 525 152 Z', fill: '#c4a97a', stroke: '#1f4e5a', 'stroke-width': '1' }, beam);
|
||||
|
||||
// Links: 1 Methan-Molekül (dick und orange)
|
||||
const methaneG = svgEl('g', {}, beam);
|
||||
svgEl('circle', { cx: 120, cy: 140, r: 14, fill: '#e8833a', stroke: '#1f4e5a', 'stroke-width': '1' }, methaneG);
|
||||
const methaneLabel = svgEl('text', { x: 120, y: 144, 'text-anchor': 'middle', 'font-size': '11', 'font-weight': '800', fill: '#fff' }, methaneG);
|
||||
methaneLabel.textContent = 'CH₄';
|
||||
const methaneCount = svgEl('text', { x: 120, y: 125, 'text-anchor': 'middle', 'font-size': '10', 'font-weight': '700', fill: '#1f4e5a' }, methaneG);
|
||||
methaneCount.textContent = '1 kg';
|
||||
|
||||
// Rechts: variable CO₂-Moleküle
|
||||
const co2G = svgEl('g', {}, beam);
|
||||
const co2Count = svgEl('text', { x: 480, y: 125, 'text-anchor': 'middle', 'font-size': '10', 'font-weight': '700', fill: '#1f4e5a' }, beam);
|
||||
|
||||
function update() {
|
||||
const kg = +rng.value;
|
||||
kgOut.textContent = kg;
|
||||
co2Count.textContent = kg + ' kg';
|
||||
// CO₂-Moleküle auf rechte Schale (gestapelt, maximal 60)
|
||||
co2G.innerHTML = '';
|
||||
const perRow = 8;
|
||||
const cols = Math.min(perRow, kg);
|
||||
const rows = Math.ceil(kg / perRow);
|
||||
for (let i = 0; i < Math.min(kg, 60); i++) {
|
||||
const r = Math.floor(i / perRow);
|
||||
const c = i % perRow;
|
||||
const cx = 480 - ((cols - 1) * 9) / 2 + c * 9;
|
||||
const cy = 145 - r * 9;
|
||||
svgEl('circle', { cx, cy, r: 4, fill: '#c85c4a', opacity: '0.95' }, co2G);
|
||||
}
|
||||
|
||||
// Balken-Rotation: Methan ist immer gleich "schwer" wie 28 kg CO₂
|
||||
// Diff in kg-Äquivalent; Max-Rotation ±18°
|
||||
const diff = kg - 28;
|
||||
const angle = Math.max(-18, Math.min(18, diff * 0.8));
|
||||
beam.setAttribute('transform', `rotate(${angle}, 300, 200)`);
|
||||
|
||||
// Verdict
|
||||
if (kg < 20) verdict.textContent = '⬇ noch zu leicht';
|
||||
else if (kg < 27) verdict.textContent = '🟡 fast — mehr CO₂ drauf';
|
||||
else if (kg <= 29) verdict.textContent = '🎯 genau! 1 kg Methan ≈ 28 kg CO₂';
|
||||
else verdict.textContent = '⬆ jetzt zu viel CO₂';
|
||||
verdict.dataset.state = (kg >= 27 && kg <= 29) ? 'good' : 'now';
|
||||
}
|
||||
rng.addEventListener('input', update);
|
||||
update();
|
||||
}
|
||||
|
||||
// Registry — Key entspricht key_slug aus DB
|
||||
window.GlossarExperiments = {
|
||||
'kilowattstunde': kwhRace,
|
||||
'ppm': ppmGrid,
|
||||
'albedo': albedoSlider,
|
||||
'co2-fussabdruck': footprintCalc
|
||||
'kilowattstunde': kwhRace,
|
||||
'ppm': ppmGrid,
|
||||
'albedo': albedoSlider,
|
||||
'co2-fussabdruck': footprintCalc,
|
||||
'treibhauseffekt': greenhouseSlider,
|
||||
'windenergie': windradSlider,
|
||||
'methan': methaneBalance
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -469,6 +469,51 @@ foreach ($modDb as $m) {
|
||||
}
|
||||
.ge-calc-scale { display: flex; justify-content: space-between; font-size: .65rem; color: var(--ggs-text-muted); margin-bottom: .3rem; }
|
||||
.ge-calc-label { font-size: .75rem; color: var(--ggs-text); }
|
||||
|
||||
/* Slider-basierte Experimente (Treibhauseffekt, Windrad, Methan-Waage) */
|
||||
.ge-gh-svg, .ge-wind-svg, .ge-bal-svg {
|
||||
width: 100%; height: auto;
|
||||
background: linear-gradient(180deg, #dae8ec 0%, #eff5f6 60%, var(--ggs-white) 100%);
|
||||
border-radius: var(--ggs-radius-sm);
|
||||
}
|
||||
.ge-bal-svg { background: var(--ggs-white); }
|
||||
.ge-gh-slider {
|
||||
display: flex; flex-direction: column; gap: .3rem;
|
||||
background: var(--ggs-white);
|
||||
padding: .6rem .9rem;
|
||||
border-radius: var(--ggs-radius-sm);
|
||||
border: 1px solid var(--ggs-border);
|
||||
}
|
||||
.ge-gh-slider label {
|
||||
font-size: .85rem; color: var(--ggs-text);
|
||||
}
|
||||
.ge-gh-slider label strong { color: var(--ggs-fjord-dark); font-size: 1rem; }
|
||||
.ge-gh-slider input[type="range"] {
|
||||
width: 100%; accent-color: var(--ggs-fjord); height: 28px;
|
||||
}
|
||||
.ge-gh-markers {
|
||||
display: flex; justify-content: space-between;
|
||||
font-size: .65rem; color: var(--ggs-text-muted); text-align: center;
|
||||
line-height: 1.1;
|
||||
}
|
||||
.ge-gh-result { display: flex; gap: .5rem; flex-wrap: wrap; }
|
||||
.ge-gh-pill {
|
||||
background: var(--ggs-white);
|
||||
border: 1.5px solid var(--ggs-border);
|
||||
border-radius: var(--ggs-radius-pill);
|
||||
padding: .4rem .9rem;
|
||||
font-size: .82rem;
|
||||
font-weight: 600;
|
||||
color: var(--ggs-text);
|
||||
}
|
||||
.ge-gh-pill strong { color: var(--ggs-fjord-dark); }
|
||||
.ge-gh-pill[data-state="good"] { border-color: var(--ggs-moss); color: var(--ggs-moss-dark); background: var(--ggs-moss-light); }
|
||||
.ge-gh-pill[data-state="now"] { border-color: var(--ggs-fjord); color: var(--ggs-fjord-dark); background: var(--ggs-fjord-light); }
|
||||
.ge-gh-pill[data-state="warn"] { border-color: var(--ggs-orange); color: var(--ggs-orange); background: #fbe8d3; }
|
||||
.ge-gh-pill[data-state="bad"] { border-color: var(--ggs-coral); color: var(--ggs-coral); background: var(--ggs-coral-light); }
|
||||
|
||||
.ge-wind-obj { opacity: .45; transition: opacity .25s var(--ggs-ease), filter .25s var(--ggs-ease); }
|
||||
.ge-wind-obj.ge-wind-active { opacity: 1; filter: drop-shadow(0 2px 6px rgba(74,124,138,.35)); }
|
||||
.gl-detail-unit {
|
||||
display: inline-block; font-size: .78rem; font-weight: 700; font-family: var(--ggs-font-mono);
|
||||
color: var(--ggs-fjord-dark); background: var(--ggs-fjord-light);
|
||||
|
||||
Reference in New Issue
Block a user