diff --git a/css/style.css b/css/style.css index d92c0a7..83b251f 100644 --- a/css/style.css +++ b/css/style.css @@ -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; } diff --git a/js/quiz.js b/js/quiz.js index c95366d..7b90fbe 100644 --- a/js/quiz.js +++ b/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 = - '' + (i + 1) + '.' + - '' + f.frage + '' + - '✅ ' + f.richtig + ''; + + if (antwortDaten.korrekt) { + item.innerHTML = + '' + (i + 1) + '.' + + '' + f.frage + '' + + '✅ ' + antwortDaten.gewaehlt + ''; + } else { + item.innerHTML = + '' + (i + 1) + '.' + + '' + f.frage + '' + + '' + + '❌ ' + antwortDaten.gewaehlt + '' + + '✅ ' + antwortDaten.richtig + '' + + ''; + } rueckblick.appendChild(item); }); screen.appendChild(rueckblick);