Update app.py

app.py

@@ -38,13 +38,20 @@ class QuizApp:
                 "correct_answer": 0
             }}
         ]
+        Keep all options concise (10 words or less each).
         """
         
         try:
             response = client.chat.completions.create(
                 messages=[
-                    {"role": "system", "content": "You are a quiz generator. Create clear questions with concise answer options."},
-                    {"role": "user", "content": prompt}
+                    {
+                        "role": "system",
+                        "content": "You are a quiz generator. Create clear questions with concise answer options."
+                    },
+                    {
+                        "role": "user",
+                        "content": prompt
+                    }
                 ],
                 model="llama-3.2-3b-preview",
                 temperature=0.3,
@@ -53,11 +60,17 @@ class QuizApp:
             
             response_text = response.choices[0].message.content.strip()
             response_text = response_text.replace("```json", "").replace("```", "").strip()
-            response_text = response_text[response_text.find("["):response_text.rfind("]")+1]
             
+            start_idx = response_text.find("[")
+            end_idx = response_text.rfind("]")
+            
+            if start_idx == -1 or end_idx == -1:
+                raise ValueError("No valid JSON array found in response")
+                
+            response_text = response_text[start_idx:end_idx + 1]
             questions = json.loads(response_text)
-            validated_questions = []
             
+            validated_questions = []
             for q in questions:
                 if not all(key in q for key in ["question", "options", "correct_answer"]):
                     continue
@@ -71,6 +84,9 @@ class QuizApp:
                 }
                 validated_questions.append(clean_q)
             
+            if not validated_questions:
+                raise ValueError("No valid questions after validation")
+                
             self.current_questions = validated_questions[:num_questions]
             return True, self.current_questions
             
@@ -80,11 +96,11 @@ class QuizApp:
 
     def calculate_score(self, answers):
         if not answers or not self.current_questions:
-            return 0, []
+            return 0, None, []
         
         total = len(self.current_questions)
         correct = 0
-        results = []
+        feedback = []
         
         for i, (q, a) in enumerate(zip(self.current_questions, answers)):
             try:
@@ -93,28 +109,38 @@ class QuizApp:
                     is_correct = selected_index == q["correct_answer"]
                     if is_correct:
                         correct += 1
-                    results.append({
+                    feedback.append({
                         "is_correct": is_correct,
+                        "selected": a,
                         "correct_answer": q["options"][q["correct_answer"]]
                     })
                 else:
-                    results.append({
+                    feedback.append({
                         "is_correct": False,
+                        "selected": None,
                         "correct_answer": q["options"][q["correct_answer"]]
                     })
             except (ValueError, TypeError) as e:
                 print(f"Error processing answer {i}: {e}")
-                results.append({
+                feedback.append({
                     "is_correct": False,
+                    "selected": None,
                     "correct_answer": q["options"][q["correct_answer"]]
                 })
         
-        return (correct / total) * 100, results
+        score = (correct / total) * 100
+        passed = score >= 80
+        
+        return score, passed, feedback
+            
 
+# Update the interface functions
 def create_quiz_interface():
     quiz_app = QuizApp()
     
     with gr.Blocks(title="CertifyMe AI", theme=gr.themes.Soft()) as demo:
+        current_questions = gr.State([])
+        
         # Header
         gr.Markdown("""
         # 🎓 CertifyMe AI
@@ -151,130 +177,135 @@ def create_quiz_interface():
             
             # Step 2: Take Assessment
             with gr.Tab("📝 Step 2: Take Assessment") as tab2:
+                feedback_box = gr.Markdown("")
                 question_box = gr.Markdown("")
                 answers = []
-                feedback = []
-                
                 for i in range(5):
-                    radio = gr.Radio(
-                        choices=[],
-                        label=f"Question {i+1}",
-                        visible=False
-                    )
-                    answers.append(radio)
-                    fb = gr.Markdown(visible=False)
-                    feedback.append(fb)
+                    with gr.Group():
+                        radio = gr.Radio(
+                            choices=[],
+                            label=f"Question {i+1}",
+                            visible=False,
+                            interactive=True
+                        )
+                        answers.append(radio)
                 
                 submit_btn = gr.Button("Submit Assessment", variant="primary", size="lg")
