Update src/streamlit_app.py

src/streamlit_app.py

@@ -95,86 +95,6 @@ st.markdown("""
         font-family: 'Comic Neue', cursive;
     }
     
-    /* Compact Calculator Styles */
-    .calculator-container {
-        background: rgba(255, 255, 255, 0.95);
-        padding: 15px;
-        border-radius: 15px;
-        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-        text-align: center;
-        border: 4px solid #FFD93D;
-        animation: float 4s ease-in-out infinite;
-        margin-bottom: 20px;
-    }
-    
-    @keyframes float {
-        0%, 100% { transform: translateY(0px); }
-        50% { transform: translateY(-5px); }
-    }
-    
-    .calculator-title {
-        margin-bottom: 10px;
-        color: #FF6B6B;
-        font-family: 'Comic Neue', cursive;
-        font-size: 20px;
-        text-shadow: 1px 1px 0 #FFD93D;
-    }
-    
-    .calculator-display {
-        width: 100%;
-        padding: 12px;
-        margin: 8px 0;
-        border-radius: 10px;
-        border: 3px solid #4ECDC4;
-        text-align: right;
-        font-size: 18px;
-        font-family: 'Comic Neue', cursive;
-        background: #FFF9C4;
-        font-weight: bold;
-    }
-    
-    .calculator-buttons-compact {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        gap: 5px;
-        margin-top: 10px;
-    }
-    
-    .calc-btn {
-        padding: 12px 8px;
-        border: none;
-        border-radius: 8px;
-        cursor: pointer;
-        font-size: 16px;
-        color: white;
-        background: linear-gradient(45deg, #4ECDC4, #45B7D1);
-        transition: all 0.2s ease;
-        font-family: 'Comic Neue', cursive;
-        font-weight: bold;
-        min-height: 45px;
-    }
-    
-    .calc-btn:hover {
-        transform: scale(1.05);
-        background: linear-gradient(45deg, #45B7D1, #4ECDC4);
-    }
-    
-    .calc-btn-clear {
-        background: linear-gradient(45deg, #FF6B6B, #FF8E8E);
-    }
-    
-    .calc-btn-clear:hover {
-        background: linear-gradient(45deg, #FF8E8E, #FF6B6B);
-    }
-    
-    .calc-btn-equals {
-        background: linear-gradient(45deg, #96CEB4, #4ECDC4);
-    }
-    
-    .calc-btn-zero {
-        grid-column: span 2;
-    }
-    
     /* Fun elements */
     .emoji-rain {
         position: fixed;
@@ -276,161 +196,25 @@ st.markdown("""
         80% { opacity: 1; }
         100% { opacity: 0; display: none; }
     }
+    
+    /* Sidebar styling */
+    .sidebar-content {
+        padding: 20px;
+    }
+    
+    .help-box {
+        background: rgba(255, 255, 255, 0.9);
+        padding: 20px;
+        border-radius: 15px;
+        border: 3px solid #FFD93D;
+        margin-bottom: 20px;
+    }
     </style>
 """, unsafe_allow_html=True)
 
-# JavaScript for animations, calculator, and continuous activity
+# JavaScript for animations and celebrations
 st.markdown("""
 <script>
