From fc433edf4fc4a11a5461b2b828ebdfe9c7475e79 Mon Sep 17 00:00:00 2001
From: Elijah <elijah.kuntz@gmail.com>
Date: Sat, 27 Jun 2026 20:28:38 -0700
Subject: [PATCH] feat: Add Correct/Incorrect badge to rationale

---
 src/components/quizzes/QuizViewer.tsx | 34 +++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/components/quizzes/QuizViewer.tsx b/src/components/quizzes/QuizViewer.tsx
index f348fbe..dec1689 100644
--- a/src/components/quizzes/QuizViewer.tsx
+++ b/src/components/quizzes/QuizViewer.tsx
@@ -358,16 +358,40 @@ export function QuizViewer({ quiz, retakeIds, isShared = false, onFinished }: Qu
           </div>
 
           {/* Rationale shown after submission */}
-          {isSubmitted && (
-            <div className="mt-8 bg-bg-callout border border-primary/20 rounded-xl p-5 animate-slide-up">
-              <h4 className="text-sm font-bold text-text-heading uppercase tracking-wider mb-2">Rationale</h4>
-              <div className="markdown-content text-sm text-text-body">
+          {isSubmitted && (() => {
+            const formattedQ = {
+              id: currentQ.id,
+              type: currentQ.type as "MULTIPLE_CHOICE" | "SATA",
+              options: currentQ.options,
+            };
+            const qScore = scoreQuestion(formattedQ, currentSelections);
+            let badgeText = "Incorrect";
+            let badgeColor = "bg-error text-white";
+            
+            if (qScore === 1) {
+              badgeText = "Correct";
+              badgeColor = "bg-success text-white";
+            } else if (qScore > 0) {
+              badgeText = "Partially Correct";
+              badgeColor = "bg-amber-500 text-white";
+            }
+
+            return (
+              <div className="mt-8 bg-bg-callout border border-primary/20 rounded-xl p-5 animate-slide-up">
+                <div className="flex items-center gap-3 mb-3">
+                  <h4 className="text-sm font-bold text-text-heading uppercase tracking-wider">Rationale</h4>
+                  <span className={`px-2.5 py-0.5 rounded-full text-xs font-bold uppercase tracking-wider ${badgeColor}`}>
+                    {badgeText}
+                  </span>
+                </div>
+                <div className="markdown-content text-sm text-text-body">
                 <ReactMarkdown remarkPlugins={[remarkGfm]}>
                   {currentQ.rationale}
                 </ReactMarkdown>
               </div>
             </div>
-          )}
+            );
+          })()}
         </div>
 
         {/* Action bar */}