Update src/streamlit_app.py

src/streamlit_app.py

@@ -16,7 +16,7 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS with LOTS of fun animations and styles
+# Custom CSS with controlled animations
 st.markdown("""
     <style>
     @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
@@ -43,15 +43,9 @@ st.markdown("""
         text-align: center; 
         font-family: 'Comic Neue', cursive;
         text-shadow: 3px 3px 0 #FFD93D, 6px 6px 0 #4ECDC4;
-        animation: bounce 2s infinite;
         margin-bottom: 30px;
     }
     
-    @keyframes bounce {
-        0%, 100% { transform: translateY(0); }
-        50% { transform: translateY(-20px); }
-    }
-    
     .question-box { 
         border: 6px dotted #FF6B6B; 
         padding: 25px; 
@@ -60,13 +54,12 @@ st.markdown("""
         font-size: 22px; 
         font-family: 'Comic Neue', cursive;
         box-shadow: 0 10px 25px rgba(0,0,0,0.2);
-        animation: wiggle 3s ease-in-out infinite;
         margin: 20px 0;
+        transition: transform 0.3s ease;
     }
     
-    @keyframes wiggle {
-        0%, 100% { transform: rotate(-1deg); }
-        50% { transform: rotate(1deg); }
+    .question-box:hover {
+        transform: scale(1.02);
     }
     
     .stButton > button { 
@@ -83,7 +76,7 @@ st.markdown("""
     }
     
     .stButton > button:hover {
-        transform: scale(1.1);
+        transform: scale(1.05);
         box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6);
     }
     
@@ -95,37 +88,58 @@ st.markdown("""
         font-family: 'Comic Neue', cursive;
     }
     
-    /* Fun elements */
-    .emoji-rain {
-        position: fixed;
-        top: 0;
-        left: 0;
-        pointer-events: none;
-        z-index: 9999;
+    /* 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;
     }
     
-    .emoji {
+    @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 */
+    .celebration-emoji {
         position: absolute;
         font-size: 24px;
-        animation: fall linear forwards;
+        animation: celebrationFall 2s linear forwards;
+        pointer-events: none;
+        z-index: 9999;
     }
     
-    @keyframes fall {
-        to { transform: translateY(100vh) rotate(360deg); }
+    @keyframes celebrationFall {
+        to { transform: translateY(100vh) rotate(360deg); opacity: 0; }
     }
     
-    .confetti {
-        position: fixed;
-        width: 15px;
-        height: 15px;
-        background: #FF6B6B;
-        animation: confetti-fall 3s linear forwards;
+    .celebration-confetti {
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        animation: celebrationConfetti 2s linear forwards;
+        pointer-events: none;
         z-index: 9998;
     }
     
-    @keyframes confetti-fall {
-        0% { transform: translateY(-100px) rotate(0deg); }
-        100% { transform: translateY(100vh) rotate(360deg); }
+    @keyframes celebrationConfetti {
+        to { transform: translateY(100vh) rotate(360deg); opacity: 0; }
     }
     
     .progress-bar {
@@ -140,27 +154,6 @@ st.markdown("""
         justify-content: space-around;
         margin: 20px 0;
         font-size: 40px;
-        animation: bounce 2s infinite;
-    }
-    
-    /* Active animations */
-    .pulse {
-        animation: pulse 2s infinite;
-    }
-    
-    @keyframes pulse {
-        0% { transform: scale(1); }
-        50% { transform: scale(1.05); }
-        100% { transform: scale(1); }
-    }
-    
-    .rotate {
-        animation: rotate 4s linear infinite;
-    }
-    
-    @keyframes rotate {
-        from { transform: rotate(0deg); }
-        to { transform: rotate(360deg); }
     }
     
     /* Live activity indicator */
