Adminator
685b4700f8
Widgets: Ernährungspyramide (US-1992 vs DACH-2024 vs Denkfehler), Kakao-Bohne (Schoko-Fließband + Mischverhältnis→Sorte/kaputte Masse), Klimazone (Bänder Äquator→Pol mit Beispielpflanzen), Monsun (Monatsregen-Balkendiagramm Mumbai + Wien-Vergleich, Quelle IMD). Texte: off-season-import (Winter-Erdbeere ~10× CO₂, Schiff vs Flug) + lebensmittelverschwendung (70 kg = ~6 Wochen Essen; 700 Mio. Hungernde) — greifbare Vergleiche. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
183 lines
9.7 KiB
JavaScript
183 lines
9.7 KiB
JavaScript
/**
|
||
* Glossar-Experimente — Gruppe „pyramide".
|
||
*
|
||
* Registrierung: window.GlossarExperiments[key_slug] = function (root) { … }
|
||
* Der Renderer (glossar.php) hängt einen leeren Container ein und ruft die
|
||
* Funktion mit diesem Container als einzigem Argument auf.
|
||
*
|
||
* Nur bestehende .ge-*-Klassen, kein neues CSS. Vanilla JS, keine Libraries.
|
||
*/
|
||
|
||
(function () {
|
||
'use strict';
|
||
|
||
const NS = 'http://www.w3.org/2000/svg';
|
||
const svgEl = (tag, attrs, parent) => {
|
||
const el = document.createElementNS(NS, tag);
|
||
if (attrs) for (const k in attrs) el.setAttribute(k, attrs[k]);
|
||
if (parent) parent.appendChild(el);
|
||
return el;
|
||
};
|
||
|
||
// =====================================================================
|
||
// Experiment: Ernährungspyramide — früher (US 1992) vs. heute (DACH 2024)
|
||
// =====================================================================
|
||
function foodPyramid(root) {
|
||
// Ansichten: Stufen jeweils von OBEN (Spitze) nach UNTEN (Basis).
|
||
// dark:true → weiße Schrift auf dunkler Stufe.
|
||
const VIEWS = {
|
||
us: {
|
||
btn: 'Alte US-Pyramide (1992)',
|
||
title: '🇺🇸 Die alte US-Pyramide (1992)',
|
||
intro: 'So empfahlen die USA früher zu essen. Fällt dir auf, was ganz unten die größte Gruppe ist?',
|
||
note: 'Quelle: USDA „Food Guide Pyramid" (1992). 2005 durch MyPyramid, 2011 durch MyPlate ersetzt.',
|
||
levels: [
|
||
{ lines: ['Fette, Öle & Süßes', 'sparsam'], color: '#d98c4a', dark: true,
|
||
hint: 'Ganz oben, klein: Fette und Süßes nur sparsam — aber alle Fette wurden hier in einen Topf geworfen.' },
|
||
{ lines: ['Milch · Fleisch, Fisch, Ei, Nüsse', 'je 2 – 3 Portionen'], color: '#b57f9e', dark: true,
|
||
hint: 'Milchprodukte und Eiweiß-Lebensmittel: je 2 – 3 Portionen pro Tag.' },
|
||
{ lines: ['Gemüse 3 – 5 · Obst 2 – 4', 'Portionen'], color: '#5a8a5e', dark: true,
|
||
hint: 'Gemüse und Obst — aber weiter oben als heute, also als weniger wichtig dargestellt.' },
|
||
{ lines: ['Brot, Getreide, Reis, Nudeln', '6 – 11 Portionen'], color: '#e8c547', dark: false,
|
||
hint: 'Die größte Gruppe ganz unten: 6 – 11 Portionen Kohlenhydrate pro Tag! Weißmehl zählte dabei genauso wie Vollkorn.' }
|
||
]
|
||
},
|
||
dach: {
|
||
btn: 'Heute (D-A-CH)',
|
||
title: '🥦 Heutige Empfehlung (D-A-CH)',
|
||
intro: 'So empfehlen Österreich, die Schweiz und Deutschland heute zu essen. Unten steht jetzt Wasser.',
|
||
note: 'Quellen: Österreichische Ernährungspyramide 2024 (BMSGPK · Gesundheit Österreich · AGES) · Schweizer Lebensmittelpyramide (SGE) · Deutschland: DGE-Empfehlungen 2024 — über ¾ pflanzlich, unter ¼ tierisch.',
|
||
levels: [
|
||
{ lines: ['Süßes, Fettes & Fast Food', 'selten'], color: '#c85c4a', dark: true,
|
||
hint: 'Ganz oben, ganz klein: Süßes, Fettiges und Fast Food nur selten und in kleinen Mengen.' },
|
||
{ lines: ['Fette & Öle', 'sparsam, pflanzlich'], color: '#d98c4a', dark: true,
|
||
hint: 'Öle und Fette sparsam — am besten pflanzliche Öle wie Rapsöl oder Olivenöl.' },
|
||
{ lines: ['Fleisch, Fisch & Ei', 'sparsam'], color: '#b56b6b', dark: true,
|
||
hint: 'Fleisch, Fisch und Ei nur sparsam: höchstens rund 300 g Fleisch pro Woche.' },
|
||
{ lines: ['Milchprodukte', '2 – 3 Portionen / Tag'], color: '#a9c0d0', dark: false,
|
||
hint: 'Milch, Joghurt und Käse: 2 – 3 Portionen pro Tag.' },
|
||
{ lines: ['Getreide & Erdäpfel', '4 Portionen · am besten Vollkorn'], color: '#e8c547', dark: false,
|
||
hint: 'Getreide, Brot und Erdäpfel: 4 Portionen pro Tag — Vollkorn ist besser als Weißmehl. Neu: auch Hülsenfrüchte wie Linsen und Bohnen.' },
|
||
{ lines: ['Gemüse & Obst', '5 Portionen / Tag'], color: '#5a8a5e', dark: true,
|
||
hint: 'Viel Gemüse und Obst: 5 Portionen pro Tag — davon 3-mal Gemüse und 2-mal Obst.' },
|
||
{ lines: ['Wasser & ungesüßte Getränke', 'rund 1,5 Liter / Tag'], color: '#4a9cc4', dark: true,
|
||
hint: 'Die neue Basis: viel trinken — Wasser oder ungesüßter Tee, rund 1,5 Liter pro Tag.' }
|
||
]
|
||
}
|
||
};
|
||
|
||
root.innerHTML = `
|
||
<div class="ge-wrap">
|
||
<div class="ge-head">
|
||
<h3 id="fp-title">🥦 Ernährungspyramide</h3>
|
||
<p id="fp-intro">Vergleiche, wie sich die Empfehlung fürs Essen verändert hat. Tippe auf eine Stufe, um mehr zu erfahren.</p>
|
||
</div>
|
||
<div class="ge-controls" role="tablist">
|
||
<button class="ge-btn ge-btn-primary" data-view="us">Alte US-Pyramide (1992)</button>
|
||
<button class="ge-btn" data-view="dach">Heute (D-A-CH)</button>
|
||
<button class="ge-btn" data-view="fehler">Was war der Denkfehler?</button>
|
||
</div>
|
||
<svg id="fp-svg" viewBox="0 0 620 380" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Ernährungspyramide"></svg>
|
||
<div id="fp-fehler" style="display:none; font-size:.85rem; line-height:1.55; color:var(--ggs-text);">
|
||
<p><strong>Der Denkfehler der alten US-Pyramide:</strong></p>
|
||
<p>Ganz unten, als größte Gruppe, standen Brot, Reis und Nudeln mit bis zu 6 – 11 Portionen pro Tag. Das sind sehr viele Kohlenhydrate. Dabei wurde <strong>Weißmehl und Zucker genauso behandelt wie Vollkorn</strong> — obwohl Vollkorn viel gesünder ist.</p>
|
||
<p>Außerdem galten <strong>alle Fette pauschal als „schlecht"</strong> und sollten sparsam gegessen werden — auch gesunde pflanzliche Öle. Kritiker:innen bemängelten zudem den <strong>Einfluss der Lebensmittel-Industrie</strong> auf diese Empfehlung.</p>
|
||
<p>Heute weiß man es besser: Die Basis sind <strong>Wasser, Gemüse und Obst</strong>, Getreide am besten als Vollkorn — und der Speiseplan ist <strong>überwiegend pflanzlich</strong> (rund ¾ pflanzlich, ¼ tierisch).</p>
|
||
</div>
|
||
<div class="ge-gh-result">
|
||
<div class="ge-gh-pill" id="fp-detail">Tippe auf eine Stufe der Pyramide.</div>
|
||
</div>
|
||
<p class="ge-note" id="fp-note"></p>
|
||
</div>
|
||
`;
|
||
|
||
const svg = root.querySelector('#fp-svg');
|
||
const titleEl = root.querySelector('#fp-title');
|
||
const introEl = root.querySelector('#fp-intro');
|
||
const noteEl = root.querySelector('#fp-note');
|
||
const detail = root.querySelector('#fp-detail');
|
||
const fehler = root.querySelector('#fp-fehler');
|
||
if (!svg || !titleEl || !noteEl || !detail || !fehler) return;
|
||
|
||
// Pyramiden-Geometrie
|
||
const TOP_Y = 18, BOT_Y = 350, CX = 310, HALF_BASE = 258;
|
||
const halfAt = (y) => HALF_BASE * (y - TOP_Y) / (BOT_Y - TOP_Y);
|
||
|
||
function drawPyramid(view) {
|
||
svg.innerHTML = '';
|
||
const levels = view.levels;
|
||
// Gewichte: untere Stufen etwas höher (mehr Platz für Text), Spitze schmal.
|
||
const weights = levels.map((_, i) => 1 + i * 0.18);
|
||
const wSum = weights.reduce((a, b) => a + b, 0);
|
||
const totalH = BOT_Y - TOP_Y;
|
||
let y = TOP_Y;
|
||
levels.forEach((lv, i) => {
|
||
const h = (weights[i] / wSum) * totalH;
|
||
const yTop = y, yBot = y + h;
|
||
y = yBot;
|
||
const lT = CX - halfAt(yTop), rT = CX + halfAt(yTop);
|
||
const lB = CX - halfAt(yBot), rB = CX + halfAt(yBot);
|
||
const g = svgEl('g', { class: 'fp-level', style: 'cursor:pointer' }, svg);
|
||
svgEl('polygon', {
|
||
points: `${lT},${yTop} ${rT},${yTop} ${rB},${yBot} ${lB},${yBot}`,
|
||
fill: lv.color, stroke: '#ffffff', 'stroke-width': '3', 'stroke-linejoin': 'round'
|
||
}, g);
|
||
// Beschriftung mittig
|
||
const midY = (yTop + yBot) / 2;
|
||
const fill = lv.dark ? '#ffffff' : '#1f3a2a';
|
||
const lines = lv.lines;
|
||
const startY = midY - (lines.length - 1) * 8 + 4;
|
||
const txt = svgEl('text', {
|
||
x: CX, y: startY, 'text-anchor': 'middle',
|
||
'font-size': i === 0 ? '11' : '13', 'font-weight': '700',
|
||
fill, 'pointer-events': 'none'
|
||
}, g);
|
||
lines.forEach((ln, li) => {
|
||
const ts = svgEl('tspan', { x: CX, dy: li === 0 ? 0 : 16, 'font-weight': li === 0 ? '800' : '600', 'font-size': li === 0 ? (i === 0 ? '11' : '13') : '11' }, txt);
|
||
ts.textContent = ln;
|
||
});
|
||
g.addEventListener('click', () => {
|
||
detail.textContent = lv.hint;
|
||
svg.querySelectorAll('polygon').forEach(p => p.setAttribute('stroke', '#ffffff'));
|
||
const poly = g.querySelector('polygon');
|
||
if (poly) poly.setAttribute('stroke', '#1f3a2a');
|
||
});
|
||
});
|
||
}
|
||
|
||
function setView(key) {
|
||
root.querySelectorAll('[data-view]').forEach(b =>
|
||
b.classList.toggle('ge-btn-primary', b.dataset.view === key));
|
||
|
||
if (key === 'fehler') {
|
||
svg.style.display = 'none';
|
||
fehler.style.display = '';
|
||
titleEl.textContent = '🤔 Was war der Denkfehler?';
|
||
introEl.textContent = 'Warum passt die alte US-Pyramide nicht mehr zu dem, was wir heute wissen?';
|
||
detail.textContent = 'Lies den Text oben — und vergleiche dann die beiden Pyramiden.';
|
||
noteEl.textContent = 'Quellen: USDA Food Guide Pyramid (1992) · Österreichische Ernährungspyramide 2024 · DGE-Empfehlungen 2024.';
|
||
return;
|
||
}
|
||
|
||
const view = VIEWS[key];
|
||
svg.style.display = '';
|
||
fehler.style.display = 'none';
|
||
titleEl.textContent = view.title;
|
||
introEl.textContent = view.intro;
|
||
noteEl.textContent = view.note;
|
||
detail.textContent = 'Tippe auf eine Stufe der Pyramide.';
|
||
drawPyramid(view);
|
||
}
|
||
|
||
root.querySelectorAll('[data-view]').forEach(b =>
|
||
b.addEventListener('click', () => setView(b.dataset.view)));
|
||
|
||
setView('us');
|
||
}
|
||
|
||
// Registry — Key entspricht key_slug aus DB.
|
||
window.GlossarExperiments = Object.assign(window.GlossarExperiments || {}, {
|
||
'ernaehrungspyramide': foodPyramid
|
||
});
|
||
})();
|