'
- + '
'+pct+' %
'
- + '
'
+ return '
'
+ + '
'+pct+' %
'
+ + '
'
+ '
';
}
// Triage aus Leistungs-% × Aktivität — Grenzen = Farbgrenzen, damit Feld ↔ Farbe stimmen.
+// <50 (Rot) → Fördern · 50–79 (Orange+Gelb) → Begleiten · ≥80 (Grün) → Läuft gut.
function triage(pct, active){
if (pct==null || !active) return {lab:'inaktiv', col:'#8a8a8a', bg:'#efeee8'};
if (pct<50) return {lab:'Fördern', col:'#b04a3e', bg:'#f7e2dc'};
- if (pct<65) return {lab:'Begleiten', col:'#9a6a12', bg:'#f7edd6'};
+ if (pct<80) return {lab:'Begleiten', col:'#9a6a12', bg:'#f7edd6'};
return {lab:'Läuft gut', col:'#3a6b3e', bg:'#dceadd'};
}
function triageChip(pct, active){ var t=triage(pct,active); return '
'+t.lab+''; }
@@ -780,20 +782,20 @@ function renderSim(meta){
// Vorschau-Karte: neues Bewertungssystem (Skala · %+Balken · Triage)
function renderPreviewCard(){
- var samples=[92,71,55,40,22];
+ var samples=[95,84,68,54,30];
var h='
';
h+='
🎯 Neues Bewertungssystem — Vorschau zum Abnehmen
';
h+='
Standard überall: ein Leistungs-% (0–100) in der Ampelfarbe + dünner Balken darunter — Sterne fallen weg. Beispiele:
';
h+='
'+samples.map(function(v){return pctBar(v);}).join('')+'
';
h+='
5-stufige Farbskala (= bestehende Tag-Skala):
';
h+='
'
- +[['≥ 80','sehr gut',92],['65–79','gut',71],['50–64','solide',55],['35–49','wackelig',40],['< 35','kritisch',22]]
+ +[['≥ 90','sehr gut',95],['80–89','gut',84],['60–79','solide',68],['50–59','wackelig',54],['< 50','kritisch',30]]
.map(function(b){var c=pctColor(b[2]);return ''+b[0]+' % · '+b[1]+'';}).join('')+'
';
h+='
Triage-Felder aus %×Fleiß — die Grenzen sind die Farbgrenzen, damit Balkenfarbe und Feld immer übereinstimmen:
';
h+='
'
+[22,55,80].map(function(v){return '
'+pctBar(v)+'
'+triageChip(v,true)+'
';}).join('')
+'
'+pctBar(null)+'
'+triageChip(null,false)+'
'+'
';
- h+='
< 50 % → Fördern · 50–64 % → Begleiten · ≥ 65 % → Läuft gut — jeweils nur, wenn aktiv gearbeitet wurde; sonst „inaktiv".
';
+ h+='
< 50 % → Fördern · 50–79 % → Begleiten · ≥ 80 % → Läuft gut — jeweils nur, wenn aktiv gearbeitet wurde; sonst „inaktiv".
';
h+='
Unten hat jede Tabelle die neue Spalte 🎯 Leistung — die Vorschlags-Formel je Sim, auf die Testdaten gerechnet. Bei Busfahrt · Fluggesellschaft · Sonnensystem ist der Wert eine Näherung (Topo-/Erstversuch-Rohwerte fehlen in den Testdaten).
';
h+='
';
return h;
diff --git a/App/admin-styleguide.html b/App/admin-styleguide.html
index 56c6e03..980b115 100644
--- a/App/admin-styleguide.html
+++ b/App/admin-styleguide.html
@@ -64,6 +64,7 @@
🎨 Bildstil
🌿 Bild-Farbpalette
🧩 UI-Farbtokens
+
📊 Leistungs-Skala
📐 Layout & Spacing
🔤 Typografie
🖼️ Bildformate
@@ -195,6 +196,50 @@
+
Leistungs-Skala — 5 Stufen (Standard für ALLE Sims)
+
EINE Skala für Schülerleistung überall im Programm: Prozentwert (0–100) + dünner Balken in der Ampelfarbe. Sterne entfallen. Die Grenzen 50 / 65 sind zugleich die Triage-Grenzen, damit Balkenfarbe und Feld (Fördern/Begleiten/Läuft gut) immer übereinstimmen. Quelle in Code: pctColor() = _tagTraffic().
+
+
+
+
+
50–59 % · wackelig#ef8b2c
+
+
+
+
Standard-Anzeige: Prozent + Balken
+
+
+
Triage-Felder (aus % × Fleiß)
+
< 50 % → Fördern · 50–79 % → Begleiten · ≥ 80 % → Läuft gut — jeweils nur, wenn aktiv gearbeitet wurde, sonst „inaktiv".
+
+ Fördern
+ Begleiten
+ Läuft gut
+ inaktiv
+
+
+
CSS-Variablen
+
--ggs-perf-5: #1f7a3d; /* ≥ 90 % sehr gut */
+--ggs-perf-4: #7cb342; /* 80–89 % gut */
+--ggs-perf-3: #f9c33b; /* 60–79 % solide */
+--ggs-perf-2: #ef8b2c; /* 50–59 % wackelig */
+--ggs-perf-1: #d8453a; /* < 50 % kritisch */
+/* Triage */
+--ggs-triage-foerdern: #b04a3e;
+--ggs-triage-begleiten: #9a6a12;
+--ggs-triage-gut: #3a6b3e;
+--ggs-triage-inaktiv: #8a8a8a;
+
Vorschau der Zuordnung je Sim: Lehrer-View Parameter-Überblick.
+
Layout & Spacing
diff --git a/App/teacher.html b/App/teacher.html
index 5a5ce88..872a1af 100644
--- a/App/teacher.html
+++ b/App/teacher.html
@@ -624,14 +624,7 @@ function _liveBar(val, min, max, goodWhen, dec) {
if (val == null || isNaN(val)) return '
—';
var span = (max - min) || 1;
var pct = Math.max(0, Math.min(100, ((val - min) / span) * 100));
- var c;
- if (goodWhen === 'low') {
- c = pct <= 33 ? '#5a8a5e' : pct <= 66 ? '#c9913a' : '#c07a6b';
- } else if (goodWhen === 'mid') {
- c = '#7a7a7a';
- } else {
- c = pct >= 60 ? '#5a8a5e' : pct >= 30 ? '#c9913a' : '#c07a6b';
- }
+ var c = _liveBarColor(pct, goodWhen);
var disp = (dec != null) ? Number(val).toFixed(dec) : Math.round(val);
return ''
+ '
'
@@ -645,9 +638,9 @@ function _liveBar(val, min, max, goodWhen, dec) {
// Farbwahl nach „gut wenn" (aus _liveBar extrahiert) — für die Mini-Balken.
function _liveBarColor(pct, goodWhen) {
pct = Math.max(0, Math.min(100, pct||0));
- if (goodWhen === 'low') return pct <= 33 ? '#5a8a5e' : pct <= 66 ? '#c9913a' : '#c07a6b';
if (goodWhen === 'mid') return '#9a9a9a';
- return pct >= 60 ? '#5a8a5e' : pct >= 30 ? '#c9913a' : '#c07a6b';
+ // EINE Skala (_pctColor). „Niedrig ist gut" invertiert, damit Grün weiter „gut" heißt.
+ return _pctColor(goodWhen === 'low' ? 100 - pct : pct);
}
// Mini-Balken UNTER der Zahl (Cockpit „Aktuell"). pct 0 – 100.
function _liveMiniBar(pct, color) {
@@ -656,6 +649,58 @@ function _liveMiniBar(pct, color) {
+ ' ';
}
+// ===== EINHEITLICHE LEISTUNGS-SKALA (Styleguide „Leistungs-Skala", 5 Stufen) =====
+// EINE Farbfunktion für Schülerleistung überall. Grenzen 50/65 = Triage-Grenzen.
+function _pctColor(v) {
+ v = Math.max(0, Math.min(100, v || 0));
+ // ≥90 Dunkelgrün · ≥80 Hellgrün · ≥60 Gelb · ≥50 Orange · <50 Rot
+ return v >= 90 ? '#1f7a3d' : v >= 80 ? '#7cb342' : v >= 60 ? '#f9c33b' : v >= 50 ? '#ef8b2c' : '#d8453a';
+}
+// Standard-Anzeige: Prozent in Ampelfarbe + dünner Balken darunter.
+function _pctBar(pct) {
+ if (pct == null || isNaN(pct)) return '