feat(test): add jump to question functionality
This commit is contained in:
shafin-r
@ -19,9 +19,11 @@
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"embla-carousel-react": "^8.6.0",
|
||||
"katex": "^0.16.28",
|
||||
"lucide-react": "^0.562.0",
|
||||
"react": "^19.2.0",
|
||||
"react-dom": "^19.2.0",
|
||||
"react-katex": "^3.1.0",
|
||||
"react-router-dom": "^7.12.0",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
"tailwindcss": "^4.1.18",
|
||||
|
||||
60
pnpm-lock.yaml
generated
60
pnpm-lock.yaml
generated
@ -35,6 +35,9 @@ importers:
|
||||
embla-carousel-react:
|
||||
specifier: ^8.6.0
|
||||
version: 8.6.0(react@19.2.3)
|
||||
katex:
|
||||
specifier: ^0.16.28
|
||||
version: 0.16.28
|
||||
lucide-react:
|
||||
specifier: ^0.562.0
|
||||
version: 0.562.0(react@19.2.3)
|
||||
@ -44,6 +47,9 @@ importers:
|
||||
react-dom:
|
||||
specifier: ^19.2.0
|
||||
version: 19.2.3(react@19.2.3)
|
||||
react-katex:
|
||||
specifier: ^3.1.0
|
||||
version: 3.1.0(prop-types@15.8.1)(react@19.2.3)
|
||||
react-router-dom:
|
||||
specifier: ^7.12.0
|
||||
version: 7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
|
||||
@ -1145,6 +1151,10 @@ packages:
|
||||
color-name@1.1.4:
|
||||
resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
|
||||
|
||||
commander@8.3.0:
|
||||
resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==}
|
||||
engines: {node: '>= 12'}
|
||||
|
||||
concat-map@0.0.1:
|
||||
resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
|
||||
|
||||
@ -1395,6 +1405,10 @@ packages:
|
||||
engines: {node: '>=6'}
|
||||
hasBin: true
|
||||
|
||||
katex@0.16.28:
|
||||
resolution: {integrity: sha512-YHzO7721WbmAL6Ov1uzN/l5mY5WWWhJBSW+jq4tkfZfsxmo1hu6frS0EOswvjBUnWE6NtjEs48SFn5CQESRLZg==}
|
||||
hasBin: true
|
||||
|
||||
keyv@4.5.4:
|
||||
resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
|
||||
|
||||
@ -1479,6 +1493,10 @@ packages:
|
||||
lodash.merge@4.6.2:
|
||||
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
|
||||
|
||||
loose-envify@1.4.0:
|
||||
resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
|
||||
hasBin: true
|
||||
|
||||
lru-cache@5.1.1:
|
||||
resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
|
||||
|
||||
@ -1511,6 +1529,10 @@ packages:
|
||||
node-releases@2.0.27:
|
||||
resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
|
||||
|
||||
object-assign@4.1.1:
|
||||
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
optionator@0.9.4:
|
||||
resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
@ -1550,6 +1572,9 @@ packages:
|
||||
resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
|
||||
engines: {node: '>= 0.8.0'}
|
||||
|
||||
prop-types@15.8.1:
|
||||
resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
|
||||
|
||||
punycode@2.3.1:
|
||||
resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
|
||||
engines: {node: '>=6'}
|
||||
@ -1559,6 +1584,15 @@ packages:
|
||||
peerDependencies:
|
||||
react: ^19.2.3
|
||||
|
||||
react-is@16.13.1:
|
||||
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
|
||||
|
||||
react-katex@3.1.0:
|
||||
resolution: {integrity: sha512-At9uLOkC75gwn2N+ZXc5HD8TlATsB+3Hkp9OGs6uA8tM3dwZ3Wljn74Bk3JyHFPgSnesY/EMrIAB1WJwqZqejA==}
|
||||
peerDependencies:
|
||||
prop-types: ^15.8.1
|
||||
react: '>=15.3.2 <20'
|
||||
|
||||
react-refresh@0.18.0:
|
||||
resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
@ -2761,6 +2795,8 @@ snapshots:
|
||||
|
||||
color-name@1.1.4: {}
|
||||
|
||||
commander@8.3.0: {}
|
||||
|
||||
concat-map@0.0.1: {}
|
||||
|
||||
convert-source-map@2.0.0: {}
|
||||
@ -3008,6 +3044,10 @@ snapshots:
|
||||
|
||||
json5@2.2.3: {}
|
||||
|
||||
katex@0.16.28:
|
||||
dependencies:
|
||||
commander: 8.3.0
|
||||
|
||||
keyv@4.5.4:
|
||||
dependencies:
|
||||
json-buffer: 3.0.1
|
||||
@ -3072,6 +3112,10 @@ snapshots:
|
||||
|
||||
lodash.merge@4.6.2: {}
|
||||
|
||||
loose-envify@1.4.0:
|
||||
dependencies:
|
||||
js-tokens: 4.0.0
|
||||
|
||||
lru-cache@5.1.1:
|
||||
dependencies:
|
||||
yallist: 3.1.1
|
||||
@ -3100,6 +3144,8 @@ snapshots:
|
||||
|
||||
node-releases@2.0.27: {}
|
||||
|
||||
object-assign@4.1.1: {}
|
||||
|
||||
optionator@0.9.4:
|
||||
dependencies:
|
||||
deep-is: 0.1.4
|
||||
@ -3137,6 +3183,12 @@ snapshots:
|
||||
|
||||
prelude-ls@1.2.1: {}
|
||||
|
||||
prop-types@15.8.1:
|
||||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
object-assign: 4.1.1
|
||||
react-is: 16.13.1
|
||||
|
||||
punycode@2.3.1: {}
|
||||
|
||||
react-dom@19.2.3(react@19.2.3):
|
||||
@ -3144,6 +3196,14 @@ snapshots:
|
||||
react: 19.2.3
|
||||
scheduler: 0.27.0
|
||||
|
||||
react-is@16.13.1: {}
|
||||
|
||||
react-katex@3.1.0(prop-types@15.8.1)(react@19.2.3):
|
||||
dependencies:
|
||||
katex: 0.16.28
|
||||
prop-types: 15.8.1
|
||||
react: 19.2.3
|
||||
|
||||
react-refresh@0.18.0: {}
|
||||
|
||||
react-remove-scroll-bar@2.3.8(@types/react@19.2.7)(react@19.2.3):
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import "katex/dist/katex.min.css";
|
||||
|
||||
import { Home } from "./pages/student/Home";
|
||||
import {
|
||||
createBrowserRouter,
|
||||
|
||||
19
src/components/RenderQuestionText.tsx
Normal file
19
src/components/RenderQuestionText.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { BlockMath, InlineMath } from "react-katex";
|
||||
|
||||
export const renderQuestionText = (text: string) => {
|
||||
const parts = text.split(/(\$\$.*?\$\$|\$.*?\$)/g);
|
||||
|
||||
return (
|
||||
<>
|
||||
{parts.map((part, index) => {
|
||||
if (part.startsWith("$$")) {
|
||||
return <BlockMath key={index}>{part.slice(2, -2)}</BlockMath>;
|
||||
}
|
||||
if (part.startsWith("$")) {
|
||||
return <InlineMath key={index}>{part.slice(1, -1)}</InlineMath>;
|
||||
}
|
||||
return <span key={index}>{part}</span>;
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -16,7 +16,7 @@ import {
|
||||
} from "lucide-react";
|
||||
import { api } from "../../../utils/api";
|
||||
import { useAuthStore } from "../../../stores/authStore";
|
||||
import type { Option, PracticeSheet, Question } from "../../../types/sheet";
|
||||
import type { PracticeSheet, Question } from "../../../types/sheet";
|
||||
import { Button } from "../../../components/ui/button";
|
||||
import { useSatExam } from "../../../stores/useSatExam";
|
||||
import { useSatTimer } from "../../../hooks/useSatTimer";
|
||||
@ -25,6 +25,7 @@ import type {
|
||||
SubmitAnswer,
|
||||
} from "../../../types/session";
|
||||
import { useAuthToken } from "../../../hooks/useAuthToken";
|
||||
import { renderQuestionText } from "../../../components/RenderQuestionText";
|
||||
|
||||
export const Test = () => {
|
||||
const navigate = useNavigate();
|
||||
@ -33,8 +34,9 @@ export const Test = () => {
|
||||
const [practiceSheet, setPracticeSheet] = useState<PracticeSheet | null>(
|
||||
null,
|
||||
);
|
||||
const [answer, setAnswer] = useState<string>("");
|
||||
// const [answer, setAnswer] = useState<string>("");
|
||||
const [answers, setAnswers] = useState<Record<string, string>>({});
|
||||
const [showNavigator, setShowNavigator] = useState<boolean>(false);
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [sessionId, setSessionId] = useState<string | null>(null);
|
||||
@ -47,10 +49,15 @@ export const Test = () => {
|
||||
const questionIndex = useSatExam((s) => s.questionIndex);
|
||||
|
||||
const currentQuestion = currentModule?.questions[questionIndex];
|
||||
const currentAnswer = currentQuestion
|
||||
? (answers[currentQuestion.id] ?? "")
|
||||
: "";
|
||||
|
||||
const resetExam = useSatExam((s) => s.resetExam);
|
||||
const nextQuestion = useSatExam((s) => s.nextQuestion);
|
||||
const prevQuestion = useSatExam((s) => s.prevQuestion);
|
||||
const goToQuestion = useSatExam((s) => s.goToQuestion);
|
||||
|
||||
const finishExam = useSatExam((s) => s.finishExam);
|
||||
|
||||
const startExam = async () => {
|
||||
@ -184,10 +191,6 @@ export const Test = () => {
|
||||
if (!user) return;
|
||||
}, [sheetId]);
|
||||
|
||||
useEffect(() => {
|
||||
setAnswer("");
|
||||
}, [questionIndex, currentModule?.module_id]);
|
||||
|
||||
// const isLastQuestion =
|
||||
// questionIndex === (currentModule?.questions.length ?? 0) - 1;
|
||||
|
||||
@ -201,7 +204,7 @@ export const Test = () => {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
{question.options.map((option, index) => {
|
||||
const isSelected = answer === option.id;
|
||||
const isSelected = currentAnswer === option.id;
|
||||
|
||||
return (
|
||||
<button
|
||||
@ -211,7 +214,12 @@ export const Test = () => {
|
||||
? "bg-linear-to-br from-purple-400 to-purple-500 text-white"
|
||||
: ""
|
||||
}`}
|
||||
onClick={() => setAnswer(option.id)}
|
||||
onClick={() =>
|
||||
setAnswers((prev) => ({
|
||||
...prev,
|
||||
[question.id]: option.id,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full ${
|
||||
@ -222,7 +230,7 @@ export const Test = () => {
|
||||
>
|
||||
{"ABCD"[index]}
|
||||
</span>{" "}
|
||||
<span>{option.text}</span>
|
||||
<span>{renderQuestionText(option.text)}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
@ -234,8 +242,13 @@ export const Test = () => {
|
||||
return (
|
||||
<div className="flex flex-col gap-3 pt-4">
|
||||
<textarea
|
||||
value={answer}
|
||||
onChange={(e) => setAnswer(e.target.value)}
|
||||
value={currentAnswer}
|
||||
onChange={(e) =>
|
||||
setAnswers((prev) => ({
|
||||
...prev,
|
||||
[question.id]: e.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="Type your answer here..."
|
||||
className="w-full min-h-30 border rounded-xl px-4 py-3 text-lg font-satoshi focus:outline-none focus:ring-2 focus:ring-purple-400"
|
||||
/>
|
||||
@ -246,13 +259,13 @@ export const Test = () => {
|
||||
switch (phase) {
|
||||
case "IDLE":
|
||||
return (
|
||||
<main className="min-h-screen px-8 py-8 w-full space-y-6">
|
||||
<main className="min-h-screen px-8 py-8 w-full space-y-6 flex flex-col items-center justify-center">
|
||||
<Card className="">
|
||||
<CardHeader className="space-y-6">
|
||||
<CardTitle className="font-satoshi text-4xl">
|
||||
Ready to begin your test?
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{/* <CardDescription>
|
||||
<section className="flex justify-between gap-6 px-4">
|
||||
<div className="flex flex-col justify-center items-center gap-4">
|
||||
<div className="w-fit bg-cyan-100 p-2 rounded-full">
|
||||
@ -291,7 +304,7 @@ export const Test = () => {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</CardDescription>
|
||||
</CardDescription> */}
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<h2 className="font-satoshi-bold text-2xl">Before you begin:</h2>
|
||||
@ -335,7 +348,7 @@ export const Test = () => {
|
||||
return (
|
||||
<main className="">
|
||||
<section className="w-full flex flex-col space-y-4 min-h-screen">
|
||||
<section className="fixed top-0 left-0 right-0 bg-white border-b border-gray-300 px-8 pt-8 pb-4 space-y-2 z-10">
|
||||
<section className="fixed top-0 left-0 right-0 bg-white border-b border-purple-300 px-8 pt-8 pb-4 space-y-2 z-10">
|
||||
<header className="space-y-2 flex flex-col items-center">
|
||||
<h2 className="font-satoshi-bold text-3xl w-fit">
|
||||
{Math.floor(time / 60)}:{String(time % 60).padStart(2, "0")}
|
||||
@ -348,8 +361,8 @@ export const Test = () => {
|
||||
</p> */}
|
||||
</header>
|
||||
</section>
|
||||
<hr className="border-gray-300" />
|
||||
{currentModule?.questions[0]?.context && (
|
||||
<div className="border border-purple-300"></div>
|
||||
{currentQuestion?.context && (
|
||||
<section className="h-100 overflow-y-auto px-10 pt-30">
|
||||
<p className="font-satoshi tracking-wide text-lg">
|
||||
{currentQuestion?.context}
|
||||
@ -357,15 +370,16 @@ export const Test = () => {
|
||||
</section>
|
||||
)}
|
||||
|
||||
<div className="border border-gray-300"></div>
|
||||
<div className="border border-purple-200"></div>
|
||||
<section
|
||||
className={`px-10 ${currentQuestion?.context ? "pt-26" : "pt-26"}`}
|
||||
className={`px-10 ${currentQuestion?.context ? "" : "pt-26"}`}
|
||||
>
|
||||
<p className="font-satoshi-medium text-xl">
|
||||
{currentQuestion?.text}
|
||||
{currentQuestion?.text &&
|
||||
renderQuestionText(currentQuestion.text)}
|
||||
</p>
|
||||
</section>
|
||||
<section className="overflow-y-auto px-10 pb-20">
|
||||
<section className="overflow-y-auto max-h-100 md:max-h-fit px-10 pb-20">
|
||||
{renderAnswerInput(currentQuestion)}
|
||||
</section>
|
||||
<section className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-300 py-4 flex justify-evenly">
|
||||
@ -377,10 +391,63 @@ export const Test = () => {
|
||||
Back
|
||||
</button>
|
||||
|
||||
<button className="px-8 border rounded-full py-3 font-satoshi-medium text-black">
|
||||
{/* <button className="px-8 border rounded-full py-3 font-satoshi-medium text-black">
|
||||
Menu
|
||||
</button> */}
|
||||
|
||||
<button
|
||||
onClick={() => setShowNavigator(true)}
|
||||
className="px-8 border rounded-full py-3 font-satoshi-medium text-black"
|
||||
>
|
||||
Go to
|
||||
</button>
|
||||
|
||||
{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"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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];
|
||||
|
||||
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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
disabled={isSubmitting}
|
||||
onClick={handleNext}
|
||||
@ -398,8 +465,8 @@ export const Test = () => {
|
||||
);
|
||||
case "BREAK":
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col justify-center items-center text-3xl gap-6">
|
||||
🧘 Break Time
|
||||
<div className="min-h-screen flex flex-col justify-center items-center text-3xl gap-6 font-satoshi">
|
||||
Break Time
|
||||
<p className="text-lg mt-4">Next module starts in {time}s</p>
|
||||
<button
|
||||
onClick={() => useSatExam.getState().skipBreak()}
|
||||
|
||||
@ -34,6 +34,7 @@ interface SatExamState {
|
||||
startExam: () => void;
|
||||
nextQuestion: () => void;
|
||||
prevQuestion: () => void;
|
||||
goToQuestion: (index: number) => void;
|
||||
|
||||
startBreak: () => void;
|
||||
skipBreak: () => void;
|
||||
@ -82,6 +83,15 @@ export const useSatExam = create<SatExamState>()(
|
||||
}
|
||||
},
|
||||
|
||||
goToQuestion: (index: number) =>
|
||||
set((state) => {
|
||||
const total = state.currentModuleQuestions?.questions.length ?? 0;
|
||||
|
||||
if (index < 0 || index >= total) return state;
|
||||
|
||||
return { questionIndex: index };
|
||||
}),
|
||||
|
||||
startBreak: () => {
|
||||
const endTime = Date.now() + BREAK_DURATION * 1000;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user