298 lines
11 KiB
TypeScript
298 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState, useTransition } from "react";
|
|
import Link from "next/link";
|
|
import { useParams } from "next/navigation";
|
|
import ProgressBar from "@/components/ProgressBar";
|
|
import { getPracticeBySlug, mockPracticeModules } from "@/lib/data/mockPractice";
|
|
import { getPracticeAttempts, submitPracticeAttempt } from "@/app/(protected)/practice/[slug]/actions";
|
|
|
|
type AttemptRecord = {
|
|
id: string;
|
|
scorePercent: number;
|
|
correctCount: number;
|
|
totalQuestions: number;
|
|
completedAt: Date;
|
|
};
|
|
|
|
export default function PracticeExercisePage() {
|
|
const params = useParams<{ slug: string }>();
|
|
const practiceModule = getPracticeBySlug(params.slug);
|
|
|
|
const [started, setStarted] = useState(false);
|
|
const [index, setIndex] = useState(0);
|
|
const [score, setScore] = useState(0);
|
|
const [finished, setFinished] = useState(false);
|
|
const [selected, setSelected] = useState<number | null>(null);
|
|
const [selectedAnswers, setSelectedAnswers] = useState<number[]>([]);
|
|
const [attempts, setAttempts] = useState<AttemptRecord[]>([]);
|
|
const [isSaving, startTransition] = useTransition();
|
|
|
|
const loadAttempts = () => {
|
|
if (!practiceModule) return;
|
|
startTransition(async () => {
|
|
const result = await getPracticeAttempts(practiceModule.slug);
|
|
setAttempts(result as AttemptRecord[]);
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadAttempts();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [practiceModule?.slug]);
|
|
|
|
if (!practiceModule) {
|
|
return (
|
|
<div className="acve-panel p-6">
|
|
<h1 className="text-2xl font-bold text-slate-900">Practice module not found</h1>
|
|
<p className="mt-2 text-slate-600">The requested practice slug does not exist in mock data.</p>
|
|
<Link className="acve-button-primary mt-4 inline-flex px-4 py-2 text-sm font-semibold" href="/practice">
|
|
Back to practice
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!practiceModule.isInteractive || !practiceModule.questions?.length) {
|
|
return (
|
|
<div className="acve-panel p-6">
|
|
<h1 className="text-2xl font-bold text-slate-900">{practiceModule.title}</h1>
|
|
<p className="mt-2 text-slate-600">This practice module is scaffolded and will be enabled in a later iteration.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const total = practiceModule.questions.length;
|
|
const current = practiceModule.questions[index];
|
|
const progress = Math.round((index / total) * 100);
|
|
|
|
const pick = (choiceIndex: number) => {
|
|
if (selected !== null) return;
|
|
setSelected(choiceIndex);
|
|
if (choiceIndex === current.answerIndex) {
|
|
setScore((value) => value + 1);
|
|
}
|
|
};
|
|
|
|
const next = () => {
|
|
if (selected === null) return;
|
|
setSelectedAnswers((prev) => {
|
|
const nextAnswers = [...prev];
|
|
nextAnswers[index] = selected;
|
|
return nextAnswers;
|
|
});
|
|
|
|
if (index + 1 >= total) {
|
|
const finalAnswers = [...selectedAnswers];
|
|
finalAnswers[index] = selected;
|
|
startTransition(async () => {
|
|
await submitPracticeAttempt({
|
|
slug: practiceModule.slug,
|
|
selectedAnswers: finalAnswers,
|
|
});
|
|
loadAttempts();
|
|
});
|
|
setFinished(true);
|
|
return;
|
|
}
|
|
setIndex((value) => value + 1);
|
|
setSelected(null);
|
|
};
|
|
|
|
const restart = () => {
|
|
setStarted(true);
|
|
setIndex(0);
|
|
setScore(0);
|
|
setSelected(null);
|
|
setSelectedAnswers([]);
|
|
setFinished(false);
|
|
};
|
|
|
|
const start = () => {
|
|
setStarted(true);
|
|
setFinished(false);
|
|
setIndex(0);
|
|
setScore(0);
|
|
setSelected(null);
|
|
setSelectedAnswers([]);
|
|
};
|
|
|
|
if (finished) {
|
|
return (
|
|
<div className="acve-page">
|
|
<section className="acve-panel p-6 text-center md:p-8">
|
|
<p className="acve-pill mx-auto mb-3 w-fit">Practice Results</p>
|
|
<h1 className="text-3xl font-semibold text-[#222a38] md:text-4xl">Exercise complete</h1>
|
|
<p className="mt-2 text-xl text-slate-700 md:text-2xl">
|
|
Final score: {score}/{total}
|
|
</p>
|
|
<div className="mt-5 flex flex-wrap items-center justify-center gap-2">
|
|
<button className="acve-button-primary px-5 py-2 text-sm font-semibold hover:brightness-105" onClick={restart} type="button">
|
|
Retake quiz
|
|
</button>
|
|
<Link className="rounded-md border border-slate-300 px-5 py-2 text-sm font-semibold text-slate-700" href="/practice">
|
|
Back to modules
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="acve-panel p-4">
|
|
<h2 className="text-base font-semibold text-slate-800">Attempt History</h2>
|
|
{attempts.length === 0 ? (
|
|
<p className="mt-2 text-sm text-slate-600">No attempts recorded yet.</p>
|
|
) : (
|
|
<ul className="mt-2 space-y-2">
|
|
{attempts.map((attempt) => (
|
|
<li key={attempt.id} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
|
|
Score {attempt.correctCount}/{attempt.totalQuestions} ({attempt.scorePercent}%) on{" "}
|
|
{new Date(attempt.completedAt).toLocaleString()}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!started) {
|
|
return (
|
|
<div className="acve-page">
|
|
<section className="acve-panel acve-section-base">
|
|
<p className="acve-pill mb-3 w-fit">Practice Session</p>
|
|
<h1 className="text-3xl font-semibold leading-tight text-[#222a38] md:text-4xl">{practiceModule.title}</h1>
|
|
<p className="mt-2 max-w-3xl text-base leading-relaxed text-slate-600">{practiceModule.description}</p>
|
|
<div className="mt-4 grid gap-3 sm:grid-cols-3">
|
|
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Questions</p>
|
|
<p className="mt-1 text-2xl font-semibold text-slate-900">{total}</p>
|
|
</div>
|
|
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Estimated time</p>
|
|
<p className="mt-1 text-2xl font-semibold text-slate-900">{Math.max(3, total * 2)} min</p>
|
|
</div>
|
|
<div className="rounded-xl border border-slate-200 bg-white p-3">
|
|
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">Difficulty</p>
|
|
<p className="mt-1 text-2xl font-semibold text-slate-900">{practiceModule.difficulty ?? "Intermediate"}</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-5 flex flex-wrap items-center gap-2">
|
|
<button className="acve-button-primary px-5 py-2 text-sm font-semibold hover:brightness-105" onClick={start} type="button">
|
|
Start practice
|
|
</button>
|
|
<Link className="rounded-md border border-slate-300 px-5 py-2 text-sm font-semibold text-slate-700" href="/practice">
|
|
Back to modules
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="acve-panel p-4">
|
|
<h2 className="text-base font-semibold text-slate-800">Attempt History</h2>
|
|
{attempts.length === 0 ? (
|
|
<p className="mt-2 text-sm text-slate-600">No attempts recorded yet for this module.</p>
|
|
) : (
|
|
<ul className="mt-2 space-y-2">
|
|
{attempts.map((attempt) => (
|
|
<li key={attempt.id} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
|
|
Score {attempt.correctCount}/{attempt.totalQuestions} ({attempt.scorePercent}%) on{" "}
|
|
{new Date(attempt.completedAt).toLocaleString()}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="acve-page">
|
|
<section className="acve-panel p-4">
|
|
<div className="mb-3 flex flex-wrap items-center justify-between gap-3">
|
|
<p className="text-base font-semibold text-slate-700">
|
|
{practiceModule.title} | Question {index + 1} / {total}
|
|
</p>
|
|
<p className="text-base font-semibold text-[#222a38]">Score: {score}/{total}</p>
|
|
</div>
|
|
<ProgressBar value={progress} />
|
|
</section>
|
|
|
|
<section className="grid gap-4 md:grid-cols-3">
|
|
{mockPracticeModules.map((module, moduleIndex) => {
|
|
const isActive = module.slug === practiceModule.slug;
|
|
return (
|
|
<div
|
|
key={module.slug}
|
|
className={`rounded-2xl border p-6 ${
|
|
isActive ? "border-brand bg-white shadow-sm" : "border-slate-300 bg-white"
|
|
}`}
|
|
>
|
|
<div className="mb-2 text-3xl text-brand">{moduleIndex === 0 ? "A/" : moduleIndex === 1 ? "[]" : "O"}</div>
|
|
<h2 className="text-xl text-[#222a38]">{module.title}</h2>
|
|
<p className="mt-2 text-sm text-slate-600">{module.description}</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</section>
|
|
|
|
<section className="acve-panel p-4">
|
|
<h2 className="text-lg font-semibold text-slate-800">Attempt History</h2>
|
|
{attempts.length === 0 ? (
|
|
<p className="mt-2 text-sm text-slate-600">No attempts recorded yet.</p>
|
|
) : (
|
|
<ul className="mt-2 space-y-2">
|
|
{attempts.map((attempt) => (
|
|
<li key={attempt.id} className="rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-700">
|
|
Score {attempt.correctCount}/{attempt.totalQuestions} ({attempt.scorePercent}%) on{" "}
|
|
{new Date(attempt.completedAt).toLocaleString()}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</section>
|
|
|
|
<section className="acve-panel p-6">
|
|
<div className="rounded-2xl bg-[#f6f6f8] px-6 py-8 text-center">
|
|
<p className="text-sm font-semibold uppercase tracking-wide text-slate-500">Prompt</p>
|
|
<h2 className="mt-2 text-3xl font-semibold text-[#222a38] md:text-4xl">{current.prompt.replace("Spanish term: ", "")}</h2>
|
|
</div>
|
|
|
|
<div className="mt-6 grid gap-3">
|
|
{current.choices.map((choice, choiceIndex) => {
|
|
const isPicked = selected === choiceIndex;
|
|
const isCorrect = choiceIndex === current.answerIndex;
|
|
const stateClass =
|
|
selected === null
|
|
? "border-slate-300 hover:bg-slate-50"
|
|
: isCorrect
|
|
? "border-[#2f9d73] bg-[#edf9f4]"
|
|
: isPicked
|
|
? "border-[#bf3c5f] bg-[#fff1f4]"
|
|
: "border-slate-300";
|
|
|
|
return (
|
|
<button
|
|
key={choice}
|
|
className={`rounded-xl border px-4 py-3 text-left text-base text-slate-800 ${stateClass}`}
|
|
onClick={() => pick(choiceIndex)}
|
|
type="button"
|
|
>
|
|
{choice}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<button
|
|
className="acve-button-primary mt-6 px-6 py-2 text-sm font-semibold hover:brightness-105 disabled:opacity-50"
|
|
disabled={selected === null || isSaving}
|
|
onClick={next}
|
|
type="button"
|
|
>
|
|
{index + 1 === total ? "Finish" : "Next question"}
|
|
</button>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|