Adminator/geograsim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bewertungs-Vorschau: EINE Skala-Darstellung + 4-stufige Triage

Browse Source 
- Doppeldarstellung (Beispiel-Balken + Legende) zu EINER Tabelle
  zusammengefuehrt: Farbe + Bereich + Label + Beispiel-Balken je Zeile.
  Beispielwert = Bereichsschwelle (90/80/60/50), nicht willkuerlich.
- Triage jetzt 4 Felder an denselben Farbgrenzen:
  <50 Foerdern (Hilfe) / 50-79 Begleiten / 80-89 Laeuft gut /
  >=90 Fordern (herausfordern). Styleguide + Preview angeglichen.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Thomas
2026-08-25 02:51:50 +02:00
parent 0a6fa2172f
commit 3bc0f418be
2 changed files with 41 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App/admin-styleguide.html
+9 -17
View File
@@ -199,30 +199,22 @@
<!-- ============================================================== -->
<div class="card" id="leistung">
<div class="card-h">Leistungs-Skala — 5 Stufen (Standard für ALLE Sims)</div>
<p class="lead">EINE Skala für Schülerleistung überall im Programm: Prozentwert (0–100) + dünner Balken in der Ampelfarbe. <strong>Sterne entfallen.</strong> Die Grenzen 50 / 65 sind zugleich die Triage-Grenzen, damit Balkenfarbe und Feld (Fördern/Begleiten/Läuft gut) immer übereinstimmen. Quelle in Code: <code>pctColor()</code> = <code>_tagTraffic()</code>.</p>
<div class="swatches">
<div class="sw" data-copy-text="#1f7a3d"><div class="sw-color" style="background:#1f7a3d"></div><div class="sw-meta"><strong>≥ 90 % · sehr gut</strong><span>#1f7a3d</span></div></div>
<div class="sw" data-copy-text="#7cb342"><div class="sw-color" style="background:#7cb342"></div><div class="sw-meta"><strong>80–89 % · gut</strong><span>#7cb342</span></div></div>
<div class="sw" data-copy-text="#f9c33b"><div class="sw-color" style="background:#f9c33b"></div><div class="sw-meta"><strong>60–79 % · solide</strong><span>#f9c33b</span></div></div>
<div class="sw" data-copy-text="#ef8b2c"><div class="sw-color" style="background:#ef8b2c"></div><div class="sw-meta"><strong>50–59 % · wackelig</strong><span>#ef8b2c</span></div></div>
<div class="sw" data-copy-text="#d8453a"><div class="sw-color" style="background:#d8453a"></div><div class="sw-meta"><strong>&lt; 50 % · kritisch</strong><span>#d8453a</span></div></div>
</div>
<h3>Standard-Anzeige: Prozent + Balken</h3>
<div style="display:flex;gap:1.6rem;flex-wrap:wrap;margin:.5rem 0 1.2rem">
<div style="min-width:74px"><div style="font-weight:800;color:#1f7a3d;font-size:.95rem">95 %</div><div style="margin-top:3px;height:6px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:95%;background:#1f7a3d"></div></div></div>
<div style="min-width:74px"><div style="font-weight:800;color:#7cb342;font-size:.95rem">84 %</div><div style="margin-top:3px;height:6px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:84%;background:#7cb342"></div></div></div>
<div style="min-width:74px"><div style="font-weight:800;color:#f9c33b;font-size:.95rem">68 %</div><div style="margin-top:3px;height:6px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:68%;background:#f9c33b"></div></div></div>
<div style="min-width:74px"><div style="font-weight:800;color:#ef8b2c;font-size:.95rem">54 %</div><div style="margin-top:3px;height:6px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:54%;background:#ef8b2c"></div></div></div>
<div style="min-width:74px"><div style="font-weight:800;color:#d8453a;font-size:.95rem">30 %</div><div style="margin-top:3px;height:6px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:30%;background:#d8453a"></div></div></div>
<p class="lead">EINE Skala für Schülerleistung überall im Programm: Prozentwert (0–100) + dünner Balken in der Ampelfarbe. <strong>Sterne entfallen.</strong> Die Grenzen <strong>50 / 80 / 90</strong> sind zugleich die Triage-Grenzen (ab 90 % „Fordern", ab 80 % „Läuft gut", ab 50 % „Begleiten", darunter „Fördern"), damit Balkenfarbe und Feld immer übereinstimmen. Quelle in Code: <code>pctColor()</code> = <code>_tagTraffic()</code>.</p>
<div style="display:grid;grid-template-columns:26px auto 1fr 90px;gap:.55rem 1rem;align-items:center;max-width:520px;margin:.7rem 0 1.3rem;font-size:.85rem">
<span style="width:22px;height:22px;border-radius:6px;background:#1f7a3d"></span><b>≥ 90 %</b><span style="color:#5a5a5a">sehr gut &nbsp;<code style="font-size:.72rem">#1f7a3d</code></span><div><div style="font-weight:800;color:#1f7a3d;font-size:.82rem">90 %</div><div style="margin-top:2px;height:5px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:90%;background:#1f7a3d"></div></div></div>
<span style="width:22px;height:22px;border-radius:6px;background:#7cb342"></span><b>80–89 %</b><span style="color:#5a5a5a">gut &nbsp;<code style="font-size:.72rem">#7cb342</code></span><div><div style="font-weight:800;color:#7cb342;font-size:.82rem">80 %</div><div style="margin-top:2px;height:5px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:80%;background:#7cb342"></div></div></div>
<span style="width:22px;height:22px;border-radius:6px;background:#f9c33b"></span><b>60–79 %</b><span style="color:#5a5a5a">solide &nbsp;<code style="font-size:.72rem">#f9c33b</code></span><div><div style="font-weight:800;color:#f9c33b;font-size:.82rem">60 %</div><div style="margin-top:2px;height:5px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:60%;background:#f9c33b"></div></div></div>
<span style="width:22px;height:22px;border-radius:6px;background:#ef8b2c"></span><b>50–59 %</b><span style="color:#5a5a5a">wackelig &nbsp;<code style="font-size:.72rem">#ef8b2c</code></span><div><div style="font-weight:800;color:#ef8b2c;font-size:.82rem">50 %</div><div style="margin-top:2px;height:5px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:50%;background:#ef8b2c"></div></div></div>
<span style="width:22px;height:22px;border-radius:6px;background:#d8453a"></span><b>&lt; 50 %</b><span style="color:#5a5a5a">kritisch &nbsp;<code style="font-size:.72rem">#d8453a</code></span><div><div style="font-weight:800;color:#d8453a;font-size:.82rem">40 %</div><div style="margin-top:2px;height:5px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden"><div style="height:100%;width:40%;background:#d8453a"></div></div></div>
</div>
<h3>Triage-Felder (aus % × Fleiß)</h3>
<p><strong>&lt; 50 % → Fördern</strong> · <strong>50–79 % → Begleiten</strong> · <strong>≥ 80 % → Läuft gut</strong> — jeweils nur, wenn aktiv gearbeitet wurde, sonst „inaktiv".</p>
<p><strong>&lt; 50 % → Fördern</strong> (Hilfe) · <strong>50–79 % → Begleiten</strong> · <strong>80–89 % → Läuft gut</strong> · <strong>≥ 90 % → Fordern</strong> (mehr herausfordern) — jeweils nur, wenn aktiv gearbeitet wurde, sonst „inaktiv".</p>
<div style="display:flex;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 1rem">
<span style="font-size:.8rem;font-weight:700;color:#b04a3e;background:#f7e2dc;padding:.25rem .7rem;border-radius:12px">Fördern</span>
<span style="font-size:.8rem;font-weight:700;color:#9a6a12;background:#f7edd6;padding:.25rem .7rem;border-radius:12px">Begleiten</span>
<span style="font-size:.8rem;font-weight:700;color:#3a6b3e;background:#dceadd;padding:.25rem .7rem;border-radius:12px">Läuft gut</span>
<span style="font-size:.8rem;font-weight:700;color:#155e2a;background:#c8e6cd;padding:.25rem .7rem;border-radius:12px">Fordern</span>
<span style="font-size:.8rem;font-weight:700;color:#8a8a8a;background:#efeee8;padding:.25rem .7rem;border-radius:12px">inaktiv</span>
</div>