-                result_message = gr.Markdown("")
             
             # Step 3: Get Certified
             with gr.Tab("🎓 Step 3: Get Certified") as tab3:
                 score_display = gr.Number(label="Your Score")
-                completion_message = gr.Markdown("")
+                result_message = gr.Markdown("")
                 course_name = gr.Textbox(
                     label="Certification Title",
                     value="Professional Assessment Certification"
                 )
                 certificate_display = gr.Image(label="Your Certificate")
 
-        # Store questions state
-        questions_state = gr.State([])
-        
         def update_questions(text, num_questions):
             if not text.strip():
                 return (
-                    gr.update(value="Please enter content to generate questions."),
-                    *[gr.update(visible=False) for _ in range(5)],  # Radio buttons
-                    *[gr.update(visible=False) for _ in range(5)],  # Feedback
-                    [],  # questions state
-                    1,   # tab index
-                    "Please enter content to generate questions."  # result message
+                    gr.update(value=""),
+                    gr.update(value="⚠️ Please enter some text content to generate questions."),
+                    *[gr.update(visible=False, choices=[]) for _ in range(5)],
+                    [],
+                    gr.update(selected=1)
                 )
             
             success, questions = quiz_app.generate_questions(text, num_questions)
-            if not success:
+            
+            if not success or not questions:
                 return (
-                    gr.update(value="Failed to generate questions. Please try again."),
-                    *[gr.update(visible=False) for _ in range(5)],
-                    *[gr.update(visible=False) for _ in range(5)],
+                    gr.update(value=""),
+                    gr.update(value="❌ Failed to generate questions. Please try again."),
+                    *[gr.update(visible=False, choices=[]) for _ in range(5)],
                     [],
-                    1,
-                    "Failed to generate questions. Please try again."
+                    gr.update(selected=1)
                 )
             
-            # Create question display with embedded radio buttons
-            questions_md = "# 📝 Assessment Questions\n\n"
-            
-            # Update radio buttons and create question display
-            radio_updates = []
-            feedback_updates = []
+            # Create question display
+            questions_html = "# 📝 Assessment Questions\n\n"
+            questions_html += "> Please select one answer for each question.\n\n"
             
+            # Update radio buttons
+            updates = []
             for i, q in enumerate(questions):
