Implement Quiz Pause and Resume Functionality

[NishantSinghhhhh]

Title: Add Pause Menu with Save State and Auto-Save Feature

Problem Statement

Users cannot pause an active quiz, forcing them to either complete it in one session or lose progress. This is especially problematic for longer quizzes or when interruptions occur. Pause functionality improves user experience and reduces quiz abandonment.

Proposed Solution

Create a comprehensive pause system with:

• Pause button in quiz interface
• Pause menu with options
• Auto-save quiz state
• Resume from last question
• Exit quiz confirmation
• Timer pause during pause state

Acceptance Criteria

✅ Pause Button

• Pause button/icon in quiz header
• Prominent but not obstructive placement
• Pause icon (two vertical bars)
• Keyboard shortcut: P or Space
• Accessible via screen readers
• Disabled when quiz is already paused

✅ Pause Menu Modal

• Full-screen or prominent modal overlay
• Blur background content
• Display quiz progress (X of Y questions)
• Show elapsed time
• Timer is paused while menu open
• Current question not visible (prevent cheating)

✅ Pause Menu Options

• "Resume Quiz" button (primary action)
• "Save and Exit" button
• "Restart Quiz" button
• "Settings" button (access app settings)
• "Abandon Quiz" button (with confirmation)
• Close button (X) to resume

✅ Auto-Save Functionality

• Save quiz state to localStorage every answer
• Save current question index
• Save user's answers
• Save timer state
• Save quiz configuration
• Automatic save every 30 seconds

✅ Resume Quiz

• Detect saved quiz on app load
• Show "You have an incomplete quiz" banner
• "Resume" and "Discard" buttons
• Load saved state and continue from last question
• Restore timer if applicable
• Resume exactly where user left off

✅ Save and Exit

• Save current progress
• Show confirmation: "Quiz saved. Resume anytime!"
• Return to home/history page
• Saved quiz appears in "In Progress" section
• Display "Continue" button on saved quiz card

✅ Confirmation Dialogs

• Confirm before abandoning quiz
• Warning: "Progress will be lost. Continue?"
• Confirm before restarting quiz
• "Yes, I'm sure" and "Cancel" buttons
• Different styling for destructive actions (red)

✅ Timer Handling

• Pause timer when pause menu opens
• Display "Paused" indicator on timer
• Resume timer when quiz resumes
• Track total paused time separately
• Don't count pause time toward completion time

✅ In Progress Section

• New section on home page: "Continue Where You Left Off"
• Card showing paused quiz details
• Progress bar showing completion percentage
• "Continue" and "Discard" buttons
• Display when quiz was last saved
• Limit to 3 in-progress quizzes max

✅ Mobile Considerations

• Handle app backgrounding (iOS/Android)
• Auto-save when app goes to background
• Resume quiz when app returns to foreground
• Handle browser tab visibility changes

[SWETHACS17]

@NishantSinghhhhh
Can you assign this issue to me, I would like to work on this.