feat(test): add dropwdown menu for test screen
This commit is contained in:
shafin-r
@ -3,17 +3,11 @@ import { useNavigate, useParams } from "react-router-dom";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "../../../components/ui/card";
|
||||
import {
|
||||
Clock,
|
||||
Layers,
|
||||
CircleQuestionMark,
|
||||
Check,
|
||||
Loader2,
|
||||
} from "lucide-react";
|
||||
import { Check, Loader2 } from "lucide-react";
|
||||
|
||||
import { api } from "../../../utils/api";
|
||||
import { useAuthStore } from "../../../stores/authStore";
|
||||
import type { PracticeSheet, Question } from "../../../types/sheet";
|
||||
@ -26,6 +20,23 @@ import type {
|
||||
} from "../../../types/session";
|
||||
import { useAuthToken } from "../../../hooks/useAuthToken";
|
||||
import { renderQuestionText } from "../../../components/RenderQuestionText";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "../../../components/ui/dropdown-menu";
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "../../../components/ui/dialog";
|
||||
|
||||
export const Test = () => {
|
||||
const navigate = useNavigate();
|
||||
@ -34,7 +45,6 @@ export const Test = () => {
|
||||
const [practiceSheet, setPracticeSheet] = useState<PracticeSheet | null>(
|
||||
null,
|
||||
);
|
||||
// const [answer, setAnswer] = useState<string>("");
|
||||
const [answers, setAnswers] = useState<Record<string, string>>({});
|
||||
const [showNavigator, setShowNavigator] = useState<boolean>(false);
|
||||
|
||||
@ -44,7 +54,6 @@ export const Test = () => {
|
||||
|
||||
const time = useSatTimer();
|
||||
const phase = useSatExam((s) => s.phase);
|
||||
// const moduleIndex = useSatExam((s) => s.moduleIndex);
|
||||
const currentModule = useSatExam((s) => s.currentModuleQuestions);
|
||||
const questionIndex = useSatExam((s) => s.questionIndex);
|
||||
|
||||
@ -171,6 +180,11 @@ export const Test = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleQuitExam = () => {
|
||||
finishExam();
|
||||
navigate("/student/home");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
resetExam(); // ✅ important
|
||||
}, [sheetId]);
|
||||
@ -191,9 +205,6 @@ export const Test = () => {
|
||||
if (!user) return;
|
||||
}, [sheetId]);
|
||||
|
||||
// const isLastQuestion =
|
||||
// questionIndex === (currentModule?.questions.length ?? 0) - 1;
|
||||
|
||||
const isFirstQuestion = questionIndex === 0;
|
||||
|
||||
const renderAnswerInput = (question?: Question) => {
|
||||
@ -391,62 +402,118 @@ export const Test = () => {
|
||||
Back
|
||||
</button>
|
||||
|
||||
{/* <button className="px-8 border rounded-full py-3 font-satoshi-medium text-black">
|
||||
Menu
|
||||
</button> */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="px-8 border rounded-full py-3 font-satoshi-medium text-black">
|
||||
Menu
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
|
||||
<button
|
||||
onClick={() => setShowNavigator(true)}
|
||||
className="px-8 border rounded-full py-3 font-satoshi-medium text-black"
|
||||
>
|
||||
Go to
|
||||
</button>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem
|
||||
className="font-satoshi text-md"
|
||||
onClick={() => setShowNavigator(true)}
|
||||
>
|
||||
Go to
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
|
||||
{showNavigator && (
|
||||
<div className="fixed inset-0 bg-black/40 flex justify-center items-center z-50">
|
||||
<div className="bg-white rounded-2xl w-[500px] max-h-[70vh] p-6 flex flex-col gap-4 shadow-xl">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-xl font-satoshi-bold">
|
||||
Jump to Question
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => setShowNavigator(false)}
|
||||
className="text-gray-500 hover:text-black"
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
{/* ✅ Dialog MUST wrap DropdownMenuItem */}
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<DropdownMenuItem
|
||||
className="font-satoshi text-md text-red-600 focus:text-red-600"
|
||||
onSelect={(e) => e.preventDefault()} // 🔥 important
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
Quit Test
|
||||
</DropdownMenuItem>
|
||||
</DialogTrigger>
|
||||
|
||||
<div className="grid grid-cols-6 gap-3 overflow-y-auto">
|
||||
{currentModule?.questions.map((q, idx) => {
|
||||
const isCurrent = idx === questionIndex;
|
||||
const isAnswered = !!answers[q.id];
|
||||
<DialogContent showCloseButton={false}>
|
||||
<DialogHeader>
|
||||
<DialogTitle className="font-satoshi-medium text-start">
|
||||
Want to quit the test?
|
||||
</DialogTitle>
|
||||
<DialogDescription className="font-satoshi tracking-wide">
|
||||
Your progress will be saved and you can resume later.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
return (
|
||||
<button
|
||||
key={q.id}
|
||||
onClick={() => {
|
||||
goToQuestion(idx);
|
||||
setShowNavigator(false);
|
||||
}}
|
||||
className={`w-12 h-12 rounded-lg flex items-center justify-center font-satoshi-medium border transition
|
||||
${
|
||||
isCurrent
|
||||
? "bg-purple-600 text-white border-purple-600"
|
||||
: isAnswered
|
||||
? "bg-green-100 border-green-400 text-green-700"
|
||||
: "bg-white border-gray-300 hover:bg-gray-100"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{idx + 1}
|
||||
<div className="flex justify-end gap-3 mt-4">
|
||||
<DialogClose asChild>
|
||||
<button className="px-4 py-2 border rounded-lg cursor-pointer font-satoshi">
|
||||
Cancel
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</DialogClose>
|
||||
<button
|
||||
onClick={handleQuitExam}
|
||||
className="px-4 py-2 bg-red-600 text-white rounded-lg cursor-pointer font-satoshi"
|
||||
>
|
||||
Quit
|
||||
</button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<Dialog open={showNavigator} onOpenChange={setShowNavigator}>
|
||||
<DialogContent className="max-w-90 max-h-[75vh] flex flex-col gap-4">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="font-satoshi-bold text-xl">
|
||||
Go to Question
|
||||
</DialogTitle>
|
||||
<DialogDescription className="font-satoshi text-md">
|
||||
<span>Select a question to navigate directly.</span>
|
||||
<div className="flex items-center gap-6 mt-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-4 w-4 rounded-sm bg-green-100 border border-green-400"></div>
|
||||
<span>Answered</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-4 w-4 rounded-sm bg-purple-100 border border-purple-400"></div>
|
||||
<span>Current</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-4 w-4 rounded-sm bg-gray-100 border border-gray-400"></div>
|
||||
<span>Skipped</span>
|
||||
</div>
|
||||
</div>
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="grid grid-cols-4 gap-3 overflow-y-auto ">
|
||||
{currentModule?.questions.map((q, idx) => {
|
||||
const isCurrent = idx === questionIndex;
|
||||
const isAnswered = !!answers[q.id];
|
||||
|
||||
return (
|
||||
<button
|
||||
key={q.id}
|
||||
onClick={() => {
|
||||
goToQuestion(idx);
|
||||
setShowNavigator(false);
|
||||
}}
|
||||
className={`w-12 h-12 rounded-lg flex items-center justify-center font-satoshi-medium border transition
|
||||
${
|
||||
isCurrent
|
||||
? "bg-purple-600 text-white border-purple-600"
|
||||
: isAnswered
|
||||
? "bg-green-100 border-green-400 text-green-700"
|
||||
: "bg-white border-gray-300 hover:bg-gray-100"
|
||||
}
|
||||
`}
|
||||
>
|
||||
{idx + 1}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<button
|
||||
disabled={isSubmitting}
|
||||
@ -476,7 +543,6 @@ export const Test = () => {
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
case "FINISHED":
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col justify-center items-center text-4xl gap-4">
|
||||
|
||||
Reference in New Issue
Block a user