feat(test): add jump to question functionality

src/App.tsx

@@ -1,3 +1,5 @@
+import "katex/dist/katex.min.css";
+
 import { Home } from "./pages/student/Home";
 import {
   createBrowserRouter,

src/components/RenderQuestionText.tsx

@@ -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>;
+      })}
+    </>
+  );
+};

src/pages/student/practice/Test.tsx

@@ -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()}

src/stores/useSatExam.ts

@@ -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;