@@ -171,112 +164,106 @@ st.markdown("""
         background: #4ECDC4;
         border-radius: 50%;
         margin-right: 8px;
-        animation: blink 1.5s infinite;
+        animation: gentleBlink 2s infinite;
     }
     
-    @keyframes blink {
+    @keyframes gentleBlink {
         0%, 100% { opacity: 1; }
-        50% { opacity: 0.3; }
+        50% { opacity: 0.7; }
     }
     
-    /* Celebration container */
-    .celebration-container {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        pointer-events: none;
-        z-index: 9999;
-        animation: fadeOut 3s forwards;
+    /* Help box styling */
+    .help-box {
+        background: rgba(255, 255, 255, 0.95);
+        padding: 20px;
+        border-radius: 15px;
+        border: 3px solid #FFD93D;
+        margin-bottom: 20px;
+        font-family: 'Comic Neue', cursive;
     }
     
-    @keyframes fadeOut {
-        0% { opacity: 1; }
-        80% { opacity: 1; }
-        100% { opacity: 0; display: none; }
+    /* Completion celebration */
+    .completion-celebration {
+        text-align: center;
+        padding: 40px;
+        background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
+        border-radius: 25px;
+        color: white;
+        margin: 20px 0;
+        animation: completionPulse 2s ease-in-out;
     }
     
-    /* Sidebar styling */
-    .sidebar-content {
-        padding: 20px;
+    @keyframes completionPulse {
+        0% { transform: scale(0.9); opacity: 0; }
+        100% { transform: scale(1); opacity: 1; }
     }
     
-    .help-box {
-        background: rgba(255, 255, 255, 0.9);
-        padding: 20px;
-        border-radius: 15px;
-        border: 3px solid #FFD93D;
-        margin-bottom: 20px;
+    /* Auto progress countdown */
+    .countdown {
+        font-size: 18px;
+        color: #FF6B6B;
+        font-weight: bold;
+        text-align: center;
+        margin: 10px 0;
     }
     </style>
 """, unsafe_allow_html=True)
 
-# JavaScript for animations and celebrations
+# JavaScript for controlled celebrations
 st.markdown("""
 <script>
-// Celebration functions with 3-second limit
-function createEmojiRain() {
-    const container = document.createElement('div');
-    container.className = 'celebration-container';
-    document.body.appendChild(container);
-    
-    const emojis = ['🎉', '🎈', '⭐', '🎊', '🌈', '🚀', '🎨', '🐱', '🐶', '🦄'];
+// Celebration functions with controlled timing
+function createCelebration() {
+    const emojis = ['🎉', '🎈', '⭐', '🎊', '🌈', '🚀'];
+    const colors = ['#FF6B6B', '#4ECDC4', '#FFD93D', '#45B7D1', '#96CEB4'];
     
-    for (let i = 0; i < 30; i++) {
+    // Create emojis
+    for (let i = 0; i < 20; i++) {
         setTimeout(() => {
             const emoji = document.createElement('div');
-            emoji.className = 'emoji';
+            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() * 2 + 1) + 's';
-            container.appendChild(emoji);
-        }, i * 100);
+            emoji.style.animationDuration = (Math.random() * 1 + 1.5) + 's';
+            document.body.appendChild(emoji);
+            
+            setTimeout(() => emoji.remove(), 2500);
+        }, i * 150);
     }
     
-    setTimeout(() => {
-        container.remove();
-    }, 3000);
-}
-
-function createConfetti() {
-    const container = document.createElement('div');
-    container.className = 'celebration-container';
-    document.body.appendChild(container);
-    
-    const colors = ['#FF6B6B', '#4ECDC4', '#FFD93D', '#45B7D1', '#96CEB4'];
-    
-    for (let i = 0; i < 100; i++) {
+    // Create confetti
+    for (let i = 0; i < 50; i++) {
         setTimeout(() => {
             const confetti = document.createElement('div');
-            confetti.className = 'confetti';
+            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() * 2 + 1) + 's';
-            container.appendChild(confetti);
-        }, i * 30);
+            confetti.style.animationDuration = (Math.random() * 1 + 1.5) + 's';
+            document.body.appendChild(confetti);
+            
+            setTimeout(() => confetti.remove(), 2500);
+        }, i * 50);
     }
-    
-    setTimeout(() => {
-        container.remove();
-    }, 3000);
 }
 
-function celebrate() {
-    createEmojiRain();
-    createConfetti();
+// Auto progression after completion
+function startAutoProgression(seconds) {
+    let timeLeft = seconds;
+    const countdownElement = document.getElementById('countdown-timer');
+    
+    const timer = setInterval(() => {
+        if (countdownElement) {
+            countdownElement.textContent = `Next adventure in: ${timeLeft} seconds`;
+        }
+        timeLeft--;
+        
+        if (timeLeft < 0) {
+            clearInterval(timer);
+            // Trigger the Streamlit rerun
+            window.location.reload();
+        }
+    }, 1000);
 }
-
-// Continuous activity to prevent sleeping
-let lastActivity = Date.now();
-setInterval(() => {
-    if (Date.now() - lastActivity > 10000) {
-        lastActivity = Date.now();
-    }
-}, 5000);
-
-document.addEventListener('click', () => lastActivity = Date.now());
-document.addEventListener('keypress', () => lastActivity = Date.now());
 </script>
 """, unsafe_allow_html=True)
 