-// Calculator functionality - COMPLETELY REWRITTEN
-class Calculator {
-    constructor() {
-        this.currentInput = '0';
-        this.previousInput = '';
-        this.operation = null;
-        this.resetScreen = false;
-        this.initializeCalculator();
-    }
-
-    initializeCalculator() {
-        this.updateDisplay();
-        this.setupEventListeners();
-    }
-
-    setupEventListeners() {
-        // Number buttons
-        for (let i = 0; i <= 9; i++) {
-            const btn = document.getElementById(`calc-btn-${i}`);
-            if (btn) {
-                btn.addEventListener('click', () => this.appendNumber(i.toString()));
-            }
-        }
-
-        // Operation buttons
-        document.getElementById('calc-btn-add')?.addEventListener('click', () => this.chooseOperation('+'));
-        document.getElementById('calc-btn-subtract')?.addEventListener('click', () => this.chooseOperation('-'));
-        document.getElementById('calc-btn-multiply')?.addEventListener('click', () => this.chooseOperation('*'));
-        document.getElementById('calc-btn-divide')?.addEventListener('click', () => this.chooseOperation('/'));
-        
-        // Other buttons
-        document.getElementById('calc-btn-equals')?.addEventListener('click', () => this.compute());
-        document.getElementById('calc-btn-clear')?.addEventListener('click', () => this.clearCalculator());
-        document.getElementById('calc-btn-backspace')?.addEventListener('click', () => this.backspace());
-        document.getElementById('calc-btn-decimal')?.addEventListener('click', () => this.appendDecimal());
-    }
-
-    updateDisplay() {
-        const display = document.getElementById('calc-display');
-        if (display) {
-            display.value = this.currentInput;
-        }
-    }
-
-    appendNumber(number) {
-        if (this.currentInput === '0' || this.resetScreen) {
-            this.currentInput = number;
-            this.resetScreen = false;
-        } else {
-            this.currentInput += number;
-        }
-        this.updateDisplay();
-    }
-
-    chooseOperation(op) {
-        if (this.currentInput === '') return;
-        
-        if (this.previousInput !== '') {
-            this.compute();
-        }
-        this.operation = op;
-        this.previousInput = this.currentInput;
-        this.resetScreen = true;
-    }
-
-    compute() {
-        let computation;
-        const prev = parseFloat(this.previousInput);
-        const current = parseFloat(this.currentInput);
-        
-        if (isNaN(prev) || isNaN(current)) return;
-        
-        switch (this.operation) {
-            case '+':
-                computation = prev + current;
-                break;
-            case '-':
-                computation = prev - current;
-                break;
-            case '*':
-                computation = prev * current;
-                break;
-            case '/':
-                if (current === 0) {
-                    this.showError("Cannot divide by zero!");
-                    return;
-                }
-                computation = prev / current;
-                break;
-            default:
-                return;
-        }
-        
-        this.currentInput = this.roundNumber(computation).toString();
-        this.operation = undefined;
-        this.previousInput = '';
-        this.resetScreen = true;
-        this.updateDisplay();
-    }
-
-    roundNumber(num) {
-        return Math.round((num + Number.EPSILON) * 100000) / 100000;
-    }
-
-    showError(message) {
-        const display = document.getElementById('calc-display');
-        if (display) {
-            display.value = message;
-            setTimeout(() => {
-                this.clearCalculator();
-            }, 2000);
-        }
-    }
-
-    clearCalculator() {
-        this.currentInput = '0';
-        this.previousInput = '';
-        this.operation = null;
-        this.resetScreen = false;
-        this.updateDisplay();
-    }
-
-    backspace() {
-        if (this.currentInput.length > 1) {
-            this.currentInput = this.currentInput.slice(0, -1);
-        } else {
-            this.currentInput = '0';
-        }
-        this.updateDisplay();
-    }
-
-    appendDecimal() {
-        if (this.resetScreen) {
-            this.currentInput = '0';
-            this.resetScreen = false;
-        }
-        if (!this.currentInput.includes('.')) {
-            this.currentInput += '.';
-        }
-        this.updateDisplay();
-    }
-}
-
-// Initialize calculator when page loads
-let calculator;
-document.addEventListener('DOMContentLoaded', function() {
-    calculator = new Calculator();
-});
-
 // Celebration functions with 3-second limit
 function createEmojiRain() {
     const container = document.createElement('div');
@@ -537,53 +321,32 @@ 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": "🌟"}
 }
 
-# SIDEBAR - Calculator and Controls
+# SIDEBAR - Help and Controls (Calculator Removed)
 with st.sidebar:
-    st.markdown("### 🧮 Math Helper Calculator")
-    st.markdown("Use this calculator to help with your math problems! ✨")
+    st.markdown("### 🎯 Quick Help Guide")
     
-    # COMPLETELY REDESIGNED CALCULATOR
     st.markdown("""
-    <div class="calculator-container">
-        <div class="calculator-title">✨ Magic Calculator ✨</div>
-        <input type="text" id="calc-display" class="calculator-display" readonly value="0">
-        
-        <div class="calculator-buttons-compact">
-            <!-- Row 1 -->
-            <button class="calc-btn calc-btn-clear" id="calc-btn-clear">C</button>
-            <button class="calc-btn calc-btn-clear" id="calc-btn-backspace">⌫</button>
-            <button class="calc-btn" id="calc-btn-divide">/</button>
-            <button class="calc-btn" id="calc-btn-multiply">×</button>
-            
-            <!-- Row 2 -->
-            <button class="calc-btn" id="calc-btn-7">7</button>
-            <button class="calc-btn" id="calc-btn-8">8</button>
-            <button class="calc-btn" id="calc-btn-9">9</button>
-            <button class="calc-btn" id="calc-btn-subtract">-</button>
-            
-            <!-- Row 3 -->
-            <button class="calc-btn" id="calc-btn-4">4</button>
-            <button class="calc-btn" id="calc-btn-5">5</button>
-            <button class="calc-btn" id="calc-btn-6">6</button>
-            <button class="calc-btn" id="calc-btn-add">+</button>
-            
-            <!-- Row 4 -->
-            <button class="calc-btn" id="calc-btn-1">1</button>
-            <button class="calc-btn" id="calc-btn-2">2</button>
-            <button class="calc-btn" id="calc-btn-3">3</button>
-            <button class="calc-btn calc-btn-equals" id="calc-btn-equals">=</button>
-            
-            <!-- Row 5 -->
-            <button class="calc-btn calc-btn-zero" id="calc-btn-0">0</button>
-            <button class="calc-btn" id="calc-btn-decimal">.</button>
-        </div>
+    <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>
     </div>
     """, unsafe_allow_html=True)
     
