Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,43 +1,28 @@
+import altair as alt
 import streamlit as st
 import pandas as pd
 import os
 import zipfile
 from PIL import Image
+import sympy as sp
 import time
 import tempfile
 import random
 
-# Disable all Streamlit animations and behaviors that might cause movement
+# Page config with optimized settings
 st.set_page_config(
     page_title="Math Adventure Land", 
     layout="wide",
     initial_sidebar_state="expanded"
 )
 
-# MINIMAL CSS - NO GRADIENTS, NO ANIMATIONS, NO EFFECTS
+# COMPLETELY CLEAN CSS - NO ANIMATIONS, NO MOVEMENTS, NO TRANSITIONS
 st.markdown("""
     <style>
-    /* DISABLE ALL ANIMATIONS AND TRANSITIONS GLOBALLY */
-    * {
-        animation: none !important;
-        transition: none !important;
-        transform: none !important;
-        -webkit-animation: none !important;
-        -webkit-transition: none !important;
-        -webkit-transform: none !important;
-        -moz-animation: none !important;
-        -moz-transition: none !important;
-        -moz-transform: none !important;
-    }
+    @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
     
-    /* DISABLE STREAMLIT BUILT-IN ANIMATIONS */
-    .stApp {
-        animation: none !important;
-    }
-    
-    /* SIMPLE STATIC COLORS */
     .main-container {
-        background: #FF6B6B;
+        background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7);
         padding: 20px;
         border-radius: 25px;
         border: 8px dashed #FFD93D;
@@ -46,8 +31,9 @@ st.markdown("""
     
     .fun-title { 
         font-size: 50px; 
-        color: white; 
+        color: #FF6B6B; 
         text-align: center; 
+        font-family: 'Comic Neue', cursive;
         margin-bottom: 30px;
     }
     
@@ -55,8 +41,9 @@ st.markdown("""
         border: 6px dotted #FF6B6B; 
         padding: 25px; 
         border-radius: 25px; 
-        background-color: white;
+        background-color: rgba(255, 255, 255, 0.9);
         font-size: 22px; 
+        font-family: 'Comic Neue', cursive;
         margin: 20px 0;
     }
     
@@ -67,6 +54,8 @@ st.markdown("""
         border-radius: 15px; 
         padding: 12px 25px;
         border: none;
+        font-family: 'Comic Neue', cursive;
+        font-weight: bold;
     }
     
     .stTextInput > div > input { 
@@ -74,6 +63,7 @@ st.markdown("""
         border-radius: 15px;
         border: 3px solid #4ECDC4;
         padding: 15px;
+        font-family: 'Comic Neue', cursive;
     }
     
     .progress-bar {
@@ -97,11 +87,12 @@ st.markdown("""
     }
     
     .help-box {
-        background: white;
+        background: rgba(255, 255, 255, 0.95);
         padding: 20px;
         border-radius: 15px;
         border: 3px solid #FFD93D;
         margin-bottom: 20px;
+        font-family: 'Comic Neue', cursive;
     }
     
     .completion-message {
@@ -120,46 +111,32 @@ st.markdown("""
         text-align: center;
         margin: 10px 0;
     }
-    </style>
-""", unsafe_allow_html=True)
-
-# NO JAVASCRIPT - completely removed
-st.markdown("""
-<script>
-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);
-            window.location.reload();
-        }
-    }, 1000);
-}
-</script>
+    /* DISABLE ALL ANIMATIONS GLOBALLY */
+    * {
+        animation: none !important;
+        transition: none !important;
+        transform: none !important;
+    }
+    </style>
 """, unsafe_allow_html=True)
 
-# Initialize session state
+# Initialize session state with proper age group 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.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.last_activity = time.time()
         st.session_state.auto_progress = True
+        
+        # Initialize age group specific states
+        st.session_state.current_age_group = None
+        st.session_state.age_group_states = {}
 
+# Initialize the app
 initialize_session_state()
 
-# SIMPLE STATIC WELCOME
+# COMPLETELY STABLE WELCOME - NO MOVEMENT AT ALL
 st.markdown("""
 <div class="main-container">
     <div class="animal-characters">
@@ -170,105 +147,139 @@ st.markdown("""
         <span>🐯</span>
     </div>
     <div class="fun-title">
-        Math Adventure Land
+        Welcome to Math Adventure Land!
     </div>
-    <div style="text-align: center; font-size: 24px; color: white;">
-        Learn Math with Fun!
+    <div style="text-align: center; font-size: 24px; color: #FF6B6B; font-family: 'Comic Neue', cursive;">
+        Where Numbers Become Friends!
     </div>
 </div>
 """, unsafe_allow_html=True)
 
 # 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"},
-    "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"},
-    "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"}
+    "👶 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
+# SIDEBAR - Clean and stable
 with st.sidebar:
-    st.markdown("### Quick Help")
+    st.markdown("### Quick Help Guide")
     
     st.markdown("""
     <div class="help-box">
         <h4>How to Play:</h4>
         <p>1. Choose your age group<br>
         2. Pick a math category<br>
-        3. Solve the problems<br>
-        4. Get feedback</p>
+        3. Solve the fun problems!<br>
+        4. Get instant feedback</p>
     </div>
     """, unsafe_allow_html=True)
     
-    auto_progress = st.toggle("Auto-Progress", value=st.session_state.auto_progress)
+    # 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()
+    
+    st.markdown("### Achievement Tips")
+    st.info("""
+    Pro Tips:
+    - Take your time with each problem
+    - Use the hints when you need help
+    - Practice makes perfect!
+    """)
 
-# MAIN CONTENT
+# MAIN CONTENT AREA
 col1, col2 = st.columns([3, 1])
 
 with col1:
-    selected_age_group = st.selectbox("Choose Age Group:", list(age_groups.keys()))
+    # 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()))
 
-    # Reset on age group change
-    if 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
-        st.session_state.show_answer = False
-        st.session_state.show_steps = False
+    # Initialize or get age group state
+    if selected_age_group not in st.session_state.age_group_states:
+        st.session_state.age_group_states[selected_age_group] = {
+            'category': None,
+            'question_index': 0,
+            'show_answer': False,
+            'show_steps': False,
+            'df_loaded': False,
+            'df': None,
+            'categories': []
+        }
 
-    # Load dataset
-    group_info = age_groups[selected_age_group]
-    dataset_path = group_info["dataset"]
-    zip_path = group_info["zip_file"]
-    image_folder = group_info["image_folder"]
+    # Get current age group state
+    age_state = st.session_state.age_group_states[selected_age_group]
+    
+    # Reset if age group changed
+    if st.session_state.current_age_group != selected_age_group:
+        st.session_state.current_age_group = selected_age_group
+        # Don't reset the state, just use the stored state for this age group
+
+    # Load dataset if not already loaded for this age group
+    if not age_state['df_loaded']:
+        group_info = age_groups[selected_age_group]
+        dataset_path = group_info["dataset"]
+        zip_path = group_info["zip_file"]
+        image_folder = group_info["image_folder"]
 
-    # Create image folder
-    temp_image_folder = os.path.join(st.session_state.temp_dir, image_folder)
-    os.makedirs(temp_image_folder, exist_ok=True)
+        # Create image folder in temp directory
+        temp_image_folder = os.path.join(st.session_state.temp_dir, image_folder)
+        os.makedirs(temp_image_folder, exist_ok=True)
 
-    # Extract images if zip exists
-    try:
-        if os.path.exists(zip_path):
-            with zipfile.ZipFile(zip_path, "r") as zip_ref:
-                zip_ref.extractall(temp_image_folder)
-    except Exception as e:
-        pass  # Silent fail
+        # Extract images if zip exists
+        try:
+            if os.path.exists(zip_path):
+                with zipfile.ZipFile(zip_path, "r") as zip_ref:
+                    zip_ref.extractall(temp_image_folder)
+        except Exception as e:
+            st.warning(f"Could not extract images: {e}")
 
-    if not os.path.exists(dataset_path):
-        st.error(f"Dataset not found: {dataset_path}")
-        st.stop()
+        if not os.path.exists(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"Error loading dataset: {e}")
-        st.stop()
+        try:
+            age_state['df'] = pd.read_excel(dataset_path)
+            age_state['df']['category'] = age_state['df']['category'].astype(str).str.strip()
+            age_state['categories'] = sorted(age_state['df']['category'].dropna().unique())
+            age_state['df_loaded'] = True
+        except Exception as e:
+            st.error(f"Error loading dataset: {e}")
+            st.stop()
 
-    categories = sorted(df['category'].dropna().unique())
-    selected_category = st.selectbox("Choose Math Category:", options=categories)
+    # Category selection
+    category_emojis = {"Addition": "+", "Subtraction": "-", "Multiplication": "×", "Division": "÷", "Geometry": "📐", "Algebra": "📊"}
+    selected_category = st.selectbox("Choose Your Math Quest:", options=age_state['categories'])
 
     # Update session if category changes
-    if st.session_state.category != selected_category:
-        st.session_state.category = selected_category
-        st.session_state.question_index = 0
-        st.session_state.show_answer = False
-        st.session_state.show_steps = False
+    if age_state['category'] != selected_category:
+        age_state['category'] = selected_category
+        age_state['question_index'] = 0
+        age_state['show_answer'] = False
+        age_state['show_steps'] = False
+        st.rerun()
 
-    # Filter questions
-    subset_df = df[df['category'] == selected_category].reset_index(drop=True)
+    # Filter questions by selected category only
+    subset_df = age_state['df'][age_state['df']['category'] == selected_category].reset_index(drop=True)
 
-    if not subset_df.empty and st.session_state.question_index < len(subset_df):
-        question = subset_df.iloc[st.session_state.question_index]
-        progress = int((st.session_state.question_index / len(subset_df)) * 100)
+    # MATH QUESTIONS SECTION
+    if not subset_df.empty and age_state['question_index'] < len(subset_df):
+        question = subset_df.iloc[age_state['question_index']]
+        progress = int((age_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="color: #FF6B6B; font-size: 18px;">
-                Progress: {st.session_state.question_index + 1} of {len(subset_df)}
+            <div style="font-family: 'Comic Neue', cursive; color: #FF6B6B; font-size: 18px;">
+                Progress: {age_state['question_index'] + 1} of {len(subset_df)}
             </div>
             <div class="progress-bar">
                 <div class="progress-fill" style="width: {progress}%;"></div>
@@ -276,21 +287,23 @@ with col1:
         </div>
         """, unsafe_allow_html=True)
 
-        # Display question
+        # Display question - NO ANIMATIONS
+        category_emoji = category_emojis.get(selected_category, "?")
         st.markdown(f"""
         <div class="question-box">
             <div style="text-align: center; font-size: 30px; margin-bottom: 15px;">
-                Challenge {st.session_state.question_index + 1}
+                Challenge {age_state['question_index'] + 1}
             </div>
-            <b>Question:</b><br><br>
+            <b>Math Quest:</b><br><br>
             {question['problem']}
         </div>
         """, unsafe_allow_html=True)
 
-        # Display image
+        # Display image with error handling
         if pd.notna(question.get('image')):
             image_name = str(question['image']).strip()
             image_found = False
+            temp_image_folder = os.path.join(st.session_state.temp_dir, age_groups[selected_age_group]["image_folder"])
             for root, _, files in os.walk(temp_image_folder):
                 for file in files:
                     if file.lower().startswith(image_name.lower()) or os.path.splitext(file)[0].lower() == image_name.lower():
@@ -300,85 +313,133 @@ with col1:
                             break
                         except:
                             pass
+            if not image_found:
+                st.warning("Image not available")
         
         # Answer input
-        user_ans = st.text_input("Your Answer:", key=f"ans_{st.session_state.question_index}")
+        user_ans = st.text_input("Your Answer:", key=f"ans_{selected_age_group}_{selected_category}_{age_state['question_index']}")
 
         # 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):
+            if st.button("Submit Answer", key=f"submit_{selected_age_group}_{selected_category}_{age_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():
+                    # SIMPLE SUCCESS MESSAGE - NO ANIMATIONS
                     st.success("CORRECT! Great job!")
-                    time.sleep(1)
-                    st.session_state.question_index += 1
-                    st.session_state.show_answer = False
-                    st.session_state.show_steps = False
+                    
+                    success_messages = [
+                        "You're a math superstar!",
+                        "Excellent work!",
+                        "Brilliant answer!",
+                        "Perfect!",
+                        "Outstanding!"
+                    ]
+                    
+                    st.markdown(f"""
+                    <div style="text-align: center; font-size: 24px; color: #FF6B6B; font-family: 'Comic Neue', cursive; padding: 20px;">
+                        {random.choice(success_messages)}
+                    </div>
+                    """, unsafe_allow_html=True)
+                    
+                    # Wait 2 seconds then continue
+                    time.sleep(2)
+                    age_state['question_index'] += 1
+                    age_state['show_answer'] = False
+                    age_state['show_steps'] = False
+                    st.session_state.last_activity = time.time()
                     st.rerun()
                 else:
-                    st.error("Try again!")
-                    st.session_state.show_answer = True
+                    st.error("Not quite right. Try again!")
+                    age_state['show_answer'] = True
+                    age_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.show_answer = True
+            if st.button("Show Hint", key=f"hint_{selected_age_group}_{selected_category}_{age_state['question_index']}", use_container_width=True):
+                st.session_state.last_activity = time.time()
+                age_state['show_answer'] = True
+                st.info("Need some help? Here's the answer below!")
 
         with col_btn3:
-            if st.button("Skip", key=f"skip_{st.session_state.question_index}", use_container_width=True):
-                st.session_state.question_index += 1
-                st.session_state.show_answer = False
-                st.session_state.show_steps = False
+            if st.button("Skip", key=f"skip_{selected_age_group}_{selected_category}_{age_state['question_index']}", use_container_width=True):
+                st.session_state.last_activity = time.time()
+                age_state['question_index'] += 1
+                age_state['show_answer'] = False
+                age_state['show_steps'] = False
+                st.info("Moving to next challenge...")
+                time.sleep(1)
                 st.rerun()
 
         # Show answer
-        if st.session_state.show_answer:
-            st.info(f"Answer: {question['answer']}")
+        if age_state['show_answer']:
+            st.info(f"Correct Answer: {question['answer']}")
+            
+            if selected_age_group in ["🚀 Math Adventurers (7-9)", "🌟 Math Wizards (13-15)"]:
+                if st.button("Show Steps", key=f"steps_{selected_age_group}_{selected_category}_{age_state['question_index']}"):
+                    st.session_state.last_activity = time.time()
+                    age_state['show_steps'] = True
+            if age_state['show_steps'] and pd.notna(question.get("steps", None)):
+                st.success(f"Step-by-Step Solution:\n{question['steps']}")
             
     elif subset_df.empty:
-        st.warning("No questions in this category.")
+        st.warning("No questions available in this category. Try another one!")
     else:
-        # Completion message
+        # COMPLETION MESSAGE - NO ANIMATIONS
         st.markdown("""
         <div class="completion-message">
-            <h1>CONGRATULATIONS!</h1>
-            <p>You completed all challenges!</p>
+            <h1 style="font-family: 'Comic Neue', cursive;">
+                CONGRATULATIONS!
+            </h1>
+            <p style="font-size: 24px;">
+                You've completed all challenges in this category!
+            </p>
         </div>
         """, unsafe_allow_html=True)
         
+        # Auto-progress logic
         if st.session_state.auto_progress:
             st.markdown("""
-            <div class="countdown" id="countdown-timer">
-                Next category in: 5 seconds
+            <div class="countdown">
+                Next adventure starting in: 5 seconds
             </div>
-            <script>
-            startAutoProgression(5);
-            </script>
             """, unsafe_allow_html=True)
+            
             time.sleep(5)
-            st.session_state.question_index = 0
-            st.session_state.show_answer = False
-            st.session_state.show_steps = False
-            current_idx = categories.index(selected_category)
-            if current_idx < len(categories) - 1:
-                st.session_state.category = categories[current_idx + 1]
+            age_state['question_index'] = 0
+            age_state['show_answer'] = False
+            age_state['show_steps'] = False
+            
+            # Move to next category
+            current_idx = age_state['categories'].index(selected_category)
+            if current_idx < len(age_state['categories']) - 1:
+                age_state['category'] = age_state['categories'][current_idx + 1]
             else:
-                st.session_state.category = categories[0]
+                age_state['category'] = age_state['categories'][0]
+                
             st.rerun()
         else:
-            if st.button("Start New Adventure"):
-                st.session_state.question_index = 0
-                st.session_state.show_answer = False
-                st.session_state.show_steps = False
+            if st.button("Start New Adventure", use_container_width=True):
+                st.session_state.last_activity = time.time()
+                age_state['question_index'] = 0
+                age_state['show_answer'] = False
+                age_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;">
+        🎪<br>✨<br>🌟
+    </div>
+    """, unsafe_allow_html=True)
+    
     st.markdown("### Progress")
     if not subset_df.empty:
-        completed = min(st.session_state.question_index, len(subset_df))
+        completed = min(age_state['question_index'], len(subset_df))
         st.metric("Completed", f"{completed}/{len(subset_df)}")
 
-# Cleanup
+# Cleanup function
 def cleanup():
     import shutil
     if 'temp_dir' in st.session_state and os.path.exists(st.session_state.temp_dir):