Update app.py

app.py

@@ -741,8 +741,8 @@ def create_quiz_interface():
                     0,
                     "",
                     gr.update(visible=True),
-                    gr.Tabs(selected=2),  # Stay on assessment tab
-                    gr.update(visible=False)  # view_cert_btn visibility
+                    gr.Tabs(selected=2),
+                    gr.update(visible=False)
                 ]
             
             score, passed, feedback = quiz_app.calculate_score(final_answers[:len(questions)])
@@ -751,33 +751,36 @@ def create_quiz_interface():
             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: 5px 0; border-left: 3px solid {color};">
+        <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>
-        """
+        </div>\n"""
             
             result_msg = "🎉 Passed!" if passed else "Please try again"
             if not passed:
-                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>
-        """
+                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>"""
+            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>"""
             
             return [
                 feedback_html,
                 gr.update(visible=True),
                 score,
                 result_msg,
-                gr.update(visible=False),  # Hide question box
-                gr.Tabs(selected=2),       # Stay on assessment tab
-                gr.update(visible=passed)  # Show view certificate button only if passed
+                gr.update(visible=False),
+                gr.Tabs(selected=2),
+                gr.update(visible=passed)
             ]
         # Event handlers