Adminator
1e51ef7def
- Konzept/, didaktik_geografie/, didaktik_simulation/, v2-modules/, v2-platform/ - 12 code-workspace-Files - STATUS-*.md - viele M/D/R-Änderungen an bereits getrackten Files - .gitignore verstärkt: **/.humaninput/, **/secret_keys.txt Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
153 lines
8.7 KiB
HTML
153 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Plattform-Standards · Entwurfswerkzeug</title>
|
|
<style>
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
body{font-family:'Inter',system-ui,sans-serif;background:#f5f2eb;color:#2a2a2a;line-height:1.5;padding:24px;max-width:1100px;margin:0 auto}
|
|
h1{color:#1f4e5a;font-size:1.5rem;margin-bottom:4px}
|
|
.sub{font-size:.82rem;color:#8a8a8a;margin-bottom:14px}
|
|
h2{color:#1f4e5a;font-size:1.15rem;margin:28px 0 8px;padding-bottom:4px;border-bottom:2px solid #4a7c8a}
|
|
h3{color:#4a7c8a;font-size:1rem;margin:18px 0 8px}
|
|
h4{color:#3a3a3a;font-size:.92rem;margin:14px 0 6px;font-weight:700}
|
|
p{margin:8px 0}
|
|
code{background:#f5f2eb;padding:2px 6px;border-radius:3px;font-family:'JetBrains Mono',Consolas,monospace;font-size:.85em}
|
|
pre{background:#1f2a30;color:#e8e4d8;padding:14px 18px;border-radius:8px;overflow:auto;font-family:'JetBrains Mono',Consolas,monospace;font-size:.82rem;line-height:1.5;margin:10px 0}
|
|
pre code{background:transparent;color:inherit;padding:0;font-size:inherit}
|
|
a{color:#1f4e5a}
|
|
.demo{background:#fff;border:1px solid #e0ddd4;border-radius:6px;padding:14px 18px;margin:10px 0}
|
|
.demo b{color:#1f4e5a}
|
|
.ok-box{background:#dff0e6;border-left:4px solid #5a8a5e;padding:10px 14px;margin:10px 0;border-radius:0 6px 6px 0;font-size:.88rem}
|
|
.warn-box{background:#fff7e0;border-left:4px solid #d2a24c;padding:10px 14px;margin:10px 0;border-radius:0 6px 6px 0;font-size:.88rem}
|
|
table{width:100%;border-collapse:collapse;font-size:.88rem;background:#fff;border-radius:6px;overflow:hidden;margin:10px 0}
|
|
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid #e0ddd4;vertical-align:top}
|
|
th{background:#1f4e5a;color:#fff;font-weight:600;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em}
|
|
tr:last-child td{border-bottom:none}
|
|
/* Demo: real Glossar-Tooltip-Klasse wie in Prod */
|
|
.ggs-g{cursor:help;border-bottom:1px dashed currentColor;text-decoration:none;color:inherit;background:rgba(0,0,0,.02);padding:0 2px;border-radius:2px}
|
|
.ggs-g:hover{background:rgba(31,75,55,.10);border-bottom-style:solid}
|
|
/* einheitliches Entwurfswerkzeug-Menü */
|
|
.top-nav{background:#fff;border:1px solid #e0ddd4;border-radius:8px;padding:10px 14px;margin-bottom:18px;font-size:.86rem;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
|
|
.top-nav strong{color:#1f4e5a}
|
|
.top-nav a{text-decoration:none;padding:5px 11px;border-radius:6px;color:#1f4e5a}
|
|
.top-nav a:hover{background:#f5f2eb}
|
|
.top-nav a.active{background:#1f4e5a;color:#fff}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<nav class="top-nav">
|
|
<strong>🛠 Entwurfswerkzeug</strong>
|
|
<a href="index.html">Übersicht</a>
|
|
<a href="../entwurf.html">Entwurf</a>
|
|
<a href="../review.html">Review</a>
|
|
<a href="accounts.html">🔑 Accounts</a>
|
|
<a href="standards.html" class="active">📐 Standards</a>
|
|
<a href="legacy/" style="color:#6b6448">📂 legacy/</a>
|
|
<a href="toDelete/" style="color:#9c4d2e">📂 toDelete/</a>
|
|
<a href="../../App/admin-sitemap.html" target="_blank">📊 Sitemap</a>
|
|
</nav>
|
|
|
|
<h1>📐 Plattform-Standards</h1>
|
|
<p class="sub">UI-Patterns, die in allen Sims gleich aussehen + funktionieren sollen. Pflegt Atlas, hier dokumentiert.</p>
|
|
|
|
<!-- ============================ -->
|
|
<h2>🏷️ Glossar-Tooltip-Pattern</h2>
|
|
<p>Bei Fachbegriffen in Sim-Texten: kleines Popup mit Kurzerklärung + Link zum vollen Glossar-Eintrag. Erprobt seit Heli + Klima 2D/3D.</p>
|
|
|
|
<h3>So sieht's aus</h3>
|
|
<div class="demo">
|
|
Das ist ein Beispieltext mit einem
|
|
<span class="ggs-g" data-glossar="welthandel">Welthandel</span>-Begriff drin
|
|
und auch <span class="ggs-g" data-glossar="klimazone">Klimazone</span> ist klickbar.
|
|
Beim Klick öffnet sich rechts unter dem Begriff ein kleiner Popup mit Definition.
|
|
</div>
|
|
|
|
<h3>Markup-Standard</h3>
|
|
<pre><code><span class="ggs-g" data-glossar="welthandel">Welthandel</span></code></pre>
|
|
|
|
<p>Regel: <code>data-glossar</code>-Attribut hält den <code>key_slug</code> des Glossar-Eintrags. Die CSS-Klasse <code>ggs-g</code> sorgt für die gestrichelte Unterlinie + Hover-Effekt + ist der Trigger für den JS-Handler.</p>
|
|
|
|
<h3>Einbindung im Sim-Wrapper (PHP)</h3>
|
|
<pre><code>// in App/pages/<sim>.php nach dem Live-Heartbeat-Script:
|
|
$glossarScript = '<script src="' . BASE_PATH . '/assets/js/glossar-tooltip.js" defer></script>'
|
|
. '<script>window.addEventListener("DOMContentLoaded",function(){'
|
|
. 'if(window.GlossarTooltip)GlossarTooltip.init({apiBase:' . json_encode(BASE_PATH . '/api') . ',moduleId:"<sim-slug>"});'
|
|
. '});</script>';
|
|
$html = str_replace('</body>', $glossarScript . "\n</body>", $html);</code></pre>
|
|
|
|
<h3>API der Lib</h3>
|
|
<table>
|
|
<thead><tr><th>Funktion</th><th>Zweck</th></tr></thead>
|
|
<tbody>
|
|
<tr><td><code>GlossarTooltip.init({apiBase, moduleId, fallback})</code></td><td>Aktiviert das Pattern auf der Seite. Lädt die Glossar-Snippets pro Modul via API-Call <code>/api/glossar.php?module=<moduleId></code>.</td></tr>
|
|
<tr><td><code>GlossarTooltip.addFallback(key, {title, text})</code></td><td>Für Begriffe ohne DB-Eintrag (oder bei Offline-Demo): lokales Snippet hinzufügen.</td></tr>
|
|
<tr><td><code>GlossarTooltip.markup(label, slug)</code></td><td>Hilfsfunktion für dynamisch generierte HTML-Strings: liefert das fertige <code><span></code>-Markup.</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h3>Wo schon im Einsatz</h3>
|
|
<table>
|
|
<thead><tr><th>Sim</th><th>Status</th><th>Pattern-Variante</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>Heli</td><td>✓ aktiv</td><td>eigene <code>heli-glossar-term</code>-Klasse + lokale JS-Implementierung (Vorbild für das Pattern)</td></tr>
|
|
<tr><td>Klima 2D/3D</td><td>✓ aktiv</td><td>eigene Klima-Variante</td></tr>
|
|
<tr><td>Weltküche</td><td>✓ seit 2026-06-08</td><td><b>Plattform-Standard via <code>/assets/js/glossar-tooltip.js</code></b></td></tr>
|
|
<tr><td>Andere Sims</td><td>⏳ ausstehend</td><td>Migration auf Plattform-Lib empfohlen (siehe „Migrations-Plan" unten)</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="ok-box">
|
|
<b>Plattform-Lib:</b> <code>App/assets/js/glossar-tooltip.js</code> (Stand 2026-06-08).
|
|
Pure Vanilla-JS, kein Framework, mobile-/iPad-tauglich. CSS wird automatisch injiziert.
|
|
</div>
|
|
|
|
<h3>Migrations-Plan für andere Sims</h3>
|
|
<ol style="margin:6px 0 10px 24px">
|
|
<li>Im jeweiligen Wrapper (<code>App/pages/<sim>.php</code>) das Script einbinden (Snippet oben).</li>
|
|
<li>Eigene Glossar-CSS-Klassen (<code>.heli-glossar-term</code>, <code>.klima-glossar-term</code> usw.) durch <code>ggs-g</code> ersetzen.</li>
|
|
<li>Eigene JS-Click-Handler entfernen — die Plattform-Lib übernimmt.</li>
|
|
<li>Optional: lokale Fallback-Snippets via <code>GlossarTooltip.addFallback()</code> nachreichen.</li>
|
|
</ol>
|
|
|
|
<div class="warn-box">
|
|
<b>Wichtig:</b> Beim Migrieren NICHTS löschen, bevor das neue Pattern getestet ist. Erst neuen Code dazu, beide laufen lassen, dann altes raus.
|
|
</div>
|
|
|
|
<!-- ============================ -->
|
|
<h2>🎵 Audio-Signal „Atlas fertig"</h2>
|
|
<p>Atlas spielt das MP3 <code>App/sims/heli/sounds/dev/atlas-fertig.mp3</code> ab — IMMER wenn der Ball bei Thomas liegt (Aufgabe fertig ODER warten auf Genehmigung). Details: <code>memory/feedback_atlas_fertig_audio.md</code>.</p>
|
|
|
|
<!-- ============================ -->
|
|
<h2>📦 Sim-Wrapper-Standard</h2>
|
|
<p>Jede Sim hat einen <code>App/pages/<slug>.php</code>-Wrapper:</p>
|
|
<ul style="margin:6px 0 10px 24px">
|
|
<li>Lädt Plattform-Session-Kontext (<code>WK_SESSION_ID</code>, <code>WK_STUDENT_NAME</code>, <code>WK_CLASS_ID</code>)</li>
|
|
<li>Injiziert <code>BASE_PATH</code> als <code>window.<SIM>_BASE</code> + <code>window.<SIM>_API_BASE</code></li>
|
|
<li>Hängt <code>live-client.js</code> + <code>glossar-tooltip.js</code> vor <code></body></code></li>
|
|
<li>Setzt <code>Cache-Control: no-store</code> (game.html-Updates wirken sofort)</li>
|
|
<li>Biegt Asset-Pfade um: <code>preg_replace</code> auf <code>href="assets/..."</code> und <code>src="assets/..."</code></li>
|
|
</ul>
|
|
|
|
<!-- ============================ -->
|
|
<h2>🌍 GGS_LIVE_STATE-Hook</h2>
|
|
<p>Jede Sim definiert <code>window.GGS_LIVE_STATE = function(){…}</code> → liefert State-Snapshot für Lehrer-Live-Cockpit. Mindestens:</p>
|
|
<pre><code>{
|
|
phase: 'browsing' | 'recipe' | 'researching' | …,
|
|
score: 0,
|
|
completed: 0, // erledigte Aufgaben/Gerichte
|
|
completedTotal: 30, // max
|
|
badgesEarned: 0,
|
|
badgesTotal: 10,
|
|
levelWon: false
|
|
}</code></pre>
|
|
<p>Der Live-Heartbeat schickt das alle 4 s an <code>/api/live.php</code>.</p>
|
|
|
|
<footer style="margin:32px 0 24px;text-align:center;font-size:.75rem;color:#8a8a8a">
|
|
Liegt unter <code>.dontDeploy/entwurfswerkzeug/standards.html</code> · wird nicht deployed.
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|