Update src/streamlit_app.py

src/streamlit_app.py

@@ -16,7 +16,7 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Clean, stable CSS without excessive animations
+# COMPLETELY CLEAN CSS - NO ANIMATIONS AT ALL
 st.markdown("""
     <style>
     @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
@@ -58,13 +58,6 @@ st.markdown("""
         border: none;
         font-family: 'Comic Neue', cursive;
         font-weight: bold;
-        transition: all 0.3s ease;
-        box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
-    }
-    
-    .stButton > button:hover {
-        transform: scale(1.05);
-        box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6);
     }
     
     .stTextInput > div > input { 
@@ -75,39 +68,19 @@ st.markdown("""
         font-family: 'Comic Neue', cursive;
     }
     
-    /* Only show animations during celebrations */
-    .celebration-emoji {
-        position: fixed;
-        font-size: 24px;
-        animation: celebrationFall 2s linear forwards;
-        pointer-events: none;
-        z-index: 9999;
-    }
-    
-    @keyframes celebrationFall {
-        to { transform: translateY(100vh) rotate(360deg); opacity: 0; }
-    }
-    
-    .celebration-confetti {
-        position: fixed;
-        width: 12px;
-        height: 12px;
-        animation: celebrationConfetti 2s linear forwards;
-        pointer-events: none;
-        z-index: 9998;
-    }
-    
-    @keyframes celebrationConfetti {
-        to { transform: translateY(100vh) rotate(360deg); opacity: 0; }
-    }
-    
     .progress-bar {
-        background: linear-gradient(45deg, #FF6B6B, #FFD93D, #4ECDC4);
+        background: #f0f0f0;
         border-radius: 10px;
         height: 25px;
         margin: 20px 0;
     }
     
+    .progress-fill {
+        background: linear-gradient(45deg, #FF6B6B, #FFD93D);
+        border-radius: 10px;
+        height: 100%;
+    }
+    
     .animal-characters {
         display: flex;
         justify-content: space-around;
@@ -115,7 +88,6 @@ st.markdown("""
         font-size: 40px;
     }
     
-    /* Help box styling */
     .help-box {
         background: rgba(255, 255, 255, 0.95);
         padding: 20px;
@@ -125,7 +97,6 @@ st.markdown("""
         font-family: 'Comic Neue', cursive;
     }
     
-    /* Completion celebration */
     .completion-celebration {
         text-align: center;
         padding: 40px;
@@ -135,7 +106,6 @@ st.markdown("""
         margin: 20px 0;
     }
     
-    /* Auto progress countdown */
     .countdown {
         font-size: 18px;
         color: #FF6B6B;
@@ -146,44 +116,10 @@ st.markdown("""
     </style>
 """, unsafe_allow_html=True)
 
-# JavaScript for celebrations only (no initial animations)
+# NO JAVASCRIPT FOR ANIMATIONS - completely removed
 st.markdown("""
 <script>
-// Celebration functions - ONLY during correct answers
-function createCelebration() {
-    const emojis = ['🎉', '🎈', '⭐', '🎊', '🌈', '🚀'];
-    const colors = ['#FF6B6B', '#4ECDC4', '#FFD93D', '#45B7D1', '#96CEB4'];
-    
-    // Create emojis
-    for (let i = 0; i < 20; i++) {
-        setTimeout(() => {
-            const emoji = document.createElement('div');
-            emoji.className = 'celebration-emoji';
-            emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
-            emoji.style.left = Math.random() * 100 + 'vw';
-            emoji.style.animationDuration = (Math.random() * 1 + 1.5) + 's';
-            document.body.appendChild(emoji);
-            
-            setTimeout(() => emoji.remove(), 2500);
-        }, i * 150);
-    }
-    
-    // Create confetti
-    for (let i = 0; i < 50; i++) {
-        setTimeout(() => {
-            const confetti = document.createElement('div');
-            confetti.className = 'celebration-confetti';
-            confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
-            confetti.style.left = Math.random() * 100 + 'vw';
-            confetti.style.animationDuration = (Math.random() * 1 + 1.5) + 's';
-            document.body.appendChild(confetti);
-            
-            setTimeout(() => confetti.remove(), 2500);
-        }, i * 50);
-    }
-}
-
-// Auto progression after completion
+// Auto progression after completion - ONLY FUNCTIONAL CODE
 function startAutoProgression(seconds) {
     let timeLeft = seconds;
     const countdownElement = document.getElementById('countdown-timer');
@@ -219,7 +155,7 @@ def initialize_session_state():
 
 initialize_session_state()
 
-# Clean, stable welcome title - NO ANIMATIONS
+# COMPLETELY STABLE WELCOME - NO MOVEMENT
 st.markdown("""
 <div class="main-container">
     <div class="animal-characters">
@@ -273,7 +209,6 @@ with st.sidebar:
     💫 **Pro Tips:**
     - Take your time with each problem
     - Use the hints when you need help
-    - Celebrate every correct answer! 🎉
     - Practice makes perfect! 🌟
     """)
 
@@ -312,17 +247,17 @@ with col1:
             with zipfile.ZipFile(zip_path, "r") as zip_ref:
                 zip_ref.extractall(temp_image_folder)
     except Exception as e:
-        st.warning(f"⚠️ Oops! Our image treasure chest is hiding! {e}")
+        st.warning(f"⚠️ Could not extract images: {e}")
 
     if not os.path.exists(dataset_path):
-        st.error(f"❌ Adventure map not found: {dataset_path}")
+        st.error(f"❌ Dataset not found: {dataset_path}")
         st.stop()
 
     try:
         df = pd.read_excel(dataset_path)
         df['category'] = df['category'].astype(str).str.strip()
     except Exception as e:
-        st.error(f"❌ Oh no! The math treasure got mixed up! {e}")
+        st.error(f"❌ Error loading dataset: {e}")
         st.stop()
 
     # Category selection
@@ -346,14 +281,14 @@ with col1:
         question = subset_df.iloc[st.session_state.question_index]
         progress = int((st.session_state.question_index / len(subset_df)) * 100)
         
-        # Progress bar
+        # Progress bar - NO ANIMATIONS
         st.markdown(f"""
         <div style="text-align: center; margin: 20px 0;">
             <div style="font-family: 'Comic Neue', cursive; color: #FF6B6B; font-size: 18px;">
-                🎯 Adventure Progress: {st.session_state.question_index + 1} of {len(subset_df)}
+                🎯 Progress: {st.session_state.question_index + 1} of {len(subset_df)}
             </div>
-            <div class="progress-bar" style="width: 100%; background: #f0f0f0; border-radius: 10px; height: 25px;">
-                <div style="width: {progress}%; background: linear-gradient(45deg, #FF6B6B, #FFD93D); height: 100%; border-radius: 10px;"></div>
+            <div class="progress-bar">
+                <div class="progress-fill" style="width: {progress}%;"></div>
             </div>
         </div>
         """, unsafe_allow_html=True)
@@ -384,7 +319,7 @@ with col1:
                         except:
                             pass
             if not image_found:
-                st.warning("🖼️ Image not found for this question")
+                st.warning("🖼️ Image not available")
         
         # Answer input
         user_ans = st.text_input("✏️ Your Answer:", key=f"ans_{st.session_state.question_index}")
@@ -396,15 +331,9 @@ with col1:
             if st.button("🎯 Submit Answer", key=f"submit_{st.session_state.question_index}", use_container_width=True):
                 st.session_state.last_activity = time.time()
                 if str(user_ans).strip().lower() == str(question['answer']).strip().lower():
-                    # CELEBRATION ONLY HAPPENS HERE - when answer is correct
-                    st.markdown("""
-                    <script>
-                    createCelebration();
-                    </script>
-                    """, unsafe_allow_html=True)
-                    
+                    # SIMPLE CELEBRATION - just Streamlit balloons, no CSS animations
                     st.success("🎉✨ CORRECT! Amazing work! ✨🎉")
-                    st.balloons()
+                    st.balloons()  # This is the ONLY animation - controlled by Streamlit
                     
                     success_messages = [
                         "🌟 You're a math superstar!",
@@ -428,7 +357,7 @@ with col1:
                     st.session_state.last_activity = time.time()
                     st.rerun()
                 else:
-                    st.error("❌ Not quite right. Try again! 💫")
+                    st.error("❌ Not quite right. Try again!")
                     st.session_state.show_answer = True
                     st.session_state.show_steps = False
 
@@ -462,11 +391,11 @@ with col1:
     elif subset_df.empty:
         st.warning("⚠️ No questions available in this category. Try another one!")
     else:
-        # COMPLETION MESSAGE
+        # COMPLETION MESSAGE - NO ANIMATIONS
         st.markdown("""
         <div class="completion-celebration">
             <div style="font-size: 60px; margin-bottom: 20px;">
-                🏆🎉✨
+                🏆🎉
             </div>
             <h1 style="font-family: 'Comic Neue', cursive;">
                 CONGRATULATIONS! 🏅
@@ -474,12 +403,10 @@ with col1:
             <p style="font-size: 24px;">
                 You've completed all challenges in this category!
             </p>
-            <div style="font-size: 40px; margin: 20px 0;">
-                🌟🎊👑🎈🚀
-            </div>
         </div>
         """, unsafe_allow_html=True)
         
+        # Only show balloons for completion
         st.balloons()
         
         # Auto-progress logic