Quiz: Rueckblick zeigt tatsaechlich gegebene Antworten
This commit is contained in:
parent
6b632de293
commit
7bdacc903c
2 changed files with 40 additions and 4 deletions
|
|
@ -3929,3 +3929,22 @@ body.dark .rb-nr { color: #f9a8d4; }
|
|||
.quiz-rueckblick-item { grid-template-columns: 1.2rem 1fr; }
|
||||
.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
25
js/quiz.js
|
|
@ -81,6 +81,7 @@
|
|||
let rundenFragen = []; // die 3 gezogenen Fragen dieser Runde
|
||||
let aktuelleIdx = 0; // welche Frage gerade angezeigt wird
|
||||
let punkte = 0;
|
||||
let gegebeneAntworten = []; // gespeicherte Antworten des Nutzers
|
||||
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
Utility
|
||||
|
|
@ -118,6 +119,7 @@
|
|||
rundenFragen = zieheZufallsFragen(ALLE_FRAGEN, FRAGEN_PRO_RUNDE);
|
||||
aktuelleIdx = 0;
|
||||
punkte = 0;
|
||||
gegebeneAntworten = [];
|
||||
container.innerHTML = '';
|
||||
zeigeAktuelleFrageOderAuswertung();
|
||||
}
|
||||
|
|
@ -226,6 +228,9 @@
|
|||
|
||||
if (richtigGeantwortet) punkte++;
|
||||
|
||||
// Gegebene Antwort speichern
|
||||
gegebeneAntworten.push({ gewaehlt, richtig, korrekt: richtigGeantwortet });
|
||||
|
||||
// Alle Buttons deaktivieren + einfärben
|
||||
btnGruppe.querySelectorAll('.quiz-antwort-btn').forEach(function (btn) {
|
||||
btn.disabled = true;
|
||||
|
|
@ -300,12 +305,24 @@
|
|||
|
||||
// Gespeicherte Antworten auslesen und anzeigen
|
||||
rundenFragen.forEach(function (f, i) {
|
||||
const antwortDaten = gegebeneAntworten[i];
|
||||
const item = document.createElement('div');
|
||||
item.className = 'quiz-rueckblick-item';
|
||||
item.innerHTML =
|
||||
'<span class="rb-nr">' + (i + 1) + '.</span>' +
|
||||
'<span class="rb-frage">' + f.frage + '</span>' +
|
||||
'<span class="rb-richtig">✅ ' + f.richtig + '</span>';
|
||||
|
||||
if (antwortDaten.korrekt) {
|
||||
item.innerHTML =
|
||||
'<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);
|
||||
});
|
||||
screen.appendChild(rueckblick);
|
||||
|
|
|
|||
Loading…
Reference in a new issue