Implemented the Writing exercise's solution display
This commit is contained in:
Tiago Ribeiro
@@ -22,10 +22,11 @@ interface Props {
|
||||
user: User;
|
||||
modules: Module[];
|
||||
scores: Score[];
|
||||
isLoading: boolean;
|
||||
onViewResults: () => void;
|
||||
}
|
||||
|
||||
export default function Finish({user, scores, modules, onViewResults}: Props) {
|
||||
export default function Finish({user, scores, modules, isLoading, onViewResults}: Props) {
|
||||
const [selectedModule, setSelectedModule] = useState(modules[0]);
|
||||
const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!);
|
||||
|
||||
@@ -108,82 +109,94 @@ export default function Finish({user, scores, modules, onViewResults}: Props) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="w-full flex gap-9 mt-32 items-center justify-between">
|
||||
<span className="max-w-3xl">
|
||||
{levelText(calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus))}
|
||||
</span>
|
||||
<div className="flex gap-9 px-16">
|
||||
<div
|
||||
className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}
|
||||
style={{"--value": (selectedScore.correct / selectedScore.total) * 100, "--thickness": "12px", "--size": "13rem"} as any}>
|
||||
{isLoading && (
|
||||
<div className="w-fit h-fit absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 animate-pulse flex flex-col gap-12 items-center">
|
||||
<span className={clsx("loading loading-infinity w-32", moduleColors[selectedModule].progress)} />
|
||||
<span className={clsx("font-bold text-2xl", moduleColors[selectedModule].progress)}>Evaluating your answers...</span>
|
||||
</div>
|
||||
)}
|
||||
{!isLoading && (
|
||||
<div className="w-full flex gap-9 mt-32 items-center justify-between">
|
||||
<span className="max-w-3xl">
|
||||
{levelText(calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus))}
|
||||
</span>
|
||||
<div className="flex gap-9 px-16">
|
||||
<div
|
||||
className={clsx(
|
||||
"w-48 h-48 rounded-full flex flex-col items-center justify-center",
|
||||
moduleColors[selectedModule].inner,
|
||||
)}>
|
||||
<span className="text-xl">Level</span>
|
||||
<span className="text-3xl font-bold">
|
||||
{calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-5">
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3 h-3 bg-mti-blue-light rounded-full mt-1" />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-mti-blue-light">
|
||||
{(((selectedScore.total - selectedScore.missing) / selectedScore.total) * 100).toFixed(0)}%
|
||||
className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}
|
||||
style={
|
||||
{"--value": (selectedScore.correct / selectedScore.total) * 100, "--thickness": "12px", "--size": "13rem"} as any
|
||||
}>
|
||||
<div
|
||||
className={clsx(
|
||||
"w-48 h-48 rounded-full flex flex-col items-center justify-center",
|
||||
moduleColors[selectedModule].inner,
|
||||
)}>
|
||||
<span className="text-xl">Level</span>
|
||||
<span className="text-3xl font-bold">
|
||||
{calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus)}
|
||||
</span>
|
||||
<span className="text-lg">Completion</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3 h-3 bg-mti-green-light rounded-full mt-1" />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-mti-green-light">{selectedScore.total.toString().padStart(2, "0")}</span>
|
||||
<span className="text-lg">Correct</span>
|
||||
<div className="flex flex-col gap-5">
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3 h-3 bg-mti-blue-light rounded-full mt-1" />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-mti-blue-light">
|
||||
{(((selectedScore.total - selectedScore.missing) / selectedScore.total) * 100).toFixed(0)}%
|
||||
</span>
|
||||
<span className="text-lg">Completion</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3 h-3 bg-mti-orange-light rounded-full mt-1" />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-mti-orange-light">
|
||||
{(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")}
|
||||
</span>
|
||||
<span className="text-lg">Wrong</span>
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3 h-3 bg-mti-green-light rounded-full mt-1" />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-mti-green-light">{selectedScore.total.toString().padStart(2, "0")}</span>
|
||||
<span className="text-lg">Correct</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="w-3 h-3 bg-mti-orange-light rounded-full mt-1" />
|
||||
<div className="flex flex-col">
|
||||
<span className="text-mti-orange-light">
|
||||
{(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")}
|
||||
</span>
|
||||
<span className="text-lg">Wrong</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
|
||||
<div className="flex gap-8">
|
||||
<div className="w-fit flex flex-col items-center gap-1 cursor-pointer">
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="w-11 h-11 rounded-full bg-mti-green-light hover:bg-mti-green flex items-center justify-center transition duration-300 ease-in-out">
|
||||
<BsArrowCounterclockwise className="text-white w-7 h-7" />
|
||||
</button>
|
||||
<span>Play Again</span>
|
||||
{!isLoading && (
|
||||
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
|
||||
<div className="flex gap-8">
|
||||
<div className="w-fit flex flex-col items-center gap-1 cursor-pointer">
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="w-11 h-11 rounded-full bg-mti-green-light hover:bg-mti-green flex items-center justify-center transition duration-300 ease-in-out">
|
||||
<BsArrowCounterclockwise className="text-white w-7 h-7" />
|
||||
</button>
|
||||
<span>Play Again</span>
|
||||
</div>
|
||||
<div className="w-fit flex flex-col items-center gap-1 cursor-pointer">
|
||||
<button
|
||||
onClick={onViewResults}
|
||||
className="w-11 h-11 rounded-full bg-mti-green-light hover:bg-mti-green flex items-center justify-center transition duration-300 ease-in-out">
|
||||
<BsEyeFill className="text-white w-7 h-7" />
|
||||
</button>
|
||||
<span>Review Answers</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-fit flex flex-col items-center gap-1 cursor-pointer">
|
||||
<button
|
||||
onClick={onViewResults}
|
||||
className="w-11 h-11 rounded-full bg-mti-green-light hover:bg-mti-green flex items-center justify-center transition duration-300 ease-in-out">
|
||||
<BsEyeFill className="text-white w-7 h-7" />
|
||||
</button>
|
||||
<span>Review Answers</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link href="/" className="max-w-[200px] w-full self-end">
|
||||
<Button color="green" className="max-w-[200px] self-end w-full">
|
||||
Dashboard
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<Link href="/" className="max-w-[200px] w-full self-end">
|
||||
<Button color="green" className="max-w-[200px] self-end w-full">
|
||||
Dashboard
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user