Glossar-Qualität Welle 1: Angebot&Nachfrage neu (Kino-Beispiel) + Markt-Widget, DIN-Striche, Fixes

- angebot-nachfrage: kindgerechter Text (20-€-Taschengeld/Kino), kein Lehrplan-Jargon, neues interaktives Markt-Widget (10 Äpfel, Preis-Regler → Gleichgewicht) - beduerfnisse, raumnutzungskonflikt: Lehrplan-Sätze raus, kindgerechter - DIN 5008: Zahlenbereiche programmweit als "5 – 9" (71 Einträge) - Leichte Sprache: falsche Bindestriche gefixt (Infrastruktur, Grundausstattung, …) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-16 02:17:54 +02:00
parent c4276083a2
commit 0febe51685
3 changed files with 184 additions and 0 deletions
@@ -0,0 +1,88 @@
+/**
+ * Glossar-Experimente — Markt & Alltag (kindgerecht).
+ * Ergänzt window.GlossarExperiments via Object.assign (Ladereihenfolge egal).
+ */
+(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;
+  };
+
+  // =====================================================================
+  // Angebot & Nachfrage — der Marktplatz mit 10 Äpfeln
+  // Preis-Regler: viele Käufer bei niedrigem Preis, wenige bei hohem.
+  // Angebot ist fest (10 Äpfel). Wo Käufer = Äpfel, passt der Preis.
+  // =====================================================================
+  function marktplatz(root) {
+    const STOCK = 10; // Angebot: 10 Äpfel am Stand
+    root.innerHTML = `
+      <div class="ge-wrap">
+        <div class="ge-head">
+          <h3>🍎 Der Marktplatz</h3>
+          <p>Am Stand liegen <strong>10 Äpfel</strong>. Stell den Preis ein und schau,
+          wie viele Kinder kaufen wollen. Wo beides zusammenpasst, stimmt der Preis.</p>
+        </div>
+        <svg class="ge-markt-svg" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid meet" aria-hidden="true"></svg>
+        <div class="ge-controls" style="align-items:center;gap:.6rem;flex-wrap:wrap">
+          <label style="font-weight:700">Preis pro Apfel:
+            <input type="range" class="ge-markt-preis" min="20" max="200" step="10" value="100" style="vertical-align:middle">
+          </label>
+          <span class="ge-markt-preis-anz" style="font-weight:800"></span>
+        </div>
+        <div class="ge-gh-pill ge-markt-pill" data-state="now" style="margin-top:.4rem"></div>
+        <p class="ge-note">Modellbeispiel: Die Zahl der Käufer:innen sinkt, wenn der Preis
+        steigt (Nachfrage). Das Angebot bleibt hier gleich (10 Äpfel). Treffen sich beide,
+        ist der Markt im Gleichgewicht – so entsteht in Wirklichkeit der Preis.</p>
+      </div>`;
+
+    const svg = root.querySelector('.ge-markt-svg');
+    const preis = root.querySelector('.ge-markt-preis');
+    const preisAnz = root.querySelector('.ge-markt-preis-anz');
+    const pill = root.querySelector('.ge-markt-pill');
+
+    // Nachfrage-Modell: bei 20 ct wollen 18 Kinder, bei 200 ct nur 2.
+    const kaeuferBei = (ct) => Math.max(0, Math.round(18 - (ct - 20) / 180 * 16));
+
+    function zeichne() {
+      const ct = +preis.value;
+      const wollen = kaeuferBei(ct);
+      const verkauft = Math.min(wollen, STOCK);
+      preisAnz.textContent = (ct / 100).toLocaleString('de-AT', { minimumFractionDigits: 2 }) + ' €';
+
+      while (svg.firstChild) svg.removeChild(svg.firstChild);
+      // Stand oben: 10 Apfel-Plätze, verkaufte ausgegraut
+      svgEl('text', { x: 20, y: 28, 'font-size': 15, 'font-weight': 700, fill: '#2f4f3a' }, svg).textContent = 'Angebot: 10 Äpfel';
+      for (let i = 0; i < STOCK; i++) {
+        const x = 26 + i * 34, y = 45;
+        const sold = i < verkauft;
+        svgEl('circle', { cx: x + 12, cy: y + 12, r: 12, fill: sold ? '#d9d3c0' : '#c0392b', stroke: '#2f4f3a', 'stroke-width': 1.5 }, svg);
+        if (!sold) svgEl('rect', { x: x + 10, y: y - 2, width: 4, height: 6, fill: '#4a7c4e' }, svg);
+      }
+      // Käufer unten: Figuren, die kaufen wollen
+      svgEl('text', { x: 20, y: 138, 'font-size': 15, 'font-weight': 700, fill: '#2f4f3a' }, svg).textContent = 'Wollen kaufen: ' + wollen + ' Kinder';
+      for (let i = 0; i < wollen; i++) {
+        const x = 26 + (i % 10) * 34, y = 155 + Math.floor(i / 10) * 46;
+        const leer = i >= STOCK; // gehen leer aus
+        svgEl('circle', { cx: x + 12, cy: y + 8, r: 7, fill: leer ? '#c98a3a' : '#4a7c8a' }, svg);
+        svgEl('rect', { x: x + 6, y: y + 16, width: 12, height: 16, rx: 4, fill: leer ? '#c98a3a' : '#4a7c8a' }, svg);
+      }
+
+      let state, txt;
+      if (wollen > STOCK) { state = 'now'; txt = '📈 Zu billig: ' + (wollen - STOCK) + ' Kinder gehen leer aus. Es wollen mehr kaufen, als es Äpfel gibt → der Preis steigt.'; }
+      else if (wollen < STOCK) { state = 'now'; txt = '📉 Zu teuer: ' + (STOCK - wollen) + ' Äpfel bleiben liegen. Es gibt mehr Äpfel als Käufer → der Preis sinkt.'; }
+      else { state = 'good'; txt = '🎯 Genau richtig! 10 Käufer für 10 Äpfel. Angebot und Nachfrage sind im Gleichgewicht.'; }
+      pill.dataset.state = state;
+      pill.textContent = txt;
+    }
+    preis.addEventListener('input', zeichne);
+    zeichne();
+  }
+
+  window.GlossarExperiments = Object.assign(window.GlossarExperiments || {}, {
+    'angebot-nachfrage': marktplatz
+  });
+})();