Update src/streamlit_app.py

src/streamlit_app.py

@@ -9,339 +9,165 @@ import time
 import tempfile
 
 # Page config
-st.set_page_config(page_title="🎓 Smart Math Teacher", layout="wide")
+st.set_page_config(page_title="🎓 Smart Math Teacher", layout="centered")
 
-# Custom CSS with beautiful colors and stable layout
+# Custom CSS
 st.markdown("""
     <style>
-    .fun-title { 
-        font-size: 40px; 
-        color: #FF6B6B; 
-        text-align: center; 
-        font-family: 'Comic Sans MS', cursive; 
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
-        margin-bottom: 20px;
-    }
-    .question-box { 
-        border: 4px solid #4ECDC4; 
-        padding: 20px; 
-        border-radius: 15px; 
-        background: linear-gradient(135deg, #FFF9C4, #E3F2FD);
-        font-size: 20px; 
-        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-        margin: 15px 0;
-    }
-    .stButton > button { 
-        font-size: 18px; 
-        background: linear-gradient(45deg, #FF6B6B, #FF8E53);
-        color: white; 
-        border-radius: 10px; 
-        padding: 10px;
-        border: none;
-        font-weight: bold;
-        margin: 5px;
-    }
-    .stTextInput > div > input { 
-        font-size: 18px; 
-        border: 2px solid #4ECDC4;
-        border-radius: 10px;
-        padding: 10px;
-    }
-    
-    /* Main container background */
-    .stApp {
-        background: linear-gradient(135deg, #E3F2FD, #F3E5F5);
-    }
-    
-    /* Progress bar styling */
-    .stProgress > div > div > div {
-        background: linear-gradient(45deg, #4ECDC4, #00C9FF);
-    }
-    
-    /* Success message */
-    .stSuccess {
-        background: linear-gradient(135deg, #4ECDC4, #00C9FF);
-        color: white;
-        border-radius: 10px;
-    }
-    
-    /* Info message */
-    .stInfo {
-        background: linear-gradient(135deg, #FFD93D, #FF9A3D);
-        color: white;
-        border-radius: 10px;
-    }
+    .fun-title { font-size: 40px; color: #ff3399; text-align: center; font-family: 'Comic Sans MS', cursive; }
+    .question-box { border: 4px dotted #ffcc00; padding: 20px; border-radius: 20px; background-color: #fff7e6; font-size: 20px; }
+    .stButton > button { font-size: 18px; background-color: #00cc99; color: white; border-radius: 10px; padding: 10px; }
+    .stTextInput > div > input { font-size: 18px; }
     
-    /* Error message */
-    .stError {
-        background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
-        color: white;
-        border-radius: 10px;
-    }
-    
-    /* Warning message */
-    .stWarning {
-        background: linear-gradient(135deg, #FFD93D, #FF9A3D);
-        color: white;
-        border-radius: 10px;
-    }
-    
-    /* Guide box */
+    /* Guide styling */
     .guide-box {
-        background: linear-gradient(135deg, #A5D6A7, #C8E6C9);
+        background-color: #e8f5e8;
         padding: 15px;
         border-radius: 10px;
         border: 2px solid #4CAF50;
         margin: 10px 0;
     }
-    
-    /* DISABLE ALL ANIMATIONS */
-    * {
-        animation: none !important;
-        transition: none !important;
-        transform: none !important;
-    }
-    
-    /* Keep content in view */
-    .main-content {
-        min-height: 100vh;
-    }
-    
-    /* Sidebar styling */
-    .sidebar-content {
-        position: sticky;
-        top: 20px;
-    }
     </style>
 """, unsafe_allow_html=True)
 
