davidkertzscher/eis-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Quiz: Rueckblick zeigt tatsaechlich gegebene Antworten

Browse source
This commit is contained in:
David Kertzscher 2026-06-03 13:04:51 +00:00
parent 6b632de293
commit 7bdacc903c
2 changed files with 40 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
css/style.css
View file

@ -3929,3 +3929,22 @@ body.dark .rb-nr { color: #f9a8d4; }
.quiz-rueckblick-item { grid-template-columns: 1.2rem 1fr; } .quiz-rueckblick-item { grid-template-columns: 1.2rem 1fr; }
.rb-richtig { grid-column: 2; } .rb-richtig { grid-column: 2; }
} }
/* Quiz Rückblick – falsche Antwort mit Korrektur */
.rb-falsch-wrap {
display: flex;
flex-direction: column;
gap: 0.15rem;
text-align: right;
}
.rb-falsch {
color: #dc2626;
font-weight: 600;
}
.rb-richtig-klein {
color: #16a34a;
font-size: 0.8rem;
font-weight: 600;
}
body.dark .rb-falsch { color: #fca5a5; }
body.dark .rb-richtig-klein { color: #86efac; }

25
js/quiz.js
View file

@ -81,6 +81,7 @@
let rundenFragen = []; // die 3 gezogenen Fragen dieser Runde let rundenFragen = []; // die 3 gezogenen Fragen dieser Runde
let aktuelleIdx = 0; // welche Frage gerade angezeigt wird let aktuelleIdx = 0; // welche Frage gerade angezeigt wird
let punkte = 0; let punkte = 0;
let gegebeneAntworten = []; // gespeicherte Antworten des Nutzers
/* ═══════════════════════════════════════════════════════════════════════ /* ═══════════════════════════════════════════════════════════════════════
Utility Utility
@ -118,6 +119,7 @@
rundenFragen = zieheZufallsFragen(ALLE_FRAGEN, FRAGEN_PRO_RUNDE); rundenFragen = zieheZufallsFragen(ALLE_FRAGEN, FRAGEN_PRO_RUNDE);
aktuelleIdx = 0; aktuelleIdx = 0;
punkte = 0; punkte = 0;
gegebeneAntworten = [];
container.innerHTML = ''; container.innerHTML = '';
zeigeAktuelleFrageOderAuswertung(); zeigeAktuelleFrageOderAuswertung();
} }
@ -226,6 +228,9 @@
if (richtigGeantwortet) punkte++; if (richtigGeantwortet) punkte++;
// Gegebene Antwort speichern
gegebeneAntworten.push({ gewaehlt, richtig, korrekt: richtigGeantwortet });
// Alle Buttons deaktivieren + einfärben // Alle Buttons deaktivieren + einfärben
btnGruppe.querySelectorAll('.quiz-antwort-btn').forEach(function (btn) { btnGruppe.querySelectorAll('.quiz-antwort-btn').forEach(function (btn) {
btn.disabled = true; btn.disabled = true;
@ -300,12 +305,24 @@
// Gespeicherte Antworten auslesen und anzeigen // Gespeicherte Antworten auslesen und anzeigen
rundenFragen.forEach(function (f, i) { rundenFragen.forEach(function (f, i) {
const antwortDaten = gegebeneAntworten[i];
const item = document.createElement('div'); const item = document.createElement('div');
item.className = 'quiz-rueckblick-item'; item.className = 'quiz-rueckblick-item';
item.innerHTML =
'<span class="rb-nr">' + (i + 1) + '.</span>' + if (antwortDaten.korrekt) {
'<span class="rb-frage">' + f.frage + '</span>' + item.innerHTML =
'<span class="rb-richtig">✅ ' + f.richtig + '</span>'; '<span class="rb-nr">' + (i + 1) + '.</span>' +
'<span class="rb-frage">' + f.frage + '</span>' +
'<span class="rb-richtig">✅ ' + antwortDaten.gewaehlt + '</span>';
} else {
item.innerHTML =
'<span class="rb-nr">' + (i + 1) + '.</span>' +
'<span class="rb-frage">' + f.frage + '</span>' +
'<span class="rb-falsch-wrap">' +
'<span class="rb-falsch">❌ ' + antwortDaten.gewaehlt + '</span>' +
'<span class="rb-richtig-klein">✅ ' + antwortDaten.richtig + '</span>' +
'</span>';
}
rueckblick.appendChild(item); rueckblick.appendChild(item);
}); });
screen.appendChild(rueckblick); screen.appendChild(rueckblick);