Update app.py

app.py

@@ -751,6 +751,7 @@ def create_quiz_interface():
             return gr.Tabs(selected=2)
         
         def on_submit(questions, answers, current_idx, current_answer):
+            """Handle quiz submission with updated styling and logic"""
             final_answers = list(answers)
             if 0 <= current_idx < len(final_answers):
                 final_answers[current_idx] = current_answer
@@ -762,47 +763,65 @@ def create_quiz_interface():
                     0,
                     "",
                     gr.update(visible=True),
-                    gr.Tabs(selected=2),
+                    gr.update(visible=True),
+                    gr.update(visible=False),
+                    gr.update(visible=False),
                     gr.update(visible=False)
                 ]
             
             score, passed, feedback = quiz_app.calculate_score(final_answers[:len(questions)])
             
-            feedback_html = "# Assessment Results\n\n"
+            # Updated feedback HTML with proper font styling
+            feedback_html = """
+            <div style="font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
+                <h1 style="font-size: 24px; font-weight: 600; margin-bottom: 20px;">Assessment Results</h1>
+            """
+            
             for i, (q, f) in enumerate(zip(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: 10px 0; border-left: 3px solid {color}; background-color: {'#f8fff8' if f.is_correct else '#fff8f8'};">
-            {symbol} Your answer: {f.selected or "No answer"}
-            {'' if f.is_correct else f'<br>Correct answer: {f.correct_answer}'}
-        </div>\n"""
+                feedback_html += f"""
+                <div style="margin-bottom: 24px;">
+                    <h3 style="font-size: 18px; font-weight: 500; margin-bottom: 12px;">Question {i+1}</h3>
+                    <p style="font-size: 16px; margin-bottom: 12px;">{q.question}</p>
+                    <div style="color: {color}; padding: 12px; margin: 8px 0; border-left: 3px solid {color}; background-color: {'#f8fff8' if f.is_correct else '#fff8f8'}; font-size: 15px;">
+                        {symbol} Your answer: {f.selected or "No answer"}
+                        {'' if f.is_correct else f'<br><span style="font-weight: 500;">Correct answer:</span> {f.correct_answer}'}
+                    </div>
+                </div>
+                """
             
-            result_msg = "🎉 Passed!" if passed else "Please try again"
-            if not passed:
-                feedback_html += f"""<div style="background-color: #ffe6e6; padding: 20px; margin: 20px 0; border-radius: 10px; border: 1px solid #ffcccc;">
-            <h3 style="color: #cc0000; margin-top: 0;">Please Try Again</h3>
-            <p style="margin: 10px 0;">Your score: {score:.1f}%</p>
-            <p style="margin: 10px 0;">You need 80% or higher to pass and receive a certificate.</p>
-        </div>"""
+            # Add summary box with score
+            if passed:
+                feedback_html += f"""
+                <div style="background-color: #e6ffe6; padding: 20px; margin: 20px 0; border-radius: 10px; border: 1px solid #ccffcc;">
+                    <h3 style="color: #008000; margin: 0 0 12px 0; font-size: 20px;">🎉 Congratulations!</h3>
+                    <p style="margin: 0; font-size: 16px;">You passed with a score of {score:.1f}%</p>
+                </div>
+                """
             else:
-                feedback_html += f"""<div style="background-color: #e6ffe6; padding: 20px; margin: 20px 0; border-radius: 10px; border: 1px solid #ccffcc;">
-            <h3 style="color: #008000; margin-top: 0;">🎉 Congratulations!</h3>
-            <p style="margin: 10px 0;">You passed with a score of {score:.1f}%</p>
-            <p style="margin: 10px 0;">Click "View Certificate" to see your certificate.</p>
-        </div>"""
+                feedback_html += f"""
+                <div style="background-color: #ffe6e6; padding: 20px; margin: 20px 0; border-radius: 10px; border: 1px solid #ffcccc;">
+                    <h3 style="color: #cc0000; margin: 0 0 12px 0; font-size: 20px;">Please Try Again</h3>
+                    <p style="margin: 0; font-size: 16px;">Your score: {score:.1f}% (80% required to pass)</p>
+                </div>
+                """
+            
+            feedback_html += "</div>"
             
             return [
-                feedback_html,
-                gr.update(visible=True),
-                score,
-                result_msg,
-                gr.update(visible=False),
-                gr.Tabs(selected=2),
-                gr.update(visible=passed)
+                feedback_html,                          # feedback_box
+                gr.update(visible=True),               # results_group
+                score,                                 # score_display
+                "🎉 Passed!" if passed else "Please try again",  # result_message
+                gr.update(visible=False),              # question_box
+                gr.update(visible=True),               # reset_btn
+                gr.update(visible=passed),             # view_cert_btn
+                gr.update(visible=not passed),         # back_to_assessment
+                gr.update(visible=False)               # profile_tab
             ]
+
         # Event handlers
        
         generate_btn.click(fn=on_generate_questions, inputs=[text_input, num_questions], outputs=[question_display, current_options, question_counter, question_box, current_questions, current_question_idx, answer_state, tabs, results_group, view_cert_btn]).then(fn=lambda: gr.Tabs(selected=2), outputs=tabs)