shafin808s/edbridge-scholars
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(exam): add SAT style testing component

Browse Source
This commit is contained in:
shafin-r
2026-01-28 15:22:19 +06:00
parent 61b7c5220e
commit 355ca0c0c4
17 changed files with 1136 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>edbridge-scholars</title>
<title>Edbridge Scholars</title>
</head>
<body>
<div id="root"></div>

33
src/App.tsx
View File

@ -1,19 +1,19 @@
import { Home } from "./pages/student/Home";
import {
createBrowserRouter,
Navigate,
RouterProvider,
} from "react-router-dom";
import { Login } from "./pages/auth/Login";
import { Home } from "./pages/student/Home";
import { Practice } from "./pages/student/Practice";
import { Rewards } from "./pages/student/Rewards";
import { Profile } from "./pages/student/Profile";
import { Lessons } from "./pages/student/Lessons";
import { ProtectedRoute } from "./components/ProtectedRoute";
import { StudentLayout } from "./pages/student/StudentLayout";
import { Test } from "./pages/student/practice/Test";
import { Results } from "./pages/student/practice/Results";
import { Login } from "./pages/auth/Login";
import { Lessons } from "./pages/student/Lessons";
import { Practice } from "./pages/student/Practice";
import { Pretest } from "./pages/student/practice/Pretest";
import { Results } from "./pages/student/practice/Results";
import { Test } from "./pages/student/practice/Test";
import { Profile } from "./pages/student/Profile";
import { Rewards } from "./pages/student/Rewards";
import { StudentLayout } from "./pages/student/StudentLayout";
function App() {
const router = createBrowserRouter([
@ -51,23 +51,20 @@ function App() {
{
path: "practice/:sheetId",
element: <Pretest />,
children: [
},
],
},
{
path: "test",
path: "practice/:sheetId/test",
element: <Test />,
},
{
path: "results",
path: "practice/:sheetId/test/results",
element: <Results />,
},
],
},
// more student subroutes here
],
},
// Add more subroutes here as needed
],
},
{
path: "/",
element: <Navigate to="/student/home" replace />,

0
src/components/examTimer.tsx Normal file
View File

26
src/hooks/useAuthToken.ts Normal file
View File

@ -0,0 +1,26 @@
// hooks/useAuthToken.ts
import { useMemo } from "react";
type AuthStorage = {
state?: {
token?: string;
};
};
export function useAuthToken() {
const token = useMemo(() => {
const authStorage = localStorage.getItem("auth-storage");
if (!authStorage) return null;
try {
const parsed: AuthStorage = JSON.parse(authStorage);
return parsed?.state?.token ?? null;
} catch (error) {
console.error("Failed to parse auth-storage:", error);
return null;
}
}, []);
return token;
}

51
src/hooks/useSatTimer.ts Normal file
View File

@ -0,0 +1,51 @@
import { useEffect, useState } from "react";
import { useSatExam } from "../stores/useSatExam";
export const useSatTimer = () => {
const phase = useSatExam((s) => s.phase);
const getRemainingTime = useSatExam((s) => s.getRemainingTime);
const startBreak = useSatExam((s) => s.startBreak);
const skipBreak = useSatExam((s) => s.skipBreak);
const finishExam = useSatExam((s) => s.finishExam);
const currentModule = useSatExam((s) => s.currentModuleQuestions);
const [time, setTime] = useState(0);
// ✅ reset timer when phase or module changes
useEffect(() => {
setTime(getRemainingTime());
}, [phase, currentModule?.module_id]);
useEffect(() => {
if (phase === "IDLE" || phase === "FINISHED") return;
const interval = setInterval(() => {
const remaining = getRemainingTime();
setTime(remaining);
if (remaining === 0) {
clearInterval(interval);
if (phase === "BREAK") {
// ✅ break ended → go back to module
skipBreak();
return;
}
if (phase === "MODULE") {
// ⚠️ IMPORTANT:
// Timer should NOT load next module automatically.
// Instead, finish exam UI or let backend decide.
finishExam();
return;
}
}
}, 1000);
return () => clearInterval(interval);
}, [phase, getRemainingTime, skipBreak, finishExam]);
return time;
};

6
src/lib/utils.ts
View File

@ -75,3 +75,9 @@ export function getRandomColor() {
];
return colors[Math.floor(Math.random() * colors.length)];
}
export const formatTime = (seconds: number) => {
const m = Math.floor(seconds / 60);
const s = seconds % 60;
return `${m}:${s.toString().padStart(2, "0")}`;
};

