generated from muhtadeetaron/nextjs-template
added exam routes
This commit is contained in:
shafin-r
@ -58,7 +58,7 @@ export default function RegisterPage() {
|
||||
}
|
||||
try {
|
||||
await register(form, setToken);
|
||||
router.push("/tabs/home");
|
||||
router.push("/home");
|
||||
} catch (error: any) {
|
||||
console.error("Error:", error.response || error.message);
|
||||
if (error.response?.detail) {
|
||||
|
||||
138
app/(tabs)/paper/page.tsx
Normal file
138
app/(tabs)/paper/page.tsx
Normal file
@ -0,0 +1,138 @@
|
||||
"use client";
|
||||
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import Header from "@/components/Header";
|
||||
import DestructibleAlert from "@/components/DestructibleAlert";
|
||||
import BackgroundWrapper from "@/components/BackgroundWrapper";
|
||||
import { API_URL } from "@/lib/auth";
|
||||
import { Loader, RefreshCw } from "lucide-react";
|
||||
|
||||
interface Mock {
|
||||
id: string;
|
||||
title: string;
|
||||
rating: number;
|
||||
}
|
||||
|
||||
// For App Router (Next.js 13+ with app directory)
|
||||
export default function PaperScreen() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const name = searchParams.get("name") || "";
|
||||
|
||||
const [questions, setQuestions] = useState<Mock[] | null>(null);
|
||||
const [errorMsg, setErrorMsg] = useState<string | null>(null);
|
||||
const [refreshing, setRefreshing] = useState<boolean>(false);
|
||||
const [componentKey, setComponentKey] = useState<number>(0);
|
||||
|
||||
async function fetchMocks() {
|
||||
try {
|
||||
const questionResponse = await fetch(`${API_URL}/mocks`, {
|
||||
method: "GET",
|
||||
});
|
||||
const fetchedQuestionData: Mock[] = await questionResponse.json();
|
||||
console.log(fetchedQuestionData[0]?.id);
|
||||
setQuestions(fetchedQuestionData);
|
||||
} catch (error) {
|
||||
setErrorMsg(error instanceof Error ? error.message : "An error occurred");
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (name) {
|
||||
fetchMocks();
|
||||
}
|
||||
}, [name]);
|
||||
|
||||
const onRefresh = async () => {
|
||||
setRefreshing(true);
|
||||
|
||||
await fetchMocks();
|
||||
setComponentKey((prevKey) => prevKey + 1);
|
||||
setTimeout(() => {
|
||||
setRefreshing(false);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
if (errorMsg) {
|
||||
return (
|
||||
<BackgroundWrapper>
|
||||
<div className="min-h-screen">
|
||||
<Header
|
||||
displaySubject={name}
|
||||
displayTabTitle={null}
|
||||
displayUser={false}
|
||||
image={undefined}
|
||||
examDuration={undefined}
|
||||
/>
|
||||
<div className="overflow-y-auto">
|
||||
<div className="mt-5 px-5">
|
||||
<DestructibleAlert text={errorMsg} extraStyles="" />
|
||||
</div>
|
||||
<div className="flex justify-center mt-4">
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={refreshing}
|
||||
className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
|
||||
>
|
||||
{refreshing ? <Loader /> : <RefreshCw />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* <CustomBackHandler fallbackRoute="unit" /> */}
|
||||
</div>
|
||||
</BackgroundWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BackgroundWrapper>
|
||||
<div>
|
||||
<Header
|
||||
displayTabTitle={null}
|
||||
displayUser={false}
|
||||
displaySubject={name}
|
||||
/>
|
||||
<div className="mx-10 pt-10 overflow-y-auto">
|
||||
<div className="border border-[#c0dafc] flex flex-col gap-4 w-full rounded-[25px] p-4">
|
||||
{questions ? (
|
||||
questions.map((mock) => (
|
||||
<div key={mock.id}>
|
||||
<button
|
||||
onClick={() =>
|
||||
router.push(
|
||||
`/exam/pretest?unitname=${name}&id=${mock.id}&title=${mock.title}&rating=${mock.rating}`
|
||||
)
|
||||
}
|
||||
className="w-full border-2 border-[#B0C2DA] py-4 rounded-[10px] px-6 gap-2 text-left hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<h3 className="text-xl font-medium">{mock.title}</h3>
|
||||
<p className="text-md font-normal">
|
||||
Rating: {mock.rating} / 10
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
|
||||
<p className="text-xl font-medium text-center">Loading...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-center mt-4">
|
||||
<button
|
||||
onClick={onRefresh}
|
||||
disabled={refreshing}
|
||||
className="p-2 bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 rounded-full"
|
||||
>
|
||||
{refreshing ? <Loader /> : <RefreshCw />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* <CustomBackHandler fallbackRoute="unit" useCustomHandler={false} /> */}
|
||||
</BackgroundWrapper>
|
||||
);
|
||||
}
|
||||
@ -33,7 +33,7 @@ const Unit = () => {
|
||||
/>
|
||||
<div className="flex-1">
|
||||
<div className="overflow-y-auto">
|
||||
<div className="border border-blue-200 gap-4 rounded-3xl p-6 mx-10 mt-10">
|
||||
<div className="border border-blue-200 gap-4 rounded-3xl p-4 mx-10 mt-10">
|
||||
{units ? (
|
||||
units.map((unit) => (
|
||||
<button
|
||||
|
||||
@ -1,7 +1,310 @@
|
||||
import React from "react";
|
||||
"use client";
|
||||
|
||||
const page = () => {
|
||||
return <div>page</div>;
|
||||
import { useParams, useRouter, useSearchParams } from "next/navigation";
|
||||
import React, { useEffect, useState, useCallback, useReducer } from "react";
|
||||
import { useTimer } from "@/context/TimerContext";
|
||||
import { API_URL, getToken } from "@/lib/auth";
|
||||
|
||||
// Types
|
||||
interface Question {
|
||||
id: number;
|
||||
question: string;
|
||||
options: Record<string, string>;
|
||||
}
|
||||
|
||||
interface QuestionItemProps {
|
||||
question: Question;
|
||||
selectedAnswer: string | undefined;
|
||||
handleSelect: (questionId: number, option: string) => void;
|
||||
}
|
||||
|
||||
interface AnswerState {
|
||||
[questionId: number]: string;
|
||||
}
|
||||
|
||||
interface AnswerAction {
|
||||
type: "SELECT_ANSWER";
|
||||
questionId: number;
|
||||
option: string;
|
||||
}
|
||||
|
||||
// Components
|
||||
const QuestionItem = React.memo<QuestionItemProps>(
|
||||
({ question, selectedAnswer, handleSelect }) => (
|
||||
<div className="question-container">
|
||||
<h3 className="question-text">
|
||||
{question.id}. {question.question}
|
||||
</h3>
|
||||
<div className="options-container">
|
||||
{Object.entries(question.options).map(([key, value]) => (
|
||||
<button
|
||||
key={key}
|
||||
className={`option-button ${
|
||||
selectedAnswer === key ? "selected-option" : ""
|
||||
}`}
|
||||
onClick={() => handleSelect(question.id, key)}
|
||||
>
|
||||
<span
|
||||
className={`option-text ${
|
||||
selectedAnswer === key ? "selected-option-text" : ""
|
||||
}`}
|
||||
>
|
||||
{key.toUpperCase()}
|
||||
</span>
|
||||
<span className="option-description">{value}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
QuestionItem.displayName = "QuestionItem";
|
||||
|
||||
const reducer = (state: AnswerState, action: AnswerAction): AnswerState => {
|
||||
switch (action.type) {
|
||||
case "SELECT_ANSWER":
|
||||
return { ...state, [action.questionId]: action.option };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
export default page;
|
||||
export default function ExamPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const id = params.id as string;
|
||||
const time = searchParams.get("time");
|
||||
|
||||
const { setInitialTime, stopTimer } = useTimer();
|
||||
|
||||
const [questions, setQuestions] = useState<Question[] | null>(null);
|
||||
const [answers, dispatch] = useReducer(reducer, {});
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [submissionLoading, setSubmissionLoading] = useState(false);
|
||||
|
||||
const fetchQuestions = async () => {
|
||||
try {
|
||||
const response = await fetch(`${API_URL}/mock/${id}`, {
|
||||
method: "GET",
|
||||
});
|
||||
const data = await response.json();
|
||||
setQuestions(data.questions);
|
||||
} catch (error) {
|
||||
console.error("Error fetching questions:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchQuestions();
|
||||
if (time) {
|
||||
setInitialTime(Number(time));
|
||||
}
|
||||
}, [id, time, setInitialTime]);
|
||||
|
||||
const handleSelect = useCallback((questionId: number, option: string) => {
|
||||
dispatch({ type: "SELECT_ANSWER", questionId, option });
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async () => {
|
||||
stopTimer();
|
||||
setSubmissionLoading(true);
|
||||
|
||||
const payload = {
|
||||
mock_id: id,
|
||||
data: answers,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_URL}/submit`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: `Bearer ${await getToken()}`,
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
console.error(
|
||||
"Submission failed:",
|
||||
errorData.message || "Unknown error"
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const responseData = await response.json();
|
||||
|
||||
router.push(
|
||||
`/exam/results?id=${id}&answers=${encodeURIComponent(
|
||||
JSON.stringify(responseData)
|
||||
)}`
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Error submitting answers:", error);
|
||||
} finally {
|
||||
setSubmissionLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const showExitDialog = () => {
|
||||
if (window.confirm("Are you sure you want to quit the exam?")) {
|
||||
stopTimer();
|
||||
router.push("/unit");
|
||||
}
|
||||
};
|
||||
|
||||
// Handle browser back button
|
||||
useEffect(() => {
|
||||
const handleBeforeUnload = (e: BeforeUnloadEvent) => {
|
||||
e.preventDefault();
|
||||
e.returnValue = "";
|
||||
return "";
|
||||
};
|
||||
|
||||
const handlePopState = (e: PopStateEvent) => {
|
||||
e.preventDefault();
|
||||
showExitDialog();
|
||||
};
|
||||
|
||||
window.addEventListener("beforeunload", handleBeforeUnload);
|
||||
window.addEventListener("popstate", handlePopState);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("beforeunload", handleBeforeUnload);
|
||||
window.removeEventListener("popstate", handlePopState);
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (submissionLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex flex-col items-center justify-center min-h-64">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900 mb-4"></div>
|
||||
<p className="text-lg font-medium text-gray-900">Submitting...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center min-h-64">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900"></div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{questions?.map((question) => (
|
||||
<QuestionItem
|
||||
key={question.id}
|
||||
question={question}
|
||||
selectedAnswer={answers[question.id]}
|
||||
handleSelect={handleSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
|
||||
<div className="container mx-auto">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={submissionLoading}
|
||||
className="w-full bg-blue-900 text-white py-4 px-6 rounded-lg font-bold text-lg hover:bg-blue-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
Submit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.question-container {
|
||||
border: 1px solid #8abdff;
|
||||
border-radius: 25px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.question-text {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.options-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.option-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 6px 0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid transparent;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.option-button:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.selected-option {
|
||||
background-color: #f0f8ff;
|
||||
}
|
||||
|
||||
.option-text {
|
||||
font-size: 14px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 25px;
|
||||
text-align: center;
|
||||
border: 1px solid #ddd;
|
||||
min-width: 32px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.selected-option-text {
|
||||
color: white;
|
||||
background-color: #113768;
|
||||
border-color: #113768;
|
||||
}
|
||||
|
||||
.option-description {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.question-container {
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.question-text {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.option-description {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,190 @@
|
||||
import React from "react";
|
||||
"use client";
|
||||
|
||||
const page = () => {
|
||||
return <div>page</div>;
|
||||
};
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { useEffect, useState } from "react";
|
||||
import { ArrowLeft, HelpCircle, Clock, XCircle } from "lucide-react";
|
||||
import DestructibleAlert from "@/components/DestructibleAlert";
|
||||
import BackgroundWrapper from "@/components/BackgroundWrapper";
|
||||
import { API_URL } from "@/lib/auth";
|
||||
|
||||
export default page;
|
||||
interface Metadata {
|
||||
metadata: {
|
||||
quantity: number;
|
||||
type: string;
|
||||
duration: number;
|
||||
marking: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default function PretestPage() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
// Get params from URL search params
|
||||
const name = searchParams.get("name") || "";
|
||||
const id = searchParams.get("id") || "";
|
||||
const title = searchParams.get("title") || "";
|
||||
const rating = searchParams.get("rating") || "";
|
||||
|
||||
const [metadata, setMetadata] = useState<Metadata | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
async function fetchQuestions() {
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const questionResponse = await fetch(`${API_URL}/mock/${id}`, {
|
||||
method: "GET",
|
||||
});
|
||||
|
||||
if (!questionResponse.ok) {
|
||||
throw new Error("Failed to fetch questions");
|
||||
}
|
||||
|
||||
const fetchedMetadata: Metadata = await questionResponse.json();
|
||||
setMetadata(fetchedMetadata);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setError(error instanceof Error ? error.message : "An error occurred");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
fetchQuestions();
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<BackgroundWrapper>
|
||||
<div className="min-h-screen">
|
||||
<div className="mx-10 mt-10">
|
||||
<button onClick={() => router.push("/unit")} className="mb-4">
|
||||
<ArrowLeft size={30} color="black" />
|
||||
</button>
|
||||
<DestructibleAlert text={error} extraStyles="" />
|
||||
</div>
|
||||
{/* <CustomBackHandler fallbackRoute="paper" /> */}
|
||||
</div>
|
||||
</BackgroundWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BackgroundWrapper>
|
||||
<div className="min-h-screen flex flex-col justify-between">
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{metadata ? (
|
||||
<div className="mx-10 mt-10 gap-6 pb-6 space-y-6">
|
||||
<button onClick={() => router.push("/unit")}>
|
||||
<ArrowLeft size={30} color="black" />
|
||||
</button>
|
||||
|
||||
<h1 className="text-4xl font-semibold text-[#113768]">{title}</h1>
|
||||
|
||||
<p className="text-xl font-medium text-[#113768]">
|
||||
Rating: {rating} / 10
|
||||
</p>
|
||||
|
||||
<div className="border-[1.5px] border-[#226DCE]/30 rounded-[25px] gap-8 py-7 px-5 space-y-8">
|
||||
<div className="flex gap-5 items-center">
|
||||
<HelpCircle size={40} color="#113768" />
|
||||
<div className="space-y-2">
|
||||
<p className="font-bold text-4xl text-[#113768]">
|
||||
{metadata.metadata.quantity}
|
||||
</p>
|
||||
<p className="font-normal text-lg">
|
||||
{metadata.metadata.type}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-5 items-center">
|
||||
<Clock size={40} color="#113768" />
|
||||
<div className="space-y-2">
|
||||
<p className="font-bold text-4xl text-[#113768]">
|
||||
{metadata.metadata.duration} mins
|
||||
</p>
|
||||
<p className="font-normal text-lg">Time Taken</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-5 items-center">
|
||||
<XCircle size={40} color="#113768" />
|
||||
<div className="space-y-2">
|
||||
<p className="font-bold text-4xl text-[#113768]">
|
||||
{metadata.metadata.marking}
|
||||
</p>
|
||||
<p className="font-normal text-lg">
|
||||
From each wrong answer
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-[1.5px] border-[#226DCE]/30 rounded-[25px] gap-4 py-7 px-5 space-y-4">
|
||||
<h2 className="text-xl font-bold">Ready yourself!</h2>
|
||||
|
||||
<div className="flex pr-4">
|
||||
<span className="mx-4">•</span>
|
||||
<p className="font-normal text-lg">
|
||||
You must complete this test in one session - make sure your
|
||||
internet connection is reliable.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex pr-4">
|
||||
<span className="mx-4">•</span>
|
||||
<p className="font-normal text-lg">
|
||||
There is negative marking for the wrong answer.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex pr-4">
|
||||
<span className="mx-4">•</span>
|
||||
<p className="font-normal text-lg">
|
||||
The more you answer correctly, the better chance you have of
|
||||
winning a badge.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex pr-4">
|
||||
<span className="mx-4">•</span>
|
||||
<p className="font-normal text-lg">
|
||||
You can retake this test however many times you want. But,
|
||||
you will earn points only once.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-60 flex flex-col items-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mb-4"></div>
|
||||
<p className="text-xl font-medium text-center">Loading...</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="w-full bg-[#113768] h-[78px] flex justify-center items-center border border-transparent text-white font-bold text-2xl hover:bg-[#0d2a52] transition-colors"
|
||||
onClick={() => {
|
||||
if (metadata) {
|
||||
router.push(`/exam/${id}?time=${metadata.metadata.duration}`);
|
||||
} else {
|
||||
router.push("/unit");
|
||||
}
|
||||
}}
|
||||
>
|
||||
{metadata ? "Start Test" : "Go Back"}
|
||||
</button>
|
||||
|
||||
{/* <CustomBackHandler fallbackRoute="paper" /> */}
|
||||
</div>
|
||||
</BackgroundWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,277 @@
|
||||
import React from "react";
|
||||
"use client";
|
||||
|
||||
const page = () => {
|
||||
return <div>page</div>;
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { ArrowLeft, LocateIcon } from "lucide-react";
|
||||
import { useEffect } from "react";
|
||||
|
||||
// Types
|
||||
interface Question {
|
||||
question: string;
|
||||
options: Record<string, string>;
|
||||
correctAnswer: string;
|
||||
userAnswer: string | null;
|
||||
isCorrect: boolean;
|
||||
solution: string;
|
||||
}
|
||||
|
||||
interface ResultSheet {
|
||||
score: number;
|
||||
questions: Question[];
|
||||
}
|
||||
|
||||
const ResultsPage = () => {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const answersParam = searchParams.get("answers");
|
||||
|
||||
if (!answersParam) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-4">
|
||||
No results found
|
||||
</h2>
|
||||
<button
|
||||
onClick={() => router.push("/unit")}
|
||||
className="bg-blue-900 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-800 transition-colors"
|
||||
>
|
||||
Go Back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const resultSheet: ResultSheet = JSON.parse(decodeURIComponent(answersParam));
|
||||
|
||||
const getScoreMessage = (score: number) => {
|
||||
if (score < 30) return "Try harder!";
|
||||
if (score < 70) return "Getting Better";
|
||||
return "You did great!";
|
||||
};
|
||||
|
||||
const getStatusColor = (question: Question) => {
|
||||
if (question.userAnswer === null) return "bg-yellow-500";
|
||||
return question.isCorrect ? "bg-green-500" : "bg-red-500";
|
||||
};
|
||||
|
||||
const getStatusText = (question: Question) => {
|
||||
if (question.userAnswer === null) return "Skipped";
|
||||
return question.isCorrect ? "Correct" : "Incorrect";
|
||||
};
|
||||
|
||||
const getOptionClassName = (key: string, question: Question): string => {
|
||||
const isCorrectAnswer = key === question.correctAnswer;
|
||||
const isUserAnswer = key === question.userAnswer;
|
||||
const isCorrectAndUserAnswer = isCorrectAnswer && isUserAnswer;
|
||||
const isUserAnswerWrong = isUserAnswer && !isCorrectAnswer;
|
||||
|
||||
if (isCorrectAndUserAnswer) {
|
||||
return "bg-blue-900 text-white border-blue-900";
|
||||
} else if (isCorrectAnswer) {
|
||||
return "bg-green-500 text-white border-green-500";
|
||||
} else if (isUserAnswerWrong) {
|
||||
return "bg-red-500 text-white border-red-500";
|
||||
}
|
||||
return "border-gray-300";
|
||||
};
|
||||
|
||||
// Handle browser back button
|
||||
useEffect(() => {
|
||||
const handlePopState = () => {
|
||||
router.push("/unit");
|
||||
};
|
||||
|
||||
window.addEventListener("popstate", handlePopState);
|
||||
return () => window.removeEventListener("popstate", handlePopState);
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="container mx-auto px-4 py-8 max-w-4xl">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<button
|
||||
onClick={() => router.push("/unit")}
|
||||
className="flex items-center text-gray-700 hover:text-gray-900 transition-colors mb-6"
|
||||
>
|
||||
<ArrowLeft size={30} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="space-y-8">
|
||||
{/* Score Message */}
|
||||
<h1 className="text-3xl font-bold text-blue-900 text-center mb-6">
|
||||
{getScoreMessage(resultSheet.score)}
|
||||
</h1>
|
||||
|
||||
{/* Score Card */}
|
||||
<div className="score-card">
|
||||
<p className="text-2xl font-medium mb-4">Score:</p>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<div className="w-15 h-15 bg-blue-900 rounded-full flex items-center justify-center">
|
||||
<div className="w-6 h-6 bg-white rounded-full"></div>
|
||||
</div>
|
||||
<span className="text-6xl font-bold text-blue-900">
|
||||
{resultSheet.score}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Solutions Section */}
|
||||
<div className="mt-10">
|
||||
<h2 className="text-3xl font-bold text-blue-900 mb-6">Solutions</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
{resultSheet.questions.map((question, idx) => (
|
||||
<div key={idx} className="question-card">
|
||||
{/* Question Header */}
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<h3 className="text-xl font-medium flex-1">
|
||||
{idx + 1}. {question.question}
|
||||
</h3>
|
||||
<span
|
||||
className={`status-badge ${getStatusColor(question)}`}
|
||||
>
|
||||
{getStatusText(question)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Options */}
|
||||
<div className="space-y-3 mb-6">
|
||||
{Object.entries(question.options).map(([key, option]) => (
|
||||
<div key={key} className="flex items-center gap-4">
|
||||
<span
|
||||
className={`option-letter ${getOptionClassName(
|
||||
key,
|
||||
question
|
||||
)}`}
|
||||
>
|
||||
{key.toUpperCase()}
|
||||
</span>
|
||||
<span className="text-lg">{option}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Solution Divider */}
|
||||
<div className="solution-divider"></div>
|
||||
|
||||
{/* Solution */}
|
||||
<div>
|
||||
<h4 className="text-xl font-semibold text-gray-500 mb-3">
|
||||
Solution:
|
||||
</h4>
|
||||
<p className="text-lg leading-relaxed text-gray-800">
|
||||
{question.solution}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Button */}
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 p-4">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<button
|
||||
onClick={() => router.push("/unit")}
|
||||
className="w-full bg-blue-900 text-white py-4 px-6 rounded-lg font-bold text-xl hover:bg-blue-800 transition-colors"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Spacer for fixed button */}
|
||||
<div className="h-24"></div>
|
||||
</div>
|
||||
|
||||
<style jsx>{`
|
||||
.score-card {
|
||||
height: 170px;
|
||||
width: 100%;
|
||||
border: 2px solid #c1dcff;
|
||||
border-radius: 25px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.question-card {
|
||||
border: 2px solid #abd0ff;
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
background: white;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 6px 16px;
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.option-letter {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
border: 1px solid;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.solution-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border-top: 1px dashed #000;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.score-card {
|
||||
height: 150px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.question-card {
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
font-size: 12px;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
|
||||
.option-letter {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default page;
|
||||
export default ResultsPage;
|
||||
|
||||
@ -5,15 +5,17 @@ import { ChevronLeft, Layers } from "lucide-react";
|
||||
import { useTimer } from "@/context/TimerContext";
|
||||
import styles from "@/css/Header.module.css";
|
||||
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000/api";
|
||||
const API_URL = "https://examjam-api.pptx704.com";
|
||||
|
||||
// You'll need to implement getToken for Next.js - could use cookies, localStorage, etc.
|
||||
const getToken = async () => {
|
||||
// Replace with your token retrieval logic
|
||||
if (typeof window !== "undefined") {
|
||||
return localStorage.getItem("token") || sessionStorage.getItem("token");
|
||||
if (typeof window === "undefined") {
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
|
||||
// Extract authToken from cookies
|
||||
const match = document.cookie.match(/(?:^|;\s*)authToken=([^;]*)/);
|
||||
return match ? decodeURIComponent(match[1]) : null;
|
||||
};
|
||||
|
||||
const Header = ({
|
||||
|
||||
10
lib/auth.ts
10
lib/auth.ts
@ -88,3 +88,13 @@ export const getTokenFromCookie = () => {
|
||||
export const clearAuthToken = () => {
|
||||
setCookie("authToken", null);
|
||||
};
|
||||
|
||||
export const getToken = async () => {
|
||||
if (typeof window === "undefined") {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Extract authToken from cookies
|
||||
const match = document.cookie.match(/(?:^|;\s*)authToken=([^;]*)/);
|
||||
return match ? decodeURIComponent(match[1]) : null;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user