Update src/streamlit_app.py

src/streamlit_app.py

@@ -16,27 +16,19 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS with controlled animations
+# Clean, stable CSS without excessive animations
 st.markdown("""
     <style>
     @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
     
     .main-container {
         background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7);
-        background-size: 400% 400%;
-        animation: gradientBG 15s ease infinite;
         padding: 20px;
         border-radius: 25px;
         border: 8px dashed #FFD93D;
         margin-bottom: 20px;
     }
     
-    @keyframes gradientBG {
-        0% { background-position: 0% 50% }
-        50% { background-position: 100% 50% }
-        100% { background-position: 0% 50% }
-    }
-    
     .fun-title { 
         font-size: 50px; 
         color: #FF6B6B; 
@@ -55,11 +47,6 @@ st.markdown("""
         font-family: 'Comic Neue', cursive;
         box-shadow: 0 10px 25px rgba(0,0,0,0.2);
         margin: 20px 0;
-        transition: transform 0.3s ease;
-    }
-    
-    .question-box:hover {
-        transform: scale(1.02);
     }
     
     .stButton > button { 
@@ -88,37 +75,9 @@ st.markdown("""
         font-family: 'Comic Neue', cursive;
     }
     
-    /* Controlled animations */
-    .gentle-bounce {
-        animation: gentleBounce 3s ease-in-out infinite;
-    }
-    
-    @keyframes gentleBounce {
-        0%, 100% { transform: translateY(0); }
-        50% { transform: translateY(-5px); }
-    }
-    
-    .soft-pulse {
-        animation: softPulse 4s ease-in-out infinite;
-    }
-    
-    @keyframes softPulse {
-        0%, 100% { transform: scale(1); opacity: 1; }
-        50% { transform: scale(1.03); opacity: 0.9; }
-    }
-    
-    .slow-rotate {
-        animation: slowRotate 8s linear infinite;
-    }
-    
-    @keyframes slowRotate {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
-    }
-    
-    /* Celebration elements - only show during celebrations */
+    /* Only show animations during celebrations */
     .celebration-emoji {
-        position: absolute;
+        position: fixed;
         font-size: 24px;
         animation: celebrationFall 2s linear forwards;
         pointer-events: none;
@@ -130,7 +89,7 @@ st.markdown("""
     }
     
     .celebration-confetti {
-        position: absolute;
+        position: fixed;
         width: 12px;
         height: 12px;
         animation: celebrationConfetti 2s linear forwards;
@@ -156,22 +115,6 @@ st.markdown("""
         font-size: 40px;
     }
     
-    /* Live activity indicator */
-    .live-indicator {
-        display: inline-block;
-        width: 12px;
-        height: 12px;
-        background: #4ECDC4;
-        border-radius: 50%;
-        margin-right: 8px;
-        animation: gentleBlink 2s infinite;
-    }
-    
-    @keyframes gentleBlink {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.7; }
-    }
-    
     /* Help box styling */
     .help-box {
         background: rgba(255, 255, 255, 0.95);
@@ -190,12 +133,6 @@ st.markdown("""
         border-radius: 25px;
         color: white;
         margin: 20px 0;
-        animation: completionPulse 2s ease-in-out;
-    }
-    
-    @keyframes completionPulse {
-        0% { transform: scale(0.9); opacity: 0; }
-        100% { transform: scale(1); opacity: 1; }
     }
     
     /* Auto progress countdown */
@@ -209,10 +146,10 @@ st.markdown("""
     </style>
 """, unsafe_allow_html=True)
 
-# JavaScript for controlled celebrations
+# JavaScript for celebrations only (no initial animations)
 st.markdown("""
 <script>
-// Celebration functions with controlled timing
+// Celebration functions - ONLY during correct answers
 function createCelebration() {
     const emojis = ['🎉', '🎈', '⭐', '🎊', '🌈', '🚀'];
     const colors = ['#FF6B6B', '#4ECDC4', '#FFD93D', '#45B7D1', '#96CEB4'];
@@ -259,7 +196,6 @@ function startAutoProgression(seconds) {
         
         if (timeLeft < 0) {
             clearInterval(timer);
-            // Trigger the Streamlit rerun
             window.location.reload();
         }
     }, 1000);
@@ -267,7 +203,7 @@ function startAutoProgression(seconds) {
 </script>
 """, unsafe_allow_html=True)
 
-# Initialize session state with better management
+# Initialize session state
 def initialize_session_state():
     if 'app_initialized' not in st.session_state:
         st.session_state.app_initialized = True
@@ -279,37 +215,37 @@ def initialize_session_state():
         st.session_state.show_answer = False
         st.session_state.show_steps = False
         st.session_state.session_initialized = False
-        st.session_state.auto_progress = True  # Auto-progress enabled by default
+        st.session_state.auto_progress = True
 
 initialize_session_state()
 
-# Welcome title with controlled animations
+# Clean, stable welcome title - NO ANIMATIONS
 st.markdown("""
 <div class="main-container">
     <div class="animal-characters">
-        <span class="slow-rotate">🐱</span>
-        <span class="soft-pulse">🐶</span>
-        <span class="slow-rotate">🦄</span>
-        <span class="soft-pulse">🐼</span>
-        <span class="slow-rotate">🐯</span>
+        <span>🐱</span>
+        <span>🐶</span>
+        <span>🦄</span>
+        <span>🐼</span>
+        <span>🐯</span>
     </div>
     <div class="fun-title">
-        <span class="live-indicator"></span>🎪 Welcome to Math Adventure Land! 🎪
+        🎪 Welcome to Math Adventure Land! 🎪
     </div>
     <div style="text-align: center; font-size: 24px; color: #FF6B6B; font-family: 'Comic Neue', cursive;">
-        Where Numbers Become Friends! 🤗 <span class="gentle-bounce">✨</span>
+        Where Numbers Become Friends! 🤗 ✨
     </div>
 </div>
 """, unsafe_allow_html=True)
 
-# Age group setup with fun descriptions
+# Age group setup
 age_groups = {
     "👶 Little Explorers (4-6)": {"dataset": "src/Datase_of_4-6_Age_Group.xlsx", "zip_file": "src/Image_for_group_4-6.zip", "image_folder": "Image_for_group_4-6", "emoji": "👶"},
     "🚀 Math Adventurers (7-9)": {"dataset": "src/Datase_of_7-9_Age_Group.xlsx", "zip_file": "src/Image_for_group_7-9.zip", "image_folder": "Image_for_group_7-9", "emoji": "🚀"},
     "🌟 Math Wizards (13-15)": {"dataset": "src/Datase_of_13-15_Age_Group.xlsx", "zip_file": "src/Image_for_group_13-15.zip", "image_folder": "Image_for_group_13-15", "emoji": "🌟"}
 }
 
-# SIDEBAR - Help and Controls
+# SIDEBAR - Clean and stable
 with st.sidebar:
     st.markdown("### 🎯 Quick Help Guide")
     
@@ -332,20 +268,6 @@ with st.sidebar:
         st.session_state.auto_progress = auto_progress
         st.rerun()
     
-    # Live activity monitor
-    st.markdown("### 📊 Activity Monitor")
-    activity_time = time.time() - st.session_state.last_activity
-    if activity_time < 10:
-        status = "🟢 Very Active"
-    elif activity_time < 30:
-        status = "🟡 Active"
-    else:
-        status = "🔴 Idle"
-    
-    st.metric("Session Status", status)
-    
-    st.markdown("---")
-    
     st.markdown("### 🏆 Achievement Tips")
     st.info("""
     💫 **Pro Tips:**
@@ -403,7 +325,7 @@ with col1:
         st.error(f"❌ Oh no! The math treasure got mixed up! {e}")
         st.stop()
 
-    # Category selection with fun names
+    # Category selection
     categories = sorted(df['category'].dropna().unique())
     category_emojis = {"Addition": "➕", "Subtraction": "➖", "Multiplication": "✖️", "Division": "➗", "Geometry": "📐", "Algebra": "📊"}
     selected_category = st.selectbox("📚 Choose Your Math Quest:", options=categories)
@@ -424,19 +346,19 @@ with col1:
         question = subset_df.iloc[st.session_state.question_index]
         progress = int((st.session_state.question_index / len(subset_df)) * 100)
         
-        # Fun progress bar
+        # Progress bar
         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)}
             </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; transition: width 0.5s;"></div>
+                <div style="width: {progress}%; background: linear-gradient(45deg, #FF6B6B, #FFD93D); height: 100%; border-radius: 10px;"></div>
             </div>
         </div>
         """, unsafe_allow_html=True)
 
-        # Display question with controlled styling
+        # Display question - NO ANIMATIONS
         category_emoji = category_emojis.get(selected_category, "❓")
         st.markdown(f"""
         <div class="question-box">
@@ -462,37 +384,34 @@ with col1:
                         except:
                             pass
             if not image_found:
-                st.warning("🖼️ Oh no! The picture is playing hide and seek!")
+                st.warning("🖼️ Image not found for this question")
         
-        # Fun answer input
-        user_ans = st.text_input("✏️ Your Magical Answer:", key=f"ans_{st.session_state.question_index}")
+        # Answer input
+        user_ans = st.text_input("✏️ Your Answer:", key=f"ans_{st.session_state.question_index}")
 
-        # Submit button with celebration
+        # Action buttons
         col_btn1, col_btn2, col_btn3 = st.columns([1, 1, 1])
         
         with col_btn1:
             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():
-                    # Controlled celebration
+                    # CELEBRATION ONLY HAPPENS HERE - when answer is correct
                     st.markdown("""
                     <script>
                     createCelebration();
                     </script>
                     """, unsafe_allow_html=True)
                     
-                    st.success("🎉✨ AMAZING! YOU'RE A MATH SUPERSTAR! ✨🎉")
-                    
-                    # Gentle balloons
+                    st.success("🎉✨ CORRECT! Amazing work! ✨🎉")
                     st.balloons()
                     
-                    # Success message
                     success_messages = [
-                        "🌟 You're shining brighter than a supernova!",
-                        "🚀 To infinity and beyond! Math genius detected!",
-                        "🌈 You just painted the town with math brilliance!",
-                        "🎊 Party time! You nailed it!",
-                        "🦄 Unicorn-level math skills activated!"
+                        "🌟 You're a math superstar!",
+                        "🚀 Excellent work!",
+                        "🌈 Brilliant answer!",
+                        "🎊 Perfect!",
+                        "🦄 Outstanding!"
                     ]
                     
                     st.markdown(f"""
@@ -509,7 +428,7 @@ with col1:
                     st.session_state.last_activity = time.time()
                     st.rerun()
                 else:
-                    st.error("❌ Oops! That's not quite right, but don't give up! 💫")
+                    st.error("❌ Not quite right. Try again! 💫")
                     st.session_state.show_answer = True
                     st.session_state.show_steps = False
 
@@ -517,48 +436,43 @@ with col1:
             if st.button("🔍 Show Hint", key=f"hint_{st.session_state.question_index}", use_container_width=True):
                 st.session_state.last_activity = time.time()
                 st.session_state.show_answer = True
-                st.info("💡 Here's a little help! You can do this! 🌟")
+                st.info("💡 Need some help? Here's the answer below!")
 
         with col_btn3:
-            if st.button("⏭️ Skip Challenge", key=f"skip_{st.session_state.question_index}", use_container_width=True):
+            if st.button("⏭️ Skip", key=f"skip_{st.session_state.question_index}", use_container_width=True):
                 st.session_state.last_activity = time.time()
                 st.session_state.question_index += 1
                 st.session_state.show_answer = False
                 st.session_state.show_steps = False
-                st.info("💨 Zooming to the next challenge! Get ready! 🚀")
+                st.info("Moving to next challenge...")
                 time.sleep(1)
                 st.rerun()
 
-        # Show answer with encouragement
+        # Show answer
         if st.session_state.show_answer:
-            st.info(f"""
-            💡 **Hint from Your Math Friend:** 
-            The magical answer is **{question['answer']}**
-            
-            Remember: Even math superheroes need help sometimes! 🦸
-            """)
+            st.info(f"💡 **Correct Answer:** **{question['answer']}**")
             
             if selected_age_group in ["🚀 Math Adventurers (7-9)", "🌟 Math Wizards (13-15)"]:
-                if st.button("🪄 Show Magic Steps", key=f"steps_{st.session_state.question_index}"):
+                if st.button("📝 Show Steps", key=f"steps_{st.session_state.question_index}"):
                     st.session_state.last_activity = time.time()
                     st.session_state.show_steps = True
             if st.session_state.show_steps and pd.notna(question.get("steps", None)):
-                st.success(f"### 🪄 Secret Math Magic:\n{question['steps']}")
+                st.success(f"### Step-by-Step Solution:\n{question['steps']}")
             
     elif subset_df.empty:
-        st.warning("⚠️ Oh dear! No math adventures here yet! Try another magical category! 🧙")
+        st.warning("⚠️ No questions available in this category. Try another one!")
     else:
-        # COMPLETION CELEBRATION with Auto-Progress
+        # COMPLETION MESSAGE
         st.markdown("""
         <div class="completion-celebration">
             <div style="font-size: 60px; margin-bottom: 20px;">
                 🏆🎉✨
             </div>
             <h1 style="font-family: 'Comic Neue', cursive;">
-                YOU DID IT! MATH CHAMPION! 🏅
+                CONGRATULATIONS! 🏅
             </h1>
             <p style="font-size: 24px;">
-                You've completed all the challenges in this category!<br>
+                You've completed all challenges in this category!
             </p>
             <div style="font-size: 40px; margin: 20px 0;">
                 🌟🎊👑🎈🚀
@@ -570,7 +484,6 @@ with col1:
         
         # Auto-progress logic
         if st.session_state.auto_progress:
-            # Show countdown and auto-progress
             st.markdown("""
             <div class="countdown" id="countdown-timer">
                 Next adventure starting in: 5 seconds
@@ -580,22 +493,20 @@ with col1:
             </script>
             """, unsafe_allow_html=True)
             
-            # Wait and auto-progress
             time.sleep(5)
             st.session_state.question_index = 0
             st.session_state.show_answer = False
             st.session_state.show_steps = False
             
-            # Move to next category or restart
+            # Move to next category
             current_idx = categories.index(selected_category)
             if current_idx < len(categories) - 1:
                 st.session_state.category = categories[current_idx + 1]
             else:
-                st.session_state.category = categories[0]  # Restart from first category
+                st.session_state.category = categories[0]
                 
             st.rerun()
         else:
-            # Manual progression
             if st.button("🔄 Start New Adventure", use_container_width=True):
                 st.session_state.last_activity = time.time()
                 st.session_state.question_index = 0
@@ -607,38 +518,14 @@ with col2:
     st.markdown("### 🎨 Fun Zone")
     st.markdown("""
     <div style="text-align: center; font-size: 40px; margin: 20px 0;">
-        <span class="soft-pulse">🎪</span><br>
-        <span class="slow-rotate">✨</span><br>
-        <span class="soft-pulse">🌟</span>
+        🎪<br>✨<br>🌟
     </div>
     """, unsafe_allow_html=True)
     
-    st.markdown("### 🏆 Your Achievements")
+    st.markdown("### 🏆 Progress")
     if not subset_df.empty:
         completed = min(st.session_state.question_index, len(subset_df))
-        st.metric("Challenges Completed", f"{completed}/{len(subset_df)}")
-        
-        if completed > 0:
-            accuracy = "🎯 Perfect!" if completed == st.session_state.question_index else "🌟 Great!"
-            st.metric("Accuracy", accuracy)
-    
-    st.markdown("### 💫 Pro Tip")
-    st.info("""
-    ✨ **Math Superpower:**
-    Use scrap paper to work out 
-    tricky problems! It's like 
-    having a math sidekick! 🦸‍♂️
-    """)
-
-# Add periodic invisible updates to prevent sleeping
-if 'update_counter' not in st.session_state:
-    st.session_state.update_counter = 0
-
-st.session_state.update_counter += 1
-
-# This creates a very subtle continuous activity
-if st.session_state.update_counter % 10 == 0:
-    st.markdown(f'<div style="display:none">{random.random()}</div>', unsafe_allow_html=True)
+        st.metric("Completed", f"{completed}/{len(subset_df)}")
 
 # Cleanup function
 def cleanup():