64
src/pages/student/Home.tsx
View File

@ -39,10 +39,10 @@ export const Home = () => {
(sheet) => sheet.user_status === "NOT_STARTED",
);
const inProgress = sheets.filter(
(sheet) => sheet.user_status === "in-progress",
(sheet) => sheet.user_status === "IN_PROGRESS",
);
const completed = sheets.filter(
(sheet) => sheet.user_status === "completed",
(sheet) => sheet.user_status === "COMPLETED",
);
setNotStartedSheets(notStarted);
@ -83,8 +83,7 @@ export const Home = () => {
};
return (
<div className="min-h-screen bg-gray-50">
<main className="flex flex-col gap-12 max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-8">
<main className="min-h-screen bg-gray-50 flex flex-col gap-12 max-w-full mx-auto px-8 sm:px-6 lg:px-8 py-8">
<h1 className="text-4xl font-satoshi-bold tracking-tight text-gray-800 text-center">
Welcome, {user?.name || "Student"}
</h1>
@ -102,6 +101,54 @@ export const Home = () => {
<h1 className="font-satoshi-bold text-2xl tracking-tight">
Pick up where you left off
</h1>
{inProgressSheets.length > 0 ? (
inProgressSheets.map((sheet) => (
<Card
key={sheet?.id}
className="rounded-4xl border bg-purple-50/70 border-purple-500"
>
<CardHeader>
<CardTitle className="font-satoshi-medium text-xl">
{sheet?.title}
</CardTitle>
<CardDescription className="font-satoshi">
{sheet?.description}
</CardDescription>
</CardHeader>
<CardContent className="flex justify-between">
<p className="font-satoshi text-sm border px-2 rounded-full bg-purple-500 text-white py-1">
{formatStatus(sheet?.user_status)}
</p>
<Badge
variant="secondary"
className="bg-indigo-100 text-indigo-500 font-satoshi tracking-wide"
>
{sheet?.modules_count} modules
</Badge>
</CardContent>
<CardContent>
<p className="font-satoshi text-gray-700">
{sheet?.time_limit} minutes
</p>
</CardContent>
<CardFooter>
<Button
onClick={() => handleStartPractice(sheet?.id)}
variant="outline"
className="font-satoshi rounded-3xl w-full text-lg py-6 bg-linear-to-br from-purple-500 to-purple-600 text-white"
>
Resume
</Button>
</CardFooter>
</Card>
))
) : (
<Card className="flex items-center justify-center py-4 rounded-4xl">
<h2 className="text-center font-satoshi text-lg text-gray-800">
You don't have any practice sheets in progress. Why not start one?
</h2>
</Card>
)}
</section>
<section className="w-full">
<Tabs defaultValue="all" className="w-full">
@ -126,7 +173,7 @@ export const Home = () => {
</TabsTrigger>
</TabsList>
<TabsContent value="all" className="pt-6">
<div className="space-y-6">
<div className="gap-6 flex flex-col md:grid md:grid-cols-2">
{practiceSheets.length > 0 ? (
practiceSheets.map((sheet) => (
<Card key={sheet?.id} className="rounded-4xl">
@ -175,7 +222,7 @@ export const Home = () => {
</div>
</TabsContent>
<TabsContent value="NOT_STARTED" className="pt-6">
<div className="space-y-6">
<div className="gap-6 flex flex-col md:grid md:grid-cols-2">
{notStartedSheets.map((sheet) => (
<Card key={sheet?.id} className="rounded-4xl">
<CardHeader>
@ -213,6 +260,7 @@ export const Home = () => {
</div>
</TabsContent>
<TabsContent value="COMPLETED" className="pt-6">
<div className="gap-6 flex flex-col md:grid md:grid-cols-2">
{completedSheets.length > 0 ? (
completedSheets.map((sheet) => (
<Card key={sheet?.id} className="rounded-4xl">
@ -257,10 +305,11 @@ export const Home = () => {
</h2>
</div>
)}
</div>
</TabsContent>
</Tabs>
</section>
<section className="w-full space-y-4"></section>
<section className="space-y-4 ">
<h1 className="font-satoshi-bold text-2xl tracking-tight">
SAT Preparation Tips
@ -297,6 +346,5 @@ export const Home = () => {
</section>
</section>
</main>
</div>
);
};

30
src/pages/student/Lessons.tsx
View File

@ -42,7 +42,8 @@ export const Lessons = () => {
</TabsTrigger>
</TabsList>
<TabsContent value="rw" className="pt-4">
<Card className="py-0 pb-8 rounded-4xl overflow-hidden">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card className="py-0 pb-5 rounded-4xl overflow-hidden">
<CardHeader className="w-full py-0 px-0">
<img
src="https://placehold.co/600x400"
@ -55,6 +56,33 @@ export const Lessons = () => {
<CardDescription>Video Description</CardDescription>
</CardContent>
</Card>
<Card className="py-0 pb-5 rounded-4xl overflow-hidden">
<CardHeader className="w-full py-0 px-0">
<img
src="https://placehold.co/600x400"
alt="Video Thumbnail"
className="w-full h-auto rounded"
/>
</CardHeader>
<CardContent className="space-y-2">
<CardTitle>Video Title</CardTitle>
<CardDescription>Video Description</CardDescription>
</CardContent>
</Card>
<Card className="py-0 pb-5 rounded-4xl overflow-hidden">
<CardHeader className="w-full py-0 px-0">
<img
src="https://placehold.co/600x400"
alt="Video Thumbnail"
className="w-full h-auto rounded"
/>
</CardHeader>
<CardContent className="space-y-2">
<CardTitle>Video Title</CardTitle>
<CardDescription>Video Description</CardDescription>
</CardContent>
</Card>
</div>
</TabsContent>
<TabsContent value="math" className="pt-4">
<Card className="py-0 pb-8 rounded-4xl overflow-hidden">

16
src/pages/student/Practice.tsx
View File

@ -36,13 +36,13 @@ export const Practice = () => {
flex-row"
>
<div className="space-y-4">
<CardHeader className="w-[65%]">
<CardHeader className="w-[65%] md:w-full">
<CardTitle className="font-satoshi-bold tracking-tight text-3xl text-white">
See where you stand
</CardTitle>
</CardHeader>
<CardContent className="w-2/3">
<CardContent className="w-2/3 md:w-full">
<p className="font-satoshi text-white">
Test your knowledge with an adaptive practice test.
</p>
@ -53,20 +53,23 @@ export const Practice = () => {
</Button>
</CardFooter>
</div>
<div className="overflow-hidden opacity-30 -rotate-45 absolute -top-7 -right-20">
<div className="overflow-hidden opacity-30 -rotate-45 absolute -top-10 -right-20">
<DraftingCompass size={300} color="white" />
</div>
</Card>
</section>
<section className="flex flex-col gap-6">
<h1 className="font-satoshi-black text-2xl">Practice your way</h1>
<div className="md:grid md:grid-cols-2 md:gap-6 space-y-6 md:space-y-0">
<Card className="rounded-4xl cursor-pointer hover:bg-gray-50 active:bg-gray-50 active:translate-y-1">
<CardHeader className="space-y-3">
<div className="w-fit bg-linear-to-br from-red-400 to-red-500 p-3 rounded-2xl">
<Target size={20} color="white" />
</div>
<div className="space-y-2">
<CardTitle className="font-satoshi">Targeted Practice</CardTitle>
<CardTitle className="font-satoshi">
Targeted Practice
</CardTitle>
<CardDescription className="font-satoshi">
Focus on what matters
</CardDescription>
@ -102,7 +105,9 @@ export const Practice = () => {
<Trophy size={20} color="white" />
</div>
<div className="space-y-2">
<CardTitle className="font-satoshi">Hard Test Modules</CardTitle>
<CardTitle className="font-satoshi">
Hard Test Modules
</CardTitle>
<CardDescription className="font-satoshi">
Focus on what matters
</CardDescription>
@ -114,6 +119,7 @@ export const Practice = () => {
</CardAction>
</CardHeader>
</Card>
</div>
</section>
</main>
);

2
src/pages/student/Profile.tsx
View File

@ -12,7 +12,7 @@ export const Profile = () => {
};
return (
<main className="min-h-screen space-y-6 max-w-7xl mx-auto px-8 sm:px-6 lg:px-8 py-8">
<main className="min-h-screen space-y-6 max-w-7xl mx-auto px-8 sm:px-6 md:px-26 lg:px-8 py-8">
<h1 className="text-lg font-satoshi-bold text-center">Profile</h1>
<section>
<h3 className="text-2xl font-satoshi-bold">{user?.name}</h3>

41
src/pages/student/practice/Pretest.tsx
View File

@ -1,9 +1,16 @@
import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Outlet, replace, useParams } from "react-router-dom";
import { api } from "../../../utils/api";
import { useAuthStore } from "../../../stores/authStore";
import type { PracticeSheet } from "../../../types/sheet";
import { CircleQuestionMark, Clock, Layers, Tag } from "lucide-react";
import {
CircleQuestionMark,
Clock,
Layers,
Loader,
Loader2,
Tag,
} from "lucide-react";
import {
Carousel,
CarouselContent,
@ -11,6 +18,7 @@ import {
type CarouselApi,
} from "../../../components/ui/carousel";
import { Button } from "../../../components/ui/button";
import { useNavigate } from "react-router-dom";
export const Pretest = () => {
const user = useAuthStore((state) => state.user);
@ -18,13 +26,18 @@ export const Pretest = () => {
const [carouselApi, setCarouselApi] = useState<CarouselApi>();
const [current, setCurrent] = useState(0);
const [count, setCount] = useState(0);
const navigate = useNavigate();
const [practiceSheet, setPracticeSheet] = useState<PracticeSheet | null>(
null,
);
function handleStartTest(sheetId: string) {
console.log("Starting test for Practice Sheet. ID: ", sheetId);
if (!sheetId) {
console.error("Sheet ID is required to start the test.");
return;
}
navigate(`/student/practice/${sheetId}/test`, { replace: true });
}
useEffect(() => {
@ -67,6 +80,7 @@ export const Pretest = () => {
{practiceSheet?.description}
</p>
</header>
{practiceSheet ? (
<section className="flex flex-col gap-6 rounded-4xl bg-white border p-8">
<div className="flex items-center gap-4">
<Clock size={65} color="black" />
@ -96,6 +110,13 @@ export const Pretest = () => {
</div>
</div>
</section>
) : (
<section className="flex flex-col items-center gap-6 rounded-4xl bg-white border p-8">
<div>
<Loader size={30} className="transition animate-spin" />
</div>
</section>
)}
<Carousel setApi={setCarouselApi}>
<CarouselContent className="">
{practiceSheet ? (
@ -161,7 +182,10 @@ export const Pretest = () => {
)
) : (
<CarouselItem>
<section className="flex flex-col w-full rounded-4xl p-8 bg-yellow-100 border">
<section className="flex flex-col w-full rounded-4xl p-8 bg-yellow-100 border items-center justify-between gap-4">
<div>
<Loader size={30} className="transition animate-spin" />
</div>
<h1 className="text-center text-xl font-satoshi-bold text-yellow-500">
Loading...
</h1>
@ -191,8 +215,15 @@ export const Pretest = () => {
onClick={() => handleStartTest(practiceSheet?.id!)}
variant="outline"
className="font-satoshi rounded-3xl w-full text-lg py-8 bg-linear-to-br from-purple-500 to-purple-600 text-white active:bg-linear-to-br active:from-purple-600 active:to-purple-700 active:translate-y-1"
disabled={!practiceSheet}
>
Start Test
{practiceSheet ? (
"Start Test"
) : (
<div>
<Loader size={60} className="transition animate-spin" />
</div>
)}
</Button>
</main>
);

11
src/pages/student/practice/Results.tsx
View File

@ -1,3 +1,12 @@
import { useNavigate } from "react-router-dom";
import { Button } from "../../../components/ui/button";
export const Results = () => {
return <div>Results</div>;
const navigate = useNavigate();
return (
<div className="min-h-screen flex items-center justify-center text-2xl font-satoshi-bold">
Your results go here
<Button onClick={() => navigate("/student/home")}>Go to home</Button>
</div>
);
};

405
src/pages/student/practice/Test.tsx
View File

@ -1,3 +1,406 @@
import { useEffect, useState } from "react";
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 { api } from "../../../utils/api";
import { useAuthStore } from "../../../stores/authStore";
import type { Option, PracticeSheet } from "../../../types/sheet";
import { Button } from "../../../components/ui/button";
import { useSatExam } from "../../../stores/useSatExam";
import { useSatTimer } from "../../../hooks/useSatTimer";
import type {
SessionModuleQuestions,
SubmitAnswer,
} from "../../../types/session";
import { useAuthToken } from "../../../hooks/useAuthToken";
export const Test = () => {
return <div>Test</div>;
const navigate = useNavigate();
const { user } = useAuthStore();
const token = useAuthToken();
const [practiceSheet, setPracticeSheet] = useState<PracticeSheet | null>(
null,
);
const [answers, setAnswers] = useState<SubmitAnswer[]>([]);
const [isSubmitting, setIsSubmitting] = useState(false);
const [sessionId, setSessionId] = useState<string | null>(null);
const { sheetId } = useParams<{ sheetId: string }>();
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);
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);
const startExam = async () => {
if (!user || !sheetId) return;
try {
const response = await api.startSession(token as string, {
sheet_id: sheetId,
mode: "MODULE",
topic_ids: practiceSheet?.topics.map((t) => t.id) ?? [],
difficulty: practiceSheet?.difficulty ?? "EASY",
question_count: 2,
time_limit_minutes: practiceSheet?.time_limit ?? 0,
});
setSessionId(response.id);
await loadSessionQuestions(response.id);
// ✅ NOW start module phase
useSatExam.getState().startExam();
} catch (error) {
console.error("Failed to start exam session:", error);
}
};
const loadSessionQuestions = async (sessionId: string) => {
if (!token) return;
try {
const data = await api.fetchSessionQuestions(token, sessionId);
const module: SessionModuleQuestions = {
module_id: data.module_id,
module_title: data.module_title,
time_limit_minutes: data.time_limit_minutes * 60,
questions: data.questions.map((q) => ({
id: q.id,
text: q.text,
context: q.context,
context_image_url: q.context_image_url,
type: q.type,
section: q.section,
image_url: q.image_url,
index: q.index,
difficulty: q.difficulty,
correct_answer: q.correct_answer,
explanation: q.explanation,
topics: q.topics,
options: q.options,
})),
};
useSatExam.getState().setModuleQuestions(module);
} catch (err) {
console.error("Failed to load session questions:", err);
}
};
const handleNext = async () => {
if (!currentQuestion || !selectedOption || !sessionId) return;
const selected = currentQuestion.options.find(
(opt) => opt.id === selectedOption,
);
if (!selected) return;
const answerPayload: SubmitAnswer = {
question_id: currentQuestion.id,
answer_text: selected.text,
time_spent_seconds: 3,
};
setIsSubmitting(true);
await api.submitAnswer(token!, sessionId, answerPayload);
const isLastQuestion =
questionIndex === currentModule!.questions.length - 1;
// ✅ normal question flow
if (!isLastQuestion) {
nextQuestion();
setIsSubmitting(false);
return;
}
// ✅ ask backend for next module
const next = await api.fetchNextModule(token!, sessionId);
if (next?.finished) {
finishExam();
} else {
await loadSessionQuestions(sessionId);
// ✅ IMPORTANT: start break AFTER module loads
useSatExam.getState().startBreak();
}
setIsSubmitting(false);
};
useEffect(() => {
resetExam(); // ✅ important
}, [sheetId]);
useEffect(() => {
if (phase === "FINISHED") {
const timer = setTimeout(() => {
navigate(`/student/practice/${sheetId}/test/results`, {
replace: true,
});
}, 3000);
return () => clearTimeout(timer);
}
}, [phase]);
useEffect(() => {
if (!user) return;
}, [sheetId]);
const [selectedOption, setSelectedOption] = useState<string | null>(null);
const isLastQuestion =
questionIndex === (currentModule?.questions.length ?? 0) - 1;
const isFirstQuestion = questionIndex === 0;
useEffect(() => {
setSelectedOption(null);
}, [questionIndex, currentModule?.module_id]);
const renderOptions = (options?: Option[]) => {
if (!options || !Array.isArray(options)) {
return <p className="text-gray-500 text-20xl">No options available.</p>;
}
const handleOptionClick = (option: Option) => {
setSelectedOption(option.id);
};
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>
);
};
switch (phase) {
case "IDLE":
return (
<main className="min-h-screen px-8 py-8 w-full space-y-6">
<Card className="">
<CardHeader className="space-y-6">
<CardTitle className="font-satoshi text-4xl">
Ready to begin your test?
</CardTitle>
<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">
<Clock size={30} color="oklch(60.9% 0.126 221.723)" />
</div>
<div className="flex flex-col justify-center items-center">
<h3 className="text-xl font-satoshi-bold text-black">
{practiceSheet?.time_limit}
</h3>
<p className="text-md font-satoshi ">Minutes</p>
</div>
</div>
<div className="flex flex-col justify-center items-center gap-4">
<div className="w-fit bg-lime-100 p-2 rounded-full">
<CircleQuestionMark
size={30}
color="oklch(64.8% 0.2 131.684)"
/>
</div>
<div className="flex flex-col justify-center items-center">
<h3 className="text-xl font-satoshi-bold text-black">
{practiceSheet?.questions_count}
</h3>
<p className="text-md font-satoshi ">Questions</p>
</div>
</div>
<div className="flex flex-col justify-center items-center gap-4">
<div className="w-fit bg-amber-100 p-2 rounded-full">
<Layers size={30} color="oklch(66.6% 0.179 58.318)" />
</div>
<div className="flex flex-col justify-center items-center">
<h3 className="text-xl font-satoshi-bold text-black">
{practiceSheet?.modules.length}
</h3>
<p className="text-md font-satoshi ">Modules</p>
</div>
</div>
</section>
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<h2 className="font-satoshi-bold text-2xl">Before you begin:</h2>
<div className="flex items-center gap-4">
<Check size={30} color="oklch(62.7% 0.265 303.9)" />
<span className="font-satoshi">
This test will run on full screen mode for a distraction-free
experience
</span>
</div>
<div className="flex items-center gap-4">
<Check size={20} color="oklch(62.7% 0.265 303.9)" />
<span className="font-satoshi">
You can exit full-screen anytime by pressing <kbd>Esc</kbd>
</span>
</div>
<div className="flex items-center gap-4">
<Check size={18} color="oklch(62.7% 0.265 303.9)" />
<span className="font-satoshi">
Your progress will be saved automatically
</span>
</div>
<div className="flex items-center gap-4">
<Check size={24} color="oklch(62.7% 0.265 303.9)" />
<span className="font-satoshi">
You can take breaks using the "More" menu in the top right
</span>
</div>
<Button
onClick={() => startExam()}
variant="outline"
className="font-satoshi rounded-3xl text-lg w-full py-8 bg-linear-to-br from-purple-500 to-purple-600 text-white active:bg-linear-to-br active:from-purple-600 active:to-purple-700 "
>
Start Test
</Button>
</CardContent>
</Card>
</main>
);
case "MODULE":
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">
<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")}
</h2>
<h1 className="text-lg text-center font-satoshi">
{currentModule?.module_title}
</h1>
{/* <p className="text-sm font-satoshi text-gray-500">
{practiceSheet?.modules[0].description}
</p> */}
</header>
</section>
<hr className="border-gray-300" />
{currentModule?.questions[0]?.context && (
<section className="h-100 overflow-y-auto px-10 pt-30">
<p className="font-satoshi tracking-wide text-lg">
{currentQuestion?.context}
</p>
</section>
)}
<div className="border border-gray-300"></div>
<section
className={`px-10 ${currentQuestion?.context ? "" : "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)}
</section>
<section className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-300 py-4 flex justify-evenly">
<button
disabled={isFirstQuestion}
onClick={prevQuestion}
className="px-8 border rounded-full py-3 font-satoshi-medium text-black disabled:opacity-40"
>
Back
</button>
<button className="px-8 border rounded-full py-3 font-satoshi-medium text-black">
Menu
</button>
<button
disabled={isSubmitting || !selectedOption}
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"
>
{isSubmitting ? (
<Loader2 size={24} className="animate-spin" />
) : (
"Next"
)}
</button>
</section>
</section>
</main>
);
case "BREAK":
return (
<div className="min-h-screen flex flex-col justify-center items-center text-3xl gap-6">
🧘 Break Time
<p className="text-lg mt-4">Next module starts in {time}s</p>
<button
onClick={() => useSatExam.getState().skipBreak()}
className="px-6 py-3 rounded-full bg-purple-600 text-white text-lg"
>
Skip Break →
</button>
</div>
);
case "FINISHED":
return (
<div className="min-h-screen flex flex-col justify-center items-center text-4xl gap-4">
⏰ Time’s Up!
<p className="text-lg text-gray-500">Redirecting to results...</p>
</div>
);
default:
return null;
}
};

127
src/stores/useSatExam.ts Normal file
View File

@ -0,0 +1,127 @@
import { create } from "zustand";
import { persist } from "zustand/middleware";
import { type ExamPhase } from "../types/sheet";
import type { SessionModuleQuestions } from "../types/session";
// interface SatExamState {
// modules: Module[];
// phase: ExamPhase;
// moduleIndex: number;
// questionIndex: number;
// endTime: number | null;
// startExam: () => void;
// setModuleQuestionss: (modules: Module[]) => void;
// nextQuestion: () => void;
// prevQuestion: () => void;
// nextModule: () => void;
// nextPhase: () => void;
// skipBreak: () => void;
// getRemainingTime: () => number;
// finishExam: () => void;
// resetExam: () => void;
// replaceModules: (modules: Module[]) => void;
// }
interface SatExamState {
currentModuleQuestions: SessionModuleQuestions | null;
phase: ExamPhase;
questionIndex: number;
endTime: number | null;
setModuleQuestions: (module: SessionModuleQuestions) => void;
startExam: () => void;
nextQuestion: () => void;
prevQuestion: () => void;
startBreak: () => void;
skipBreak: () => void;
finishExam: () => void;
resetExam: () => void;
getRemainingTime: () => number;
}
const BREAK_DURATION = 30; // seconds
export const useSatExam = create<SatExamState>()(
persist(
(set, get) => ({
currentModuleQuestions: null,
phase: "IDLE",
questionIndex: 0,
endTime: null,
setModuleQuestions: (module: SessionModuleQuestions) => {
const endTime = Date.now() + module.time_limit_minutes * 1000;
set({
currentModuleQuestions: module,
questionIndex: 0,
endTime,
});
},
startExam: () => {
set({ phase: "MODULE", questionIndex: 0 });
},
nextQuestion: () => {
const { currentModuleQuestions, questionIndex } = get();
const questions = currentModuleQuestions?.questions ?? [];
if (questionIndex < questions.length - 1) {
set({ questionIndex: questionIndex + 1 });
}
},
prevQuestion: () => {
const { questionIndex } = get();
if (questionIndex > 0) {
set({ questionIndex: questionIndex - 1 });
}
},
startBreak: () => {
const endTime = Date.now() + BREAK_DURATION * 1000;
set((state) => ({
phase: "BREAK",
endTime,
questionIndex: 0, // optional: reset question index for next module UX
}));
},
skipBreak: () => {
const module = get().currentModuleQuestions;
if (!module) return;
const endTime = Date.now() + module.time_limit_minutes * 1000;
set({
phase: "MODULE",
endTime,
questionIndex: 0,
});
},
finishExam: () => set({ phase: "FINISHED", endTime: null }),
getRemainingTime: () => {
const { endTime } = get();
if (!endTime) return 0;
return Math.max(0, Math.floor((endTime - Date.now()) / 1000));
},
resetExam: () =>
set({
currentModuleQuestions: null,
phase: "IDLE",
questionIndex: 0,
endTime: null,
}),
}),
{ name: "sat-exam-storage" },
),
);

66
src/types/session.ts Normal file
View File

@ -0,0 +1,66 @@
import type { Question } from "./sheet";
type Answer = {
id: string;
question_id: string;
answer_text: string;
is_correct: boolean;
marked_for_review: false;
};
/**
* SessionRequest interface
* `/sessions/`
*/
export interface SessionRequest {
sheet_id: string;
mode: string;
topic_ids: string[];
difficulty: string;
question_count: number;
time_limit_minutes: number;
}
export interface SessionResponse {
id: string;
practice_sheet_id: string;
status: string;
current_module_index: number;
current_model_id: string;
current_module_title: string;
answers: Answer[];
started_at: Date;
score: number;
}
export type SubmitAnswer = {
question_id: string;
answer_text: string;
time_spent_seconds: number;
};
export interface SessionAnswerResponse {
status: string;
feedback: {
is_correct: boolean;
correct_answer: string;
explanation: string;
};
}
export interface SessionQuestionsResponse {
session_id: string;
module_id: string;
module_title: string;
time_limit_minutes: number;
questions: Question[];
}
export interface SessionModuleQuestions {
session_id?: string;
module_id: string;
module_title: string;
time_limit_minutes: number;
questions: Question[];
}

12
src/types/sheet.ts
View File

@ -4,6 +4,8 @@ interface CreatedBy {
email: string;
}
export type ExamPhase = "IDLE" | "MODULE" | "BREAK" | "FINISHED";
export interface Subject {
name: string;
section: string;
@ -13,7 +15,15 @@ export interface Subject {
parent_name: string;
}
export interface Option {
text: string;
image_url: string;
sequence_order: number;
id: string;
}
export interface Question {
difficulty: string;
text: string;
context: string;
context_image_url: string;
@ -22,7 +32,7 @@ export interface Question {
image_url: string;
index: number;
id: string;
options: any[];
options: Option[];
topics: Topic[];
correct_answer: string;
explanation: string;

61
src/utils/api.ts
View File

@ -1,3 +1,10 @@
import type {
SessionAnswerResponse,
SessionQuestionsResponse,
SessionRequest,
SessionResponse,
SubmitAnswer,
} from "../types/session";
import type { PracticeSheet } from "../types/sheet";
const API_URL = "https://ed-dev-api.omukk.dev";
@ -121,6 +128,60 @@ class ApiClient {
token,
);
}
async startSession(
token: string,
sessionData: SessionRequest,
): Promise<SessionResponse> {
return this.authenticatedRequest<SessionResponse>(`/sessions/`, token, {
method: "POST",
body: JSON.stringify(sessionData),
});
}
async fetchSessionQuestions(
token: string,
sessionId: string,
): Promise<SessionQuestionsResponse> {
return this.authenticatedRequest<SessionQuestionsResponse>(
`/sessions/${sessionId}/questions/`,
token,
);
}
async submitAnswer(
token: string,
sessionId: string,
answerSubmissionData: SubmitAnswer,
): Promise<SessionAnswerResponse> {
return this.authenticatedRequest<SessionAnswerResponse>(
`/sessions/${sessionId}/answer/`,
token,
{
method: "POST",
body: JSON.stringify(answerSubmissionData),
},
);
}
async fetchNextModule(token: string, sessionId: string): Promise<any> {
return this.authenticatedRequest<any>(
`/sessions/${sessionId}/next-module/`,
token,
{
method: "POST",
},
);
}
async fetchSessionStateById(
token: string,
sessionId: string,
): Promise<SessionResponse> {
return this.authenticatedRequest<SessionResponse>(
`/sessions/${sessionId}`,
token,
);
}
}
export const api = new ApiClient(API_URL);