Update src/streamlit_app.py

src/streamlit_app.py

@@ -11,7 +11,7 @@ import tempfile
 # Page config
 st.set_page_config(page_title="🎓 Smart Math Teacher", layout="centered")
 
-# Custom CSS with beautiful colors
+# Custom CSS with beautiful colors and stable layout
 st.markdown("""
     <style>
     .fun-title { 
@@ -20,6 +20,7 @@ st.markdown("""
         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; 
@@ -28,6 +29,7 @@ st.markdown("""
         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; 
@@ -37,9 +39,7 @@ st.markdown("""
         padding: 10px;
         border: none;
         font-weight: bold;
-    }
-    .stButton > button:hover {
-        background: linear-gradient(45deg, #FF8E53, #FF6B6B);
+        margin: 5px;
     }
     .stTextInput > div > input { 
         font-size: 18px; 
@@ -86,18 +86,65 @@ st.markdown("""
         border-radius: 10px;
     }
     
+    /* Guide box */
+    .guide-box {
+        background: linear-gradient(135deg, #A5D6A7, #C8E6C9);
+        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;
+    }
     </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 SECTION
+with st.expander("📖 **How to Use This App - Click to Expand Guide**", expanded=True):
+    st.markdown("""
+    <div class="guide-box">
+    <h3>🎯 Quick Start Guide:</h3>
+    
+    **Step 1: Choose Your Level** 👇
+    - Select your age group from the dropdown
+    - 4-6: Basic counting and simple math
+    - 7-9: Addition, subtraction, multiplication
+    - 13-15: Advanced math and algebra
+    
+    **Step 2: Pick a Category** 📚
+    - Choose what type of math you want to practice
+    - Each category has different types of questions
+    
+    **Step 3: Solve Problems** ✏️
+    - Read each question carefully
+    - Type your answer in the box
+    - Click "Submit Answer" to check
+    
+    **Step 4: Get Help When Needed** 💡
+    - Use "Show Hint" if you're stuck
+    - "Show Steps" explains how to solve it
+    - "Skip" moves to the next question
+    
+    **Tips for Success:** 🌟
+    - Take your time with each problem
+    - Don't worry about mistakes - they help you learn!
+    - Practice regularly to improve your skills
+    </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()
@@ -109,7 +156,23 @@ age_groups = {
     "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()))
+# Age group selection with better layout
+st.markdown("---")
+st.markdown("### 🧒 Select Your Learning Level")
+selected_age_group = st.selectbox(
+    "Choose your age group:", 
+    list(age_groups.keys()),
+    key="age_group_selector"
+)
+
+# Age group descriptions
+age_descriptions = {
+    "4-6 Age Group": "🎨 **Fun with Numbers**: Counting, shapes, and basic addition",
+    "7-9 Age Group": "🚀 **Math Adventures**: Addition, subtraction, multiplication",
+    "13-15 Age Group": "🌟 **Math Master**: Algebra, geometry, and problem solving"
+}
+
+st.info(age_descriptions[selected_age_group])
 
 # Initialize session
 if "session_initialized" not in st.session_state or st.session_state.age_group != selected_age_group:
@@ -150,8 +213,14 @@ except Exception as e:
     st.stop()
 
 # Category selection
+st.markdown("---")
+st.markdown("### 📚 Choose Your Math Category")
 categories = sorted(df['category'].dropna().unique())
-selected_category = st.selectbox("📚 Choose a Math Category:", options=categories)
+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:
@@ -164,10 +233,19 @@ if st.session_state.category != selected_category:
 # Filter questions by selected category only
 subset_df = df[df['category'] == selected_category].reset_index(drop=True)
 
+# MAIN CONTENT AREA
+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)
-    st.progress(progress)
+    
+    # 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)
 
@@ -185,41 +263,81 @@ if not subset_df.empty and st.session_state.question_index < len(subset_df):
                     except:
                         pass
         if not image_found:
-            st.warning("❌ Image not 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
 
-    user_ans = st.text_input("📝 Your Answer:", key=f"ans_{st.session_state.question_index}")
+    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!")
 
-    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)
+    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()
-        else:
-            st.error("❌ Try again or view the correct answer below.")
-            st.session_state.show_answer = True
-            st.session_state.show_steps = False
 
+    # Help sections
     if st.session_state.show_answer:
-        st.info(f"✅ Correct Answer: **{question['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 Steps"):
+            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"### 🪄 Steps:\n{question['steps']}")
+            st.success(f"### 🪄 How to Solve:\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()
 elif subset_df.empty:
-    st.warning("⚠️ No questions available in this category. Try another one.")
+    st.warning("⚠️ No questions available in this category. Please try another category!")
 else:
-    st.success("🏁 You've completed all questions in this category!")
+    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()
+
+# Footer with tips
+st.markdown("---")
+st.markdown("""
+<div style='text-align: center; color: #666; font-size: 14px;'>
+💡 <b>Tip:</b> The page might scroll when changing groups - this is normal! Just scroll down to continue learning.
+</div>
+""", unsafe_allow_html=True)
 
 # Cleanup function
 def cleanup():