+# Welcome title
+st.markdown("<div class='fun-title'>🧠✨ Welcome to the Smart Math Teacher! ✨🧠</div>", unsafe_allow_html=True)
+
+# USER GUIDE - Always visible at the top
+st.markdown("""
+<div class="guide-box">
+<h3>📖 How to Use This App:</h3>
+
+**1. Select Your Age Group** - Choose your learning level (4-6, 7-9, or 13-15 years)<br>
+**2. Choose Math Category** - Pick what type of math to practice<br>
+**3. Solve Questions** - Read each question and type your answer<br>
+**4. Get Help** - Use hints or skip if needed<br>
+**5. Learn** - See correct answers and step-by-step solutions
+</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()
 
-# Use columns for sidebar-like layout
-col_guide, col_main = st.columns([1, 2])
-
-# LEFT SIDEBAR - GUIDE
-with col_guide:
-    st.markdown("### 📖 How to Use This App")
-    with st.expander("**Click to Expand Guide**", expanded=True):
-        st.markdown("""
-        <div class="guide-box">
-        <h4>🎯 Quick Start Guide:</h4>
-        
-        **Step 1: Choose Your Level** 👇
-        - Select your age group
-        - 4-6: Basic counting
-        - 7-9: Addition, subtraction
-        - 13-15: Advanced math
-        
-        **Step 2: Pick a Category** 📚
-        - Choose math type to practice
-        - Each category has different questions
-        
-        **Step 3: Solve Problems** ✏️
-        - Read each question
-        - Type your answer
-        - Click "Submit Answer"
-        
-        **Step 4: Get Help** 💡
-        - Use "Show Hint" if stuck
-        - "Show Steps" for explanation
-        - "Skip" for next question
-        
-        **Tips:** 🌟
-        - Take your time
-        - Mistakes help you learn!
-        - Practice regularly
-        </div>
-        """, unsafe_allow_html=True)
-    
-    # Age group setup 
-    age_groups = {
-        "4-6 Age Group": {"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"},
-        "7-9 Age Group": {"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"},
-        "13-15 Age Group": {"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"},
-    }
-
-    # Age group selection in sidebar
-    st.markdown("---")
-    st.markdown("### 🧒 Choose Your Level")
-    selected_age_group = st.selectbox(
-        "Select age group:", 
-        list(age_groups.keys()),
-        key="age_group_selector"
-    )
-
-    # Age group descriptions
-    age_descriptions = {
-        "4-6 Age Group": "🎨 **Fun with Numbers**: Counting, shapes, basic addition",
-        "7-9 Age Group": "🚀 **Math Adventures**: Addition, subtraction, multiplication",
-        "13-15 Age Group": "🌟 **Math Master**: Algebra, geometry, problem solving"
-    }
-
-    st.info(age_descriptions[selected_age_group])
-
-# MAIN CONTENT AREA - RIGHT SIDE
-with col_main:
-    # Welcome title
-    st.markdown("<div class='fun-title'>🧠✨ Welcome to the Smart Math Teacher! ✨🧠</div>", unsafe_allow_html=True)
-
-    # Initialize session
-    if "session_initialized" not in st.session_state 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
-        st.session_state.show_answer = False
-        st.session_state.show_steps = False
-        st.session_state.session_initialized = True
-
-    # 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"]
-
-    # 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:
-        st.warning(f"Error extracting images: {e}")
-
-    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()
-
-    # Category selection in main area
-    st.markdown("### 📚 Choose Your Math Category")
-    categories = sorted(df['category'].dropna().unique())
-    selected_category = st.selectbox(
-        "Select a category to practice:", 
-        options=categories,
-        key="category_selector"
-    )
-
-    # Update session if category changes
-    if st.session_state.category != selected_category:
-        st.session_state.category = selected_category
-        st.session_state.question_index = 0
+# Age group setup 
+age_groups = {
+    "4-6 Age Group": {"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"},
+    "7-9 Age Group": {"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"},
+    "13-15 Age Group": {"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"},
+}
+
+selected_age_group = st.selectbox("🧒 Select your Age Group:", list(age_groups.keys()))
+
+# Initialize session
+if "session_initialized" not in st.session_state 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
+    st.session_state.show_answer = False
+    st.session_state.show_steps = False
+    st.session_state.session_initialized = True
+
+# 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"]
+
+# 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:
+    st.warning(f"Error extracting images: {e}")
+
+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()
+
+# Category selection
+categories = sorted(df['category'].dropna().unique())
+selected_category = st.selectbox("📚 Choose a Math Category:", options=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
+    st.rerun()
+
+# Filter questions by selected category only
+subset_df = df[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)
+    st.progress(progress)
+
+    st.markdown(f"<div class='question-box'>📘 <b>Question {st.session_state.question_index + 1}:</b><br><br>{question['problem']}</div>", unsafe_allow_html=True)
+
+    # Display image with error handling
+    if pd.notna(question.get('image')):
+        image_name = str(question['image']).strip()
+        image_found = False
+        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():
+                    try:
+                        st.image(Image.open(os.path.join(root, file)), use_column_width=True)
+                        image_found = True
+                        break
+                    except:
+                        pass
+        if not image_found:
+            st.warning("❌ Image not found.")
+
+    user_ans = st.text_input("📝 Your Answer:", key=f"ans_{st.session_state.question_index}")
+
+    if st.button("✅ Submit Answer"):
+        if str(user_ans).strip().lower() == str(question['answer']).strip().lower():
+            st.success("🎉 Correct! Well done!")
+            st.balloons()
+            time.sleep(2)
+            st.session_state.question_index += 1
+            st.session_state.show_answer = False
+            st.session_state.show_steps = False
+            st.rerun()
+        else:
+            st.error("❌ Try again or view the correct answer below.")
+            st.session_state.show_answer = True
+            st.session_state.show_steps = False
+
+    if st.session_state.show_answer:
+        st.info(f"✅ Correct Answer: **{question['answer']}**")
+        if selected_age_group in ["7-9 Age Group", "13-15 Age Group"]:
+            if st.button("🔍 Show Steps"):
+                st.session_state.show_steps = True
+        if st.session_state.show_steps and pd.notna(question.get("steps", None)):
+            st.success(f"### 🪄 Steps:\n{question['steps']}")
+
+    if st.button("⏭️ Skip"):
+        st.session_state.question_index += 1
         st.session_state.show_answer = False
         st.session_state.show_steps = False
         st.rerun()
-
-    # Filter questions by selected category only
-    subset_df = df[df['category'] == selected_category].reset_index(drop=True)
-
-    # MAIN CONTENT AREA - QUESTIONS
-    st.markdown("---")
-
-    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 information
-        col_progress1, col_progress2 = st.columns([3, 1])
-        with col_progress1:
-            st.progress(progress)
-        with col_progress2:
-            st.write(f"**{st.session_state.question_index + 1} of {len(subset_df)}**")
-
-        st.markdown(f"<div class='question-box'>📘 <b>Question {st.session_state.question_index + 1}:</b><br><br>{question['problem']}</div>", unsafe_allow_html=True)
-
-        # Display image with error handling
-        if pd.notna(question.get('image')):
-            image_name = str(question['image']).strip()
-            image_found = False
-            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():
-                        try:
-                            st.image(Image.open(os.path.join(root, file)), use_column_width=True)
-                            image_found = True
-                            break
-                        except:
-                            pass
-            if not image_found:
-                st.warning("❌ Image not found for this question.")
-
-        # Answer section
-        st.markdown("### ✏️ Your Turn to Solve!")
-        user_ans = st.text_input("Type your answer below:", key=f"ans_{st.session_state.question_index}")
-
-        # Action buttons in columns
-        col1, col2, col3 = st.columns(3)
-        
-        with col1:
-            if st.button("✅ Submit Answer", use_container_width=True):
-                if str(user_ans).strip().lower() == str(question['answer']).strip().lower():
-                    st.success("🎉 Correct! Well done!")
-                    st.balloons()
-                    time.sleep(2)
-                    st.session_state.question_index += 1
-                    st.session_state.show_answer = False
-                    st.session_state.show_steps = False
-                    st.rerun()
-                else:
-                    st.error("❌ Not quite right. Try again or use the hint below!")
-                    st.session_state.show_answer = True
-                    st.session_state.show_steps = False
-
-        with col2:
-            if st.button("💡 Show Hint", use_container_width=True):
-                st.session_state.show_answer = True
-                st.session_state.show_steps = False
-                st.info("💡 Need help? Check the answer below!")
-
-        with col3:
-            if st.button("⏭️ Skip Question", use_container_width=True):
-                st.session_state.question_index += 1
-                st.session_state.show_answer = False
-                st.session_state.show_steps = False
-                st.rerun()
-
-        # Help sections
-        if st.session_state.show_answer:
-            st.markdown("---")
-            st.markdown("### 💡 Need Help?")
-            st.info(f"**✅ Correct Answer:** **{question['answer']}**")
-            
-            if selected_age_group in ["7-9 Age Group", "13-15 Age Group"]:
-                if st.button("🔍 Show Step-by-Step Solution"):
-                    st.session_state.show_steps = True
-            
-            if st.session_state.show_steps and pd.notna(question.get("steps", None)):
-                st.success(f"### 🪄 How to Solve:\n{question['steps']}")
-
-    elif subset_df.empty:
-        st.warning("⚠️ No questions available in this category. Please try another category!")
-    else:
-        st.markdown("---")
-        st.success("""
-        # 🏆 Congratulations! 
-        
-        ### You've completed all questions in this category! 
-        
-        🎉 **Great job!** You're becoming a math superstar!
-        
-        **What to do next:**
-        - Try another category in the same age group
-        - Move to a more challenging age group
-        - Practice regularly to keep improving!
-        """)
-        st.balloons()
+elif subset_df.empty:
+    st.warning("⚠️ No questions available in this category. Try another one.")
+else:
+    st.success("🏁 You've completed all questions in this category!")
 
 # Cleanup function
 def cleanup():