feat(test): add short answer input on questions
fix(test): fix navigation upon test completion
This commit is contained in:
shafin-r
@ -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"
|
||||
>
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user