-    st.markdown("---")
+    st.markdown("""
+    <div class="help-box">
+        <h4>💡 Math Tips:</h4>
+        <p>• Read questions carefully<br>
+        • Use scrap paper if needed<br>
+        • Check your work<br>
+        • Ask for hints when stuck!</p>
+    </div>
+    """, unsafe_allow_html=True)
     
     # Live activity monitor
-    st.markdown("### 🎯 Activity Monitor")
+    st.markdown("### 📊 Activity Monitor")
     activity_time = time.time() - st.session_state.last_activity
     if activity_time < 10:
         status = "🟢 Very Active"
@@ -594,14 +357,15 @@ with st.sidebar:
     
     st.metric("Session Status", status)
     
-    st.markdown("### 💫 Quick Tips")
+    st.markdown("---")
+    
+    st.markdown("### 🏆 Achievement Tips")
     st.info("""
-    💡 **Calculator Tips:**
-    - Click numbers and operators
-    - Press = to calculate
-    - C to clear everything
-    - ⌫ to erase last digit
-    - Perfect for checking answers! ✅
+    💫 **Pro Tips:**
+    - Take your time with each problem
+    - Use the 'Show Steps' feature to learn
+    - Celebrate every correct answer! 🎉
+    - Practice makes perfect! 🌟
     """)
 
 # MAIN CONTENT AREA
@@ -769,6 +533,12 @@ with col1:
                     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()  # Update activity
+                st.session_state.show_answer = True
+                st.info("💡 Here's a little help! You can do this! 🌟")
+
+        with col_btn3:
             if st.button("⏭️ Skip Challenge", key=f"skip_{st.session_state.question_index}", use_container_width=True):
                 st.session_state.last_activity = time.time()  # Update activity
                 st.session_state.question_index += 1
@@ -788,7 +558,7 @@ with col1:
             """)
             
             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}"):
+                if st.button("🪄 Show Magic Steps", key=f"steps_{st.session_state.question_index}"):
                     st.session_state.last_activity = time.time()  # Update activity
                     st.session_state.show_steps = True
             if st.session_state.show_steps and pd.notna(question.get("steps", None)):
@@ -814,6 +584,7 @@ with col1:
             </h1>
             <p style="font-size: 24px; color: #4ECDC4;">
                 You've completed all the challenges in this category!<br>
+                Ready for more adventures? 🎪
             </p>
             <div style="font-size: 40px; margin: 20px 0;">
                 🌟🎊👑🎈🚀
@@ -824,7 +595,7 @@ with col1:
         for _ in range(3):
             st.balloons()
         
-        if st.button("🔄 Start New Adventure"):
+        if st.button("🔄 Start New Adventure", use_container_width=True):
             st.session_state.last_activity = time.time()  # Update activity
             st.session_state.question_index = 0
             st.session_state.show_answer = False
@@ -845,11 +616,18 @@ with col2:
     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 completed > 0:
+            accuracy = "🎯 Perfect!" if completed == st.session_state.question_index else "🌟 Great!"
+            st.metric("Accuracy", accuracy)
     
-    # Continuous activity indicator
-    st.markdown("### 📊 Live Stats")
-    st.metric("Session Activity", "🟢 Always Active")
-    st.metric("Fun Level", "🎉 Maximum!")
+    st.markdown("### 💫 Pro Tip")
+    st.info("""
+    ✨ **Math Superpower:**
+    Use scrap paper to work out 
+    tricky problems! It's like 
+    having a math sidekick! 🦸‍♂️
+    """)
 
 # Add periodic invisible updates to prevent sleeping
 if 'update_counter' not in st.session_state: