Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,28 +1,43 @@
-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
 
-# Page config with optimized settings
+# Disable all Streamlit animations and behaviors that might cause movement
 st.set_page_config(
     page_title="Math Adventure Land", 
     layout="wide",
     initial_sidebar_state="expanded"
 )
 
-# COMPLETELY CLEAN CSS - NO ANIMATIONS, NO MOVEMENTS, NO TRANSITIONS
+# MINIMAL CSS - NO GRADIENTS, NO ANIMATIONS, NO EFFECTS
 st.markdown("""
     <style>
-    @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
+    /* 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;
+    }
     
+    /* DISABLE STREAMLIT BUILT-IN ANIMATIONS */
+    .stApp {
+        animation: none !important;
+    }
+    
+    /* SIMPLE STATIC COLORS */
     .main-container {
-        background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7);
+        background: #FF6B6B;
         padding: 20px;
         border-radius: 25px;
         border: 8px dashed #FFD93D;
@@ -31,9 +46,8 @@ st.markdown("""
     
     .fun-title { 
         font-size: 50px; 
-        color: #FF6B6B; 
+        color: white; 
         text-align: center; 
-        font-family: 'Comic Neue', cursive;
         margin-bottom: 30px;
     }
     
@@ -41,9 +55,8 @@ st.markdown("""
         border: 6px dotted #FF6B6B; 
         padding: 25px; 
         border-radius: 25px; 
-        background-color: rgba(255, 255, 255, 0.9);
+        background-color: white;
         font-size: 22px; 
-        font-family: 'Comic Neue', cursive;
         margin: 20px 0;
     }
     
@@ -54,8 +67,6 @@ st.markdown("""
         border-radius: 15px; 
         padding: 12px 25px;
         border: none;
-        font-family: 'Comic Neue', cursive;
-        font-weight: bold;
     }
     
     .stTextInput > div > input { 
@@ -63,7 +74,6 @@ st.markdown("""
         border-radius: 15px;
         border: 3px solid #4ECDC4;
         padding: 15px;
-        font-family: 'Comic Neue', cursive;
     }
     
     .progress-bar {
@@ -87,12 +97,11 @@ st.markdown("""
     }
     
     .help-box {
-        background: rgba(255, 255, 255, 0.95);
+        background: white;
         padding: 20px;
         border-radius: 15px;
         border: 3px solid #FFD93D;
         margin-bottom: 20px;
-        font-family: 'Comic Neue', cursive;
     }
     
     .completion-message {
@@ -111,20 +120,12 @@ st.markdown("""
         text-align: center;
         margin: 10px 0;
     }
-    
-    /* DISABLE ALL ANIMATIONS GLOBALLY */
-    * {
-        animation: none !important;
-        transition: none !important;
-        transform: none !important;
-    }
     </style>
 """, unsafe_allow_html=True)
 
-# NO JAVASCRIPT AT ALL - completely removed
+# NO JAVASCRIPT - completely removed
 st.markdown("""
 <script>
-// Simple auto progression - NO ANIMATIONS
 function startAutoProgression(seconds) {
     let timeLeft = seconds;
     const countdownElement = document.getElementById('countdown-timer');
@@ -144,40 +145,21 @@ function startAutoProgression(seconds) {
 </script>
 """, unsafe_allow_html=True)
 
-# Initialize session state with complete reset
+# Initialize session state
 def initialize_session_state():
-    required_keys = [
-        'app_initialized', 'temp_dir', 'last_activity', 'age_group', 
-        'category', 'question_index', 'show_answer', 'show_steps', 
-        'session_initialized', 'auto_progress'
-    ]
-    
-    for key in required_keys:
-        if key not in st.session_state:
-            if key == 'app_initialized':
-                st.session_state.app_initialized = True
-            elif key == 'temp_dir':
-                st.session_state.temp_dir = tempfile.mkdtemp()
-            elif key == 'last_activity':
-                st.session_state.last_activity = time.time()
-            elif key == 'age_group':
-                st.session_state.age_group = None
-            elif key == 'category':
-                st.session_state.category = None
-            elif key == 'question_index':
-                st.session_state.question_index = 0
-            elif key == 'show_answer':
-                st.session_state.show_answer = False
-            elif key == 'show_steps':
-                st.session_state.show_steps = False
-            elif key == 'session_initialized':
-                st.session_state.session_initialized = False
-            elif key == 'auto_progress':
-                st.session_state.auto_progress = True
+    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.auto_progress = True
 
 initialize_session_state()
 
-# COMPLETELY STABLE WELCOME - NO MOVEMENT AT ALL
+# SIMPLE STATIC WELCOME
 st.markdown("""
 <div class="main-container">
     <div class="animal-characters">
@@ -188,71 +170,53 @@ st.markdown("""
         <span>🐯</span>
     </div>
     <div class="fun-title">
-        Welcome to Math Adventure Land!
+        Math Adventure Land
     </div>
-    <div style="text-align: center; font-size: 24px; color: #FF6B6B; font-family: 'Comic Neue', cursive;">
-        Where Numbers Become Friends!
+    <div style="text-align: center; font-size: 24px; color: white;">
+        Learn Math with Fun!
     </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", "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": "🌟"}
+    "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"}
 }
 
-# SIDEBAR - Clean and stable
+# SIDEBAR
 with st.sidebar:
-    st.markdown("### Quick Help Guide")
+    st.markdown("### Quick Help")
     
     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 fun problems!<br>
-        4. Get instant feedback</p>
+        3. Solve the problems<br>
+        4. Get feedback</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")
+    auto_progress = st.toggle("Auto-Progress", value=st.session_state.auto_progress)
     
     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 AREA
+# MAIN CONTENT
 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()))
