Update src/streamlit_app.py

src/streamlit_app.py

@@ -9,7 +9,7 @@ import time
 import tempfile
 
 # Page config
-st.set_page_config(page_title="🎓 Smart Math Teacher", layout="centered")
+st.set_page_config(page_title="🎓 Smart Math Teacher", layout="wide")
 
 # Custom CSS with beautiful colors and stable layout
 st.markdown("""
@@ -106,238 +106,242 @@ st.markdown("""
     .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 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()
 
-# 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"},
-}
+# Use columns for sidebar-like layout
+col_guide, col_main = st.columns([1, 2])
 
-# 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"
-)
+# 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 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"
-}
+    # 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"
+    )
 
-st.info(age_descriptions[selected_age_group])
+    # 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"
+    }
 
-# 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
+    st.info(age_descriptions[selected_age_group])
 
-# 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"]
+# 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)
 
-# 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)
+    # 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
 
-# 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}")
+    # 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"]
 
-if not os.path.exists(dataset_path):
-    st.error(f"Dataset not found: {dataset_path}")
-    st.stop()
+    # 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)
 
-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()
+    # 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}")
 
-# Category selection
-st.markdown("---")
-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"
-)
+    if not os.path.exists(dataset_path):
+        st.error(f"Dataset not found: {dataset_path}")
+        st.stop()
 
-# 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()
+    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()
 
-# Filter questions by selected category only
-subset_df = df[df['category'] == selected_category].reset_index(drop=True)
+    # 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"
+    )
 
-# MAIN CONTENT AREA
-st.markdown("---")
+    # 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()
 
-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)}**")
+    # Filter questions by selected category only
+    subset_df = df[df['category'] == selected_category].reset_index(drop=True)
 
-    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)
+    # MAIN CONTENT AREA - QUESTIONS
+    st.markdown("---")
 
-    # 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.")
+    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)}**")
 
-    # 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}")
+        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)
 
-    # 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)
+        # 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()
-            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!")
+        # 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']}")
 
-    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:
+    elif subset_df.empty:
+        st.warning("⚠️ No questions available in this category. Please try another category!")
+    else:
         st.markdown("---")
-        st.markdown("### 💡 Need Help?")
-        st.info(f"**✅ Correct Answer:** **{question['answer']}**")
+        st.success("""
+        # 🏆 Congratulations! 
         
-        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
+        ### You've completed all questions in this category! 
         
-        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()
-
-# 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)
+        🎉 **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()
 
 # Cleanup function
 def cleanup():