Update src/streamlit_app.py

src/streamlit_app.py

@@ -10,7 +10,7 @@ import tempfile
 import random
 
 # Page config
-st.set_page_config(page_title="🎪 Math Adventure Land", layout="centered")
+st.set_page_config(page_title="🎪 Math Adventure Land", layout="wide")
 
 # Custom CSS with LOTS of fun animations and styles
 st.markdown("""
@@ -24,6 +24,7 @@ st.markdown("""
         padding: 20px;
         border-radius: 25px;
         border: 8px dashed #FFD93D;
+        margin-bottom: 20px;
     }
     
     @keyframes gradientBG {
@@ -90,86 +91,84 @@ st.markdown("""
         font-family: 'Comic Neue', cursive;
     }
     
-    /* Calculator Styles */
+    /* Compact Calculator Styles */
     .calculator-container {
         background: rgba(255, 255, 255, 0.95);
-        padding: 25px 30px;
-        border-radius: 20px;
-        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+        padding: 15px;
+        border-radius: 15px;
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
         text-align: center;
-        width: 320px;
-        margin: 20px auto;
-        border: 5px solid #FFD93D;
+        border: 4px solid #FFD93D;
         animation: float 4s ease-in-out infinite;
+        margin-bottom: 20px;
     }
     
     @keyframes float {
         0%, 100% { transform: translateY(0px); }
-        50% { transform: translateY(-10px); }
+        50% { transform: translateY(-5px); }
     }
     
     .calculator-title {
-        margin-bottom: 15px;
+        margin-bottom: 10px;
         color: #FF6B6B;
         font-family: 'Comic Neue', cursive;
-        font-size: 28px;
-        text-shadow: 2px 2px 0 #FFD93D;
+        font-size: 20px;
+        text-shadow: 1px 1px 0 #FFD93D;
     }
     
-    .calculator-input {
-        width: 80%;
+    .calculator-display {
+        width: 100%;
         padding: 12px;
-        margin: 10px 0;
-        border-radius: 12px;
+        margin: 8px 0;
+        border-radius: 10px;
         border: 3px solid #4ECDC4;
-        text-align: center;
+        text-align: right;
         font-size: 18px;
         font-family: 'Comic Neue', cursive;
         background: #FFF9C4;
+        font-weight: bold;
     }
     
-    .calculator-buttons {
-        margin-top: 15px;
+    .calculator-buttons-compact {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 5px;
+        margin-top: 10px;
     }
     
-    .calculator-button {
-        margin: 6px;
-        padding: 12px 18px;
+    .calc-btn {
+        padding: 10px 5px;
         border: none;
-        border-radius: 12px;
+        border-radius: 8px;
         cursor: pointer;
-        font-size: 18px;
+        font-size: 16px;
         color: white;
         background: linear-gradient(45deg, #4ECDC4, #45B7D1);
-        transition: all 0.3s ease;
+        transition: all 0.2s ease;
         font-family: 'Comic Neue', cursive;
         font-weight: bold;
     }
     
-    .calculator-button:hover {
-        transform: scale(1.1);
+    .calc-btn:hover {
+        transform: scale(1.05);
         background: linear-gradient(45deg, #45B7D1, #4ECDC4);
     }
     
-    .calculator-clear {
+    .calc-btn-clear {
         background: linear-gradient(45deg, #FF6B6B, #FF8E8E);
     }
     
-    .calculator-clear:hover {
+    .calc-btn-clear:hover {
         background: linear-gradient(45deg, #FF8E8E, #FF6B6B);
     }
     
-    .calculator-result {
-        margin-top: 15px;
-        font-size: 20px;
-        font-weight: bold;
-        color: #FF6B6B;
-        min-height: 30px;
-        font-family: 'Comic Neue', cursive;
-        padding: 10px;
-        background: #FFF9C4;
-        border-radius: 10px;
-        border: 2px dashed #FFD93D;
+    .calc-btn-equals {
+        background: linear-gradient(45deg, #96CEB4, #4ECDC4);
+        grid-column: span 2;
+    }
+    
+    .calc-btn-zero {
+        grid-column: span 2;
     }
     
     /* Fun elements */
@@ -219,12 +218,23 @@ st.markdown("""
         font-size: 40px;
         animation: bounce 2s infinite;
     }
+    
+    /* Sidebar styling */
+    .sidebar-content {
+        padding: 10px;
+    }
+    
+    /* Main content area */
+    .main-content {
+        padding: 20px;
+    }
     </style>
 """, unsafe_allow_html=True)
 
-# JavaScript for animations and effects
+# JavaScript for animations and calculator
 st.markdown("""
 <script>
+// Celebration functions
 function createEmojiRain() {
     const emojis = ['🎉', '🎈', '⭐', '🎊', '🌈', '🚀', '🎨', '🐱', '🐶', '🦄'];
     const container = document.createElement('div');
@@ -266,9 +276,107 @@ function createConfetti() {
 function celebrate() {
     createEmojiRain();
     createConfetti();
-    // Play celebration sound (you can add actual sound files)
-    console.log("🎉 Celebration time!");
 }
+
+// Calculator functionality
+let currentInput = '0';
+let previousInput = '';
+let operation = null;
+let resetScreen = false;
+
+function updateDisplay() {
+    const display = document.getElementById('calc-display');
+    if (display) {
+        display.value = currentInput;
+    }
+}
+
+function appendNumber(number) {
+    if (currentInput === '0' || resetScreen) {
+        currentInput = number;
+        resetScreen = false;
+    } else {
+        currentInput += number;
+    }
+    updateDisplay();
+}
+
+function chooseOperation(op) {
+    if (currentInput === '') return;
+    
+    if (previousInput !== '') {
+        compute();
+    }
+    operation = op;
+    previousInput = currentInput;
+    resetScreen = true;
+}
+
+function compute() {
+    let computation;
+    const prev = parseFloat(previousInput);
+    const current = parseFloat(currentInput);
+    
+    if (isNaN(prev) || isNaN(current)) return;
+    
+    switch (operation) {
+        case '+':
+            computation = prev + current;
+            break;
+        case '-':
+            computation = prev - current;
+            break;
+        case '*':
+            computation = prev * current;
+            break;
+        case '/':
+            computation = prev / current;
+            break;
+        default:
+            return;
+    }
+    
+    currentInput = computation.toString();
+    operation = undefined;
+    previousInput = '';
+    resetScreen = true;
+    updateDisplay();
+    
+    // Mini celebration for big results
+    if (Math.abs(computation) > 1000) {
+        const miniEmoji = document.createElement('div');
+        miniEmoji.textContent = '🎉';
+        miniEmoji.style.position = 'fixed';
+        miniEmoji.style.fontSize = '20px';
+        miniEmoji.style.left = Math.random() * 100 + 'vw';
+        miniEmoji.style.animation = 'fall 2s linear forwards';
+        document.body.appendChild(miniEmoji);
+        setTimeout(() => miniEmoji.remove(), 2000);
+    }
+}
+
+function clearCalculator() {
+    currentInput = '0';
+    previousInput = '';
+    operation = null;
+    updateDisplay();
+}
+
+function appendDecimal() {
+    if (resetScreen) {
+        currentInput = '0';
+        resetScreen = false;
+    }
+    if (!currentInput.includes('.')) {
+        currentInput += '.';
+    }
+    updateDisplay();
+}
+
+// Initialize calculator
+document.addEventListener('DOMContentLoaded', function() {
+    updateDisplay();
+});
 </script>
 """, unsafe_allow_html=True)
 
@@ -300,318 +408,296 @@ age_groups = {
     "🌟 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": "🌟"}
 }
 
-selected_age_group = st.selectbox("🎯 Choose Your Adventure Level:", 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"⚠️ Oops! Our image treasure chest is hiding! {e}")
-
-if not os.path.exists(dataset_path):
-    st.error(f"❌ Adventure map 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"❌ Oh no! The math treasure got mixed up! {e}")
-    st.stop()
-
-# Category selection with fun names
-categories = sorted(df['category'].dropna().unique())
-category_emojis = {"Addition": "➕", "Subtraction": "➖", "Multiplication": "✖️", "Division": "➗", "Geometry": "📐", "Algebra": "📊"}
-selected_category = st.selectbox("📚 Choose Your Math Quest:", 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)
-
-# 🧮 SUPER FUN CALCULATOR SECTION
-st.markdown("---")
-st.markdown("<h2 style='text-align: center; color: #FF6B6B; font-family: Comic Neue, cursive;'>🧮 Magical Math Calculator 🧮</h2>", unsafe_allow_html=True)
-st.markdown("<p style='text-align: center; font-size: 18px; color: #4ECDC4;'>Use this magical calculator to help with your math adventures! ✨</p>", unsafe_allow_html=True)
-
-# Create calculator in columns
-col1, col2, col3 = st.columns([1, 2, 1])
-
-with col2:
-    st.markdown(f"""
+# SIDEBAR - Calculator and Controls
+with st.sidebar:
+    st.markdown("### 🧮 Math Helper Calculator")
+    st.markdown("Use this calculator to help with your math problems! ✨")
+    
+    # Compact Calculator
+    st.markdown("""
     <div class="calculator-container">
-        <h3 class="calculator-title">✨ Magic Calculator ✨</h3>
-        <input type="number" id="num1" class="calculator-input" placeholder="🔢 First number">
-        <input type="number" id="num2" class="calculator-input" placeholder="🔢 Second number">
+        <div class="calculator-title">✨ Magic Calculator ✨</div>
+        <input type="text" id="calc-display" class="calculator-display" readonly value="0">
         
-        <div class="calculator-buttons">
-            <button class="calculator-button" onclick="calculate('+')">➕ Add</button>
-            <button class="calculator-button" onclick="calculate('-')">➖ Subtract</button>
-            <button class="calculator-button" onclick="calculate('*')">✖️ Multiply</button>
-            <button class="calculator-button" onclick="calculate('/')">➗ Divide</button>
-            <button class="calculator-button calculator-clear" onclick="clearCalculator()">🧹 Clear</button>
+        <div class="calculator-buttons-compact">
+            <button class="calc-btn calc-btn-clear" onclick="clearCalculator()">C</button>
+            <button class="calc-btn calc-btn-clear" onclick="currentInput = currentInput.slice(0, -1) || '0'; updateDisplay();">⌫</button>
+            <button class="calc-btn" onclick="chooseOperation('/')">/</button>
+            <button class="calc-btn" onclick="chooseOperation('*')">×</button>
+            
+            <button class="calc-btn" onclick="appendNumber('7')">7</button>
+            <button class="calc-btn" onclick="appendNumber('8')">8</button>
+            <button class="calc-btn" onclick="appendNumber('9')">9</button>
+            <button class="calc-btn" onclick="chooseOperation('-')">-</button>
+            
+            <button class="calc-btn" onclick="appendNumber('4')">4</button>
+            <button class="calc-btn" onclick="appendNumber('5')">5</button>
+            <button class="calc-btn" onclick="appendNumber('6')">6</button>
+            <button class="calc-btn" onclick="chooseOperation('+')">+</button>
+            
+            <button class="calc-btn" onclick="appendNumber('1')">1</button>
+            <button class="calc-btn" onclick="appendNumber('2')">2</button>
+            <button class="calc-btn" onclick="appendNumber('3')">3</button>
+            <button class="calc-btn calc-btn-equals" onclick="compute()" rowspan="2">=</button>
+            
+            <button class="calc-btn calc-btn-zero" onclick="appendNumber('0')">0</button>
+            <button class="calc-btn" onclick="appendDecimal()">.</button>
         </div>
-        
-        <div id="result" class="calculator-result">🎯 Your answer will appear here!</div>
     </div>
     """, unsafe_allow_html=True)
     
-    # JavaScript for calculator with fun messages
-    st.markdown("""
-    <script>
-    function calculate(operator) {
-      const num1 = parseFloat(document.getElementById('num1').value);
-      const num2 = parseFloat(document.getElementById('num2').value);
-      const resultDisplay = document.getElementById('result');
-
-      // Error handling for invalid input
-      if (isNaN(num1) || isNaN(num2)) {
-        resultDisplay.innerHTML = "⚠️ Oops! Please enter magical numbers! ✨";
-        resultDisplay.style.color = "#FF6B6B";
-        return;
-      }
-
-      let result;
-      let emoji = "🎉";
-      switch (operator) {
-        case '+':
-          result = num1 + num2;
-          emoji = "🎊";
-          break;
-        case '-':
-          result = num1 - num2;
-          emoji = "🚀";
-          break;
-        case '*':
-          result = num1 * num2;
-          emoji = "🌈";
-          break;
-        case '/':
-          if (num2 === 0) {
-            resultDisplay.innerHTML = "❌ Whoa! You can't divide by zero! 🚫";
-            resultDisplay.style.color = "#FF6B6B";
-            return;
-          }
-          result = num1 / num2;
-          emoji = "⭐";
-          break;
-        default:
-          resultDisplay.innerHTML = "🤔 Unknown magic operation!";
-          return;
-      }
-
-      resultDisplay.innerHTML = `${emoji} Magical Result: <strong>${result}</strong> ${emoji}`;
-      resultDisplay.style.color = "#4ECDC4";
-      
-      // Mini celebration for calculator
-      if(Math.abs(result) > 100) {
-          setTimeout(() => {
-              const miniEmoji = document.createElement('div');
-              miniEmoji.textContent = '🎉';
-              miniEmoji.style.position = 'fixed';
-              miniEmoji.style.fontSize = '30px';
-              miniEmoji.style.left = Math.random() * 100 + 'vw';
-              miniEmoji.style.animation = 'fall 2s linear forwards';
-              document.body.appendChild(miniEmoji);
-              setTimeout(() => miniEmoji.remove(), 2000);
-          }, 100);
-      }
-    }
-
-    // Clear function
-    function clearCalculator() {
-      document.getElementById('num1').value = '';
-      document.getElementById('num2').value = '';
-      document.getElementById('result').innerHTML = "🎯 Your answer will appear here!";
-      document.getElementById('result').style.color = "#FF6B6B";
-    }
-    </script>
-    """, unsafe_allow_html=True)
+    st.markdown("---")
+    st.markdown("### 🎯 Quick Tips")
+    st.info("""
+    💡 **Calculator Help:**
+    - Click numbers and operators
+    - Press = to calculate
+    - Press C to clear
+    - Use backspace (⌫) to erase
+    """)
+    
+    st.markdown("---")
+    st.markdown("### 📚 Need Help?")
+    st.write("Stuck on a problem? Use the calculator above or ask for hints! 🦸")
 
-st.markdown("---")
+# MAIN CONTENT AREA
+col1, col2 = st.columns([3, 1])
 
-# 🎮 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)
-    
-    # Fun 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;">
-            🎯 Adventure Progress: {st.session_state.question_index + 1} of {len(subset_df)}
-        </div>
-        <div class="progress-bar" style="width: 100%; background: #f0f0f0; border-radius: 10px; height: 25px;">
-            <div style="width: {progress}%; background: linear-gradient(45deg, #FF6B6B, #FFD93D); height: 100%; border-radius: 10px; transition: width 0.5s;"></div>
-        </div>
-    </div>
-    """, unsafe_allow_html=True)
+with col1:
+    # Age group selection
+    selected_age_group = st.selectbox("🎯 Choose Your Adventure Level:", list(age_groups.keys()))
 
-    # Display question with fun styling
-    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;">
-            {category_emoji} Challenge {st.session_state.question_index + 1} {category_emoji}
+    # 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"⚠️ Oops! Our image treasure chest is hiding! {e}")
+
+    if not os.path.exists(dataset_path):
+        st.error(f"❌ Adventure map 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"❌ Oh no! The math treasure got mixed up! {e}")
+        st.stop()
+
+    # Category selection with fun names
+    categories = sorted(df['category'].dropna().unique())
+    category_emojis = {"Addition": "➕", "Subtraction": "➖", "Multiplication": "✖️", "Division": "➗", "Geometry": "📐", "Algebra": "📊"}
+    selected_category = st.selectbox("📚 Choose Your Math Quest:", 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)
+
+    # 🎮 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)
+        
+        # Fun 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;">
+                🎯 Adventure Progress: {st.session_state.question_index + 1} of {len(subset_df)}
+            </div>
+            <div class="progress-bar" style="width: 100%; background: #f0f0f0; border-radius: 10px; height: 25px;">
+                <div style="width: {progress}%; background: linear-gradient(45deg, #FF6B6B, #FFD93D); height: 100%; border-radius: 10px; transition: width 0.5s;"></div>
+            </div>
         </div>
-        📘 <b>Math Quest:</b><br><br>
-        {question['problem']}
-    </div>
-    """, unsafe_allow_html=True)
+        """, unsafe_allow_html=True)
+
+        # Display question with fun styling
+        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;">
+                {category_emoji} Challenge {st.session_state.question_index + 1} {category_emoji}
+            </div>
+            📘 <b>Math Quest:</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("🖼️ Oh no! The picture is playing hide and seek!")
+        
+        # Fun answer input
+        user_ans = st.text_input("✏️ Your Magical Answer:", key=f"ans_{st.session_state.question_index}")
 
-    # 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("🖼️ Oh no! The picture is playing hide and seek!")
-    
-    # Fun answer input
-    user_ans = st.text_input("✏️ Your Magical Answer:", key=f"ans_{st.session_state.question_index}")
-
-    # Submit button with celebration
-    if st.button("🎯 Submit Answer", key=f"submit_{st.session_state.question_index}"):
-        if str(user_ans).strip().lower() == str(question['answer']).strip().lower():
-            # MEGA CELEBRATION FOR CORRECT ANSWER!
-            st.markdown("""
-            <script>
-            celebrate();
-            </script>
-            """, unsafe_allow_html=True)
+        # Submit button with celebration
+        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 str(user_ans).strip().lower() == str(question['answer']).strip().lower():
+                    # MEGA CELEBRATION FOR CORRECT ANSWER!
+                    st.markdown("""
+                    <script>
+                    celebrate();
+                    </script>
+                    """, unsafe_allow_html=True)
+                    
+                    st.success("""
+                    🎉✨ AMAZING! YOU'RE A MATH SUPERSTAR! ✨🎉
+                    """)
+                    
+                    # Multiple balloons and effects
+                    st.balloons()
+                    st.balloons()
+                    st.balloons()
+                    
+                    # Fun success message with random emojis
+                    success_messages = [
+                        "🌟 You're shining brighter than a supernova!",
+                        "🚀 To infinity and beyond! Math genius detected!",
+                        "🌈 You just painted the town with math brilliance!",
+                        "🎊 Party time! You nailed it!",
+                        "🦄 Unicorn-level math skills activated!"
+                    ]
+                    
+                    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)
+                    
+                    time.sleep(3)
+                    st.session_state.question_index += 1
+                    st.session_state.show_answer = False
+                    st.session_state.show_steps = False
+                    st.rerun()
+                else:
+                    st.error("""
+                    ❌ Oops! That's not quite right, but don't give up! 
+                    Every great math wizard makes mistakes sometimes! 💫
+                    """)
+                    st.session_state.show_answer = True
+                    st.session_state.show_steps = False
+
+        with col_btn2:
+            if st.button("⏭️ Skip Challenge", 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
+                st.info("💨 Zooming to the next challenge! Get ready! 🚀")
+                time.sleep(1)
+                st.rerun()
+
+        # Show answer with encouragement
+        if st.session_state.show_answer:
+            st.info(f"""
+            💡 **Hint from Your Math Friend:** 
+            The magical answer is **{question['answer']}**
             
-            st.success("""
-            🎉✨ AMAZING! YOU'RE A MATH SUPERSTAR! ✨🎉
+            Remember: Even math superheroes need help sometimes! 🦸
             """)
             
-            # Multiple balloons and effects
-            st.balloons()
-            st.balloons()
-            st.balloons()
+            if selected_age_group in ["🚀 Math Adventurers (7-9)", "🌟 Math Wizards (13-15)"]:
+                if st.button("🔍 Show Magic Steps", key=f"steps_{st.session_state.question_index}"):
+                    st.session_state.show_steps = True
+            if st.session_state.show_steps and pd.notna(question.get("steps", None)):
+                st.success(f"""
+                ### 🪄 Secret Math Magic:
+                {question['steps']}
+                """)
             
-            # Fun success message with random emojis
-            success_messages = [
-                "🌟 You're shining brighter than a supernova!",
-                "🚀 To infinity and beyond! Math genius detected!",
-                "🌈 You just painted the town with math brilliance!",
-                "🎊 Party time! You nailed it!",
-                "🦄 Unicorn-level math skills activated!"
-            ]
-            
-            st.markdown(f"""
-            <div style="text-align: center; font-size: 24px; color: #FF6B6B; font-family: 'Comic Neue', cursive; padding: 20px;">
-                {random.choice(success_messages)}
+    elif subset_df.empty:
+        st.warning("""
+        ⚠️ Oh dear! No math adventures here yet! 
+        Try another magical category! 🧙
+        """)
+    else:
+        # GRAND FINALE CELEBRATION!
+        st.markdown("""
+        <div style="text-align: center; padding: 40px;">
+            <div style="font-size: 60px; margin-bottom: 20px;">
+                🏆🎉✨
             </div>
-            """, unsafe_allow_html=True)
-            
-            time.sleep(3)
-            st.session_state.question_index += 1
+            <h1 style="color: #FF6B6B; font-family: 'Comic Neue', cursive;">
+                YOU DID IT! MATH CHAMPION! 🏅
+            </h1>
+            <p style="font-size: 24px; color: #4ECDC4;">
+                You've completed all the challenges in this category!<br>
+            </p>
+            <div style="font-size: 40px; margin: 20px 0;">
+                🌟🎊👑🎈🚀
+            </div>
+        </div>
+        """, unsafe_allow_html=True)
+        
+        st.balloons()
+        st.balloons()
+        st.balloons()
+        
+        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()
-        else:
-            st.error("""
-            ❌ Oops! That's not quite right, but don't give up! 
-            Every great math wizard makes mistakes sometimes! 💫
-            """)
-            st.session_state.show_answer = True
-            st.session_state.show_steps = False
 
-    # Show answer with encouragement
-    if st.session_state.show_answer:
-        st.info(f"""
-        💡 **Hint from Your Math Friend:** 
-        The magical answer is **{question['answer']}**
-        
-        Remember: Even math superheroes need help sometimes! 🦸
-        """)
-        
-        if selected_age_group in ["🚀 Math Adventurers (7-9)", "🌟 Math Wizards (13-15)"]:
-            if st.button("🔍 Show Magic Steps", key=f"steps_{st.session_state.question_index}"):
-                st.session_state.show_steps = True
-        if st.session_state.show_steps and pd.notna(question.get("steps", None)):
-            st.success(f"""
-            ### 🪄 Secret Math Magic:
-            {question['steps']}
-            """)
-
-    # Skip button with fun message
-    if st.button("⏭️ Skip to Next Adventure", key=f"skip_{st.session_state.question_index}"):
-        st.session_state.question_index += 1
-        st.session_state.show_answer = False
-        st.session_state.show_steps = False
-        st.info("💨 Zooming to the next challenge! Get ready! 🚀")
-        time.sleep(1)
-        st.rerun()
-        
-elif subset_df.empty:
-    st.warning("""
-    ⚠️ Oh dear! No math adventures here yet! 
-    Try another magical category! 🧙
-    """)
-else:
-    # GRAND FINALE CELEBRATION!
+with col2:
+    st.markdown("### 🎨 Fun Zone")
     st.markdown("""
-    <div style="text-align: center; padding: 40px;">
-        <div style="font-size: 60px; margin-bottom: 20px;">
-            🏆🎉✨
-        </div>
-        <h1 style="color: #FF6B6B; font-family: 'Comic Neue', cursive;">
-            YOU DID IT! MATH CHAMPION! 🏅
-        </h1>
-        <p style="font-size: 24px; color: #4ECDC4;">
-            You've completed all the challenges in this category!<br>
-        </p>
-        <div style="font-size: 40px; margin: 20px 0;">
-            🌟🎊👑🎈🚀
-        </div>
+    <div style="text-align: center; font-size: 40px; margin: 20px 0;">
+        🎪<br>✨<br>🌟
     </div>
     """, unsafe_allow_html=True)
     
-    st.balloons()
-    st.balloons()
-    st.balloons()
+    st.markdown("### 🏆 Your Achievements")
+    if not subset_df.empty:
+        completed = min(st.session_state.question_index, len(subset_df))
+        st.metric("Challenges Completed", f"{completed}/{len(subset_df)}")
     
-    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()
+    st.markdown("### 💫 Pro Tip")
+    st.info("""
+    Use the calculator in the sidebar to help solve tricky problems! 
+    It's your math superhero sidekick! 🦸‍♂️
+    """)
 
 # Cleanup function
 def cleanup():