Update app.py

app.py

@@ -1,6 +1,7 @@
 import os
 import sys
 import re
+import json
 import gradio as gr
 from langchain_openai import ChatOpenAI
 from langgraph.prebuilt import create_react_agent
@@ -40,7 +41,7 @@ BEHAVIOR GUIDELINES:
    (End of your main lesson text)
 
    ---SECTION: SUMMARY---
-   (Provide 3-4 concise bullet points summarizing the key syntax, functions, or concepts learned in this lesson. This acts as a 'Cheat Sheet'.)
+   (Provide 3-4 concise bullet points summarizing the key syntax, functions, or concepts learned in this lesson.)
    
    ---SECTION: VIDEOS---
    (List 2-3 YouTube search queries or URLs relevant to the topic)
@@ -49,25 +50,25 @@ BEHAVIOR GUIDELINES:
    (List 2-3 documentation links or course names, e.g., RealPython, FreeCodeCamp)
 
    ---SECTION: QUIZ---
-   (Create 2 short multiple-choice question. Use HTML <details> and <summary> tags to hide the answer. Example: 
-   **Question**: ...
-   - A) ...
-   - B) ...
-   <details><summary>👀 Reveal Answers</summary>Correct is A because...</details>)
+   Provide a valid JSON list of exactly 2 objects. Do not use Markdown code blocks.
+   [
+     {"question": "Question text here?", "options": ["Option A", "Option B", "Option C"], "correct_answer": "Option A", "explanation": "Brief explanation why."}
+   ]
 """
 
 def parse_agent_response(full_text):
     """
     Robust parsing using Regex to handle LLM formatting inconsistencies.
