From f4e2e14fcd4286589c624a13b2ca62b8c64c210a Mon Sep 17 00:00:00 2001
From: Ayazhan <kadessovaayazhan@gmail.com>
Date: Wed, 9 Apr 2025 12:29:27 +0800
Subject: [PATCH] Revert "Feature/quiz progress"

---
 .../quiz/[userId]/[quizId]/attempts/route.ts  |  56 --
 .../progress/quiz/[userId]/[quizId]/route.ts  |  51 --
 app/api/progress/quiz/route.ts                |  97 ----
 app/classrooms/[id]/page.tsx                  |  10 +-
 app/classrooms/[id]/session/[sid]/page.tsx    |  11 +-
 app/classrooms/page.tsx                       |  10 +-
 app/dashboard/page.tsx                        |  13 +-
 app/page.tsx                                  |  11 +-
 app/quizzes/[id]/page.tsx                     |  11 +-
 app/quizzes/page.tsx                          |  14 +-
 components/LoadingSpinner.tsx                 |   1 -
 components/ProtectedRoute.tsx                 |   8 +-
 components/classrooms/CreateClassroomForm.tsx |  11 +-
 components/quiz/ActiveQuiz.tsx                | 193 -------
 components/quiz/QuizFooter.tsx                |  72 ---
 components/quiz/QuizQuestion.tsx              | 109 ----
 components/quiz/QuizResults.tsx               | 202 -------
 components/quiz/helper.ts                     |  58 --
 components/quiz/helpers.tsx                   |  55 --
 components/quiz/quiz-card.tsx                 |   2 +-
 components/quiz/quiz-component.tsx            | 521 +++++++++++++++---
 components/ui/button.tsx                      |   6 +-
 components/ui/circular-progress-bar.tsx       |   4 +-
 components/ui/mobile-nav.tsx                  |   4 +-
 components/ui/responsive-search.tsx           |  11 +-
 components/ui/theme-toggle.tsx                |   6 +-
 components/user/user-menu.tsx                 |   2 +-
 hooks/quizzes/useQuizAttempts.ts              |  57 --
 hooks/quizzes/useQuizProgress.ts              |  53 --
 types/quiz/quiz.ts                            |  22 -
 30 files changed, 555 insertions(+), 1126 deletions(-)
 delete mode 100644 app/api/progress/quiz/[userId]/[quizId]/attempts/route.ts
 delete mode 100644 app/api/progress/quiz/[userId]/[quizId]/route.ts
 delete mode 100644 app/api/progress/quiz/route.ts
 delete mode 100644 components/quiz/ActiveQuiz.tsx
 delete mode 100644 components/quiz/QuizFooter.tsx
 delete mode 100644 components/quiz/QuizQuestion.tsx
 delete mode 100644 components/quiz/QuizResults.tsx
 delete mode 100644 components/quiz/helper.ts
 delete mode 100644 components/quiz/helpers.tsx
 delete mode 100644 hooks/quizzes/useQuizAttempts.ts
 delete mode 100644 hooks/quizzes/useQuizProgress.ts

diff --git a/app/api/progress/quiz/[userId]/[quizId]/attempts/route.ts b/app/api/progress/quiz/[userId]/[quizId]/attempts/route.ts
deleted file mode 100644
index 27282d7..0000000
--- a/app/api/progress/quiz/[userId]/[quizId]/attempts/route.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { NextResponse } from 'next/server'
-import { collection, query, orderBy, limit, getDocs } from 'firebase/firestore'
-import { fireStore } from '@/firebase/firebase'
-
-export async function GET(
-  request: Request,
-  { params }: { params: { userId: string; quizId: string } }
-) {
-  try {
-    const { userId, quizId } = params
-    const { searchParams } = new URL(request.url)
-    const limitParam = parseInt(searchParams.get('limit') || '10')
-
-    if (!userId || !quizId) {
-      return NextResponse.json(
-        { error: 'Missing userId or quizId' },
-        { status: 400 }
-      )
-    }
-
-    const attemptsRef = collection(
-      fireStore,
-      'users',
-      userId,
-      'quizzes',
-      quizId,
-      'attempts'
-    )
-
-    const attemptsQuery = query(
-      attemptsRef,
-      orderBy('timestamp', 'desc'),
-      limit(limitParam)
-    )
-
-    const attemptsSnapshot = await getDocs(attemptsQuery)
-
-    if (attemptsSnapshot.empty) {
-      return NextResponse.json([])
-    }
-
-    const attempts = attemptsSnapshot.docs.map((doc) => ({
-      id: doc.id,
-      ...doc.data(),
-      timestamp: doc.data().timestamp?.toMillis() || Date.now(),
-    }))
-
-    return NextResponse.json(attempts)
-  } catch (error) {
-    console.error('Error getting quiz attempts:', error)
-    return NextResponse.json(
-      { error: 'Failed to fetch quiz attempts' },
-      { status: 500 }
-    )
-  }
-}
diff --git a/app/api/progress/quiz/[userId]/[quizId]/route.ts b/app/api/progress/quiz/[userId]/[quizId]/route.ts
deleted file mode 100644
index 49e3031..0000000
--- a/app/api/progress/quiz/[userId]/[quizId]/route.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { NextResponse } from 'next/server'
-import { doc, getDoc } from 'firebase/firestore'
-import { fireStore } from '@/firebase/firebase'
-
-export async function GET(
-  request: Request,
-  { params }: { params: { userId: string; quizId: string } }
-) {
-  try {
-    const { userId, quizId } = params
-
-    if (!userId || !quizId) {
-      return NextResponse.json(
-        { error: 'Missing userId or quizId' },
-        { status: 400 }
-      )
-    }
-
-    const quizRef = doc(fireStore, 'users', userId, 'quizzes', quizId)
-    const quizDoc = await getDoc(quizRef)
-
-    if (!quizDoc.exists()) {
-      return NextResponse.json({
-        passed: false,
-        lastTaken: null,
-        attempts: 0,
-        successfulAttempts: 0,
-      })
-    }
-
-    const data = quizDoc.data()
-
-    return NextResponse.json({
-      passed: data.passed || false,
-      lastTaken: data.lastTaken || null,
-      attempts: data.attempts || 0,
-      successfulAttempts: data.successfulAttempts || 0,
-      highestScore: data.highestScore || 0,
-      score: data.score || 0,
-      correctAnswers: data.correctAnswers || 0,
-      totalQuestions: data.totalQuestions || 0, 
-      selectedAnswers: data.selectedAnswers || [],
-    })
-  } catch (error) {
-    console.error('Error getting quiz progress:', error)
-    return NextResponse.json(
-      { error: 'Failed to fetch quiz progress' },
-      { status: 500 }
-    )
-  }
-}
diff --git a/app/api/progress/quiz/route.ts b/app/api/progress/quiz/route.ts
deleted file mode 100644
index 91298fb..0000000
--- a/app/api/progress/quiz/route.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import { NextResponse } from 'next/server'
-import {
-  doc,
-  collection,
-  //   addDoc,
-  getDoc,
-  setDoc,
-  increment,
-} from 'firebase/firestore'
-import { fireStore } from '@/firebase/firebase'
-
-export async function POST(request: Request) {
-  try {
-    const {
-      userId,
-      quizId,
-      quizTitle,
-      tutorialId,
-      score,
-      correctAnswers,
-      totalQuestions,
-      selectedAnswers,
-    } = await request.json()
-
-    if (!userId || !quizId) {
-      return NextResponse.json(
-        { error: 'Missing userId or quizId' },
-        { status: 400 }
-      )
-    }
-
-    const isPassed = score >= 70 // 70% passing threshold
-    const timestamp = Date.now()
-
-    // Reference to main quiz document
-    const quizRef = doc(fireStore, 'users', userId, 'quizzes', quizId)
-
-    // Create attempt document
-    const attemptRef = doc(
-      collection(fireStore, 'users', userId, 'quizzes', quizId, 'attempts')
-    )
-    await setDoc(attemptRef, {
-      timestamp: timestamp,
-      score: score,
-      correctAnswers: correctAnswers,
-      totalQuestions: totalQuestions,
-      passed: isPassed,
-      selectedAnswers: selectedAnswers,
-    })
-
-    // Check if quiz document exists
-    const quizDoc = await getDoc(quizRef)
-
-    // Update or create quiz progress document
-    if (quizDoc.exists()) {
-      const existingData = quizDoc.data()
-      const currentHighestScore = existingData.highestScore || 0
-      await setDoc(
-        quizRef,
-        {
-          lastTaken: timestamp,
-          attempts: increment(1),
-          passed: quizDoc.data().passed || isPassed, // Only set to true if not already passed
-          highestScore: Math.max(currentHighestScore, score),
-          successfulAttempts: isPassed ? increment(1) : 0,
-          score: score,
-          correctAnswers: correctAnswers,
-          totalQuestions: totalQuestions,
-          selectedAnswers: selectedAnswers,
-        },
-        { merge: true }
-      )
-    } else {
-      await setDoc(quizRef, {
-        quizTitle: quizTitle,
-        tutorialId: tutorialId,
-        lastTaken: timestamp,
-        attempts: 1,
-        passed: isPassed,
-        successfulAttempts: isPassed ? 1 : 0,
-        highestScore: score,
-        score: score,
-        correctAnswers: correctAnswers,
-        totalQuestions: totalQuestions,
-        selectedAnswers: selectedAnswers,
-      })
-    }
-
-    return NextResponse.json({ success: true })
-  } catch (error) {
-    console.error('Error recording quiz attempt:', error)
-    return NextResponse.json(
-      { error: 'Failed to record quiz attempt' },
-      { status: 500 }
-    )
-  }
-}
diff --git a/app/classrooms/[id]/page.tsx b/app/classrooms/[id]/page.tsx
index 12018d2..94e0afa 100644
--- a/app/classrooms/[id]/page.tsx
+++ b/app/classrooms/[id]/page.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { Loader2 } from 'lucide-react'
 import { useAuth } from '@/contexts/AuthContext'
 import { SessionManagement } from '@/components/session-views/session-management'
 
