Updated the demographic input to work more as expected

src/exams/Selection.tsx

@@ -4,7 +4,7 @@ import {Module} from "@/interfaces";
 import clsx from "clsx";
 import {User} from "@/interfaces/user";
 import ProgressBar from "@/components/Low/ProgressBar";
-import {BsBook, BsCheckCircle, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
+import {BsBook, BsCheck, BsCheckCircle, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
 import {totalExamsByModule} from "@/utils/stats";
 import useStats from "@/hooks/useStats";
 import Button from "@/components/Low/Button";
@@ -19,6 +19,7 @@ interface Props {
 
 export default function Selection({user, onStart, disableSelection = false}: Props) {
 	const [selectedModules, setSelectedModules] = useState<Module[]>([]);
+	const [avoidRepeatedExams, setAvoidRepeatedExams] = useState(true);
 	const {stats} = useStats(user?.id);
 
 	const toggleModule = (module: Module) => {
@@ -181,15 +182,31 @@ export default function Selection({user, onStart, disableSelection = false}: Pro
 						)}
 					</div>
 				</section>
-				<Button
-					onClick={() =>
-						onStart(!disableSelection ? selectedModules.sort(sortByModuleName) : ["reading", "listening", "writing", "speaking"])
-					}
-					color="purple"
-					className="px-12 w-full max-w-xs self-end"
-					disabled={selectedModules.length === 0 && !disableSelection}>
-					Start Exam
-				</Button>
+				<div className="flex w-full justify-between items-center">
+					<div
+						className="flex gap-3 items-center text-mti-gray-dim text-sm cursor-pointer"
+						onClick={() => setAvoidRepeatedExams((prev) => !prev)}>
+						<input type="checkbox" className="hidden" />
+						<div
+							className={clsx(
+								"w-6 h-6 rounded-sm flex items-center justify-center border border-mti-purple-light bg-white",
+								"transition duration-300 ease-in-out",
+								avoidRepeatedExams && "!bg-mti-purple-light ",
+							)}>
+							<BsCheck color="white" className="w-full h-full" />
+						</div>
+						<span>Avoid Repeated Questions</span>
+					</div>
+					<Button
+						onClick={() =>
+							onStart(!disableSelection ? selectedModules.sort(sortByModuleName) : ["reading", "listening", "writing", "speaking"])
+						}
+						color="purple"
+						className="px-12 w-full max-w-xs self-end"
+						disabled={selectedModules.length === 0 && !disableSelection}>
+						Start Exam
+					</Button>
+				</div>
 			</div>
 		</>
 	);