Update app.py

app.py

@@ -128,7 +128,8 @@ def check_answer(state, user_answer):
     return result_text + "\n" + difficulty_update, is_correct
 
 # -----------------------------
-# 7. Build the Gradio Interface with a Hip, Rainbow Theme and Fireworks Effects
+# 7. Build the Gradio Interface with a Hip, Rainbow Theme
+#    Display a confetti GIF for correct answers and a red X GIF for wrong answers.
 # -----------------------------
 custom_css = """
 body {
@@ -175,8 +176,7 @@ with gr.Blocks(css=custom_css) as demo:
     user_answer = gr.Textbox(label="Your Answer")
     submit_button = gr.Button("Submit Answer")
     result_output = gr.Textbox(label="Result", interactive=False)
-    # New HTML output to display fireworks or celebration visuals.
-    fireworks_output = gr.HTML(label="Celebration", value="")
+    feedback_gif_output = gr.HTML(label="Celebration / Error", value="")
     
     def update_difficulty_label(state):
         return f"**Current Level**: {state['difficulty']} (Score: {state['score']})"
@@ -187,33 +187,38 @@ with gr.Blocks(css=custom_css) as demo:
     def on_generate_question(state):
         question = generate_question(state)
         difficulty_text = update_difficulty_label(state)
-        # Clear fireworks when a new challenge starts.
+        # Clear any previous GIF when a new challenge starts.
         return question, difficulty_text, ""
     
     generate_button.click(
         fn=on_generate_question, 
         inputs=state, 
-        outputs=[question_output, difficulty_label, fireworks_output]
+        outputs=[question_output, difficulty_label, feedback_gif_output]
     )
     
     def on_submit_answer(user_answer, state):
         feedback, is_correct = check_answer(state, user_answer)
         difficulty_text = update_difficulty_label(state)
         if is_correct:
-            # Fireworks effect: using an embedded GIF.
-            fireworks_html = """
+            # Confetti GIF for correct answers
+            gif_html = """
             <div style="text-align: center;">
-                <img src="https://media.giphy.com/media/3o6Zt481isNVuQI1l6/giphy.gif" alt="Fireworks!" style="width: 300px;"/>
+                <img src="https://media.giphy.com/media/l4KhQo2MESJkc6QbS/giphy.gif" alt="Confetti!" style="width: 300px;"/>
             </div>
             """
         else:
-            fireworks_html = ""
-        return feedback, difficulty_text, fireworks_html
+            # Red X or "Nope" GIF for incorrect answers
+            gif_html = """
+            <div style="text-align: center;">
+                <img src="https://media.giphy.com/media/hPPx8yk3Bmqys/giphy.gif" alt="Incorrect!" style="width: 200px;"/>
+            </div>
+            """
+        return feedback, difficulty_text, gif_html
     
     submit_button.click(
         fn=on_submit_answer, 
         inputs=[user_answer, state], 
-        outputs=[result_output, difficulty_label, fireworks_output]
+        outputs=[result_output, difficulty_label, feedback_gif_output]
     )
     
 demo.launch()