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

Fluss-Endscreen: zwei Felder (Rueckmeldung -> Aktionen) + Badges nebeneinander

Browse Source 
Feld 1 = Rueckmeldung (Sterne/Stats/Badges/Reflexion) mit "Weiter"-Button (erst nach
Reflexions-Antwort aktiv); Feld 2 = "Wie geht's weiter?" (Stufen/Erneut versuchen +
Zurueck zur Startseite). end-badges jetzt display:flex (nebeneinander statt gestapelt).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Thomas
2026-08-24 09:19:10 +02:00
parent 9a1ee0fae1
commit 868cdda276
1 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App/sims/fluss/game.html
+31 -18
View File
@@ -533,29 +533,38 @@
============================================================ -->
<div class="ggs-overlay" id="end-overlay" style="display:none">
<div class="ggs-overlay-card ggs-results">
<div class="ggs-results-icon">🏆</div>
<div class="ggs-results-title" id="end-title">Simulation abgeschlossen!</div>
<div class="ggs-results-subtitle" id="end-subtitle">Du hast den Fluss 100 Jahre lang gemanagt.</div>
<div class="ggs-stars" id="end-stars">
<span class="ggs-star">★</span><span class="ggs-star">★</span><span class="ggs-star">★</span><span class="ggs-star">★</span><span class="ggs-star">★</span>
</div>
<div class="ggs-results-stats" id="end-stats"></div>
<!-- ===== FELD 1: Rückmeldung ===== -->
<div id="end-step1">
<div class="ggs-results-icon">🏆</div>
<div class="ggs-results-title" id="end-title">Simulation abgeschlossen!</div>
<div class="ggs-results-subtitle" id="end-subtitle">Du hast den Fluss 100 Jahre lang gemanagt.</div>
<div class="ggs-stars" id="end-stars">
<span class="ggs-star">★</span><span class="ggs-star">★</span><span class="ggs-star">★</span><span class="ggs-star">★</span><span class="ggs-star">★</span>
</div>
<div class="ggs-results-stats" id="end-stats"></div>
<!-- Verdiente Erfolgs-Badges (6 Slots, leer = ausgegraut) -->
<div class="ggs-badges-earned" id="end-badges" style="justify-content:center;margin:12px 0"></div>
<!-- Verdiente Erfolgs-Badges (nebeneinander, leer = ausgegraut) -->
<div class="ggs-badges-earned" id="end-badges" style="display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0"></div>
<!-- Reflexionsfrage — eine pro Durchgang, Pflicht vor dem Weiter-Button -->
<div class="ggs-reflection" id="end-reflection" style="margin:12px 0 18px">
<div class="ggs-reflection-q" id="end-reflection-q">Was war in diesem Durchgang deine wirksamste Entscheidung?</div>
<div id="end-reflection-options">
<!-- dynamisch befuellt -->
<!-- Reflexionsfrage — Pflicht vor dem Weiter-Button -->
<div class="ggs-reflection" id="end-reflection" style="margin:10px 0 14px">
<div class="ggs-reflection-q" id="end-reflection-q">Was war in diesem Durchgang deine wirksamste Entscheidung?</div>
<div id="end-reflection-options"><!-- dynamisch befuellt --></div>
</div>
<div style="display:flex;justify-content:center">
<button id="end-weiter" class="ggs-btn ggs-btn-primary" disabled
onclick="document.getElementById('end-step1').style.display='none';document.getElementById('end-step2').style.display=''">Weiter →</button>
</div>
</div>
<!-- Aktions-Leiste wird in bootFluss() dynamisch befuellt:
- Klassen-Session (classId): nur "Neu starten" (Stufe bleibt)
- Freie Session: drei Stufen-Buttons zur Auswahl -->
<div id="end-actions" style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap"></div>
<!-- ===== FELD 2: Wie geht's weiter? ===== -->
<div id="end-step2" style="display:none">
<div class="ggs-results-icon">🚀</div>
<div class="ggs-results-title">Wie geht's weiter?</div>
<!-- Aktions-Leiste (Stufen-Auswahl bzw. Erneut versuchen + Zurück zur Startseite) -->
<div id="end-actions" style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap"></div>
</div>
</div>
</div>
@@ -1967,6 +1976,9 @@ function submitReflection(levelNum, question, answer) {
document.getElementById('end-title').textContent = 'Durchgang beendet — 100 Jahre sind um.';
document.getElementById('end-subtitle').textContent = 'Beste Leistung: ' + summary.score + ' / 100';
renderEndActions();
// Zwei-Felder-Endscreen: immer mit Feld 1 (Rückmeldung) starten.
var _s1=document.getElementById('end-step1'), _s2=document.getElementById('end-step2'), _wb=document.getElementById('end-weiter');
if(_s1) _s1.style.display=''; if(_s2) _s2.style.display='none'; if(_wb) _wb.disabled=true;
showOverlay('end-overlay');
if (window.flAudio) flAudio.play(summary.stars >= 3 ? 'level-won' : 'level-lost');
submitAssessment({
@@ -2029,6 +2041,7 @@ function submitReflection(levelNum, question, answer) {
box.querySelectorAll('.ggs-reflection-option').forEach(function(o){ o.classList.remove('selected'); });
row.classList.add('selected');
submitReflection(game.level, question, opt);
var wb = document.getElementById('end-weiter'); if (wb) wb.disabled = false; // erst nach Antwort weiter
});
box.appendChild(row);
});