@@ -14,7 +14,13 @@ const ClassroomLessonPage: React.FC<PageProps> = ({ params }) => {
 
   const classroomId = params.id
 
-   if (loading) return <LoadingSpinner />
+   if (loading) {
+     return (
+       <div className='flex items-center justify-center min-h-screen'>
+         <Loader2 className='h-8 w-8 animate-spin' />
+       </div>
+     )
+   }
 
    if (!user) {
      return (
diff --git a/app/classrooms/[id]/session/[sid]/page.tsx b/app/classrooms/[id]/session/[sid]/page.tsx
index dad782c..3ebc068 100644
--- a/app/classrooms/[id]/session/[sid]/page.tsx
+++ b/app/classrooms/[id]/session/[sid]/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 // import { useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { Loader2 } from 'lucide-react'
 import { useAuth } from '@/contexts/AuthContext'
 import { StudentSessionView } from '@/components/session-views/student-session-view'
 import { TeacherSessionView } from '@/components/session-views/teacher-session-view'
@@ -21,7 +21,14 @@ const SessionPage: React.FC<PageProps> = ({ params }) => {
   const classroomId = params.id
   const sessionId = params.sid
 
-  if (loading) return <LoadingSpinner />
+  // Show loading state while fetching data
+  if (loading) {
+    return (
+      <div className='flex items-center justify-center min-h-screen'>
+        <Loader2 className='h-8 w-8 animate-spin' />
+      </div>
+    )
+  }
 
   if (!user) {
     return (
diff --git a/app/classrooms/page.tsx b/app/classrooms/page.tsx
index f5388c4..f71e474 100644
--- a/app/classrooms/page.tsx
+++ b/app/classrooms/page.tsx
@@ -2,7 +2,7 @@
 import { useAuth } from '@/contexts/AuthContext'
 import { TeacherClassroomsView } from '@/components/classrooms/TeacherClassroomsView'
 import { StudentClassroomsView } from '@/components/classrooms/StudentClassroomsView'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { Loader2 } from 'lucide-react'
 
 const ClassroomPage = () => {
   const { user, loading } = useAuth()
@@ -10,7 +10,13 @@ const ClassroomPage = () => {
   // to do: go home
   // const router = useRouter()
 
-  if (loading) return <LoadingSpinner />
+  if (loading) {
+    return (
+      <div className='flex items-center justify-center min-h-screen'>
+        <Loader2 className='h-8 w-8 animate-spin' />
+      </div>
+    )
+  }
 
   return (
     <>
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 6496b98..349b8e9 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -2,13 +2,22 @@
 import { TeacherDashboard } from '@/components//dashboard/TeacherDashboard'
 import { StudentDashboard } from '@/components/dashboard/StudentDashboard'
 import { useAuth } from '@/contexts/AuthContext'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { Loader2 } from 'lucide-react'
 import ProtectedRoute from '@/components/ProtectedRoute'
 
 export default function DashboardPage() {
   const { user, loading, signOut } = useAuth()
 
-  if (loading) return <LoadingSpinner />
+  if (loading) {
+    return (
+      <div className='min-h-screen flex items-center justify-center'>
+        <div className='text-center space-y-4'>
+          <Loader2 className='h-8 w-8 animate-spin mx-auto text-primary' />
+          <p className='text-lg text-muted-foreground'>Loading...</p>
+        </div>
+      </div>
+    )
+  }
 
   return (
     <ProtectedRoute>
diff --git a/app/page.tsx b/app/page.tsx
index 13f039e..e9fc830 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -13,6 +13,7 @@ import {
 import { useRouter } from 'next/navigation'
 import { useAuth } from '@/contexts/AuthContext'
 import {
+  Loader2,
   PlayCircle,
   BookOpen,
   Users2,
@@ -37,8 +38,6 @@ import { FeatureItem } from '@/components/feature-item'
 import { HighlightedText } from '@/components/ui/highlighted-text'
 import { StatsCard } from '@/components/stats-card'
 import { Section } from '@/components/ui/section'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-
 
 
 export default function HomePage() {
@@ -49,7 +48,13 @@ export default function HomePage() {
   const theme = useTheme()
   const shadowColor = theme.resolvedTheme === 'dark' ? 'white' : 'black'
 
-  if (loading) return <LoadingSpinner />
+  if (loading) {
+    return (
+      <div className='min-h-screen flex items-center justify-center'>
+        <Loader2 className='h-8 w-8 animate-spin' />
+      </div>
+    )
+  }
 
   return (
     <div className='xl:px-24 lg:px-16 md:px-8 sm:px-8 px-8'>
diff --git a/app/quizzes/[id]/page.tsx b/app/quizzes/[id]/page.tsx
index f5569ec..c5fc332 100644
--- a/app/quizzes/[id]/page.tsx
+++ b/app/quizzes/[id]/page.tsx
@@ -4,7 +4,7 @@ import { useQuiz } from '@/hooks/quiz/useQuizzes'
 import QuizComponent from '@/components/quiz/quiz-component'
 import { notFound } from 'next/navigation'
 import { useEffect } from 'react'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { Loader2 } from 'lucide-react'
 
 export default function QuizPage({ params }: { params: { id: string } }) {
   const { quiz, isLoading, error } = useQuiz(params.id)
@@ -16,7 +16,14 @@ export default function QuizPage({ params }: { params: { id: string } }) {
   }, [error])
 
   if (isLoading) {
-    return <LoadingSpinner />
+    return (
+      <main className='container mx-auto py-8 px-4'>
+        <div className='max-w-4xl mx-auto text-center py-12'>
+          <Loader2 className='h-8 w-8 animate-spin' />
+          <p className='mt-4'>Loading quiz...</p>
+        </div>
+      </main>
+    )
   }
 
   if (!quiz) {
diff --git a/app/quizzes/page.tsx b/app/quizzes/page.tsx
index 8e00472..3999184 100644
--- a/app/quizzes/page.tsx
+++ b/app/quizzes/page.tsx
@@ -1,13 +1,21 @@
 'use client'
 import QuizCard from '@/components/quiz/quiz-card'
 import { useQuizzes } from '@/hooks/quiz/useQuizzes'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-
+import { Loader2 } from 'lucide-react'
 
 export default function QuizzesPage() {
   const { quizzes, isLoading, error } = useQuizzes()
 
-  if (isLoading) return <LoadingSpinner />
+  if (isLoading) {
+    return (
+      <main className='container py-8 px-4'>
+        <div className='max-w-5xl mx-auto text-center py-12'>
+          <Loader2 className='h-8 w-8 animate-spin' />
+          <p className='mt-4'>Loading quizzes...</p>
+        </div>
+      </main>
+    )
+  }
 
   if (error) {
     return (
diff --git a/components/LoadingSpinner.tsx b/components/LoadingSpinner.tsx
index 3ffb10c..a1b952a 100644
--- a/components/LoadingSpinner.tsx
+++ b/components/LoadingSpinner.tsx
@@ -4,7 +4,6 @@ export function LoadingSpinner() {
   return (
     <div className='flex items-center justify-center min-h-screen'>
       <Loader2 className='h-8 w-8 animate-spin' />
-      <p className='mt-4'>Loading...</p>
     </div>
   )
 }
diff --git a/components/ProtectedRoute.tsx b/components/ProtectedRoute.tsx
index 6315d21..de5e2e0 100644
--- a/components/ProtectedRoute.tsx
+++ b/components/ProtectedRoute.tsx
@@ -2,7 +2,7 @@
 import { useAuth } from '@/contexts/AuthContext'
 import { useRouter } from 'next/navigation'
 import { useEffect } from 'react'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
+import { Loader2 } from 'lucide-react'
 
 interface ProtectedRouteProps {
   children: React.ReactNode
@@ -19,7 +19,11 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
   }, [user, loading, router])
 
   if (loading) {
-    return <LoadingSpinner />
+    return (
+      <div className='flex items-center justify-center min-h-screen'>
+        <Loader2 className='w-8 h-8 animate-spin' />
+      </div>
+    )
   }
 
   if (!user) return null
diff --git a/components/classrooms/CreateClassroomForm.tsx b/components/classrooms/CreateClassroomForm.tsx
index 7c1c829..632c997 100644
--- a/components/classrooms/CreateClassroomForm.tsx
+++ b/components/classrooms/CreateClassroomForm.tsx
@@ -30,9 +30,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-import { useToast } from '@/hooks/use-toast'
 import { Loader2 } from 'lucide-react'
+import { useToast } from '@/hooks/use-toast'
 
 interface Props {
   teacherId: string
@@ -201,7 +200,13 @@ export function CreateClassroomForm({ teacherId, teacherSchool }: Props) {
     })
   }
 
-  if (loading) return <LoadingSpinner />
+  if (loading) {
+    return (
+      <div className='flex items-center justify-center min-h-[400px]'>
+        <Loader2 className='h-8 w-8 animate-spin' />
+      </div>
+    )
+  }
 
   return (
     <Form {...form}>
diff --git a/components/quiz/ActiveQuiz.tsx b/components/quiz/ActiveQuiz.tsx
deleted file mode 100644
index f2d068c..0000000
--- a/components/quiz/ActiveQuiz.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import { Quiz } from '@/types/quiz/quiz'
-import Prism from 'prismjs'
-import 'prismjs/components/prism-python'
-import { useTheme } from 'next-themes'
-import { User } from '@/types/firebase' 
-import { recordQuizAttempt } from './helper'
-import QuizQuestion from './QuizQuestion'
-import QuizFooter from './QuizFooter'
-import { renderQuestionText } from './helpers'
-
-interface ActiveQuizProps {
-  quiz: Quiz
-  currentQuestionIndex: number
-  setCurrentQuestionIndex: (index: number) => void
-  selectedAnswers: number[]
-  setSelectedAnswers: (answers: number[]) => void
-  answeredQuestions: boolean[]
-  setAnsweredQuestions: (answered: boolean[]) => void
-  setShowResults: (show: boolean) => void
-  isSubmitting: boolean
-  setIsSubmitting: (isSubmitting: boolean) => void
-  user: User | null
-  invalidateCache: () => void
-  theme: string | undefined
-}
-
-export default function ActiveQuiz({
-  quiz,
-  currentQuestionIndex,
-  setCurrentQuestionIndex,
-  selectedAnswers,
-  setSelectedAnswers,
-  answeredQuestions,
-  setAnsweredQuestions,
-  setShowResults,
-  isSubmitting,
-  setIsSubmitting,
-  user,
-  invalidateCache,
-  theme,
-}: ActiveQuizProps) {
-  const { resolvedTheme } = useTheme()
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  useEffect(() => {
-    if (mounted) {
-      const existingThemeLinks = document.querySelectorAll(
-        'link[data-prism-theme]'
-      )
-      existingThemeLinks.forEach((link) => link.remove())
-
-      const link = document.createElement('link')
-      link.rel = 'stylesheet'
-      link.setAttribute('data-prism-theme', 'true')
-
-      if (resolvedTheme === 'dark') {
-        link.href =
-          'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css'
-      } else {
-        link.href =
-          'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css'
-      }
-
-      document.head.appendChild(link)
-
-      setTimeout(() => {
-        Prism.highlightAll()
-      }, 0)
-    }
-  }, [mounted, theme, resolvedTheme, currentQuestionIndex])
-
-  const currentQuestion = quiz.questions[currentQuestionIndex]
-  const isLastQuestion = currentQuestionIndex === quiz.questions.length - 1
-  const isAnswered = answeredQuestions[currentQuestionIndex]
-  const selectedAnswer = selectedAnswers[currentQuestionIndex]
-  const isCorrect = selectedAnswer === currentQuestion.correctAnswer
-
-  const handleAnswerSelection = (answerIndex: number) => {
-    if (answeredQuestions[currentQuestionIndex]) return
-
-    const newSelectedAnswers = [...selectedAnswers]
-    newSelectedAnswers[currentQuestionIndex] = answerIndex
-    setSelectedAnswers(newSelectedAnswers)
-  }
-
-  const handleSubmitAnswer = () => {
-    if (selectedAnswers[currentQuestionIndex] === -1) return
-
-    const newAnsweredQuestions = [...answeredQuestions]
-    newAnsweredQuestions[currentQuestionIndex] = true
-    setAnsweredQuestions(newAnsweredQuestions)
-  }
-
-  const handleNextQuestion = () => {
-    if (currentQuestionIndex < quiz.questions.length - 1) {
-      setCurrentQuestionIndex(currentQuestionIndex + 1)
-    }
-  }
-
-  const handlePreviousQuestion = () => {
-    if (currentQuestionIndex > 0) {
-      setCurrentQuestionIndex(currentQuestionIndex - 1)
-    }
-  }
-
-  const handleSubmitQuiz = async () => {
-    if (!user || isSubmitting) return
-
-    setIsSubmitting(true)
-    const score = calculateScore()
-
-    const success = await recordQuizAttempt(
-      user,
-      quiz.id,
-      quiz.title,
-      quiz.tutorialId,
-      score.percentage,
-      score.correctAnswers,
-      score.totalQuestions,
-      selectedAnswers
-    )
-
-    if (success) {
-      invalidateCache()
-    }
-
-    setShowResults(true)
-    setIsSubmitting(false)
-  }
-
-  const calculateScore = () => {
-    let correctAnswers = 0
-    quiz.questions.forEach((question, index) => {
-      if (selectedAnswers[index] === question.correctAnswer) {
-        correctAnswers++
-      }
-    })
-    return {
-      correctAnswers,
-      totalQuestions: quiz.questions.length,
-      percentage: Math.round((correctAnswers / quiz.questions.length) * 100),
-    }
-  }
-
-  const allQuestionsAnswered = answeredQuestions.every((item) => item === true)
-
-  return (
-    <div className='min-h-screen flex flex-col'>
-      <div className='flex-grow'>
-        <div className='xl:px-24 lg:px-16 md:px-8 sm:px-8 px-8'>
-          <div className='prose prose-img:rounded-xl max-w-none mt-2 prose dark:prose-invert'>
-            <h1 className='mb-2 text-foreground dark:text-foreground'>
-              {quiz.title}
-            </h1>
-            <p className='text-xl mt-0 text-muted-foreground dark:text-muted-foreground'>
-              Question {currentQuestionIndex + 1} of {quiz.questions.length}
-            </p>
-            <hr className='my-4' />
-            <QuizQuestion
-              question={currentQuestion}
-              selectedAnswer={selectedAnswer}
-              isAnswered={isAnswered}
-              isCorrect={isCorrect}
-              onSelect={handleAnswerSelection}
-              renderQuestionText={renderQuestionText}
-            />
-          </div>
-        </div>
-      </div>
-
-      <QuizFooter
-        currentQuestionIndex={currentQuestionIndex}
-        totalQuestions={quiz.questions.length}
-        isAnswered={isAnswered}
-        isLastQuestion={isLastQuestion}
-        selectedAnswer={selectedAnswer}
-        allQuestionsAnswered={allQuestionsAnswered}
-        answeredQuestionsCount={answeredQuestions.filter((q) => q).length}
-        onPrevious={handlePreviousQuestion}
-        onNext={handleNextQuestion}
-        onSubmitAnswer={handleSubmitAnswer}
-        onFinishQuiz={handleSubmitQuiz}
-      />
-    </div>
-  )
-}
diff --git a/components/quiz/QuizFooter.tsx b/components/quiz/QuizFooter.tsx
deleted file mode 100644
index cf685b5..0000000
--- a/components/quiz/QuizFooter.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Button } from '@/components/ui/button'
-import { ArrowLeft, ArrowRight } from 'lucide-react'
-
-interface QuizFooterProps {
-  currentQuestionIndex: number
-  totalQuestions: number
-  isAnswered: boolean
-  isLastQuestion: boolean
-  selectedAnswer: number
-  allQuestionsAnswered: boolean
-  answeredQuestionsCount: number
-  onPrevious: () => void
-  onNext: () => void
-  onSubmitAnswer: () => void
-  onFinishQuiz: () => void
-}
-
-export default function QuizFooter({
-  currentQuestionIndex,
-  totalQuestions,
-  isAnswered,
-  isLastQuestion,
-  selectedAnswer,
-  allQuestionsAnswered,
-  answeredQuestionsCount,
-  onPrevious,
-  onNext,
-  onSubmitAnswer,
-  onFinishQuiz,
-}: QuizFooterProps) {
-  return (
-    <footer className='sticky bottom-0 bg-background flex items-center justify-between px-6 py-3 border-t border-muted flex-shrink-0'>
-      <Button
-        variant='outline'
-        onClick={onPrevious}
-        disabled={currentQuestionIndex === 0}
-      >
-        <ArrowLeft className='mr-2 h-4 w-4' />
-        Previous
-      </Button>
-
-      <div className='flex-1 flex justify-center'>
-        <span className='px-3 py-1 bg-muted rounded-full text-xs'>
-          {currentQuestionIndex + 1} / {totalQuestions}
-        </span>
-      </div>
-
-      {!isAnswered ? (
-        <Button onClick={onSubmitAnswer} disabled={selectedAnswer === -1}>
-          Submit
-        </Button>
-      ) : isLastQuestion ? (
-        <Button
-          onClick={onFinishQuiz}
-          variant='default'
-          className={
-            allQuestionsAnswered ? 'bg-green-600 hover:bg-green-700' : ''
-          }
-        >
-          Finish Quiz
-          {!allQuestionsAnswered &&
-            ` (${answeredQuestionsCount}/${totalQuestions})`}
-        </Button>
-      ) : (
-        <Button onClick={onNext}>
-          Next
-          <ArrowRight className='ml-2 h-4 w-4' />
-        </Button>
-      )}
-    </footer>
-  )
-}
diff --git a/components/quiz/QuizQuestion.tsx b/components/quiz/QuizQuestion.tsx
deleted file mode 100644
index 7167be2..0000000
--- a/components/quiz/QuizQuestion.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import { Label } from '@/components/ui/label'
-import { CheckCircle, AlertCircle } from 'lucide-react'
-import Image from 'next/image'
-import { Question } from '@/types/quiz/quiz'
-
-interface QuizQuestionProps {
-  question: Question
-  selectedAnswer: number
-  isAnswered: boolean
-  isCorrect: boolean
-  onSelect: (answerIndex: number) => void
-  renderQuestionText: (text: string) => React.ReactNode
-}
-
-export default function QuizQuestion({
-  question,
-  selectedAnswer,
-  isAnswered,
-  isCorrect,
-  onSelect,
-  renderQuestionText,
-}: QuizQuestionProps) {
-  return (
-    <div className='mb-6 mx-auto xl:px-24 lg:px-16 md:px-8 sm:px-0'>
-      <p className='text-lg font-normal mb-6'>
-        {renderQuestionText(question.question)}
-      </p>
-
-      {question.imageUrl && (
-        <div className='flex justify-center items-center mb-6 my-0'>
-          <Image
-            src={question.imageUrl}
-            alt='Question image'
-            width={400}
-            height={300}
-            className='rounded-md my-0'
-          />
-        </div>
-      )}
-
-      <RadioGroup
-        value={selectedAnswer.toString()}
-        onValueChange={(value) => onSelect(parseInt(value))}
-        disabled={isAnswered}
-        className='space-y-1'
-      >
-        {question.options.map((option, index) => (
-          <div
-            key={index}
-            className={`flex items-center space-x-2 p-4 border dark:border-zinc-700 border-zinc-200 rounded-md ${
-              isAnswered && index === question.correctAnswer
-                ? 'bg-green-100 dark:bg-green-900/20 rounded-md'
-                : isAnswered && index === selectedAnswer && !isCorrect
-                ? 'bg-red-100 dark:bg-red-900/20 rounded-md'
-                : 'bg-card'
-            }`}
-          >
-            <RadioGroupItem
-              value={index.toString()}
-              id={`option-${index}`}
-              disabled={isAnswered}
-            />
-            <Label
-              htmlFor={`option-${index}`}
-              className='cursor-pointer flex-1'
-            >
-              {option}
-            </Label>
-            {isAnswered && index === question.correctAnswer && (
-              <CheckCircle
-                className='text-green-500 m-0 flex-shrink-0'
-                size={20}
-              />
-            )}
-            {isAnswered && index === selectedAnswer && !isCorrect && (
-              <AlertCircle
-                className='text-red-500 m-0 flex-shrink-0'
-                size={20}
-              />
-            )}
-          </div>
-        ))}
-      </RadioGroup>
-
-      {isAnswered && (
-        <div className='mt-6 p-4 bg-muted rounded-lg'>
-          <p className='font-normal mb-2'>
-            {isCorrect ? (
-              <div className='flex items-center'>
-                <CheckCircle
-                  className='text-green-500 mt-1 flex-shrink-0'
-                  size={20}
-                />
-                <span className='ml-2'>Correct!</span>
-              </div>
-            ) : (
-              <div className='flex items-center'>
-                <AlertCircle className='text-red-500 flex-shrink-0' size={20} />
-                <span className='ml-2'>Let&apos;s Review This One!</span>
-              </div>
-            )}
-          </p>
-          <div>{renderQuestionText(question.explanation)}</div>
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/components/quiz/QuizResults.tsx b/components/quiz/QuizResults.tsx
deleted file mode 100644
index d6c35ec..0000000
--- a/components/quiz/QuizResults.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import { CircularProgress } from '@/components/ui/circular-progress-bar'
-import { Button } from '@/components/ui/button'
-import { CheckCircle, AlertCircle } from 'lucide-react'
-import Image from 'next/image'
-import Link from 'next/link'
-import { Quiz, QuizProgress } from '@/types/quiz/quiz'
-
-interface ScoreData {
-  correctAnswers: number
-  totalQuestions: number
-  percentage: number
-}
-
-interface QuizResultsProps {
-  quiz: Quiz
-  score: ScoreData
-  selectedAnswers: number[]
-  progress: QuizProgress | null
-  theme: string | undefined
-  onRetakeQuiz: () => void
-  renderQuestionText: (text: string) => React.ReactNode
-}
-
-export default function QuizResults({
-  quiz,
-  score,
-  selectedAnswers,
-  progress,
-  theme,
-  onRetakeQuiz,
-  renderQuestionText,
-}: QuizResultsProps) {
-  const passingScore = 70
-  const incorrectAnswers = score.totalQuestions - score.correctAnswers
-  const isDarkTheme = theme === 'dark'
-
-  return (
-    <div className='w-full mx-auto -mt-8'>
-      <div className='justify-center items-center flex flex-col bg-gradient-to-r from-purple-200 via-purple-100 to-purple-200 dark:from-purple-900 dark:via-purple-950 dark:to-purple-900 py-8 md:py-12 lg:py-16 px-4 rounded-lg shadow-md'>
-        <h2 className='text-2xl mb-2 text-foreground dark:text-foreground font-bold'>
-          Quiz Summary
-        </h2>
-        <h1 className='text-5xl mb-6 text-foreground dark:text-foreground'>
-          {quiz.title}
-        </h1>
-
-        <div className='flex flex-col md:flex-row items-center justify-center md:space-x-8 w-full max-w-xl'>
-          <div className='mb-6 md:mb-0'>
-            <CircularProgress
-              percentage={score.percentage}
-              size={180}
-              strokeWidth={12}
-              primaryColor={isDarkTheme ? 'stroke-teal-400' : 'stroke-teal-500'}
-              secondaryColor={
-                isDarkTheme ? 'stroke-gray-700' : 'stroke-gray-50'
-              }
-              textSize='text-5xl'
-              textClassName={isDarkTheme ? 'text-white' : 'text-black'}
-            />
-          </div>
-
-          <div className='text-center md:text-left'>
-            <p className='text-lg font-normal text-foreground mb-5'>
-              {score.percentage >= passingScore
-                ? 'Congratulations! You passed!'
-                : `Get ${passingScore}% to pass`}
-              {progress && (
-                <>
-                  {progress.highestScore && (
-                    <> | Highest Score: {progress.highestScore}%</>
-                  )}
-                </>
-              )}
-            </p>
-
-            <div className='flex justify-center md:justify-start space-x-6 mb-6'>
-              <div className='flex items-center space-x-2'>
-                <CheckCircle
-                  className='text-green-500 m-0 flex-shrink-0'
-                  size={30}
-                />
-                <span className='text-2xl font-semibold'>
-                  {score.correctAnswers}
-                </span>
-                <span className='text-2xl font-semibold'>correct</span>
-              </div>
-
-              <div className='flex items-center space-x-2'>
-                <AlertCircle
-                  className='text-red-500 m-0 flex-shrink-0'
-                  size={30}
-                />
-                <span className='text-2xl font-semibold'>
-                  {incorrectAnswers}
-                </span>
-                <span className='text-2xl font-semibold'>incorrect</span>
-              </div>
-            </div>
-
-            <div className='flex flex-col sm:flex-row gap-4 mt-4 items-baseline'>
-              <Button variant='outline' className='font-semibold text-md'>
-                <Link href={`/tutorials/${quiz.tutorialId}`}>
-                  View Tutorial
-                </Link>
-              </Button>
-              <Button
-                variant='outline'
-                className='text-md font-semibold'
-                onClick={onRetakeQuiz}
-              >
-                Retake Quiz
-              </Button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className='xl:px-48 lg:px-32 md:px-16 sm:px-8'>
-        <div className='mt-12'>
-          <p className='text-xl mb-4 font-semibold'>Review Your Answers</p>
-          {quiz.questions.map((question, index) => {
-            const isCorrect = selectedAnswers[index] === question.correctAnswer
-
-            return (
-              <div key={question.id} className='mb-12'>
-                {/* Top section with icon and question number */}
-                <div className='text-center mb-6'>
-                  <div className='flex items-center justify-center'>
-                    <div className='border-t border-gray-300 dark:border-gray-600 flex-grow'></div>
-                    <div className='mx-4 flex items-center'>
-                      {isCorrect ? (
-                        <CheckCircle
-                          className='text-green-500 flex-shrink-0 mx-2'
-                          size={24}
-                        />
-                      ) : (
-                        <AlertCircle
-                          className='text-red-500 flex-shrink-0 mx-2'
-                          size={24}
-                        />
-                      )}
-                      <span className='font-normal text-md'>
-                        Question {index + 1}
-                      </span>
-                    </div>
-                    <div className='border-t border-gray-300 dark:border-gray-600 flex-grow'></div>
-                  </div>
-                </div>
-
-                <div className='mb-4'>
-                  <div className='text-xl font-semibold'>
-                    {renderQuestionText(question.question)}
-                  </div>
-                </div>
-
-                {question.imageUrl && (
-                  <div className='flex justify-center mb-4'>
-                    <Image
-                      src={question.imageUrl}
-                      alt={`Question ${index + 1} image`}
-                      width={400}
-                      height={300}
-                      className='rounded-md'
-                    />
-                  </div>
-                )}
-
-                <div className='bg-card border rounded-lg p-4 mb-3'>
-                  <p className='font-normal'>
-                    Your answer:{' '}
-                    {selectedAnswers[index] !== -1
-                      ? question.options[selectedAnswers[index]]
-                      : 'Not answered'}
-                  </p>
-                  {!isCorrect && (
-                    <p className='text-green-700 dark:text-green-400 mt-2'>
-                      Correct answer: {question.options[question.correctAnswer]}
-                    </p>
-                  )}
-                </div>
-
-                {/* Explanation Card - only shown if there is an explanation */}
-                {question.explanation && (
-                  <div className='bg-muted border rounded-lg p-4'>
-                    <strong className='block mb-1'>Explanation:</strong>
-                    {renderQuestionText(question.explanation)}
-                  </div>
-                )}
-              </div>
-            )
-          })}
-        </div>
-      </div>
-
-      <footer className='sticky bottom-0 bg-background flex items-center px-6 py-3 border-t border-muted flex-shrink-0 justify-end'>
-        <Button asChild>
-          <Link href={`/quizzes`}>Back to Quizzes</Link>
-        </Button>
-      </footer>
-    </div>
-  )
-}
diff --git a/components/quiz/helper.ts b/components/quiz/helper.ts
deleted file mode 100644
index a4cd109..0000000
--- a/components/quiz/helper.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { User } from '@/types/firebase'
-
-export async function recordQuizAttempt(
-  user: User | null,
-  quizId: string,
-  quizTitle: string,
-  tutorialId: string,
-  score: number,
-  correctAnswers: number,
-  totalQuestions: number,
-  selectedAnswers: number[]
-) {
-  if (!user) return false
-
-  try {
-    const response = await fetch('/api/progress/quiz', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({
-        userId: user.uid,
-        quizId,
-        quizTitle,
-        tutorialId,
-        score,
-        correctAnswers,
-        totalQuestions,
-        selectedAnswers,
-      }),
-    })
-
-    if (!response.ok) {
-      throw new Error('Failed to record quiz attempt')
-    }
-
-    return true
-  } catch (error) {
-    console.error('Error recording quiz attempt:', error)
-    return false
-  }
-}
-
-
-// Helper function to calculate score
-// export function calculateScore(quiz: Quiz, selectedAnswers: number[]) {
-//   let correctAnswers = 0
-//   quiz.questions.forEach((question, index) => {
-//     if (selectedAnswers[index] === question.correctAnswer) {
-//       correctAnswers++
-//     }
-//   })
-//   return {
-//     correctAnswers,
-//     totalQuestions: quiz.questions.length,
-//     percentage: Math.round((correctAnswers / quiz.questions.length) * 100),
-//   }
-// }
\ No newline at end of file
diff --git a/components/quiz/helpers.tsx b/components/quiz/helpers.tsx
deleted file mode 100644
index e03f099..0000000
--- a/components/quiz/helpers.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react'
-import Prism from 'prismjs'
-import 'prismjs/components/prism-python'
-
-export function renderQuestionText(text: string) {
-  if (!text || !text.includes('```python')) {
-    return text
-  }
-
-  const regex = /```python([\s\S]*?)```/g
-  let lastIndex = 0
-  const elements = []
-  let key = 0
-  const isDarkMode = document.documentElement.classList.contains('dark')
-
-  let match;
-  while ((match = regex.exec(text)) !== null) {
-    if (match.index > lastIndex) {
-      elements.push(
-        <span key={key++}>{text.substring(lastIndex, match.index)}</span>
-      )
-    }
-
-    const code = match[1].trim()
-    const highlightedCode = Prism.highlight(
-      code,
-      Prism.languages.python,
-      'python'
-    )
-
-    elements.push(
-      <pre
-        key={key++}
-        className={`p-3 rounded-md my-2 overflow-x-auto ${
-          isDarkMode
-            ? 'bg-zinc-800 border border-zinc-700'
-            : 'bg-zinc-100 border border-zinc-200'
-        }`}
-      >
-        <code
-          className='language-python text-sm'
-          dangerouslySetInnerHTML={{ __html: highlightedCode }}
-        />
-      </pre>
-    )
-
-    lastIndex = match.index + match[0].length
-  }
-
-  if (lastIndex < text.length) {
-    elements.push(<span key={key++}>{text.substring(lastIndex)}</span>)
-  }
-
-  return <>{elements}</>
-}
diff --git a/components/quiz/quiz-card.tsx b/components/quiz/quiz-card.tsx
index 3b9802e..3b0be46 100644
--- a/components/quiz/quiz-card.tsx
+++ b/components/quiz/quiz-card.tsx
@@ -52,7 +52,7 @@ export default function QuizCard({
             {questionCount} questions
           </p>
         </div>
-        <div className='flex justify-between items-baseline w-full'>
+        <div className='flex justify-between items-center w-full'>
           <Button variant='outline' asChild>
             <Link href={`/tutorials/${tutorialId}`}>View Tutorial</Link>
           </Button>
diff --git a/components/quiz/quiz-component.tsx b/components/quiz/quiz-component.tsx
index 004a37e..9986c32 100644
--- a/components/quiz/quiz-component.tsx
+++ b/components/quiz/quiz-component.tsx
@@ -1,20 +1,24 @@
 'use client'
 
+import { CircularProgress } from '@/components/ui/circular-progress-bar'
 import { useState, useEffect } from 'react'
 import { Quiz } from '@/types/quiz/quiz'
+import { Button } from '@/components/ui/button'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { Label } from '@/components/ui/label'
+import { CheckCircle, AlertCircle, ArrowRight, ArrowLeft } from 'lucide-react'
+import Image from 'next/image'
+import Prism from 'prismjs'
+import 'prismjs/components/prism-python'
 import { useTheme } from 'next-themes'
-import { useAuth } from '@/contexts/AuthContext'
-import { useQuizProgress } from '@/hooks/quizzes/useQuizProgress'
-import QuizResults from './QuizResults'
-import ActiveQuiz from './ActiveQuiz'
-import { renderQuestionText } from './helpers'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
+import Link from 'next/link'
 
 interface QuizComponentProps {
   quiz: Quiz
 }
 
 export default function QuizComponent({ quiz }: QuizComponentProps) {
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
   const [selectedAnswers, setSelectedAnswers] = useState<number[]>(
     Array(quiz.questions.length).fill(-1)
   )
@@ -22,82 +26,473 @@ export default function QuizComponent({ quiz }: QuizComponentProps) {
     Array(quiz.questions.length).fill(false)
   )
   const [showResults, setShowResults] = useState(false)
-  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0)
-  const [isSubmitting, setIsSubmitting] = useState(false)
+  const { theme, resolvedTheme } = useTheme()
   const [mounted, setMounted] = useState(false)
 
-  const { theme } = useTheme()
-  const { user } = useAuth()
-  const { progress, invalidateCache, isLoading } = useQuizProgress(
-    quiz.id,
-    user
-  )
+  useEffect(() => {
+    setMounted(true)
+  }, [])
 
   useEffect(() => {
-    if (progress && progress.attempts > 0) {
-      // If user has taken the quiz before, use their latest answers
-      setSelectedAnswers(
-        progress.selectedAnswers || Array(quiz.questions.length).fill(-1)
+    if (mounted) {
+      const existingThemeLinks = document.querySelectorAll(
+        'link[data-prism-theme]'
       )
-      setShowResults(true)
+      existingThemeLinks.forEach((link) => link.remove())
+
+      const link = document.createElement('link')
+      link.rel = 'stylesheet'
+      link.setAttribute('data-prism-theme', 'true')
+
+      if (resolvedTheme === 'dark') {
+        link.href =
+          'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css'
+      } else {
+        link.href =
+          'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css'
+      }
+
+      document.head.appendChild(link)
+
+      setTimeout(() => {
+        Prism.highlightAll()
+      }, 0)
     }
-  }, [progress, quiz.questions.length])
+  }, [mounted, theme, resolvedTheme, currentQuestionIndex, showResults])
 
-  useEffect(() => {
-    setMounted(true)
-  }, [])
+  const currentQuestion = quiz.questions[currentQuestionIndex]
+  const isLastQuestion = currentQuestionIndex === quiz.questions.length - 1
+  const isAnswered = answeredQuestions[currentQuestionIndex]
+  const selectedAnswer = selectedAnswers[currentQuestionIndex]
+  const isCorrect = selectedAnswer === currentQuestion.correctAnswer
+
+  const handleAnswerSelection = (answerIndex: number) => {
+    if (answeredQuestions[currentQuestionIndex]) return
+
+    const newSelectedAnswers = [...selectedAnswers]
+    newSelectedAnswers[currentQuestionIndex] = answerIndex
+    setSelectedAnswers(newSelectedAnswers)
+  }
+
+  const handleSubmitAnswer = () => {
+    if (selectedAnswers[currentQuestionIndex] === -1) return
 
-  if (!mounted || isLoading) {
-    return <LoadingSpinner/>
+    const newAnsweredQuestions = [...answeredQuestions]
+    newAnsweredQuestions[currentQuestionIndex] = true
+    setAnsweredQuestions(newAnsweredQuestions)
   }
 
-  const handleRetakeQuiz = () => {
-    setAnsweredQuestions(Array(quiz.questions.length).fill(false))
-    setShowResults(false)
-    setCurrentQuestionIndex(0)
-    setSelectedAnswers(Array(quiz.questions.length).fill(-1))
+  const handleNextQuestion = () => {
+    if (currentQuestionIndex < quiz.questions.length - 1) {
+      setCurrentQuestionIndex(currentQuestionIndex + 1)
+    }
   }
 
-  if (showResults) {
-    const scoreData = {
-      correctAnswers: progress?.correctAnswers || 0,
-      totalQuestions: progress?.totalQuestions || quiz.questions.length,
-      percentage: progress?.score || 0,
+  const handlePreviousQuestion = () => {
+    if (currentQuestionIndex > 0) {
+      setCurrentQuestionIndex(currentQuestionIndex - 1)
+    }
+  }
+
+  const handleSubmitQuiz = () => {
+    setShowResults(true)
+  }
+
+  const calculateScore = () => {
+    let correctAnswers = 0
+    quiz.questions.forEach((question, index) => {
+      if (selectedAnswers[index] === question.correctAnswer) {
+        correctAnswers++
+      }
+    })
+    return {
+      correctAnswers,
+      totalQuestions: quiz.questions.length,
+      percentage: Math.round((correctAnswers / quiz.questions.length) * 100),
+    }
+  }
+
+  const isDarkMode = resolvedTheme === 'dark'
+
+  const renderQuestionText = (text: string) => {
+    if (!text || !text.includes('```python')) {
+      return text
+    }
+
+    const regex = /```python([\s\S]*?)```/g
+    let lastIndex = 0
+    const elements = []
+    let match
+    let key = 0
+
+    while ((match = regex.exec(text)) !== null) {
+      if (match.index > lastIndex) {
+        elements.push(
+          <span key={key++}>{text.substring(lastIndex, match.index)}</span>
+        )
+      }
+
+      const code = match[1].trim()
+      const highlightedCode = Prism.highlight(
+        code,
+        Prism.languages.python,
+        'python'
+      )
+
+      elements.push(
+        <pre
+          key={key++}
+          className={`p-3 rounded-md my-2 overflow-x-auto ${
+            isDarkMode
+              ? 'bg-zinc-800 border border-zinc-700'
+              : 'bg-zinc-100 border border-zinc-200'
+          }`}
+        >
+          <code
+            className='language-python text-sm'
+            dangerouslySetInnerHTML={{ __html: highlightedCode }}
+          />
+        </pre>
+      )
+
+      lastIndex = match.index + match[0].length
     }
 
-    const displayAnswers =
-      progress && progress.selectedAnswers
-        ? progress.selectedAnswers
-        : selectedAnswers
+    if (lastIndex < text.length) {
+      elements.push(<span key={key++}>{text.substring(lastIndex)}</span>)
+    }
 
+    return <>{elements}</>
+  }
+
+  const allQuestionsAnswered = answeredQuestions.every((item) => item === true)
+  const score = calculateScore()
+  const isDarkTheme = theme === 'dark'
+
+  if (!mounted) {
+    return null
+  }
+
+  if (showResults) {
+    const passingScore = 70 
+    const incorrectAnswers = score.totalQuestions - score.correctAnswers
     return (
-      <QuizResults
-        quiz={quiz}
-        score={scoreData}
-        selectedAnswers={displayAnswers}
-        progress={progress || null}
-        theme={theme}
-        onRetakeQuiz={handleRetakeQuiz}
-        renderQuestionText={renderQuestionText}
-      />
+      <div className='w-full mx-auto -mt-8'>
+        <div className='justify-center items-center flex flex-col bg-gradient-to-r from-purple-200 via-purple-100 to-purple-200 dark:from-purple-900 dark:via-purple-950 dark:to-purple-900 py-16 px-4 rounded-lg shadow-md'>
+          <h2 className='text-2xl mb-2 text-foreground dark:text-foreground font-bold'>
+            Quiz Summary
+          </h2>
+          <h1 className='text-5xl mb-6 text-foreground dark:text-foreground'>
+            {quiz.title}
+          </h1>
+
+          {/* Circular Progress Bar and Details */}
+          <div className='flex flex-col md:flex-row items-center justify-center md:space-x-8 w-full max-w-xl'>
+            {/* Circular Progress Bar */}
+            <div className='mb-6 md:mb-0'>
+              <CircularProgress
+                percentage={score.percentage}
+                size={200}
+                strokeWidth={12}
+                primaryColor={
+                  isDarkTheme ? 'stroke-teal-400' : 'stroke-teal-500'
+                }
+                secondaryColor={
+                  isDarkTheme ? 'stroke-gray-700' : 'stroke-gray-50'
+                }
+                textSize='text-4xl'
+                textClassName={isDarkTheme ? 'text-white' : 'text-black'}
+              />
+            </div>
+
+            {/* Score Details */}
+            <div className='text-center md:text-left'>
+              <p className='text-lg font-normal text-foreground mb-5'>
+                {score.percentage >= passingScore
+                  ? 'Congratulations! You passed!'
+                  : `Get ${passingScore}% to pass`}
+              </p>
+
+              <div className='flex justify-center md:justify-start space-x-6 mb-6'>
+                <div className='flex items-center space-x-2'>
+                  <CheckCircle
+                    className='text-green-500 m-0 flex-shrink-0'
+                    size={30}
+                  />
+                  <span className='text-2xl font-semibold'>
+                    {score.correctAnswers}
+                  </span>
+                  <span className='text-2xl font-semibold'>correct</span>
+                </div>
+
+                <div className='flex items-center space-x-2'>
+                  <AlertCircle
+                    className='text-red-500 m-0 flex-shrink-0'
+                    size={30}
+                  />
+                  <span className='text-2xl font-semibold'>
+                    {incorrectAnswers}
+                  </span>
+                  <span className='text-2xl font-semibold'>incorrect</span>
+                </div>
+              </div>
+
+              <div className='flex flex-col sm:flex-row gap-3 mt-4'>
+                <Button variant='outline' className='font-semibold text-md p-5'>
+                  <Link href={`/tutorials/${quiz.tutorialId}`}>View Tutorial</Link>
+                </Button>
+                <Button
+                  className='text-md font-semibold border border-2 border-purple-500 dark:border-purple-700 p-5'
+                  onClick={() => {
+                    setAnsweredQuestions(
+                      Array(quiz.questions.length).fill(false)
+                    )
+                    setShowResults(false)
+                    setCurrentQuestionIndex(0)
+                    setSelectedAnswers(Array(quiz.questions.length).fill(-1))
+                  }}
+                >
+                  Retake Quiz
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className='xl:px-48 lg:px-32 md:px-16 sm:px-8'>
+          <div className='mt-12'>
+            {quiz.questions.map((question, index) => {
+              const isCorrect =
+                selectedAnswers[index] === question.correctAnswer
+
+              return (
+                <div key={question.id} className='mb-12'>
+                  {/* Top section with icon and question number */}
+                  <div className='text-center mb-6'>
+                    <div className='flex items-center justify-center'>
+                      <div className='border-t border-gray-300 dark:border-gray-600 flex-grow'></div>
+                      <div className='mx-4 flex items-center'>
+                        {isCorrect ? (
+                          <CheckCircle
+                            className='text-green-500 flex-shrink-0 mx-2'
+                            size={24}
+                          />
+                        ) : (
+                          <AlertCircle
+                            className='text-red-500 flex-shrink-0 mx-2'
+                            size={24}
+                          />
+                        )}
+                        <span className='font-normal text-md'>
+                          Question {index + 1}
+                        </span>
+                      </div>
+                      <div className='border-t border-gray-300 dark:border-gray-600 flex-grow'></div>
+                    </div>
+                  </div>
+
+                  {/* Question text */}
+                  <div className='mb-4'>
+                    <div className='text-xl font-semibold'>
+                      {renderQuestionText(question.question)}
+                    </div>
+                  </div>
+
+                  {/* Display image if available */}
+                  {question.imageUrl && (
+                    <div className='flex justify-center mb-4'>
+                      <Image
+                        src={question.imageUrl}
+                        alt={`Question ${index + 1} image`}
+                        width={400}
+                        height={300}
+                        className='rounded-md'
+                      />
+                    </div>
+                  )}
+
+                  {/* Answer Card */}
+                  <div className='bg-card border rounded-lg p-4 mb-3'>
+                    <p className='font-normal'>
+                      Your answer: {question.options[selectedAnswers[index]]}
+                    </p>
+                    {!isCorrect && (
+                      <p className='text-green-700 dark:text-green-400 mt-2'>
+                        Correct answer:{' '}
+                        {question.options[question.correctAnswer]}
+                      </p>
+                    )}
+                  </div>
+
+                  {/* Explanation Card - only shown if there is an explanation */}
+                  {question.explanation && (
+                    <div className='bg-muted border rounded-lg p-4'>
+                      <strong className='block mb-1'>Explanation:</strong>
+                      {renderQuestionText(question.explanation)}
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
     )
   }
 
   return (
-    <ActiveQuiz
-      quiz={quiz}
-      currentQuestionIndex={currentQuestionIndex}
-      setCurrentQuestionIndex={setCurrentQuestionIndex}
-      selectedAnswers={selectedAnswers}
-      setSelectedAnswers={setSelectedAnswers}
-      answeredQuestions={answeredQuestions}
-      setAnsweredQuestions={setAnsweredQuestions}
-      setShowResults={setShowResults}
-      isSubmitting={isSubmitting}
-      setIsSubmitting={setIsSubmitting}
-      user={user}
-      invalidateCache={invalidateCache}
-      theme={theme}
-    />
+    <div className='min-h-screen flex flex-col'>
+      {/* Main Content */}
+      <div className='flex-grow'>
+        <div className='xl:px-24 lg:px-16 md:px-8 sm:px-8 px-8'>
+          <div className='prose prose-img:rounded-xl max-w-none mt-2 prose dark:prose-invert'>
+            <h1 className='mb-2 text-foreground dark:text-foreground'>
+              {quiz.title}
+            </h1>
+            <p className='text-xl mt-0 text-muted-foreground dark:text-muted-foreground'>
+              Question {currentQuestionIndex + 1} of {quiz.questions.length}
+            </p>
+            <hr className='my-4' />
+            <div className='mb-6 mx-auto xl:px-24 lg:px-16 md:px-8 sm:px-0'>
+              <p className='text-lg font-normal mb-6'>
+                {renderQuestionText(currentQuestion.question)}
+              </p>
+
+              {/* Display image if available */}
+              {currentQuestion.imageUrl && (
+                <div className='flex justify-center items-center mb-6 my-0'>
+                  <Image
+                    src={currentQuestion.imageUrl}
+                    alt='Question image'
+                    width={400}
+                    height={300}
+                    className='rounded-md my-0'
+                  />
+                </div>
+              )}
+
+              <RadioGroup
+                value={selectedAnswers[currentQuestionIndex].toString()}
+                onValueChange={(value) =>
+                  handleAnswerSelection(parseInt(value))
+                }
+                disabled={isAnswered}
+                className='space-y-1'
+              >
+                {currentQuestion.options.map((option, index) => (
+                  <div
+                    key={index}
+                    className={`flex items-center space-x-2 p-4 border dark:border-zinc-700 border-zinc-200 rounded-md ${
+                      isAnswered && index === currentQuestion.correctAnswer
+                        ? 'bg-green-100 dark:bg-green-900/20 rounded-md'
+                        : isAnswered && index === selectedAnswer && !isCorrect
+                        ? 'bg-red-100 dark:bg-red-900/20 rounded-md'
+                        : 'bg-card'
+                    }`}
+                  >
+                    <RadioGroupItem
+                      value={index.toString()}
+                      id={`option-${index}`}
+                      disabled={isAnswered}
+                    />
+                    <Label
+                      htmlFor={`option-${index}`}
+                      className='cursor-pointer flex-1'
+                    >
+                      {option}
+                    </Label>
+                    {isAnswered && index === currentQuestion.correctAnswer && (
+                      <CheckCircle
+                        className='text-green-500 m-0 flex-shrink-0'
+                        size={20}
+                      />
+                    )}
+                    {isAnswered && index === selectedAnswer && !isCorrect && (
+                      <AlertCircle
+                        className='text-red-500 m-0 flex-shrink-0'
+                        size={20}
+                      />
+                    )}
+                  </div>
+                ))}
+              </RadioGroup>
+
+              {isAnswered && (
+                <div className='mt-6 p-4 bg-muted rounded-lg'>
+                  <p className='font-normal mb-2'>
+                    {isCorrect ? (
+                      <div className='flex items-center'>
+                        <CheckCircle
+                          className='text-green-500 mt-1 flex-shrink-0'
+                          size={20}
+                        />
+                        <span className='ml-2'>Correct!</span>
+                      </div>
+                    ) : (
+                      <div className='flex items-center'>
+                        <AlertCircle
+                          className='text-red-500 flex-shrink-0'
+                          size={20}
+                        />
+                        <span className='ml-2'>
+                          Let&apos;s Review This One!
+                        </span>
+                      </div>
+                    )}
+                  </p>
+                  <div>{renderQuestionText(currentQuestion.explanation)}</div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer className='sticky bottom-0 bg-background flex items-center justify-between px-6 py-3 border-t border-muted flex-shrink-0'>
+        <Button
+          variant='outline'
+          onClick={handlePreviousQuestion}
+          disabled={currentQuestionIndex === 0}
+        >
+          <ArrowLeft className='mr-2 h-4 w-4' />
+          Previous
+        </Button>
+
+        <div className='flex-1 flex justify-center'>
+          <span className='px-3 py-1 bg-muted rounded-full text-xs'>
+            {currentQuestionIndex + 1} / {quiz.questions.length}
+          </span>
+        </div>
+
+        {!isAnswered ? (
+          <Button
+            onClick={handleSubmitAnswer}
+            disabled={selectedAnswers[currentQuestionIndex] === -1}
+          >
+            Submit
+          </Button>
+        ) : isLastQuestion ? (
+          <Button
+            onClick={handleSubmitQuiz}
+            variant='default'
+            className={
+              allQuestionsAnswered ? 'bg-green-600 hover:bg-green-700' : ''
+            }
+          >
+            Finish Quiz
+            {!allQuestionsAnswered &&
+              ` (${answeredQuestions.filter((q) => q).length}/${
+                quiz.questions.length
+              })`}
+          </Button>
+        ) : (
+          <Button onClick={handleNextQuestion}>
+            Next
+            <ArrowRight className='ml-2 h-4 w-4' />
+          </Button>
+        )}
+      </footer>
+    </div>
   )
 }
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 55551f3..e8ad12e 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -12,12 +12,12 @@ const buttonVariants = cva(
         destructive:
           'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 hover:-translate-y-0.5',
         outline:
-          'border border-input border-teal-400 shadow-sm hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 hover:bg-accent hover:text-accent-foreground',
+          'border border-2 border-teal-400 shadow-sm hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200',
         secondary:
           'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 hover:-translate-y-0.5 active:translate-y-0',
         whiteGray:
           'bg-zinc-100 text-secondary-foreground shadow-sm hover:bg-zinc-100/90 dark:bg-zinc-700 dark:hover:bg-zinc-700/90 hover:-translate-y-0.5 active:translate-y-0',
-        ghost: 'hover:text-accent-foreground',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         softBlue:
           'bg-gradient-to-r from-purple-100 via-purple-200 to-purple-100 text-primary font-normal shadow-sm border border-purple-200/50 hover:shadow-md hover:from-purple-200 hover:via-purple-300 hover:to-purple-200 hover:-translate-y-0.5 active:translate-y-0 dark:from-purple-900/70 dark:via-purple-800/70 dark:to-purple-900/70 dark:border-purple-700/20 dark:hover:from-purple-800/70 dark:hover:via-purple-700/70 dark:hover:to-purple-800/70',
@@ -109,7 +109,7 @@ const buttonVariants = cva(
           'relative bg-gradient-to-r from-purple-600 via-purple-500 to-purple-400 text-white shadow-lg hover:from-purple-700 hover:via-purple-600 hover:to-purple-500 transition-all duration-300 hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0',
       },
       size: {
-        default: 'h-9 px-4 py-2',
+        default: 'h-9 p-4',
         sm: 'h-8 rounded-md px-3 text-xs',
         lg: 'h-10  px-8',
         icon: 'h-9 w-9',
diff --git a/components/ui/circular-progress-bar.tsx b/components/ui/circular-progress-bar.tsx
index 145fcf6..223beb7 100644
--- a/components/ui/circular-progress-bar.tsx
+++ b/components/ui/circular-progress-bar.tsx
@@ -21,7 +21,7 @@ export const CircularProgress = ({
   size = 160,
   strokeWidth = 8,
   showText = true,
-  textSize = 'text-2xl',
+  textSize = 'text-lg',
   primaryColor = 'stroke-teal-500',
   secondaryColor = 'stroke-gray-200 dark:stroke-gray-700',
   className = '',
@@ -83,7 +83,7 @@ export const CircularProgress = ({
 
       {showText && (
         <div className='absolute inset-0 flex items-center justify-center'>
-          <span className={cn('font-bold', textSize, textClassName)}>
+          <span className={cn('font-semibold', textSize, textClassName)}>
             {clampedPercentage}%
           </span>
         </div>
diff --git a/components/ui/mobile-nav.tsx b/components/ui/mobile-nav.tsx
index 7191896..dc6de4e 100644
--- a/components/ui/mobile-nav.tsx
+++ b/components/ui/mobile-nav.tsx
@@ -26,8 +26,8 @@ const MobileNav = () => {
     <Sheet open={open} onOpenChange={onToggleNav}>
       <ThemeToggle />
       <SheetTrigger asChild>
-        <Button variant='ghost' className='ml-2 pr-0 min-[950px]:hidden'>
-          <Menu className='h-6 w-6' />
+        <Button variant='ghost' className='w-10 px-0 min-[950px]:hidden'>
+          <Menu className='h-[1.1rem] w-[1.2rem]' />
         </Button>
       </SheetTrigger>
       <SheetContent
diff --git a/components/ui/responsive-search.tsx b/components/ui/responsive-search.tsx
index 23490cb..ad702bf 100644
--- a/components/ui/responsive-search.tsx
+++ b/components/ui/responsive-search.tsx
@@ -62,12 +62,15 @@ export function ResponsiveSearch() {
   return (
     <div>
       <Button
-        variant='ghost'
-        // size='sm'
-        // className='w-10 px-0'
+        variant='slate'
+        className='relative h-9 w-9 p-0 xl:h-10 xl:w-60 xl:justify-start xl:px-3 xl:py-2'
         onClick={() => setOpen(true)}
       >
-        <Search className='h-6 w-6 xl:mr-2' />
+        <Search className='h-4 w-4 xl:mr-2' />
+        <span className='hidden xl:inline-flex'>Search content...</span>
+        <kbd className='pointer-events-none absolute right-1.5 top-2 hidden h-6 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-xs font-normal opacity-100 xl:flex'>
+          <span className='text-xs'>⌘</span>K
+        </kbd>
       </Button>
       <CommandDialog
         open={open}
diff --git a/components/ui/theme-toggle.tsx b/components/ui/theme-toggle.tsx
index e978ce0..6b09bd3 100644
--- a/components/ui/theme-toggle.tsx
+++ b/components/ui/theme-toggle.tsx
@@ -16,9 +16,9 @@ export function ThemeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='ghost' className='min-[850px]:pr-0'>
-          <Sun className='h-6 w-6 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
-          <Moon className='absolute h-6 w-6 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
+        <Button variant='ghost' size='sm' className='w-10 px-0 ml-2.5'>
+          <Sun className='h-[1.1rem] w-[1.1rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
+          <Moon className='absolute h-[1.1rem] w-[1.1rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
           <span className='sr-only'>Toggle Theme</span>
         </Button>
       </DropdownMenuTrigger>
diff --git a/components/user/user-menu.tsx b/components/user/user-menu.tsx
index ebfd640..b9334a1 100644
--- a/components/user/user-menu.tsx
+++ b/components/user/user-menu.tsx
@@ -47,7 +47,7 @@ export function UserMenu() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='ghost' className='relative h-8 w-8 rounded-full mx-2'>
+        <Button variant='ghost' className='relative h-8 w-8 rounded-full'>
           <Avatar className='h-8 w-8'>
             <AvatarImage
               src={'/tutorials/python101-1-what-is-python.webp'}
diff --git a/hooks/quizzes/useQuizAttempts.ts b/hooks/quizzes/useQuizAttempts.ts
deleted file mode 100644
index ba53064..0000000
--- a/hooks/quizzes/useQuizAttempts.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import useSWR from 'swr'
-import { User } from '@/types/firebase'
-import { QuizAttempt } from '@/types/quiz/quiz'
-
-export interface UseQuizAttemptsOptions {
-  revalidateOnFocus?: boolean
-  revalidateOnReconnect?: boolean
-  dedupingInterval?: number
-  limit?: number
-}
-
-/**
- * Custom hook for fetching quiz attempts history
- */
-export function useQuizAttempts(
-  quizId: string | null,
-  user: User | null,
-  options: UseQuizAttemptsOptions = {}
-) {
-  const {
-    revalidateOnFocus = false,
-    revalidateOnReconnect = true,
-    dedupingInterval = 600000, // 10 minutes
-    limit = 10,
-  } = options
-
-  // Only fetch if we have both quizId and user
-  const shouldFetch = Boolean(quizId && user)
-
-  // Create the path-based URL with a limit parameter
-  const url = shouldFetch
-    ? `/api/progress/quiz/${user?.uid}/${quizId}/attempts?limit=${limit}`
-    : null
-
-  const { data, error, mutate } = useSWR<QuizAttempt[]>(
-    url,
-    async (url: string) => {
-      const res = await fetch(url)
-      if (!res.ok) {
-        throw new Error('Failed to fetch quiz attempts')
-      }
-      return res.json()
-    },
-    {
-      revalidateOnFocus,
-      revalidateOnReconnect,
-      dedupingInterval,
-    }
-  )
-
-  return {
-    attempts: data || [],
-    isLoading: !error && !data,
-    error,
-    invalidateCache: () => mutate(undefined, true), // Drop the cache and revalidate
-  }
-}
diff --git a/hooks/quizzes/useQuizProgress.ts b/hooks/quizzes/useQuizProgress.ts
deleted file mode 100644
index b52ba07..0000000
--- a/hooks/quizzes/useQuizProgress.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import useSWR from 'swr'
-import { User } from '@/types/firebase'
-import { QuizProgress } from '@/types/quiz/quiz'
-
-export interface UseQuizProgressOptions {
-  revalidateOnFocus?: boolean
-  revalidateOnReconnect?: boolean
-  dedupingInterval?: number
-}
-
-/**
- * Custom hook for fetching user progress on quizzes
- */
-export function useQuizProgress(
-  quizId: string | null,
-  user: User | null,
-  options: UseQuizProgressOptions = {}
-) {
-  const {
-    revalidateOnFocus = false,
-    revalidateOnReconnect = true,
-    dedupingInterval = 300000, // 5 minutes
-  } = options
-
-  // Only fetch if we have both quizId and user
-  const shouldFetch = Boolean(quizId && user)
-
-  // Create the path-based URL
-  const url = shouldFetch ? `/api/progress/quiz/${user?.uid}/${quizId}` : null
-
-  const { data, error, mutate } = useSWR<QuizProgress>(
-    url,
-    async (url: string) => {
-      const res = await fetch(url)
-      if (!res.ok) {
-        throw new Error('Failed to fetch quiz progress')
-      }
-      return res.json()
-    },
-    {
-      revalidateOnFocus,
-      revalidateOnReconnect,
-      dedupingInterval,
-    }
-  )
-
-  return {
-    progress: data,
-    isLoading: !error && !data,
-    error,
-    invalidateCache: () => mutate(undefined, true), // Drop the cache and revalidate
-  }
-}
diff --git a/types/quiz/quiz.ts b/types/quiz/quiz.ts
index b31dda2..61a8209 100644
--- a/types/quiz/quiz.ts
+++ b/types/quiz/quiz.ts
@@ -15,25 +15,3 @@ export interface Quiz {
   imageUrl: string
   questions: Question[]
 }
-
-export interface QuizProgress {
-  passed: boolean
-  lastTaken: number | null
-  attempts: number
-  successfulAttempts: number
-  highestScore: number
-  score: number
-  correctAnswers: number
-  totalQuestions: number
-  selectedAnswers: number[]
-}
-
-export interface QuizAttempt {
-  id: string
-  timestamp: number
-  score: number
-  correctAnswers: number
-  totalQuestions: number
-  passed: boolean
-  selectedAnswers: number[]
-}
\ No newline at end of file