From edc5279237305af2683c01300dc3d8063aff307c Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sun, 28 Jun 2026 08:28:36 -0700
Subject: [PATCH] fix: Update quiz options to distinguish between selected
 answers and missed correct answers

---
 src/components/quizzes/QuizViewer.tsx | 33 +++++++++++++++++++--------
 1 file changed, 24 insertions(+), 9 deletions(-)

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 = (
+                    <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 {
                   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 ${
                       isSelected && isSubmitted && opt.isCorrect ? 'border-success bg-success' :
                       isSelected && isSubmitted && !opt.isCorrect ? 'border-error bg-error' :
-                      isSubmitted && opt.isCorrect ? 'border-success bg-success' :
-                      isSelected ? 'border-primary bg-primary' : 'border-border bg-bg-surface'
+                      isSelected && !isSubmitted ? 'border-primary bg-primary' : 
+                      'border-border bg-bg-surface'
                     }`}>
                       {isSelected && (
                         <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>
-                      )}
-                      {!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" />
+                          {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" />
+                          )}
                         </svg>
                       )}
                     </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">
                     {opt.text}
                   </div>
+                  {rightIcon && (
+                    <div className="flex-shrink-0 pl-2">
+                      {rightIcon}
+                    </div>
+                  )}
                 </div>
               );
             })}