Update src/streamlit_app.py

src/streamlit_app.py

@@ -9,8 +9,12 @@ import time
 import tempfile
 import random
 
-# Page config
-st.set_page_config(page_title="🎪 Math Adventure Land", layout="wide")
+# Page config with optimized settings
+st.set_page_config(
+    page_title="🎪 Math Adventure Land", 
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
 
 # Custom CSS with LOTS of fun animations and styles
 st.markdown("""
@@ -137,7 +141,7 @@ st.markdown("""
     }
     
     .calc-btn {
-        padding: 10px 5px;
+        padding: 12px 8px;
         border: none;
         border-radius: 8px;
         cursor: pointer;
@@ -147,6 +151,7 @@ st.markdown("""
         transition: all 0.2s ease;
         font-family: 'Comic Neue', cursive;
         font-weight: bold;
+        min-height: 45px;
     }
     
     .calc-btn:hover {
@@ -164,7 +169,6 @@ st.markdown("""
     
     .calc-btn-equals {
         background: linear-gradient(45deg, #96CEB4, #4ECDC4);
-        grid-column: span 2;
     }
     
     .calc-btn-zero {
@@ -219,58 +223,259 @@ st.markdown("""
         animation: bounce 2s infinite;
     }
     
-    /* Sidebar styling */
-    .sidebar-content {
-        padding: 10px;
+    /* Active animations */
+    .pulse {
+        animation: pulse 2s infinite;
     }
     
-    /* Main content area */
-    .main-content {
-        padding: 20px;
+    @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 */
+    .live-indicator {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        background: #4ECDC4;
+        border-radius: 50%;
+        margin-right: 8px;
+        animation: blink 1.5s infinite;
+    }
+    
+    @keyframes blink {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.3; }
+    }
+    
+    /* Celebration container */
+    .celebration-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 9999;
+        animation: fadeOut 3s forwards;
+    }
+    
+    @keyframes fadeOut {
+        0% { opacity: 1; }
+        80% { opacity: 1; }
+        100% { opacity: 0; display: none; }
     }
     </style>
 """, unsafe_allow_html=True)
 
-# JavaScript for animations and calculator
+# JavaScript for animations, calculator, and continuous activity
 st.markdown("""
 <script>
-// Celebration functions
+// Calculator functionality - COMPLETELY REWRITTEN
+class Calculator {
+    constructor() {
+        this.currentInput = '0';
+        this.previousInput = '';
+        this.operation = null;
+        this.resetScreen = false;
+        this.initializeCalculator();
+    }
+
+    initializeCalculator() {
+        this.updateDisplay();
+        this.setupEventListeners();
+    }
+
+    setupEventListeners() {
+        // Number buttons
+        for (let i = 0; i <= 9; i++) {
+            const btn = document.getElementById(`calc-btn-${i}`);
+            if (btn) {
+                btn.addEventListener('click', () => this.appendNumber(i.toString()));
+            }
+        }
+
+        // Operation buttons
+        document.getElementById('calc-btn-add')?.addEventListener('click', () => this.chooseOperation('+'));
+        document.getElementById('calc-btn-subtract')?.addEventListener('click', () => this.chooseOperation('-'));
+        document.getElementById('calc-btn-multiply')?.addEventListener('click', () => this.chooseOperation('*'));
+        document.getElementById('calc-btn-divide')?.addEventListener('click', () => this.chooseOperation('/'));
+        
+        // Other buttons
+        document.getElementById('calc-btn-equals')?.addEventListener('click', () => this.compute());
+        document.getElementById('calc-btn-clear')?.addEventListener('click', () => this.clearCalculator());
+        document.getElementById('calc-btn-backspace')?.addEventListener('click', () => this.backspace());
+        document.getElementById('calc-btn-decimal')?.addEventListener('click', () => this.appendDecimal());
+    }
+
+    updateDisplay() {
+        const display = document.getElementById('calc-display');
+        if (display) {
+            display.value = this.currentInput;
+        }
+    }
+
+    appendNumber(number) {
+        if (this.currentInput === '0' || this.resetScreen) {
+            this.currentInput = number;
+            this.resetScreen = false;
+        } else {
+            this.currentInput += number;
+        }
+        this.updateDisplay();
+    }
+
+    chooseOperation(op) {
+        if (this.currentInput === '') return;
+        
+        if (this.previousInput !== '') {
+            this.compute();
+        }
+        this.operation = op;
+        this.previousInput = this.currentInput;
+        this.resetScreen = true;
+    }
+
+    compute() {
+        let computation;
+        const prev = parseFloat(this.previousInput);
+        const current = parseFloat(this.currentInput);
+        
+        if (isNaN(prev) || isNaN(current)) return;
+        
+        switch (this.operation) {
+            case '+':
+                computation = prev + current;
+                break;
+            case '-':
+                computation = prev - current;
+                break;
+            case '*':
+                computation = prev * current;
+                break;
+            case '/':
+                if (current === 0) {
+                    this.showError("Cannot divide by zero!");
+                    return;
+                }
+                computation = prev / current;
+                break;
+            default:
+                return;
+        }
+        
+        this.currentInput = this.roundNumber(computation).toString();
+        this.operation = undefined;
+        this.previousInput = '';
+        this.resetScreen = true;
+        this.updateDisplay();
+    }
+
+    roundNumber(num) {
+        return Math.round((num + Number.EPSILON) * 100000) / 100000;
+    }
+
+    showError(message) {
+        const display = document.getElementById('calc-display');
+        if (display) {
+            display.value = message;
+            setTimeout(() => {
+                this.clearCalculator();
+            }, 2000);
+        }
+    }
+
+    clearCalculator() {
+        this.currentInput = '0';
+        this.previousInput = '';
+        this.operation = null;
+        this.resetScreen = false;
+        this.updateDisplay();
+    }
+
+    backspace() {
+        if (this.currentInput.length > 1) {
+            this.currentInput = this.currentInput.slice(0, -1);
+        } else {
+            this.currentInput = '0';
+        }
+        this.updateDisplay();
+    }
+
+    appendDecimal() {
+        if (this.resetScreen) {
+            this.currentInput = '0';
+            this.resetScreen = false;
+        }
+        if (!this.currentInput.includes('.')) {
+            this.currentInput += '.';
+        }
+        this.updateDisplay();
+    }
+}
+
+// Initialize calculator when page loads
+let calculator;
+document.addEventListener('DOMContentLoaded', function() {
+    calculator = new Calculator();
+});
+
+// Celebration functions with 3-second limit
 function createEmojiRain() {
-    const emojis = ['🎉', '🎈', '⭐', '🎊', '🌈', '🚀', '🎨', '🐱', '🐶', '🦄'];
     const container = document.createElement('div');
-    container.className = 'emoji-rain';
+    container.className = 'celebration-container';
     document.body.appendChild(container);
     
-    for (let i = 0; i < 50; i++) {
+    const emojis = ['🎉', '🎈', '⭐', '🎊', '🌈', '🚀', '🎨', '🐱', '🐶', '🦄'];
+    
+    for (let i = 0; i < 30; i++) {
         setTimeout(() => {
             const emoji = document.createElement('div');
             emoji.className = 'emoji';
             emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
             emoji.style.left = Math.random() * 100 + 'vw';
-            emoji.style.animationDuration = (Math.random() * 3 + 2) + 's';
+            emoji.style.animationDuration = (Math.random() * 2 + 1) + 's';
             container.appendChild(emoji);
-            
-            setTimeout(() => emoji.remove(), 5000);
         }, i * 100);
     }
     
-    setTimeout(() => container.remove(), 6000);
+    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 < 150; i++) {
+    
+    for (let i = 0; i < 100; i++) {
         setTimeout(() => {
             const confetti = document.createElement('div');
             confetti.className = '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';
-            document.body.appendChild(confetti);
-            
-            setTimeout(() => confetti.remove(), 3000);
-        }, i * 10);
+            container.appendChild(confetti);
+        }, i * 30);
     }
+    
+    setTimeout(() => {
+        container.remove();
+    }, 3000);
 }
 
 function celebrate() {
@@ -278,129 +483,53 @@ function celebrate() {
     createConfetti();
 }
 
-// Calculator functionality
-let currentInput = '0';
-let previousInput = '';
-let operation = null;
-let resetScreen = false;
-
-function updateDisplay() {
-    const display = document.getElementById('calc-display');
-    if (display) {
-        display.value = currentInput;
-    }
-}
-
-function appendNumber(number) {
-    if (currentInput === '0' || resetScreen) {
-        currentInput = number;
-        resetScreen = false;
-    } else {
-        currentInput += number;
-    }
-    updateDisplay();
-}
-
-function chooseOperation(op) {
-    if (currentInput === '') return;
-    
-    if (previousInput !== '') {
-        compute();
-    }
-    operation = op;
-    previousInput = currentInput;
-    resetScreen = true;
-}
-
-function compute() {
-    let computation;
-    const prev = parseFloat(previousInput);
-    const current = parseFloat(currentInput);
-    
-    if (isNaN(prev) || isNaN(current)) return;
-    
-    switch (operation) {
-        case '+':
-            computation = prev + current;
-            break;
-        case '-':
-            computation = prev - current;
-            break;
-        case '*':
-            computation = prev * current;
-            break;
-        case '/':
-            computation = prev / current;
-            break;
-        default:
-            return;
-    }
-    
-    currentInput = computation.toString();
-    operation = undefined;
-    previousInput = '';
-    resetScreen = true;
-    updateDisplay();
-    
-    // Mini celebration for big results
-    if (Math.abs(computation) > 1000) {
-        const miniEmoji = document.createElement('div');
-        miniEmoji.textContent = '🎉';
-        miniEmoji.style.position = 'fixed';
-        miniEmoji.style.fontSize = '20px';
-        miniEmoji.style.left = Math.random() * 100 + 'vw';
-        miniEmoji.style.animation = 'fall 2s linear forwards';
-        document.body.appendChild(miniEmoji);
-        setTimeout(() => miniEmoji.remove(), 2000);
+// Continuous activity to prevent sleeping
+let lastActivity = Date.now();
+setInterval(() => {
+    if (Date.now() - lastActivity > 10000) {
+        lastActivity = Date.now();
     }
-}
-
-function clearCalculator() {
-    currentInput = '0';
-    previousInput = '';
-    operation = null;
-    updateDisplay();
-}
+}, 5000);
 
-function appendDecimal() {
-    if (resetScreen) {
-        currentInput = '0';
-        resetScreen = false;
-    }
-    if (!currentInput.includes('.')) {
-        currentInput += '.';
-    }
-    updateDisplay();
-}
-
-// Initialize calculator
-document.addEventListener('DOMContentLoaded', function() {
-    updateDisplay();
-});
+document.addEventListener('click', () => lastActivity = Date.now());
+document.addEventListener('keypress', () => lastActivity = Date.now());
 </script>
 """, unsafe_allow_html=True)
 
-# Welcome title with fun characters
+# Initialize session state with better management
+def initialize_session_state():
+    if 'app_initialized' not in st.session_state:
+        st.session_state.app_initialized = True
+        st.session_state.temp_dir = tempfile.mkdtemp()
+        st.session_state.last_activity = time.time()
+        st.session_state.age_group = None
+        st.session_state.category = None
+        st.session_state.question_index = 0
+        st.session_state.show_answer = False
+        st.session_state.show_steps = False
+        st.session_state.session_initialized = False
+
+initialize_session_state()
+
+# Welcome title with fun characters and live indicator
 st.markdown("""
 <div class="main-container">
     <div class="animal-characters">
-        <span>🐱</span>
-        <span>🐶</span>
-        <span>🦄</span>
-        <span>🐼</span>
-        <span>🐯</span>
+        <span class="rotate">🐱</span>
+        <span class="pulse">🐶</span>
+        <span class="rotate">🦄</span>
+        <span class="pulse">🐼</span>
+        <span class="rotate">🐯</span>
+    </div>
+    <div class="fun-title">
+        <span class="live-indicator"></span>🎪 Welcome to Math Adventure Land! 🎪
     </div>
-    <div class="fun-title">🎪 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! 🤗
+        Where Numbers Become Friends! 🤗 <span class="pulse">✨</span>
     </div>
 </div>
 """, unsafe_allow_html=True)
 
-# Initialize session state for temp directory
-if 'temp_dir' not in st.session_state:
-    st.session_state.temp_dir = tempfile.mkdtemp()
-
 # Age group setup with fun descriptions
 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": "👶"},
@@ -413,62 +542,80 @@ with st.sidebar:
     st.markdown("### 🧮 Math Helper Calculator")
     st.markdown("Use this calculator to help with your math problems! ✨")
     
-    # Compact Calculator
+    # COMPLETELY REDESIGNED CALCULATOR
     st.markdown("""
     <div class="calculator-container">
         <div class="calculator-title">✨ Magic Calculator ✨</div>
         <input type="text" id="calc-display" class="calculator-display" readonly value="0">
         
         <div class="calculator-buttons-compact">
-            <button class="calc-btn calc-btn-clear" onclick="clearCalculator()">C</button>
-            <button class="calc-btn calc-btn-clear" onclick="currentInput = currentInput.slice(0, -1) || '0'; updateDisplay();">⌫</button>
-            <button class="calc-btn" onclick="chooseOperation('/')">/</button>
-            <button class="calc-btn" onclick="chooseOperation('*')">×</button>
+            <!-- Row 1 -->
+            <button class="calc-btn calc-btn-clear" id="calc-btn-clear">C</button>
+            <button class="calc-btn calc-btn-clear" id="calc-btn-backspace">⌫</button>
+            <button class="calc-btn" id="calc-btn-divide">/</button>
+            <button class="calc-btn" id="calc-btn-multiply">×</button>
             
-            <button class="calc-btn" onclick="appendNumber('7')">7</button>
-            <button class="calc-btn" onclick="appendNumber('8')">8</button>
-            <button class="calc-btn" onclick="appendNumber('9')">9</button>
-            <button class="calc-btn" onclick="chooseOperation('-')">-</button>
+            <!-- Row 2 -->
+            <button class="calc-btn" id="calc-btn-7">7</button>
+            <button class="calc-btn" id="calc-btn-8">8</button>
+            <button class="calc-btn" id="calc-btn-9">9</button>
+            <button class="calc-btn" id="calc-btn-subtract">-</button>
             
-            <button class="calc-btn" onclick="appendNumber('4')">4</button>
-            <button class="calc-btn" onclick="appendNumber('5')">5</button>
-            <button class="calc-btn" onclick="appendNumber('6')">6</button>
-            <button class="calc-btn" onclick="chooseOperation('+')">+</button>
+            <!-- Row 3 -->
+            <button class="calc-btn" id="calc-btn-4">4</button>
+            <button class="calc-btn" id="calc-btn-5">5</button>
+            <button class="calc-btn" id="calc-btn-6">6</button>
+            <button class="calc-btn" id="calc-btn-add">+</button>
             
-            <button class="calc-btn" onclick="appendNumber('1')">1</button>
-            <button class="calc-btn" onclick="appendNumber('2')">2</button>
-            <button class="calc-btn" onclick="appendNumber('3')">3</button>
-            <button class="calc-btn calc-btn-equals" onclick="compute()" rowspan="2">=</button>
+            <!-- Row 4 -->
+            <button class="calc-btn" id="calc-btn-1">1</button>
+            <button class="calc-btn" id="calc-btn-2">2</button>
+            <button class="calc-btn" id="calc-btn-3">3</button>
+            <button class="calc-btn calc-btn-equals" id="calc-btn-equals">=</button>
             
-            <button class="calc-btn calc-btn-zero" onclick="appendNumber('0')">0</button>
-            <button class="calc-btn" onclick="appendDecimal()">.</button>
+            <!-- Row 5 -->
+            <button class="calc-btn calc-btn-zero" id="calc-btn-0">0</button>
+            <button class="calc-btn" id="calc-btn-decimal">.</button>
         </div>
     </div>
     """, unsafe_allow_html=True)
     
     st.markdown("---")
-    st.markdown("### 🎯 Quick Tips")
+    
+    # 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("### 💫 Quick Tips")
     st.info("""
-    💡 **Calculator Help:**
+    💡 **Calculator Tips:**
     - Click numbers and operators
     - Press = to calculate
-    - Press C to clear
-    - Use backspace (⌫) to erase
+    - C to clear everything
+    - ⌫ to erase last digit
+    - Perfect for checking answers! ✅
     """)
-    
-    st.markdown("---")
-    st.markdown("### 📚 Need Help?")
-    st.write("Stuck on a problem? Use the calculator above or ask for hints! 🦸")
 
 # MAIN CONTENT AREA
 col1, col2 = st.columns([3, 1])
 
 with col1:
+    # Update activity timestamp
+    st.session_state.last_activity = time.time()
+    
     # Age group selection
     selected_age_group = st.selectbox("🎯 Choose Your Adventure Level:", list(age_groups.keys()))
 
     # Initialize session
-    if "session_initialized" not in st.session_state or st.session_state.age_group != selected_age_group:
+    if not st.session_state.session_initialized or st.session_state.age_group != selected_age_group:
         st.session_state.age_group = selected_age_group
         st.session_state.category = None
         st.session_state.question_index = 0
@@ -526,7 +673,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
+        # Fun progress bar with animation
         st.markdown(f"""
         <div style="text-align: center; margin: 20px 0;">
             <div style="font-family: 'Comic Neue', cursive; color: #FF6B6B; font-size: 18px;">
@@ -574,6 +721,7 @@ 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
                 if str(user_ans).strip().lower() == str(question['answer']).strip().lower():
                     # MEGA CELEBRATION FOR CORRECT ANSWER!
                     st.markdown("""
@@ -587,9 +735,8 @@ with col1:
                     """)
                     
                     # Multiple balloons and effects
-                    st.balloons()
-                    st.balloons()
-                    st.balloons()
+                    for _ in range(3):
+                        st.balloons()
                     
                     # Fun success message with random emojis
                     success_messages = [
@@ -606,10 +753,12 @@ with col1:
                     </div>
                     """, unsafe_allow_html=True)
                     
+                    # Wait exactly 3 seconds then continue
                     time.sleep(3)
                     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("""
@@ -621,6 +770,7 @@ with col1:
 
         with col_btn2:
             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.question_index += 1
                 st.session_state.show_answer = False
                 st.session_state.show_steps = False
@@ -639,6 +789,7 @@ 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.show_steps = True
             if st.session_state.show_steps and pd.notna(question.get("steps", None)):
                 st.success(f"""
@@ -670,11 +821,11 @@ with col1:
         </div>
         """, unsafe_allow_html=True)
         
-        st.balloons()
-        st.balloons()
-        st.balloons()
+        for _ in range(3):
+            st.balloons()
         
         if st.button("🔄 Start New Adventure"):
+            st.session_state.last_activity = time.time()  # Update activity
             st.session_state.question_index = 0
             st.session_state.show_answer = False
             st.session_state.show_steps = False
@@ -684,7 +835,9 @@ with col2:
     st.markdown("### 🎨 Fun Zone")
     st.markdown("""
     <div style="text-align: center; font-size: 40px; margin: 20px 0;">
-        🎪<br>✨<br>🌟
+        <span class="pulse">🎪</span><br>
+        <span class="rotate">✨</span><br>
+        <span class="pulse">🌟</span>
     </div>
     """, unsafe_allow_html=True)
     
@@ -693,11 +846,20 @@ with col2:
         completed = min(st.session_state.question_index, len(subset_df))
         st.metric("Challenges Completed", f"{completed}/{len(subset_df)}")
     
-    st.markdown("### 💫 Pro Tip")
-    st.info("""
-    Use the calculator in the sidebar to help solve tricky problems! 
-    It's your math superhero sidekick! 🦸‍♂️
-    """)
+    # Continuous activity indicator
+    st.markdown("### 📊 Live Stats")
+    st.metric("Session Activity", "🟢 Always Active")
+    st.metric("Fun Level", "🎉 Maximum!")
+
+# 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)
 
 # Cleanup function
 def cleanup():