Übersicht-Feinschliff + Idle-Fairness
- Überschrift „Klassenübersicht", Sektion „Empfohlene Aktivität für dich." - Volle Legende (Gradient-Balken, Ampelpunkte, Beispiel-Sparkline) - 4b-Testdaten: jede Triage-Karte besetzt (Beteiligen/Begleiten/Fördern/Fordern/ Bestätigen), Verlauf in den letzten 10 Wochen inkl. steigender Fälle - live-client.js: Idle-Fenster 90s→5min (Lesen/Denken nicht bestrafen) + Tab-Sichtbarkeit blendet echtes Weg-Sein aus Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+13
-5
@@ -2114,6 +2114,9 @@ var IV_CSS = ''
|
||||
+ '.iv-calm{background:#fff;border:1px solid var(--ivline);border-radius:12px;padding:11px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}.iv-calm .iv-dot{width:9px;height:9px;border-radius:50%;background:var(--ivg)}.iv-calm b{font-weight:750}.iv-calm .iv-names{font-size:.8rem;color:var(--ivmut)}'
|
||||
+ '.iv-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 24px;background:#fff;border:1px solid var(--ivline);border-radius:12px;padding:14px 16px;margin-top:6px;font-size:.74rem;color:var(--ivmut)}.iv-legend b{color:#2f3a34}'
|
||||
+ '.iv-lgdot{display:inline-block;width:11px;height:11px;border-radius:50%;vertical-align:middle;margin:0 4px}'
|
||||
+ '.iv-lgrow{display:flex;align-items:center;gap:8px;margin-top:5px}'
|
||||
+ '.iv-lgbar{width:56px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--ivr),var(--ivy),var(--ivg))}'
|
||||
+ '.iv-lgv{display:inline-flex;align-items:flex-end;gap:2px;height:14px}.iv-lgv i{width:4px;border-radius:1px}'
|
||||
+ '@media (prefers-reduced-motion:reduce){.iv-dotA{animation:none!important}}';
|
||||
|
||||
function ivInjectCss(){ if(!document.getElementById('iv-css')){ var s=document.createElement('style'); s.id='iv-css'; s.textContent=IV_CSS; document.head.appendChild(s); } }
|
||||
@@ -2197,7 +2200,7 @@ function ivBuildOverview(cockpit, weeks, studentsCount, matrix){
|
||||
var simTotal=0; ((matrix&&matrix.students)||[]).forEach(function(s){ simTotal+=(matrix.totals[s.id]||{}).plays||0; });
|
||||
|
||||
var h='<div class="iv-wrap">';
|
||||
h+='<div class="iv-h1">Klassenübersicht für didaktische Intervention</div>';
|
||||
h+='<div class="iv-h1">Klassenübersicht</div>';
|
||||
// Stat-Karten
|
||||
h+='<div class="iv-stats">';
|
||||
h+='<div class="iv-stat"><span class="iv-lab">Erfolg Klassenschnitt</span><div class="iv-gfx"><span class="iv-ebar2 '+(erfAvg!=null?ivAmp(erfAvg):'')+'"><i style="width:'+(erfAvg||0)+'%"></i></span><span class="iv-bign num" style="font-size:1.05rem">'+(erfAvg!=null?erfAvg:'–')+'</span></div><span class="iv-exp">0 – 100, Mittel über alle Module</span></div>';
|
||||
@@ -2208,7 +2211,7 @@ function ivBuildOverview(cockpit, weeks, studentsCount, matrix){
|
||||
h+='</div>';
|
||||
// Triage
|
||||
var need=groups.support.length+groups.more.length+groups.work.length+groups.good.length+groups.idle.length;
|
||||
h+='<div class="iv-sec">Braucht mein Zutun<span>'+need+' von '+studentsCount+'</span></div><div class="iv-grid">';
|
||||
h+='<div class="iv-sec">Empfohlene Aktivität für dich.<span>'+need+' von '+studentsCount+'</span></div><div class="iv-grid">';
|
||||
['support','more','work','good','idle'].forEach(function(key){
|
||||
var rows=groups[key]; if(!rows.length) return;
|
||||
var m=IV_META[key];
|
||||
@@ -2223,9 +2226,14 @@ function ivBuildOverview(cockpit, weeks, studentsCount, matrix){
|
||||
if(calm.length) h+='<div class="iv-calm"><span class="iv-dot"></span><span><b>Läuft rund — '+calm.length+'</b></span><span class="iv-names">'+calm.map(esc).join(' · ')+'</span></div>';
|
||||
// Legende
|
||||
h+='<div class="iv-legend">'
|
||||
+'<div><b>Erfolg</b> Wie gut die Simulation gemeistert wird, 0 – 100 (grün gut … rot schwach). Normiert zwischen Scheitern und „sehr gut".</div>'
|
||||
+'<div><b>Aktuell aktiv</b> Interaktionen der letzten Minuten, live: <span class="iv-lgdot" style="background:var(--ivg)"></span>aktiv <span class="iv-lgdot" style="background:var(--ivy)"></span>teilweise <span class="iv-lgdot" style="background:var(--ivr)"></span>inaktiv</div>'
|
||||
+'<div><b>Verlauf</b> Aktive Zeit pro Woche, letzte 10 Wochen, gleiches Raster für alle. Farbe = Aktivität der Woche. Rote Kappe über einem Balken = bei 3 h gedeckelt (Ausreißer werden nicht überbewertet).</div>'
|
||||
+'<div><b>Erfolg</b> Wie gut die Simulation gemeistert wird, 0 – 100. Normiert: 0 = gescheitert, 100 = „sehr gut" (90 % des Bestwerts). Beispiel: <b style="color:#2f3a34">56</b> = solide über dem Durchschnitt.'
|
||||
+'<div class="iv-lgrow"><span class="iv-lgbar"></span><span>rot → grün</span></div></div>'
|
||||
+'<div><b>Aktuell aktiv</b> Interaktionen der letzten Minuten, live. Blinkt bei jeder Eingabe.'
|
||||
+'<div class="iv-lgrow"><span class="iv-lgdot" style="background:var(--ivg)"></span>aktiv'
|
||||
+'<span class="iv-lgdot" style="background:var(--ivy)"></span>teilweise'
|
||||
+'<span class="iv-lgdot" style="background:var(--ivr)"></span>inaktiv (10 Min nichts)</div></div>'
|
||||
+'<div><b>Verlauf</b> Aktive Zeit pro Woche, letzte 10 Wochen, gleiches Raster für alle. Farbe = Aktivität der Woche; rote Kappe = bei 3 h gedeckelt.'
|
||||
+'<div class="iv-lgrow"><span class="iv-lgv"><i class="iv-r" style="height:4px"></i><i class="iv-o" style="height:6px"></i><i class="iv-y" style="height:9px"></i><i class="iv-li" style="height:11px"></i><i class="iv-g" style="height:14px"></i></span><span>wenig → viel</span></div></div>'
|
||||
+'</div>';
|
||||
h+='</div>';
|
||||
return h;
|
||||
|
||||
Reference in New Issue
Block a user