+    selected_age_group = st.selectbox("Choose Age Group:", list(age_groups.keys()))
 
-    # Force reset when age group changes
+    # 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
-        st.session_state.session_initialized = True
-        st.rerun()
 
     # Load dataset
     group_info = age_groups[selected_age_group]
@@ -260,7 +224,7 @@ with col1:
     zip_path = group_info["zip_file"]
     image_folder = group_info["image_folder"]
 
-    # Create image folder in temp directory
+    # Create image folder
     temp_image_folder = os.path.join(st.session_state.temp_dir, image_folder)
     os.makedirs(temp_image_folder, exist_ok=True)
 
@@ -270,7 +234,7 @@ with col1:
             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}")
+        pass  # Silent fail
 
     if not os.path.exists(dataset_path):
         st.error(f"Dataset not found: {dataset_path}")
@@ -283,10 +247,8 @@ with col1:
         st.error(f"Error loading dataset: {e}")
         st.stop()
 
-    # 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)
+    selected_category = st.selectbox("Choose Math Category:", options=categories)
 
     # Update session if category changes
     if st.session_state.category != selected_category:
@@ -294,20 +256,18 @@ with col1:
         st.session_state.question_index = 0
         st.session_state.show_answer = False
         st.session_state.show_steps = False
-        st.rerun()
 
-    # Filter questions by selected category only
+    # Filter questions
     subset_df = df[df['category'] == selected_category].reset_index(drop=True)
 
-    # MATH QUESTIONS SECTION
     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)
         
-        # Progress bar - NO ANIMATIONS
+        # 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;">
+            <div style="color: #FF6B6B; font-size: 18px;">
                 Progress: {st.session_state.question_index + 1} of {len(subset_df)}
             </div>
             <div class="progress-bar">
@@ -316,19 +276,18 @@ with col1:
         </div>
         """, unsafe_allow_html=True)
 
-        # Display question - NO ANIMATIONS
-        category_emoji = category_emojis.get(selected_category, "?")
+        # Display question
         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}
             </div>
-            <b>Math Quest:</b><br><br>
+            <b>Question:</b><br><br>
             {question['problem']}
         </div>
         """, unsafe_allow_html=True)
 
-        # Display image with error handling
+        # Display image
         if pd.notna(question.get('image')):
             image_name = str(question['image']).strip()
             image_found = False
@@ -341,8 +300,6 @@ 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}")
@@ -352,125 +309,76 @@ 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()
                 if str(user_ans).strip().lower() == str(question['answer']).strip().lower():
-                    # SIMPLE SUCCESS MESSAGE - NO ANIMATIONS
                     st.success("CORRECT! Great job!")
-                    
-                    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)
+                    time.sleep(1)
                     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("Not quite right. Try again!")
+                    st.error("Try again!")
                     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()
                 st.session_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.last_activity = time.time()
                 st.session_state.question_index += 1
                 st.session_state.show_answer = False
                 st.session_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"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_{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"Step-by-Step Solution:\n{question['steps']}")
+            st.info(f"Answer: {question['answer']}")
             
     elif subset_df.empty:
-        st.warning("No questions available in this category. Try another one!")
+        st.warning("No questions in this category.")
     else:
-        # COMPLETION MESSAGE - NO ANIMATIONS
+        # Completion message
         st.markdown("""
         <div class="completion-message">
-            <h1 style="font-family: 'Comic Neue', cursive;">
-                CONGRATULATIONS!
-            </h1>
-            <p style="font-size: 24px;">
-                You've completed all challenges in this category!
-            </p>
+            <h1>CONGRATULATIONS!</h1>
+            <p>You completed all challenges!</p>
         </div>
         """, unsafe_allow_html=True)
         
-        # Auto-progress logic
         if st.session_state.auto_progress:
             st.markdown("""
             <div class="countdown" id="countdown-timer">
-                Next adventure starting in: 5 seconds
+                Next category 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
-            
-            # 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]
-                
             st.rerun()
         else:
-            if st.button("Start New Adventure", use_container_width=True):
-                st.session_state.last_activity = time.time()
+            if st.button("Start New Adventure"):
                 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;">
-        🎪<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))
         st.metric("Completed", f"{completed}/{len(subset_df)}")
 
-# Cleanup function
+# Cleanup
 def cleanup():
     import shutil
     if 'temp_dir' in st.session_state and os.path.exists(st.session_state.temp_dir):