devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added the exercises page which will work as the current exam page, while the exam page will mandatorily be the full exam

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-06-29 00:18:39 +01:00
parent 139f527fdd
commit 3fac92b54d
4 changed files with 313 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/exams/Selection.tsx
View File

@@ -14,9 +14,10 @@ import {sortByModuleName} from "@/utils/moduleUtils";
interface Props {
user: User;
onStart: (modules: Module[]) => void;
disableSelection?: boolean;
}
export default function Selection({user, onStart}: Props) {
export default function Selection({user, onStart, disableSelection = false}: Props) {
const [selectedModules, setSelectedModules] = useState<Module[]>([]);
const {stats} = useStats(user?.id);
@@ -100,10 +101,10 @@ export default function Selection({user, onStart}: Props) {
</section>
<section className="w-full flex justify-between gap-8 mt-8">
<div
onClick={() => toggleModule("reading")}
onClick={!disableSelection ? () => toggleModule("reading") : undefined}
className={clsx(
"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12 cursor-pointer",
selectedModules.includes("reading") ? "border-mti-green-light" : "border-mti-gray-platinum",
selectedModules.includes("reading") || disableSelection ? "border-mti-green-light" : "border-mti-gray-platinum",
)}>
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-reading top-0 -translate-y-1/2">
<BsBook className="text-white w-7 h-7" />
@@ -112,14 +113,16 @@ export default function Selection({user, onStart}: Props) {
<p className="text-center text-xs">
Expand your vocabulary, improve your reading comprehension and improve your ability to interpret texts in English.
</p>
{!selectedModules.includes("reading") && <div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />}
{selectedModules.includes("reading") && <BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />}
{!selectedModules.includes("reading") && !disableSelection && (
<div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />
)}
{(selectedModules.includes("reading") || disableSelection) && <BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />}
</div>
<div
onClick={() => toggleModule("listening")}
onClick={!disableSelection ? () => toggleModule("listening") : undefined}
className={clsx(
"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12 cursor-pointer",
selectedModules.includes("listening") ? "border-mti-green-light" : "border-mti-gray-platinum",
selectedModules.includes("listening") || disableSelection ? "border-mti-green-light" : "border-mti-gray-platinum",
)}>
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-listening top-0 -translate-y-1/2">
<BsHeadphones className="text-white w-7 h-7" />
@@ -128,14 +131,18 @@ export default function Selection({user, onStart}: Props) {
<p className="text-center text-xs">
Improve your ability to follow conversations in English and your ability to understand different accents and intonations.
</p>
{!selectedModules.includes("listening") && <div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />}
{selectedModules.includes("listening") && <BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />}
{!selectedModules.includes("listening") && !disableSelection && (
<div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />
)}
{(selectedModules.includes("listening") || disableSelection) && (
<BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />
)}
</div>
<div
onClick={() => toggleModule("writing")}
onClick={!disableSelection ? () => toggleModule("writing") : undefined}
className={clsx(
"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12 cursor-pointer",
selectedModules.includes("writing") ? "border-mti-green-light" : "border-mti-gray-platinum",
selectedModules.includes("writing") || disableSelection ? "border-mti-green-light" : "border-mti-gray-platinum",
)}>
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-writing top-0 -translate-y-1/2">
<BsPen className="text-white w-7 h-7" />
@@ -144,14 +151,16 @@ export default function Selection({user, onStart}: Props) {
<p className="text-center text-xs">
Allow you to practice writing in a variety of formats, from simple paragraphs to complex essays.
</p>
{!selectedModules.includes("writing") && <div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />}
{selectedModules.includes("writing") && <BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />}
{!selectedModules.includes("writing") && !disableSelection && (
<div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />
)}
{(selectedModules.includes("writing") || disableSelection) && <BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />}
</div>
<div
onClick={() => toggleModule("speaking")}
onClick={!disableSelection ? () => toggleModule("speaking") : undefined}
className={clsx(
"relative w-fit max-w-xs flex flex-col items-center bg-mti-white-alt transition duration-300 ease-in-out border p-5 rounded-xl gap-2 pt-12 cursor-pointer",
selectedModules.includes("speaking") ? "border-mti-green-light" : "border-mti-gray-platinum",
selectedModules.includes("speaking") || disableSelection ? "border-mti-green-light" : "border-mti-gray-platinum",
)}>
<div className="absolute w-16 h-16 flex items-center justify-center rounded-full bg-ielts-speaking top-0 -translate-y-1/2">
<BsMegaphone className="text-white w-7 h-7" />
@@ -160,15 +169,21 @@ export default function Selection({user, onStart}: Props) {
<p className="text-center text-xs">
You&apos;ll have access to interactive dialogs, pronunciation exercises and speech recordings.
</p>
{!selectedModules.includes("speaking") && <div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />}
{selectedModules.includes("speaking") && <BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />}
{!selectedModules.includes("speaking") && !disableSelection && (
<div className="border border-mti-gray-platinum w-8 h-8 rounded-full mt-4" />
)}
{(selectedModules.includes("speaking") || disableSelection) && (
<BsCheckCircle className="mt-4 text-mti-green-light w-8 h-8" />
)}
</div>
</section>
<Button
onClick={() => onStart(selectedModules.sort(sortByModuleName))}
onClick={() =>
onStart(!disableSelection ? selectedModules.sort(sortByModuleName) : ["reading", "listening", "writing", "speaking"])
}
color="green"
className="px-12 w-full max-w-xs self-end"
disabled={selectedModules.length === 0}>
disabled={selectedModules.length === 0 && !disableSelection}>
Start Exam
</Button>
</div>