@@ -292,24 +279,25 @@ 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
 
 initialize_session_state()
 
-# Welcome title with fun characters and live indicator
+# Welcome title with controlled animations
 st.markdown("""
 <div class="main-container">
     <div class="animal-characters">
-        <span class="rotate">🐱</span>
-        <span class="pulse">🐶</span>
-        <span class="rotate">🦄</span>
-        <span class="pulse">🐼</span>
-        <span class="rotate">🐯</span>
+        <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>
     </div>
     <div class="fun-title">
         <span class="live-indicator"></span>🎪 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="pulse">✨</span>
+        Where Numbers Become Friends! 🤗 <span class="gentle-bounce">✨</span>
     </div>
 </div>
 """, unsafe_allow_html=True)
@@ -321,7 +309,7 @@ age_groups = {
     "🌟 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 (Calculator Removed)
+# SIDEBAR - Help and Controls
 with st.sidebar:
     st.markdown("### 🎯 Quick Help Guide")
     
@@ -335,15 +323,14 @@ with st.sidebar:
     </div>
     """, unsafe_allow_html=True)
     
-    st.markdown("""
-    <div class="help-box">
-        <h4>💡 Math Tips:</h4>
-        <p>• Read questions carefully<br>
-        • Use scrap paper if needed<br>
-        • Check your work<br>
-        • Ask for hints when stuck!</p>
-    </div>
-    """, unsafe_allow_html=True)
+    # Auto-progress toggle
+    st.markdown("### ⚙️ Settings")
+    auto_progress = st.toggle("Auto-Progress", value=st.session_state.auto_progress, 
+                            help="Automatically move to next category when finished")
+    
+    if auto_progress != st.session_state.auto_progress:
+        st.session_state.auto_progress = auto_progress
+        st.rerun()
     
     # Live activity monitor
     st.markdown("### 📊 Activity Monitor")
@@ -363,7 +350,7 @@ with st.sidebar:
     st.info("""
     💫 **Pro Tips:**
     - Take your time with each problem
-    - Use the 'Show Steps' feature to learn
+    - Use the hints when you need help
     - Celebrate every correct answer! 🎉
     - Practice makes perfect! 🌟
     """)
@@ -437,7 +424,7 @@ 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 with animation
+        # Fun 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;">
@@ -449,7 +436,7 @@ with col1:
         </div>
         """, unsafe_allow_html=True)
 
-        # Display question with fun styling
+        # Display question with controlled styling
         category_emoji = category_emojis.get(selected_category, "❓")
         st.markdown(f"""
         <div class="question-box">
@@ -485,24 +472,21 @@ with col1:
         
         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()  # Update activity
+                st.session_state.last_activity = time.time()
                 if str(user_ans).strip().lower() == str(question['answer']).strip().lower():
-                    # MEGA CELEBRATION FOR CORRECT ANSWER!
+                    # Controlled celebration
                     st.markdown("""
                     <script>
-                    celebrate();
+                    createCelebration();
                     </script>
                     """, unsafe_allow_html=True)
                     
-                    st.success("""
-                    🎉✨ AMAZING! YOU'RE A MATH SUPERSTAR! ✨🎉
-                    """)
+                    st.success("🎉✨ AMAZING! YOU'RE A MATH SUPERSTAR! ✨🎉")
                     
-                    # Multiple balloons and effects
-                    for _ in range(3):
-                        st.balloons()
+                    # Gentle balloons
+                    st.balloons()
                     
-                    # Fun success message with random emojis
+                    # Success message
                     success_messages = [
                         "🌟 You're shining brighter than a supernova!",
                         "🚀 To infinity and beyond! Math genius detected!",
@@ -517,30 +501,27 @@ with col1:
                     </div>
                     """, unsafe_allow_html=True)
                     
