+
@@ -62,6 +62,21 @@ export default async function DashboardPage() {
+
+
+
+
+
+
+
Take Quizzes
+
Test your knowledge with AI-generated quizzes and track your score.
+
+
+
+
+
diff --git a/frontend/app/quizzes/[quizId]/page.tsx b/frontend/app/quizzes/[quizId]/page.tsx
new file mode 100644
index 0000000..05b25d0
--- /dev/null
+++ b/frontend/app/quizzes/[quizId]/page.tsx
@@ -0,0 +1,358 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { getQuizById, submitQuiz, retakeQuiz, Quiz } from "@/lib/api";
+import { createClient } from "@/utils/supabase/client";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import { ArrowLeft, ArrowRight, CheckCircle2, XCircle, ChevronLeft, RefreshCcw } from "lucide-react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { DashboardWrapper } from "@/components/dashboard/DashboardWrapper";
+import { Sidebar } from "@/components/dashboard/Sidebar";
+import { Header } from "@/components/dashboard/Header";
+
+export default function QuizSessionPage() {
+ const [userId, setUserId] = useState
(null);
+ const params = useParams();
+ const router = useRouter();
+ const quizId = params.quizId as string;
+
+ const [quiz, setQuiz] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+
+ // State for the active session
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [userAnswers, setUserAnswers] = useState>({});
+ const [isSubmitting, setIsSubmitting] = useState(false);
+ const [isRetaking, setIsRetaking] = useState(false);
+
+ useEffect(() => {
+ const fetchQuiz = async () => {
+ const supabase = createClient();
+ const { data: { user } } = await supabase.auth.getUser();
+
+ if (!user) {
+ setIsLoading(false);
+ return;
+ }
+ setUserId(user.id);
+
+ try {
+ const data = await getQuizById(user.id, quizId);
+ setQuiz(data);
+
+ // If it was already submitted before, prepopulate answers
+ if (data.score !== null && data.score !== undefined && data.questions) {
+ const pastAnswers: Record = {};
+ data.questions.forEach((q) => {
+ if (q.user_answer_index !== null && q.user_answer_index !== undefined) {
+ pastAnswers[q.id] = q.user_answer_index;
+ }
+ });
+ setUserAnswers(pastAnswers);
+ }
+ } catch (error) {
+ console.error(error);
+ toast.error("Failed to load quiz");
+ } finally {
+ setIsLoading(false);
+ }
+ };
+ fetchQuiz();
+ }, [quizId]);
+
+ if (isLoading) {
+ return (
+
+ );
+ }
+
+ if (!quiz || !quiz.questions || quiz.questions.length === 0) {
+ return (
+
+
Quiz not found
+
The quiz you are looking for does not exist.
+
+
+
+
+
+
+
+
+
+
+
+
+
Back to Quizzes
+
+
+
+
{quiz.title}
+
You scored {quiz.score} out of {quiz.total_questions}
+
+
+
+ {percentage}%
+
+
+
+
+
+
+
+
Detailed Review
+ {quiz.questions.map((q, idx) => {
+ const isCorrect = q.user_answer_index === q.correct_option_index;
+ return (
+
+
+ {isCorrect ? (
+
+ ) : (
+
+ )}
+
+
+ {idx + 1}. {q.question_text}
+
+
+
+
+
+ {q.options.map((opt, optIdx) => {
+ const isSelected = q.user_answer_index === optIdx;
+ const isActualCorrect = q.correct_option_index === optIdx;
+
+ let optionStyle = "border-slate-200 dark:border-border bg-white dark:bg-card text-slate-700 dark:text-slate-300";
+ if (isActualCorrect) {
+ optionStyle = "border-green-500 bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400 font-medium";
+ } else if (isSelected && !isActualCorrect) {
+ optionStyle = "border-red-500 bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400";
+ }
+
+ return (
+
+
+ {opt}
+ {isSelected && Your Answer}
+ {isActualCorrect && !isSelected && Correct Answer}
+
+
+ );
+ })}
+
+
+ {q.explanation && (
+
+ Explanation:
+ {q.explanation}
+
+ )}
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Save & Exit
+
+
+ {/* Progress Bar */}
+
+
+ Question {currentIndex + 1} of {quiz.total_questions}
+ {Math.round(progressPercentage)}%
+
+
+
+
+ {/* Question Card */}
+
+ {/* Subtle decorative glow */}
+
+
+
+ {currentQuestion.question_text}
+
+
+
+ {currentQuestion.options.map((option, idx) => {
+ const isSelected = userAnswers[currentQuestion.id] === idx;
+
+ return (
+
+ );
+ })}
+
+
+
+ {/* Navigation */}
+
+
+
+ {currentIndex === quiz.total_questions - 1 ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Quizzes & Tests
+
Test your knowledge with AI-generated quizzes.
+
+
+
+
+ {isLoading ? (
+
+ {[1, 2, 3].map((i) => (
+
+ ))}
+
+ ) : quizzes.length === 0 ? (
+
+
+
No quizzes yet
+
Generate your first AI quiz to start testing your knowledge.
+
+
+ ) : (
+
+ {quizzes.map((quiz) => (
+
+
+
+
+
+
+
+
+
+ {quiz.title}
+
+ {quiz.difficulty && (
+
+ {quiz.difficulty}
+
+ )}
+
+
+
+
+ {quiz.total_questions} Questions
+
+
+
+ {formatDistanceToNow(new Date(quiz.created_at), { addSuffix: true })}
+
+
+
+
+
+ {quiz.score !== null && quiz.score !== undefined ? (
+
+ Score
+
+ {quiz.score} / {quiz.total_questions} ({(quiz.score / quiz.total_questions * 100).toFixed(0)}%)
+
+
+ ) : (
+
+ Status
+ Not Started
+
+ )}
+
+
+
+ ))}
+
+ )}
+
+
setIsCreateModalOpen(false)}
+ onQuizCreated={() => userId && fetchQuizzes(userId)}
+ />
+
+
+