-    Splits the single LLM response into 5 UI components: Chat, Summary, Videos, Articles, Quiz.
+    Splits the single LLM response into UI components.
+    Returns: chat_content, summary, videos, articles, quiz_data (list of dicts)
     """
     chat_content = full_text
     
-    # Default values for "waiting" state
+    # Default values
     summary = "### 📝 Key Takeaways\n*Ask a coding question to get a cheat sheet!*"
     videos = "### 📺 Recommended Videos\n*Ask a coding question to get recommendations!*"
     articles = "### 📚 Articles & Courses\n*Ask a coding question to get resources!*"
-    quiz = "### 🧠 Quick Quiz\n*Ask a coding question to take a quiz!*"
+    quiz_data = [] # Empty list for interactive quiz
 
     # Regex patterns
     summary_pattern = r"---SECTION:\s*SUMMARY\s*---"
@@ -76,10 +77,9 @@ def parse_agent_response(full_text):
     quiz_pattern = r"---SECTION:\s*QUIZ\s*---"
 
     try:
-        # 1. Extract Chat vs Summary (first split)
+        # 1. Extract Chat vs Summary
         split_summary = re.split(summary_pattern, full_text, flags=re.IGNORECASE, maxsplit=1)
         
-        # If SUMMARY is found
         if len(split_summary) > 1:
             chat_content = split_summary[0].strip()
             remaining_after_chat = split_summary[1]
@@ -115,27 +115,28 @@ def parse_agent_response(full_text):
                             articles = f"### 📚 Articles & Courses\n{article_content}"
                     
                     if len(split_quiz) > 1:
-                        quiz_content = split_quiz[1].strip()
-                        if quiz_content:
-                            quiz = f"### 🧠 Quick Quiz\n{quiz_content}"
-        
+                        quiz_raw_json = split_quiz[1].strip()
+                        # Attempt to parse JSON
+                        try:
+                            # Clean up potential markdown code blocks if the LLM ignored instructions
+                            clean_json = quiz_raw_json.replace("```json", "").replace("```", "").strip()
+                            quiz_data = json.loads(clean_json)
+                        except json.JSONDecodeError as e:
+                            print(f"Quiz JSON Error: {e}")
+                            quiz_data = [] # Fallback
 
         elif "---SECTION: VIDEOS---" in full_text:
+             # Fallback parsing
              split_video_fallback = re.split(video_pattern, full_text, flags=re.IGNORECASE, maxsplit=1)
              chat_content = split_video_fallback[0].strip()
 
-
     except Exception as e:
         print(f"Parsing error: {e}")
         chat_content = full_text
 
-    return chat_content, summary, videos, articles, quiz
+    return chat_content, summary, videos, articles, quiz_data
 
 async def run_tutor_dashboard(user_message, model_id):
-    """
-    Main function to run the agent loop.
-    Accepts 'model_id' to select the LLM dynamically.
-    """
     server_params = StdioServerParameters(
         command=sys.executable, 
         args=["server.py"], 
@@ -147,7 +148,6 @@ async def run_tutor_dashboard(user_message, model_id):
             await session.initialize()
             tools = await load_mcp_tools(session)
             
-            # Use the selected model_id
             llm = ChatOpenAI(
                 api_key=NEBIUS_API_KEY,
                 base_url=NEBIUS_BASE_URL,
@@ -168,6 +168,27 @@ async def run_tutor_dashboard(user_message, model_id):
             
             return parse_agent_response(final_text)
 
+def check_quiz(ans1, ans2, quiz_data):
+    """Checks user answers against the quiz data."""
+    if not quiz_data or len(quiz_data) < 2:
+        return "��️ Quiz not loaded.", "⚠️ Quiz not loaded."
+    
+    # Check Q1
+    q1 = quiz_data[0]
+    if ans1 == q1["correct_answer"]:
+        res1 = f"✅ Correct! {q1['explanation']}"
+    else:
+        res1 = f"❌ Incorrect. The correct answer was **{q1['correct_answer']}**.\n\n{q1['explanation']}"
+    
+    # Check Q2
+    q2 = quiz_data[1]
+    if ans2 == q2["correct_answer"]:
+        res2 = f"✅ Correct! {q2['explanation']}"
+    else:
+        res2 = f"❌ Incorrect. The correct answer was **{q2['correct_answer']}**.\n\n{q2['explanation']}"
+        
+    return gr.update(value=res1, visible=True), gr.update(value=res2, visible=True)
+
 # --- Gradio Dashboard UI ---
 theme = gr.themes.Soft(
     primary_hue="slate",
@@ -194,6 +215,9 @@ custom_css = """
 """
 
 with gr.Blocks(title="AI Python Tutor", theme=theme, fill_height=True, css=custom_css) as demo:
+    # State to hold quiz data
+    quiz_state = gr.State([])
+
     # --- Header with Model Selector ---
     with gr.Row(variant="compact", elem_classes="header-row"):
         with gr.Column(scale=1):
@@ -202,7 +226,7 @@ with gr.Blocks(title="AI Python Tutor", theme=theme, fill_height=True, css=custo
         with gr.Column(scale=0, min_width=250):
             model_selector = gr.Dropdown(
                 choices=AVAILABLE_MODELS,
-                value=AVAILABLE_MODELS[0], # Default to 20b
+                value=AVAILABLE_MODELS[0], 
                 label="Select Model",
                 show_label=False,
                 container=True,
@@ -236,7 +260,6 @@ with gr.Blocks(title="AI Python Tutor", theme=theme, fill_height=True, css=custo
                 )
                 submit_btn = gr.Button("🚀 Start", variant="primary", scale=1)
 
-            # Quick Examples
             gr.Examples(
                 examples=[
                     "Hello! I'm new to Python.",
@@ -247,9 +270,9 @@ with gr.Blocks(title="AI Python Tutor", theme=theme, fill_height=True, css=custo
                 inputs=msg
             )
 
-        # Right Column: Resources Dashboard (Side View - Visible by default)
+        # Right Column: Resources Dashboard (Side View)
         with gr.Column(scale=2) as right_col:
-            gr.Markdown("### 🎒 Learning Dashboard:", elem_classes="tight-header")
+            gr.Markdown("### 🎒 Learning Dashboard", elem_classes="tight-header")
             
             summary_box_side = gr.Markdown(value="### 📝 Key Takeaways\n*Ask a topic to get a cheat sheet!*", elem_classes="tight-content")
             
@@ -261,12 +284,23 @@ with gr.Blocks(title="AI Python Tutor", theme=theme, fill_height=True, css=custo
                     article_box_side = gr.Markdown(value="### Articles & Docs\n*Ask a topic to see reading materials!*")
                 
                 with gr.TabItem("🧠 Quiz"):
-                    quiz_box_side = gr.Markdown(value="### Knowledge Check\n*Ask a topic to unlock the quiz!*")
+                    # Interactive Quiz UI (Side)
+                    q1_text_side = gr.Markdown("*Quiz will appear here...*")
+                    q1_radio_side = gr.Radio(choices=[], label="Select Answer")
+                    q1_result_side = gr.Markdown(visible=False)
+                    
+                    gr.Markdown("---")
+                    
+                    q2_text_side = gr.Markdown("")
+                    q2_radio_side = gr.Radio(choices=[], label="Select Answer")
+                    q2_result_side = gr.Markdown(visible=False)
+                    
+                    check_btn_side = gr.Button("✅ Check Answers", variant="secondary")
 
-    # Bottom Row: Resources Dashboard (Bottom View - Hidden by default)
+    # Bottom Row: Resources Dashboard (Focus Mode View)
     with gr.Row(visible=False) as bottom_dashboard:
         with gr.Column():
-            gr.Markdown("### 🎒 Learning Dashboard:")
+            gr.Markdown("### 🎒 Learning Dashboard")
             
             summary_box_bottom = gr.Markdown(value="### 📝 Key Takeaways\n*Ask a topic to get a cheat sheet!*")
             
@@ -278,44 +312,76 @@ with gr.Blocks(title="AI Python Tutor", theme=theme, fill_height=True, css=custo
                     article_box_bottom = gr.Markdown(value="### Articles & Docs\n*Ask a topic to see reading materials!*")
                 
                 with gr.TabItem("🧠 Quiz"):
-                    quiz_box_bottom = gr.Markdown(value="### Knowledge Check\n*Ask a topic to unlock the quiz!*")
+                    # Interactive Quiz UI (Bottom) - Mirroring functionality
+                    q1_text_bottom = gr.Markdown("*Quiz will appear here...*")
+                    q1_radio_bottom = gr.Radio(choices=[], label="Select Answer")
+                    q1_result_bottom = gr.Markdown(visible=False)
+                    
+                    gr.Markdown("---")
+                    
+                    q2_text_bottom = gr.Markdown("")
+                    q2_radio_bottom = gr.Radio(choices=[], label="Select Answer")
+                    q2_result_bottom = gr.Markdown(visible=False)
+                    
+                    check_btn_bottom = gr.Button("✅ Check Answers", variant="secondary")
 
     # --- Interaction Logic ---
     async def respond(user_message, history, model_id):
         if history is None: history = []
         
-        # Immediate user update
         history.append({"role": "user", "content": user_message})
-        # Placeholder for AI
         history.append({"role": "assistant", "content": f"Thinking (using {model_id})..."}) 
         
-        # Yield placeholders to ALL output boxes (Side AND Bottom)
-        # We now have 5 outputs per view (Chat + 4 tabs)
-        # Output order: Chat, Summary, Videos, Articles, Quiz (x2 for layouts)
-        yield history, "", "", "", "", "", "", "", "", ""
+        # Yield placeholders
+        # Outputs: History, Chatbox, Side boxes, Bottom boxes, QUIZ STATE, Quiz Inputs (Side x2, Bottom x2), Quiz Texts (Side x2, Bottom x2)
+        # We need to yield updates for EVERYTHING.
+        # Simplified: We yield empty strings/defaults for now.
+        yield history, "", "", "", "", [], \
+              gr.update(), gr.update(), gr.update(), gr.update(), \
+              gr.update(), gr.update(), gr.update(), gr.update(), \
+              "", "", "", "", \
+              gr.update(), gr.update(), gr.update(), gr.update(), \
+              gr.update(), gr.update(), gr.update(), gr.update()
         
-        # Run Agent with SELECTED MODEL
-        chat_text, summary_text, video_text, article_text, quiz_text = await run_tutor_dashboard(user_message, model_id)
+        chat_text, summary_text, video_text, article_text, quiz_data = await run_tutor_dashboard(user_message, model_id)
         
-        # Update AI response
         history[-1]["content"] = chat_text
         
-        # Yield final content to ALL output boxes
-        yield history, "", summary_text, video_text, article_text, quiz_text, summary_text, video_text, article_text, quiz_text
+        # Prepare Quiz UI updates
+        if quiz_data and len(quiz_data) >= 2:
+            q1 = quiz_data[0]
+            q2 = quiz_data[1]
+            
+            # Common updates for both views
+            q1_t = f"### 1. {q1['question']}"
+            q1_c = q1['options']
+            q2_t = f"### 2. {q2['question']}"
+            q2_c = q2['options']
+            
+            # Reset results and set values
+            q_upd = [
+                gr.update(value=q1_t), gr.update(choices=q1_c, value=None, interactive=True), gr.update(value="", visible=False),
+                gr.update(value=q2_t), gr.update(choices=q2_c, value=None, interactive=True), gr.update(value="", visible=False)
+            ]
+        else:
+            # Empty updates if no quiz
+            q_upd = [gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), gr.update()]
+
+        # Yield final content
+        # Note: We duplicate the quiz updates for Side and Bottom views
+        yield history, "", summary_text, video_text, article_text, quiz_data, \
+              q_upd[0], q_upd[1], q_upd[2], q_upd[3], q_upd[4], q_upd[5], \
+              summary_text, video_text, article_text, \
+              q_upd[0], q_upd[1], q_upd[2], q_upd[3], q_upd[4], q_upd[5]
 
     # --- Focus Mode Logic ---
     is_fullscreen = gr.State(False)
 
     def toggle_fullscreen(current_state):
         new_state = not current_state
-        # If new_state is True (Fullscreen): Hide side col, Show bottom row
-        # If False (Normal): Show side col, Hide bottom row
-        
         side_visible = not new_state
         bottom_visible = new_state
-        
         btn_text = "↩ Exit Focus" if new_state else "⛶ Focus Mode"
-        
         return new_state, gr.Column(visible=side_visible), gr.Row(visible=bottom_visible), btn_text
 
     fullscreen_btn.click(
@@ -324,10 +390,36 @@ with gr.Blocks(title="AI Python Tutor", theme=theme, fill_height=True, css=custo
         outputs=[is_fullscreen, right_col, bottom_dashboard, fullscreen_btn]
     )
 
+    # --- Quiz Button Logic ---
+    # Side View Check
+    check_btn_side.click(
+        check_quiz,
+        inputs=[q1_radio_side, q2_radio_side, quiz_state],
+        outputs=[q1_result_side, q2_result_side]
+    )
+    
+    # Bottom View Check
+    check_btn_bottom.click(
+        check_quiz,
+        inputs=[q1_radio_bottom, q2_radio_bottom, quiz_state],
+        outputs=[q1_result_bottom, q2_result_bottom]
+    )
+
+    # Output List Mapping (Order is critical for the 'respond' function)
+    # 1. Chatbot, 2. Msg
+    # 3. Side Summary, 4. Side Video, 5. Side Article
+    # 6. Quiz State
+    # 7-12. Side Quiz Components: Q1 Text, Q1 Radio, Q1 Result, Q2 Text, Q2 Radio, Q2 Result
+    # 13. Bottom Summary, 14. Bottom Video, 15. Bottom Article
+    # 16-21. Bottom Quiz Components: (Same order as Side)
+    
     outputs_list = [
         chatbot, msg, 
-        summary_box_side, video_box_side, article_box_side, quiz_box_side, 
-        summary_box_bottom, video_box_bottom, article_box_bottom, quiz_box_bottom
+        summary_box_side, video_box_side, article_box_side, 
+        quiz_state,
+        q1_text_side, q1_radio_side, q1_result_side, q2_text_side, q2_radio_side, q2_result_side,
+        summary_box_bottom, video_box_bottom, article_box_bottom,
+        q1_text_bottom, q1_radio_bottom, q1_result_bottom, q2_text_bottom, q2_radio_bottom, q2_result_bottom
     ]
 
     submit_btn.click(