-                    # Wait exactly 3 seconds then continue
-                    time.sleep(3)
+                    # Wait 2 seconds then continue
+                    time.sleep(2)
                     st.session_state.question_index += 1
                     st.session_state.show_answer = False
                     st.session_state.show_steps = False
                     st.session_state.last_activity = time.time()
                     st.rerun()
                 else:
-                    st.error("""
-                    ❌ Oops! That's not quite right, but don't give up! 
-                    Every great math wizard makes mistakes sometimes! 💫
-                    """)
+                    st.error("❌ Oops! That's not quite right, but don't give up! 💫")
                     st.session_state.show_answer = True
                     st.session_state.show_steps = False
 
         with col_btn2:
             if st.button("🔍 Show Hint", key=f"hint_{st.session_state.question_index}", use_container_width=True):
-                st.session_state.last_activity = time.time()  # Update activity
+                st.session_state.last_activity = time.time()
                 st.session_state.show_answer = True
                 st.info("💡 Here's a little help! You can do this! 🌟")
 
         with col_btn3:
             if st.button("⏭️ Skip Challenge", key=f"skip_{st.session_state.question_index}", use_container_width=True):
-                st.session_state.last_activity = time.time()  # Update activity
+                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
@@ -559,32 +540,25 @@ with col1:
             
             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}"):
-                    st.session_state.last_activity = time.time()  # Update activity
+                    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:
-                {question['steps']}
-                """)
+                st.success(f"### 🪄 Secret Math Magic:\n{question['steps']}")
             
     elif subset_df.empty:
-        st.warning("""
-        ⚠️ Oh dear! No math adventures here yet! 
-        Try another magical category! 🧙
-        """)
+        st.warning("⚠️ Oh dear! No math adventures here yet! Try another magical category! 🧙")
     else:
-        # GRAND FINALE CELEBRATION!
+        # COMPLETION CELEBRATION with Auto-Progress
         st.markdown("""
-        <div style="text-align: center; padding: 40px;">
+        <div class="completion-celebration">
             <div style="font-size: 60px; margin-bottom: 20px;">
                 🏆🎉✨
             </div>
-            <h1 style="color: #FF6B6B; font-family: 'Comic Neue', cursive;">
+            <h1 style="font-family: 'Comic Neue', cursive;">
                 YOU DID IT! MATH CHAMPION! 🏅
             </h1>
-            <p style="font-size: 24px; color: #4ECDC4;">
+            <p style="font-size: 24px;">
                 You've completed all the challenges in this category!<br>
-                Ready for more adventures? 🎪
             </p>
             <div style="font-size: 40px; margin: 20px 0;">
                 🌟🎊👑🎈🚀
@@ -592,23 +566,50 @@ with col1:
         </div>
         """, unsafe_allow_html=True)
         
-        for _ in range(3):
-            st.balloons()
+        st.balloons()
         
-        if st.button("🔄 Start New Adventure", use_container_width=True):
-            st.session_state.last_activity = time.time()  # Update activity
+        # 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
+            </div>
+            <script>
+            startAutoProgression(5);
+            </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
+            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.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
+                st.session_state.show_answer = False
+                st.session_state.show_steps = False
+                st.rerun()
 
 with col2:
     st.markdown("### 🎨 Fun Zone")
     st.markdown("""
     <div style="text-align: center; font-size: 40px; margin: 20px 0;">
-        <span class="pulse">🎪</span><br>
-        <span class="rotate">✨</span><br>
-        <span class="pulse">🌟</span>
+        <span class="soft-pulse">🎪</span><br>
+        <span class="slow-rotate">✨</span><br>
+        <span class="soft-pulse">🌟</span>
     </div>
     """, unsafe_allow_html=True)