diff --git a/src/components/quizzes/QuizViewer.tsx b/src/components/quizzes/QuizViewer.tsx index a852093..869d99f 100644 --- a/src/components/quizzes/QuizViewer.tsx +++ b/src/components/quizzes/QuizViewer.tsx @@ -319,13 +319,24 @@ export function QuizViewer({ quiz, retakeIds, isShared = false, onFinished }: Qu {(shuffledOptions[currentQId] || currentQ.options).map((opt) => { const isSelected = currentSelections.includes(opt.id); let stateClass = "border-border-light hover:border-border cursor-pointer"; + let rightIcon = null; if (isSubmitted) { stateClass = "cursor-default opacity-80"; - if (opt.isCorrect) { + if (isSelected && opt.isCorrect) { stateClass = "border-success bg-success-bg text-text-heading"; } else if (isSelected && !opt.isCorrect) { 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 = ( +
+ + + + Correct Answer +
+ ); } else { stateClass = "border-border-light"; } @@ -343,17 +354,16 @@ export function QuizViewer({ quiz, retakeIds, isShared = false, onFinished }: Qu
{isSelected && ( - - - )} - {!isSelected && isSubmitted && opt.isCorrect && ( - - + {isSubmitted && !opt.isCorrect ? ( + + ) : ( + + )} )}
@@ -361,6 +371,11 @@ export function QuizViewer({ quiz, retakeIds, isShared = false, onFinished }: Qu
{opt.text}
+ {rightIcon && ( +
+ {rightIcon} +
+ )} ); })}