Spaces:
Sleeping
Sleeping
| "use client"; | |
| import React, { useState, useEffect, useCallback } from 'react'; | |
| import { useRouter } from 'next/navigation'; | |
| import { notFound } from 'next/navigation'; | |
| import type { TestSession, UserAnswer, Question, TestResult } from '@/lib/types'; | |
| import { Button } from '@/components/ui/button'; | |
| import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'; | |
| import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; | |
| import { Label } from '@/components/ui/label'; | |
| import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@/components/ui/alert-dialog'; | |
| import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'; | |
| import { useToast } from '@/hooks/use-toast'; | |
| import { ChevronLeft, ChevronRight, Bookmark, Circle, CheckCircle, XCircle, Loader2 } from 'lucide-react'; | |
| import { cn } from '@/lib/utils'; | |
| import { useUser, useFirestore } from '@/firebase'; | |
| import { doc, writeBatch } from 'firebase/firestore'; | |
| import ReactMarkdown from 'react-markdown'; | |
| import remarkMath from 'remark-math'; | |
| import rehypeKatex from 'rehype-katex'; | |
| const Palette = ({ | |
| session, | |
| currentQuestionIndex, | |
| onQuestionSelect, | |
| }: { | |
| session: TestSession; | |
| currentQuestionIndex: number; | |
| onQuestionSelect: (index: number) => void; | |
| }) => { | |
| return ( | |
| <div className='w-full'> | |
| <ScrollArea className="w-full whitespace-nowrap rounded-md border border-white/10"> | |
| <div className="flex w-max space-x-2 p-4"> | |
| {session.questions.map((_, index) => { | |
| const status = session.userAnswers[index].status; | |
| let statusClass = ''; | |
| let isCurrent = index === currentQuestionIndex; | |
| if (isCurrent) { | |
| statusClass = 'bg-primary text-primary-foreground scale-110'; | |
| } else { | |
| switch (status) { | |
| case 'answered': statusClass = 'bg-green-500/20 border-green-700 text-green-400'; break; | |
| case 'not-answered': statusClass = 'bg-red-500/20 border-red-700 text-red-400'; break; | |
| case 'marked-for-review': statusClass = 'bg-purple-500/20 border-purple-700 text-purple-400'; break; | |
| case 'answered-and-marked-for-review': statusClass = 'bg-yellow-500/20 border-yellow-700 text-yellow-400'; break; | |
| default: statusClass = 'bg-muted/40 hover:bg-muted/80 border-white/20'; | |
| } | |
| } | |
| return ( | |
| <Button | |
| key={index} | |
| variant="outline" | |
| size="icon" | |
| onClick={() => onQuestionSelect(index)} | |
| className={cn( | |
| 'h-12 w-12 text-lg font-semibold transition-all flex-shrink-0 border', | |
| statusClass, | |
| isCurrent ? 'ring-2 ring-primary-foreground ring-offset-2 ring-offset-background' : 'hover:scale-105' | |
| )} | |
| > | |
| {index + 1} | |
| </Button> | |
| ); | |
| })} | |
| </div> | |
| <ScrollBar orientation="horizontal" /> | |
| </ScrollArea> | |
| <div className="mt-4 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-x-4 gap-y-2 text-sm text-muted-foreground"> | |
| <div className="flex items-center gap-2"><CheckCircle className="h-4 w-4 text-green-500" /> Answered</div> | |
| <div className="flex items-center gap-2"><XCircle className="h-4 w-4 text-red-500" /> Not Answered</div> | |
| <div className="flex items-center gap-2"><Bookmark className="h-4 w-4 text-purple-500" /> Marked</div> | |
| <div className="flex items-center gap-2"><Bookmark className="h-4 w-4 text-yellow-500 fill-current" /> Answered & Marked</div> | |
| <div className="flex items-center gap-2"><Circle className="h-4 w-4 text-muted-foreground" /> Not Visited</div> | |
| </div> | |
| </div> | |
| ) | |
| } | |
| export function TestInterface({ testId }: { testId: string }) { | |
| const router = useRouter(); | |
| const { toast } = useToast(); | |
| const [session, setSession] = useState<TestSession | null>(null); | |
| const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); | |
| const [timeLeft, setTimeLeft] = useState<number | null>(null); | |
| const [isMounted, setIsMounted] = useState(false); | |
| const { user } = useUser(); | |
| const firestore = useFirestore(); | |
| const [isSubmitting, setIsSubmitting] = useState(false); | |
| useEffect(() => { | |
| const sessionData = localStorage.getItem(`test_session_${testId}`); | |
| if (sessionData) { | |
| const parsedSession: TestSession = JSON.parse(sessionData); | |
| setSession(parsedSession); | |
| if (parsedSession.config.timeLimit) { | |
| const elapsedTime = Math.floor((Date.now() - parsedSession.startTime) / 1000); | |
| setTimeLeft(parsedSession.config.timeLimit * 60 - elapsedTime); | |
| } | |
| } | |
| setIsMounted(true); | |
| }, [testId]); | |
| const updateSessionState = (newSession: TestSession) => { | |
| setSession(newSession); | |
| localStorage.setItem(`test_session_${testId}`, JSON.stringify(newSession)); | |
| } | |
| useEffect(() => { | |
| if(!session || session.userAnswers[currentQuestionIndex].status !== 'not-visited') { | |
| return; | |
| } | |
| const newAnswers = [...session.userAnswers]; | |
| newAnswers[currentQuestionIndex].status = 'not-answered'; | |
| updateSessionState({ ...session, userAnswers: newAnswers }); | |
| // eslint-disable-next-line react-hooks/exhaustive-deps | |
| }, [currentQuestionIndex, session]); | |
| const submitTest = useCallback(async () => { | |
| if (!session || !user || !firestore) { | |
| if (!user) { | |
| toast({ title: 'Not Signed In', description: 'Please sign in to save your results.', variant: 'destructive'}); | |
| } | |
| return; | |
| }; | |
| setIsSubmitting(true); | |
| try { | |
| const endTime = Date.now(); | |
| let correctAnswers = 0; | |
| let incorrectAnswers = 0; | |
| let skipped = 0; | |
| const performanceByCategory: { [key: string]: { correct: number; incorrect: number; skipped: number; total: number; type: 'subject' | 'topic' } } = {}; | |
| session.questions.forEach((q, i) => { | |
| const categoryName = q.topic || q.subject; | |
| const categoryType = q.topic ? 'topic' as const : 'subject' as const; | |
| if (!performanceByCategory[categoryName]) { | |
| performanceByCategory[categoryName] = { correct: 0, incorrect: 0, skipped: 0, total: 0, type: categoryType }; | |
| } | |
| performanceByCategory[categoryName].total++; | |
| const userAnswer = session.userAnswers[i]; | |
| if (userAnswer.status === 'not-visited' || userAnswer.status === 'not-answered' || userAnswer.status === 'marked-for-review') { | |
| skipped++; | |
| performanceByCategory[categoryName].skipped++; | |
| } else if (userAnswer.selectedOption === q.correctAnswerIndex) { | |
| correctAnswers++; | |
| performanceByCategory[categoryName].correct++; | |
| } else { | |
| incorrectAnswers++; | |
| performanceByCategory[categoryName].incorrect++; | |
| } | |
| }); | |
| const attempted = correctAnswers + incorrectAnswers; | |
| const accuracy = attempted > 0 ? (correctAnswers / attempted) * 100 : 0; | |
| let score = correctAnswers; | |
| if(session.config.negativeMarking && session.config.negativeMarkingRatio) { | |
| score -= incorrectAnswers * session.config.negativeMarkingRatio; | |
| } | |
| const performanceBreakdown: import('@/lib/types').PerformanceBreakdown[] = Object.entries(performanceByCategory).map(([category, stats]) => { | |
| const attemptedInCategory = stats.correct + stats.incorrect; | |
| return { | |
| category: category, | |
| categoryType: stats.type, | |
| accuracy: attemptedInCategory > 0 ? (stats.correct / attemptedInCategory) * 100 : 0, | |
| correctCount: stats.correct, | |
| incorrectCount: stats.incorrect, | |
| skippedCount: stats.skipped, | |
| totalCount: stats.total, | |
| }; | |
| }); | |
| const result: TestResult = { | |
| id: session.id, | |
| userId: user.uid, | |
| config: session.config, | |
| score, | |
| accuracy, | |
| totalQuestions: session.questions.length, | |
| correctAnswers, | |
| incorrectAnswers, | |
| skipped, | |
| takenAt: new Date(session.startTime).toISOString(), | |
| timeTaken: Math.floor((endTime - session.startTime) / 1000), | |
| performanceBreakdown, | |
| }; | |
| const finalSession: TestSession = { ...session, userId: user.uid, endTime: endTime, userAnswers: session.userAnswers.map(ua => ({...ua, selectedOption: ua.selectedOption === undefined ? null : ua.selectedOption})) }; | |
| const batch = writeBatch(firestore); | |
| const resultRef = doc(firestore, 'users', user.uid, 'testResults', session.id); | |
| batch.set(resultRef, result); | |
| const sessionRef = doc(firestore, 'users', user.uid, 'userTests', session.id); | |
| batch.set(sessionRef, finalSession); | |
| await batch.commit(); | |
| localStorage.removeItem(`test_session_${session.id}`); | |
| toast({ title: 'Test Submitted! 🎉', description: 'Your results have been saved. Redirecting...' }); | |
| router.replace(`/results/${session.id}`); | |
| } catch (error) { | |
| console.error("Failed to submit test:", error); | |
| toast({ | |
| title: "Submission Failed", | |
| description: "Could not save your test results. Please check your connection and try again.", | |
| variant: "destructive", | |
| }); | |
| setIsSubmitting(false); | |
| } | |
| }, [session, router, user, firestore, toast]); | |
| useEffect(() => { | |
| if (timeLeft === null) return; | |
| if (timeLeft <= 0) { | |
| submitTest(); | |
| return; | |
| } | |
| const timer = setInterval(() => setTimeLeft(t => (t ?? 0) - 1), 1000); | |
| return () => clearInterval(timer); | |
| }, [timeLeft, submitTest]); | |
| const updateAnswer = (questionIndex: number, selectedOption?: number, statusUpdate?: Partial<UserAnswer>) => { | |
| if (!session) return; | |
| const newAnswers = [...session.userAnswers]; | |
| const currentAnswer = newAnswers[questionIndex]; | |
| let newSession: TestSession; | |
| if (selectedOption !== undefined) { | |
| const newStatus = currentAnswer.status === 'marked-for-review' || currentAnswer.status === 'answered-and-marked-for-review' ? 'answered-and-marked-for-review' : 'answered'; | |
| newAnswers[questionIndex] = { ...currentAnswer, selectedOption, status: newStatus }; | |
| newSession = { ...session, userAnswers: newAnswers }; | |
| } else if (statusUpdate) { | |
| newAnswers[questionIndex] = { ...currentAnswer, ...statusUpdate }; | |
| newSession = { ...session, userAnswers: newAnswers }; | |
| } else { // Clear response | |
| const newStatus = currentAnswer.status === 'answered-and-marked-for-review' ? 'marked-for-review' : 'not-answered'; | |
| newAnswers[questionIndex] = { ...currentAnswer, selectedOption: null, status: newStatus }; | |
| newSession = { ...session, userAnswers: newAnswers }; | |
| } | |
| updateSessionState(newSession); | |
| }; | |
| const handleOptionChange = (value: string) => { | |
| updateAnswer(currentQuestionIndex, parseInt(value)); | |
| }; | |
| const handleMarkForReview = () => { | |
| const currentStatus = session?.userAnswers[currentQuestionIndex].status; | |
| let newStatus: UserAnswer['status']; | |
| if (currentStatus === 'answered') { | |
| newStatus = 'answered-and-marked-for-review'; | |
| } else if (currentStatus === 'answered-and-marked-for-review') { | |
| newStatus = 'answered'; | |
| } else if (currentStatus === 'marked-for-review') { | |
| newStatus = 'not-answered'; | |
| } else { // not-answered or not-visited | |
| newStatus = 'marked-for-review'; | |
| } | |
| updateAnswer(currentQuestionIndex, undefined, { status: newStatus }); | |
| }; | |
| const clearResponse = () => { | |
| updateAnswer(currentQuestionIndex, undefined, { selectedOption: null }); | |
| }; | |
| const handleQuestionSelect = (index: number) => { | |
| setCurrentQuestionIndex(index); | |
| }; | |
| const currentQuestion: Question | undefined = session?.questions[currentQuestionIndex]; | |
| const currentUserAnswer: UserAnswer | undefined = session?.userAnswers[currentQuestionIndex]; | |
| if (!isMounted) return <div className="fixed inset-0 flex items-center justify-center bg-background"><Loader2 className="h-8 w-8 animate-spin" /></div>; | |
| if (!session || !currentQuestion) { | |
| useEffect(() => notFound(), []); | |
| return null; | |
| } | |
| const formatTime = (seconds: number) => { | |
| const mins = Math.floor(seconds / 60); | |
| const secs = seconds % 60; | |
| return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; | |
| }; | |
| return ( | |
| <div className="bg-gradient-to-br from-[#0c132c] to-[#121a3a] text-white min-h-[calc(100vh-3.5rem)]"> | |
| <main className="max-w-6xl mx-auto p-4 md:p-8"> | |
| <Card className="shadow-2xl bg-white/5 border-white/10 backdrop-blur-lg"> | |
| <CardHeader className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"> | |
| <div className='flex-1'> | |
| <p className='text-sm text-slate-400'>Question {currentQuestionIndex + 1} of {session.questions.length}</p> | |
| <CardTitle className="text-xl md:text-2xl mt-1 font-headline"> | |
| {session.config.exam} | |
| </CardTitle> | |
| </div> | |
| {timeLeft !== null && ( | |
| <div className="text-right shrink-0"> | |
| <span className="text-sm text-slate-400 block">Time Left</span> | |
| <div className="text-2xl font-mono font-bold tabular-nums text-white">{formatTime(timeLeft)}</div> | |
| </div> | |
| )} | |
| </CardHeader> | |
| <CardContent className="space-y-6"> | |
| <div className="prose prose-lg prose-invert max-w-none font-semibold text-slate-200"> | |
| <ReactMarkdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}> | |
| {currentQuestion.questionText} | |
| </ReactMarkdown> | |
| </div> | |
| <RadioGroup key={currentQuestionIndex} value={currentUserAnswer?.selectedOption?.toString()} onValueChange={handleOptionChange} className="space-y-3"> | |
| {currentQuestion.options.map((option, index) => ( | |
| <Label key={index} htmlFor={`option-${index}`} className={cn( | |
| "flex items-start rounded-lg border p-4 transition-all duration-300 cursor-pointer text-base bg-black/20 border-white/10", | |
| "hover:border-primary/70 hover:bg-primary/10", | |
| currentUserAnswer?.selectedOption === index && "border-primary bg-primary/20 ring-2 ring-primary" | |
| )}> | |
| <RadioGroupItem value={index.toString()} id={`option-${index}`} className="h-6 w-6 mt-0.5 border-slate-500 text-primary focus:ring-primary focus:ring-offset-background"/> | |
| <span className="ml-4 font-medium flex-1 text-slate-300"> | |
| <ReactMarkdown components={{ p: React.Fragment }} remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}> | |
| {option} | |
| </ReactMarkdown> | |
| </span> | |
| </Label> | |
| ))} | |
| </RadioGroup> | |
| </CardContent> | |
| <div className="px-6 py-4 border-y border-white/10"> | |
| <Palette | |
| session={session} | |
| currentQuestionIndex={currentQuestionIndex} | |
| onQuestionSelect={handleQuestionSelect} | |
| /> | |
| </div> | |
| <CardFooter className="flex flex-wrap items-center justify-between gap-4 pt-6"> | |
| <div className='flex gap-2 flex-wrap'> | |
| <Button variant="outline" className="bg-transparent border-slate-600 hover:bg-slate-700 hover:text-slate-100" onClick={handleMarkForReview}><Bookmark className="mr-2 h-4 w-4"/>Mark for Review</Button> | |
| <Button variant="ghost" className="hover:bg-slate-700 hover:text-slate-100" onClick={clearResponse}>Clear Response</Button> | |
| </div> | |
| <div className="flex gap-2"> | |
| <Button variant="secondary" onClick={() => setCurrentQuestionIndex(p => Math.max(0, p - 1))} disabled={currentQuestionIndex === 0}><ChevronLeft className="mr-2 h-4 w-4"/>Previous</Button> | |
| {currentQuestionIndex < session.questions.length - 1 ? ( | |
| <Button onClick={() => setCurrentQuestionIndex(p => Math.min(session.questions.length - 1, p + 1))}>Save & Next <ChevronRight className="ml-2 h-4 w-4"/></Button> | |
| ) : ( | |
| <AlertDialog> | |
| <AlertDialogTrigger asChild><Button variant="default" className="bg-green-600 hover:bg-green-700 text-white">Submit Test</Button></AlertDialogTrigger> | |
| <AlertDialogContent> | |
| <AlertDialogHeader> | |
| <AlertDialogTitle>Ready to finish?</AlertDialogTitle> | |
| <AlertDialogDescription> | |
| This will end the test and calculate your score. You cannot go back after submitting. | |
| </AlertDialogDescription> | |
| </AlertDialogHeader> | |
| <AlertDialogFooter> | |
| <AlertDialogCancel>Cancel</AlertDialogCancel> | |
| <AlertDialogAction onClick={submitTest} disabled={isSubmitting}> | |
| {isSubmitting ? ( | |
| <> | |
| <Loader2 className="mr-2 h-4 w-4 animate-spin" /> | |
| Submitting... | |
| </> | |
| ) : ( | |
| 'Submit' | |
| )} | |
| </AlertDialogAction> | |
| </AlertDialogFooter> | |
| </AlertDialogContent> | |
| </AlertDialog> | |
| )} | |
| </div> | |
| </CardFooter> | |
| </Card> | |
| </main> | |
| </div> | |
| ); | |
| } | |