From 5df438f474030444dadf5fd760322a6589bed5b7 Mon Sep 17 00:00:00 2001
From: shafin-r <shafin808s@gmail.com>
Date: Wed, 28 Jan 2026 21:23:31 +0600
Subject: [PATCH] feat(test): add short answer input on questions

fix(test): fix navigation upon test completion
---
 src/pages/student/practice/Test.tsx | 146 ++++++++++++++++------------
 src/types/sheet.ts                  |   2 +
 2 files changed, 84 insertions(+), 64 deletions(-)

diff --git a/src/pages/student/practice/Test.tsx b/src/pages/student/practice/Test.tsx
index fca3964..6d2ec79 100644
--- a/src/pages/student/practice/Test.tsx
+++ b/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 } from "../../../types/sheet";
+import type { Option, PracticeSheet, Question } from "../../../types/sheet";
 import { Button } from "../../../components/ui/button";
 import { useSatExam } from "../../../stores/useSatExam";
 import { useSatTimer } from "../../../hooks/useSatTimer";
@@ -33,7 +33,9 @@ export const Test = () => {
   const [practiceSheet, setPracticeSheet] = useState<PracticeSheet | null>(
     null,
   );
-  const [answers, setAnswers] = useState<SubmitAnswer[]>([]);
+  const [answer, setAnswer] = useState<string>("");
+  const [answers, setAnswers] = useState<Record<string, string>>({});
+
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [sessionId, setSessionId] = useState<string | null>(null);
   const { sheetId } = useParams<{ sheetId: string }>();
@@ -47,7 +49,6 @@ export const Test = () => {
   const currentQuestion = currentModule?.questions[questionIndex];
 
   const resetExam = useSatExam((s) => s.resetExam);
-  const startSatExam = useSatExam((s) => s.startExam);
   const nextQuestion = useSatExam((s) => s.nextQuestion);
   const prevQuestion = useSatExam((s) => s.prevQuestion);
   const finishExam = useSatExam((s) => s.finishExam);
@@ -110,47 +111,57 @@ export const Test = () => {
   };
 
   const handleNext = async () => {
-    if (!currentQuestion || !selectedOption || !sessionId) return;
+    if (!currentQuestion || !sessionId) return;
 
-    const selected = currentQuestion.options.find(
-      (opt) => opt.id === selectedOption,
-    );
+    const userAnswer = answers[currentQuestion.id] ?? "";
 
-    if (!selected) return;
+    let answerText = "";
 
-    const answerPayload: SubmitAnswer = {
+    // ✅ MCQ case
+    if (currentQuestion.options?.length) {
+      const selected = currentQuestion.options.find(
+        (opt) => opt.id === userAnswer,
+      );
+      answerText = selected?.text ?? "";
+    }
+    // ✅ Text input case
+    else {
+      answerText = userAnswer;
+    }
+
+    const payload: SubmitAnswer = {
       question_id: currentQuestion.id,
-      answer_text: selected.text,
+      answer_text: answerText, // ✅ empty string if skipped
       time_spent_seconds: 3,
     };
 
-    setIsSubmitting(true);
-
-    await api.submitAnswer(token!, sessionId, answerPayload);
+    try {
+      setIsSubmitting(true);
+      await api.submitAnswer(token!, sessionId, payload);
+    } catch (err) {
+      console.error("Failed to submit answer:", err);
+    } finally {
+      setIsSubmitting(false);
+    }
 
     const isLastQuestion =
       questionIndex === currentModule!.questions.length - 1;
 
-    // ✅ normal question flow
+    // ✅ Move to next question
     if (!isLastQuestion) {
       nextQuestion();
-      setIsSubmitting(false);
       return;
     }
 
-    // ✅ ask backend for next module
+    // ✅ Module finished → ask backend for next module
     const next = await api.fetchNextModule(token!, sessionId);
 
-    if (next?.finished) {
+    if (next?.status === "COMPLETED") {
       finishExam();
     } else {
       await loadSessionQuestions(sessionId);
-
-      // ✅ IMPORTANT: start break AFTER module loads
       useSatExam.getState().startBreak();
     }
-
-    setIsSubmitting(false);
   };
 
   useEffect(() => {
@@ -173,54 +184,61 @@ export const Test = () => {
     if (!user) return;
   }, [sheetId]);
 
-  const [selectedOption, setSelectedOption] = useState<string | null>(null);
+  useEffect(() => {
+    setAnswer("");
+  }, [questionIndex, currentModule?.module_id]);
 
-  const isLastQuestion =
-    questionIndex === (currentModule?.questions.length ?? 0) - 1;
+  // const isLastQuestion =
+  //   questionIndex === (currentModule?.questions.length ?? 0) - 1;
 
   const isFirstQuestion = questionIndex === 0;
 
-  useEffect(() => {
-    setSelectedOption(null);
-  }, [questionIndex, currentModule?.module_id]);
+  const renderAnswerInput = (question?: Question) => {
+    if (!question) return null;
 
-  const renderOptions = (options?: Option[]) => {
-    if (!options || !Array.isArray(options)) {
-      return <p className="text-gray-500 text-20xl">No options available.</p>;
+    // ✅ MCQ
+    if (question.options && question.options.length > 0) {
+      return (
+        <div className="flex flex-col gap-4">
+          {question.options.map((option, index) => {
+            const isSelected = answer === option.id;
+
+            return (
+              <button
+                key={option.id}
+                className={`text-start font-satoshi-medium text-lg space-x-2 px-4 py-4 border rounded-4xl transition duration-200 ${
+                  isSelected
+                    ? "bg-linear-to-br from-purple-400 to-purple-500 text-white"
+                    : ""
+                }`}
+                onClick={() => setAnswer(option.id)}
+              >
+                <span
+                  className={`px-2 py-1 rounded-full ${
+                    isSelected
+                      ? "bg-white text-purple-500"
+                      : "bg-purple-500 text-white"
+                  }`}
+                >
+                  {"ABCD"[index]}
+                </span>{" "}
+                <span>{option.text}</span>
+              </button>
+            );
+          })}
+        </div>
+      );
     }
 
-    const handleOptionClick = (option: Option) => {
-      setSelectedOption(option.id);
-    };
-
+    // ✅ SHORT ANSWER (text input)
     return (
-      <div className="flex flex-col gap-4">
-        {options.map((option, index) => {
-          const isSelected = selectedOption === option.id;
-
-          return (
-            <button
-              key={option.id}
-              className={`text-start font-satoshi-medium text-lg space-x-2 px-4 py-4 border rounded-4xl transition duration-200 ${
-                isSelected
-                  ? "bg-linear-to-br from-purple-400 to-purple-500 text-white"
-                  : ""
-              }`}
-              onClick={() => handleOptionClick(option)}
-            >
-              <span
-                className={`px-2 py-1 rounded-full ${
-                  isSelected
-                    ? "bg-white text-purple-500"
-                    : "bg-purple-500 text-white"
-                }`}
-              >
-                {"ABCD"[index]}
-              </span>{" "}
-              <span>{option.text}</span>
-            </button>
-          );
-        })}
+      <div className="flex flex-col gap-3 pt-4">
+        <textarea
+          value={answer}
+          onChange={(e) => setAnswer(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"
+        />
       </div>
     );
   };
@@ -341,14 +359,14 @@ export const Test = () => {
 
             <div className="border border-gray-300"></div>
             <section
-              className={`px-10 ${currentQuestion?.context ? "" : "pt-26"}`}
+              className={`px-10 ${currentQuestion?.context ? "pt-26" : "pt-26"}`}
             >
               <p className="font-satoshi-medium text-xl">
                 {currentQuestion?.text}
               </p>
             </section>
             <section className="overflow-y-auto px-10 pb-20">
-              {renderOptions(currentQuestion?.options)}
+              {renderAnswerInput(currentQuestion)}
             </section>
             <section className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-300 py-4 flex justify-evenly">
               <button
@@ -364,7 +382,7 @@ export const Test = () => {
               </button>
 
               <button
-                disabled={isSubmitting || !selectedOption}
+                disabled={isSubmitting}
                 onClick={handleNext}
                 className="px-8 border rounded-full py-3 font-satoshi-medium text-white bg-linear-to-br from-purple-400 to-purple-500 disabled:opacity-50"
               >
diff --git a/src/types/sheet.ts b/src/types/sheet.ts
index 5e9d9ce..7a57dda 100644
--- a/src/types/sheet.ts
+++ b/src/types/sheet.ts
@@ -6,6 +6,8 @@ interface CreatedBy {
 
 export type ExamPhase = "IDLE" | "MODULE" | "BREAK" | "FINISHED";
 
+export type QuestionType = "MCQ" | "TEXT" | "SHORT_ANSWER";
+
 export interface Subject {
   name: string;
   section: string;