1. for every question, I see there are 4 text options below the question

src/components/chatbot/chat-message.tsx

@@ -4,9 +4,8 @@
 import type { ChatMessage as ChatMessageType } from '@/types';
 import { cn } from '@/lib/utils';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { Bot, User, AlertTriangle, CheckCircle, Info } from 'lucide-react'; // Using Info or AlertTriangle for explanation
+import { Bot, User, AlertTriangle, CheckCircle, Info } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
 import { MCQOptions } from './mcq-options';
 import type { GenerateMCQOutput } from '@/ai/flows/generate-mcq';
 
@@ -15,25 +14,26 @@ interface ChatMessageProps {
   activeMCQ?: GenerateMCQOutput | null;
   isAwaitingActiveMCQAnswer?: boolean;
   onOptionSelectActiveMCQ?: (option: string, isCorrect: boolean) => void;
+  incorrectAttemptsForMCQ?: string[];
 }
 
 export function ChatMessage({ 
   message, 
   activeMCQ, 
   isAwaitingActiveMCQAnswer, 
-  onOptionSelectActiveMCQ 
+  onOptionSelectActiveMCQ,
+  incorrectAttemptsForMCQ,
 }: ChatMessageProps) {
   const isUser = message.sender === 'user';
   const Icon = isUser ? User : Bot;
   const avatarFallback = isUser ? 'U' : 'AI';
 
-  // Determine if this message is the currently active MCQ being interacted with
   const isCurrentActiveMCQMessage = 
     message.type === 'mcq' && 
     message.mcq &&
     activeMCQ && 
-    message.mcq.mcq === activeMCQ.mcq && // Compare question text
-    JSON.stringify(message.mcq.options) === JSON.stringify(activeMCQ.options); // Compare options
+    message.mcq.mcq === activeMCQ.mcq &&
+    JSON.stringify(message.mcq.options) === JSON.stringify(activeMCQ.options);
 
   return (
     <div
@@ -60,18 +60,14 @@ export function ChatMessage({
           {message.type === 'mcq' && message.mcq && (
             <div className="space-y-2">
               <p className="font-medium">{message.mcq.mcq}</p>
-              {message.mcq.options.map((option, index) => (
-                <Badge key={index} variant="secondary" className="mr-2 mt-1 block w-fit py-1 px-2.5">
-                  {String.fromCharCode(65 + index)}. {option}
-                </Badge>
-              ))}
-              {/* Render options if this message is the active MCQ and we are awaiting an answer for it */}
+              {/* Removed Badge rendering of options here */}
               {isCurrentActiveMCQMessage && onOptionSelectActiveMCQ && (
                 <div className="mt-3">
                   <MCQOptions
                     mcq={message.mcq}
                     onOptionSelect={onOptionSelectActiveMCQ}
-                    disabled={!isAwaitingActiveMCQAnswer} // Controls interactability
+                    disabled={!isAwaitingActiveMCQAnswer}
+                    incorrectAttempts={incorrectAttemptsForMCQ || []}
                   />
                 </div>
               )}
@@ -79,13 +75,11 @@ export function ChatMessage({
           )}
           {message.type === 'text' && message.text && <p>{message.text}</p>}
           {message.type === 'feedback' && message.text && (
-            <div className="flex items-start"> {/* items-start for better alignment with multi-line text */}
+            <div className="flex items-start">
               {message.isCorrect ? (
                 <CheckCircle className="mr-2 h-5 w-5 shrink-0 text-green-500 mt-0.5" />
               ) : (
-                // Using Info icon for explanations, or AlertTriangle for a slightly stronger visual cue for "incorrect"
                 <Info className="mr-2 h-5 w-5 shrink-0 text-blue-500 mt-0.5" /> 
-                // <AlertTriangle className="mr-2 h-5 w-5 shrink-0 text-orange-500 mt-0.5" />
               )}
               <p className="flex-1">{message.text}</p>
             </div>

src/components/chatbot/chatbot.tsx

@@ -11,7 +11,7 @@ import { explainIncorrectAnswer } from '@/ai/flows/explain-incorrect-answer-flow
 import type { ChatMessage as ChatMessageType } from '@/types';
 import { ChatMessage } from './chat-message';
 import { useToast } from '@/hooks/use-toast';
-import { Send, RotateCcw } from 'lucide-react';
+import { Send } from 'lucide-react';
 
 interface ChatbotProps {
   imageDataUri: string | null;
@@ -24,6 +24,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
   const [isLoading, setIsLoading] = useState(false);
   const [isAwaitingAnswer, setIsAwaitingAnswer] = useState(false);
   const [hasAnsweredCorrectly, setHasAnsweredCorrectly] = useState(false);
+  const [incorrectAttempts, setIncorrectAttempts] = useState<string[]>([]);
   const scrollAreaRef = useRef<HTMLDivElement>(null);
   const { toast } = useToast();
 
@@ -40,6 +41,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
     setIsAwaitingAnswer(false);
     setHasAnsweredCorrectly(false);
     setCurrentMCQ(null); 
+    setIncorrectAttempts([]); // Reset incorrect attempts for the new question
 
     try {
       const mcqData = await generateMCQ({ imageDataUri });
@@ -92,7 +94,7 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
   const handleOptionSelect = async (option: string, isCorrect: boolean) => {
     if (!currentMCQ) return;
 
-    setIsAwaitingAnswer(false); // Disable options while processing
+    setIsAwaitingAnswer(false); 
 
     addMessage({
       sender: 'user',
@@ -103,7 +105,9 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
     if (isCorrect) {
       addMessage({ sender: 'ai', type: 'feedback', text: "That's correct! Well done.", isCorrect: true });
       setHasAnsweredCorrectly(true);
+      setIncorrectAttempts([]); // Clear attempts for next question
     } else {
+      setIncorrectAttempts(prev => [...prev, option]); // Add to incorrect attempts
       setIsLoading(true);
       try {
         const explanationResult = await explainIncorrectAnswer({
@@ -117,11 +121,10 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
         console.error("Error fetching explanation:", error);
         const errorMsg = error instanceof Error ? error.message : "An unknown error occurred";
         addMessage({ sender: 'ai', type: 'error', text: `Sorry, I couldn't explain that. ${errorMsg}` });
-        // Fallback to simpler incorrect message if explanation fails
         addMessage({ sender: 'ai', type: 'feedback', text: "That's not quite right. Try again!", isCorrect: false });
       }
-      setHasAnsweredCorrectly(false); // Ensure it's false
-      setIsAwaitingAnswer(true); // Re-enable options for the same MCQ
+      setHasAnsweredCorrectly(false);
+      setIsAwaitingAnswer(true); 
       setIsLoading(false);
     }
   };
@@ -137,12 +140,25 @@ export function Chatbot({ imageDataUri, journeyTitle }: ChatbotProps) {
             <ChatMessage 
               key={msg.id} 
               message={msg}
-              activeMCQ={currentMCQ} // Pass currentMCQ to determine if this message is the active one
-              isAwaitingActiveMCQAnswer={msg.type === 'mcq' && isAwaitingAnswer && !hasAnsweredCorrectly} // Options active if it's an MCQ, awaiting answer, and not yet correct
+              activeMCQ={currentMCQ}
+              isAwaitingActiveMCQAnswer={
+                msg.type === 'mcq' && 
+                currentMCQ?.mcq === msg.mcq?.mcq && // Check if this message IS the active MCQ
+                JSON.stringify(currentMCQ?.options) === JSON.stringify(msg.mcq?.options) &&
+                isAwaitingAnswer && 
+                !hasAnsweredCorrectly
+              }
               onOptionSelectActiveMCQ={handleOptionSelect}
+              incorrectAttemptsForMCQ={
+                 msg.type === 'mcq' && 
+                 currentMCQ?.mcq === msg.mcq?.mcq && 
+                 JSON.stringify(currentMCQ?.options) === JSON.stringify(msg.mcq?.options) 
+                 ? incorrectAttempts 
+                 : [] // Pass incorrect attempts only for the active MCQ message
+              }
             />
           ))}
-          {isLoading && !currentMCQ && messages[messages.length -1]?.type !== 'feedback' && ( // Show loading skeleton only if not loading an explanation
+          {isLoading && !currentMCQ && messages[messages.length -1]?.type !== 'feedback' && (
             <div className="flex items-start space-x-3">
                <Skeleton className="h-8 w-8 rounded-full" />
                <div className="space-y-2">

src/components/chatbot/mcq-options.tsx

@@ -9,34 +9,34 @@ import { useState, useEffect } from 'react';
 interface MCQOptionsProps {
   mcq: GenerateMCQOutput;
   onOptionSelect: (option: string, isCorrect: boolean) => void;
-  disabled: boolean;
+  disabled: boolean; // Overall disabled state (e.g., AI thinking, or question answered correctly)
+  incorrectAttempts: string[]; // Options that were tried and are incorrect
 }
 
-export function MCQOptions({ mcq, onOptionSelect, disabled }: MCQOptionsProps) {
+export function MCQOptions({ mcq, onOptionSelect, disabled, incorrectAttempts }: MCQOptionsProps) {
   const [selectedOption, setSelectedOption] = useState<string | null>(null);
 
-  // Reset selectedOption when the options become enabled again (for retries)
   useEffect(() => {
     if (!disabled) {
-      setSelectedOption(null);
+      setSelectedOption(null); // Reset visual selection if options become active again (e.g., for a retry)
     }
   }, [disabled]);
 
   const handleSelect = (option: string) => {
-    // Prevent selection if already disabled (isAwaitingAnswer=false) or an option is already visually selected for this attempt
-    if (disabled || selectedOption) return; 
+    if (disabled || selectedOption || incorrectAttempts.includes(option)) return; 
 
-    setSelectedOption(option); // Visually mark selection for this attempt
+    setSelectedOption(option); 
     const isCorrect = option === mcq.correctAnswer;
-    onOptionSelect(option, isCorrect); // Parent handles disabling/enabling for next state
+    onOptionSelect(option, isCorrect);
   };
 
   return (
     <div className="mt-4 space-y-2">
       {mcq.options.map((option, index) => {
         const isCurrentlySelectedVisual = selectedOption === option;
-        // Visual feedback for correct/incorrect is handled by AI's response message, not here.
-        // These buttons are just for selection.
+        const isIncorrectlyAttempted = incorrectAttempts.includes(option);
+        
+        constisDisabledForThisOption = disabled || isIncorrectlyAttempted || (selectedOption !== null && selectedOption !== option);
 
         return (
           <Button
@@ -44,12 +44,13 @@ export function MCQOptions({ mcq, onOptionSelect, disabled }: MCQOptionsProps) {
             variant="outline"
             className={cn(
               'w-full justify-start text-left h-auto py-2.5 px-4 whitespace-normal',
-              isCurrentlySelectedVisual && 'font-semibold bg-accent/50', // Highlight current visual selection
-              disabled && !isCurrentlySelectedVisual && 'opacity-60 cursor-not-allowed', // Dim unselected options if disabled
-              disabled && isCurrentlySelectedVisual && 'opacity-80 cursor-not-allowed' // Slightly less dim for the one that was just clicked
+              isCurrentlySelectedVisual && !isIncorrectlyAttempted && 'font-semibold bg-accent/50', 
+              isIncorrectlyAttempted && 'text-destructive line-through opacity-70 cursor-not-allowed',
+              disabled && !isIncorrectlyAttempted && !isCurrentlySelectedVisual && 'opacity-60 cursor-not-allowed',
+              disabled && isCurrentlySelectedVisual && !isIncorrectlyAttempted && 'opacity-80 cursor-not-allowed'
             )}
             onClick={() => handleSelect(option)}
-            disabled={disabled || (selectedOption !== null && selectedOption !== option)} // Disable other buttons once one is selected for this attempt
+            disabled={isDisabledForThisOption}
             aria-pressed={isCurrentlySelectedVisual}
           >
             <span className="mr-2 font-medium">{String.fromCharCode(65 + index)}.</span>