Elijah/Study
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

fix: Update quiz options to distinguish between selected answers and missed correct answers
All checks were successful
Automated Container Build / build-and-push (push) Successful in 52s
Details

Browse source
This commit is contained in:
Elijah 2026-06-28 08:28:36 -07:00
parent 464b179df9
commit edc5279237
1 changed files with 24 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/components/quizzes/QuizViewer.tsx
View file

@ -319,13 +319,24 @@ export function QuizViewer({ quiz, retakeIds, isShared = false, onFinished }: Qu
{(shuffledOptions[currentQId] || currentQ.options).map((opt) => { {(shuffledOptions[currentQId] || currentQ.options).map((opt) => {
const isSelected = currentSelections.includes(opt.id); const isSelected = currentSelections.includes(opt.id);
let stateClass = "border-border-light hover:border-border cursor-pointer"; let stateClass = "border-border-light hover:border-border cursor-pointer";
let rightIcon = null;
if (isSubmitted) { if (isSubmitted) {
stateClass = "cursor-default opacity-80"; stateClass = "cursor-default opacity-80";
if (opt.isCorrect) { if (isSelected && opt.isCorrect) {
stateClass = "border-success bg-success-bg text-text-heading"; stateClass = "border-success bg-success-bg text-text-heading";
} else if (isSelected && !opt.isCorrect) { } else if (isSelected && !opt.isCorrect) {
stateClass = "border-error bg-error-bg text-text-heading"; stateClass = "border-error bg-error-bg text-text-heading";
} else if (!isSelected && opt.isCorrect) {
stateClass = "border-success/50 bg-success/5 text-text-heading";
rightIcon = (
<div className="text-success flex items-center gap-1.5 text-sm font-bold">
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
</svg>
Correct Answer
</div>
);
} else { } else {
stateClass = "border-border-light"; stateClass = "border-border-light";
} }
@ -343,17 +354,16 @@ export function QuizViewer({ quiz, retakeIds, isShared = false, onFinished }: Qu
<div className={`w-5 h-5 rounded ${currentQ.type === 'SATA' ? 'border' : 'border rounded-full'} flex items-center justify-center transition-colors ${ <div className={`w-5 h-5 rounded ${currentQ.type === 'SATA' ? 'border' : 'border rounded-full'} flex items-center justify-center transition-colors ${
isSelected && isSubmitted && opt.isCorrect ? 'border-success bg-success' : isSelected && isSubmitted && opt.isCorrect ? 'border-success bg-success' :
isSelected && isSubmitted && !opt.isCorrect ? 'border-error bg-error' : isSelected && isSubmitted && !opt.isCorrect ? 'border-error bg-error' :
isSubmitted && opt.isCorrect ? 'border-success bg-success' : isSelected && !isSubmitted ? 'border-primary bg-primary' :
isSelected ? 'border-primary bg-primary' : 'border-border bg-bg-surface' 'border-border bg-bg-surface'
}`}> }`}>
{isSelected && ( {isSelected && (
<svg className="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{isSubmitted && !opt.isCorrect ? (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M6 18L18 6M6 6l12 12" />
) : (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
</svg>
)} )}
{!isSelected && isSubmitted && opt.isCorrect && (
<svg className="w-3.5 h-3.5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
</svg> </svg>
)} )}
</div> </div>
@ -361,6 +371,11 @@ export function QuizViewer({ quiz, retakeIds, isShared = false, onFinished }: Qu
<div className="flex-1 text-text-body font-medium leading-snug"> <div className="flex-1 text-text-body font-medium leading-snug">
{opt.text} {opt.text}
</div> </div>
{rightIcon && (
<div className="flex-shrink-0 pl-2">
{rightIcon}
</div>
)}
</div> </div>
); );
})} })}