feat: Add Correct/Incorrect badge to rationale

src/components/quizzes/QuizViewer.tsx

@@ -358,16 +358,40 @@ export function QuizViewer({ quiz, retakeIds, isShared = false, onFinished }: Qu
           </div>
 
           {/* Rationale shown after submission */}
-          {isSubmitted && (
+          {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">
-              <h4 className="text-sm font-bold text-text-heading uppercase tracking-wider mb-2">Rationale</h4>
+                <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 */}