Add random question shuffling on load and shuffle button

- Questions are now randomized when app loads
- Added shuffle button in header for re-randomizing questions
- Questions shuffle when changing topics or difficulty
- Uses Fisher-Yates algorithm for proper randomization
- Added shuffle icon and disabled state handling

Author: SyntaxSidekick

src/App.jsx

@@ -44,7 +44,8 @@ import {
   Refresh,
   AutoAwesome,
   Terminal,
-  MenuBook
+  MenuBook,
+  Shuffle
 } from '@mui/icons-material'
 
 import { questions } from './data/questions'
@@ -233,44 +234,51 @@ function App() {
         await db.load()
         setQuestionDatabase(db)
 
-        // Load questions for the active topic
+        // Load questions for the active topic and shuffle them
         const topicQuestions = db.getQuestionsByCategory(activeTopic, selectedDifficulty)
-        setDatabaseQuestions(topicQuestions)
+        setDatabaseQuestions(shuffleArray(topicQuestions))
 
         console.log(`Loaded ${db.getTotalQuestions()} questions from database`)
       } catch (error) {
         console.error('Failed to load question database:', error)
-        // Fallback to legacy questions
-        setDatabaseQuestions(questions.filter(q => q.topic === activeTopic))
+        // Fallback to legacy questions and shuffle them
+        const fallbackQuestions = questions.filter(q => q.topic === activeTopic)
+        setDatabaseQuestions(shuffleArray(fallbackQuestions))
       } finally {
         setIsLoading(false)
       }
     }
 
     initDatabase()
-  }, [])
+  }, [activeTopic, selectedDifficulty])
 
   // Update questions when topic or difficulty changes
   useEffect(() => {
     if (questionDatabase) {
       const topicQuestions = questionDatabase.getQuestionsByCategory(activeTopic, selectedDifficulty)
-      setDatabaseQuestions(topicQuestions)
+      setDatabaseQuestions(shuffleArray(topicQuestions))
       setCurrentQuestionIndex(0)
       setSelectedAnswer(null)
       setShowResult(false)
     }
   }, [activeTopic, selectedDifficulty, questionDatabase])
 
-  // Get current questions (database or fallback)
-  const availableQuestions = databaseQuestions.length > 0 ? databaseQuestions : 
-    questions.filter(q => q.topic === activeTopic && (selectedDifficulty === 'all' || q.difficulty === selectedDifficulty))
+  // Helper function to shuffle array using Fisher-Yates algorithm
+  const shuffleArray = (array) => {
+    const shuffled = [...array]
+    for (let i = shuffled.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1))
+      ;[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]
+    }
+    return shuffled
+  }
   const getTopicQuestions = (topicId, difficulty = 'all') => {
     // Use database questions if available, otherwise fallback to legacy questions
     if (databaseQuestions.length > 0) {
       return databaseQuestions
     }
 
-    // Legacy fallback
+    // Legacy fallback with shuffling
     const topicMap = {
       'variables': 'Variables',
       'arrays': 'Arrays', 
@@ -291,7 +299,7 @@ function App() {
     }
 
     console.log(`Found ${filteredQuestions.length} questions for topic ${topicId} (${topicMap[topicId]}) with difficulty ${difficulty}`)
-    return filteredQuestions
+    return shuffleArray(filteredQuestions)
   }
 
   const topicQuestions = getTopicQuestions(activeTopic, selectedDifficulty)
@@ -334,6 +342,21 @@ function App() {
   // Get normalized difficulty for UI display
   const currentDifficulty = currentTopicQuestion ? normalizeDifficulty(currentTopicQuestion.difficulty) : 'easy'
 
+  // Function to shuffle current questions
+  const handleShuffleQuestions = () => {
+    if (databaseQuestions.length > 0) {
+      setDatabaseQuestions(shuffleArray(databaseQuestions))
+      setCurrentQuestionIndex(0)
+      setSelectedAnswer(null)
+      setShowResult(false)
+      setSnackbar({
+        open: true,
+        message: '🔀 Questions shuffled! Starting fresh...',
+        severity: 'info'
+      })
+    }
+  }
+
   // Multiple choice options - updated to handle both formats
   const getMultipleChoiceOptions = (question) => {
     if (!question) return []
@@ -874,6 +897,27 @@ function App() {
               </Select>
             </FormControl>
 
+            {/* Shuffle Questions Button */}
+            <IconButton 
+              onClick={handleShuffleQuestions}
+              disabled={!databaseQuestions.length}
+              sx={{ 
+                borderRadius: '50%',
+                p: 1,
+                backgroundColor: darkMode ? '#3c4043' : '#f8f9fa',
+                color: databaseQuestions.length ? (darkMode ? '#e8eaed' : '#5f6368') : '#9aa0a6',
+                '&:hover': {
+                  backgroundColor: databaseQuestions.length ? (darkMode ? '#5f6368' : '#e8eaed') : 'transparent',
+                },
+                '&.Mui-disabled': {
+                  color: '#9aa0a6',
+                },
+              }}
+              title="Shuffle Questions"
+            >
+              <Shuffle />
+            </IconButton>
+
             {/* Theme Toggle - Google Style */}
             <IconButton 
               onClick={() => setDarkMode(!darkMode)}