-                questions_md += f"### Question {i+1}\n{q['question']}\n\n"
-                radio_updates.append(gr.update(
-                    choices=q["options"],
-                    label=f"Select your answer for Question {i+1}:",
+                questions_html += f"### Question {i+1}\n{q['question']}\n\n"
+                updates.append(gr.update(
                     visible=True,
-                    value=None
+                    choices=q["options"],
+                    value=None,
+                    label=f"Select your answer:"
                 ))
-                feedback_updates.append(gr.update(visible=False, value=""))
             
             # Hide unused radio buttons
             for i in range(len(questions), 5):
-                radio_updates.append(gr.update(visible=False))
-                feedback_updates.append(gr.update(visible=False))
+                updates.append(gr.update(visible=False, choices=[]))
             
             return (
-                gr.update(value=questions_md),
-                *radio_updates,
-                *feedback_updates,
+                gr.update(value=questions_html),
+                gr.update(value=""),
+                *updates,
                 questions,
-                1,
-                ""
+                gr.update(selected=1)
             )
-        
-        def submit_answers(q1, q2, q3, q4, q5, questions):
+
+        def submit_quiz(q1, q2, q3, q4, q5, questions):
             answers = [q1, q2, q3, q4, q5][:len(questions)]
             
             if not all(a is not None for a in answers):
-                return [gr.update() for _ in range(5)], 0, "Please answer all questions before submitting."
-            
-            score, results = quiz_app.calculate_score(answers)
+                return (
+                    gr.update(value="⚠️ Please answer all questions before submitting."),
+                    *[gr.update() for _ in range(5)],
+                    0,
+                    "",
+                    gr.update(selected=1)
+                )
             
-            # Create feedback for each answer
-            feedback_updates = []
-            for i, result in enumerate(results):
-                if result["is_correct"]:
-                    feedback_updates.append(gr.update(
-                        visible=True,
-                        value='<div style="color: green; margin-top: 10px;">✅ Correct!</div>'
-                    ))
-                else:
-                    feedback_updates.append(gr.update(
-                        visible=True,
-                        value=f'<div style="color: red; margin-top: 10px;">❌ Incorrect. Correct answer: {result["correct_answer"]}</div>'
-                    ))
+            score, passed, feedback = quiz_app.calculate_score(answers)
             
-            # Add empty updates for unused feedback slots
-            for _ in range(len(results), 5):
-                feedback_updates.append(gr.update(visible=False))
+            # Create feedback HTML
+            feedback_html = "# Assessment Results\n\n"
+            for i, (q, f) in enumerate(zip(quiz_app.current_questions, feedback)):
+                color = "green" if f["is_correct"] else "red"
+                symbol = "✅" if f["is_correct"] else "❌"
+                feedback_html += f"""
+                ### Question {i+1}
+                {q["question"]}
+                
+                <div style="color: {color}; padding: 10px; margin: 5px 0; border-left: 3px solid {color};">
+                    {symbol} Your answer: {f["selected"]}
+                    {'' if f["is_correct"] else f'<br>Correct answer: {f["correct_answer"]}'}
+                </div>
+                """
             
-            # Create result message
-            if score >= 80:
-                message = f"""
-                ### 🎉 Congratulations!
-                You passed the assessment with a score of {score:.1f}%
-                Your certificate has been generated.
+            # Add result message
+            if passed:
+                feedback_html += f"""
+                <div style="background-color: #e6ffe6; padding: 20px; margin-top: 20px; border-radius: 10px;">
+                    <h3 style="color: #008000;">🎉 Congratulations!</h3>
+                    <p>You passed the assessment with a score of {score:.1f}%</p>
+                    <p>Your certificate has been generated.</p>
+                </div>
                 """
+                result_msg = f"🎉 Congratulations! You passed with {score:.1f}%"
             else:
-                message = f"""
-                ### Please Try Again
-                Your score: {score:.1f}%
-                You need 80% or higher to pass and receive a certificate.
+                feedback_html += f"""
+                <div style="background-color: #ffe6e6; padding: 20px; margin-top: 20px; border-radius: 10px;">
+                    <h3 style="color: #cc0000;">Please Try Again</h3>
+                    <p>Your score: {score:.1f}%</p>
+                    <p>You need 80% or higher to pass and receive a certificate.</p>
+                </div>
                 """
+                result_msg = f"Score: {score:.1f}%. You need 80% to pass."
             
-            return feedback_updates, score, message
+            return (
+                gr.update(value=feedback_html),
+                *[gr.update(visible=False) for _ in range(5)],
+                score,
+                result_msg,
+                gr.update(selected=2)
+            )
         
         # Event handlers
         generate_btn.click(
@@ -282,33 +313,25 @@ def create_quiz_interface():
             inputs=[text_input, num_questions],
             outputs=[
                 question_box,
+                feedback_box,
                 *answers,
-                *feedback,
-                questions_state,
-                gr.State(1),
-                result_message
+                current_questions,
+                tabs
             ]
-        ).then(
-            fn=lambda x: gr.update(selected=x),
-            inputs=gr.State(1),
-            outputs=tabs
         )
         
         submit_btn.click(
-            fn=submit_answers,
-            inputs=[*answers, questions_state],
+            fn=submit_quiz,
+            inputs=[*answers, current_questions],
             outputs=[
-                *feedback,
+                feedback_box,
+                *answers,
                 score_display,
-                result_message
+                result_message,
+                tabs
             ]
-        ).then(
-            fn=lambda x: gr.update(selected=x),
-            inputs=gr.State(2),
-            outputs=tabs
         )
         
-
         
         def generate_certificate(score, name, course_name, company_logo=None, participant_photo=None):
             """