Made it so when the timer ends, the module ends

src/components/Exercises/MatchSentences.tsx

@@ -3,16 +3,19 @@ import {MatchSentencesExercise} from "@/interfaces/exam";
 import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
-import {Fragment, useState} from "react";
+import {Fragment, useEffect, useState} from "react";
 import LineTo from "react-lineto";
 import {CommonProps} from ".";
 import Button from "../Low/Button";
 import Xarrow from "react-xarrows";
+import useExamStore from "@/stores/examStore";
 
 export default function MatchSentences({id, options, type, prompt, sentences, userSolutions, onNext, onBack}: MatchSentencesExercise & CommonProps) {
 	const [selectedQuestion, setSelectedQuestion] = useState<string>();
 	const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);
 
+	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
+
 	const calculateScore = () => {
 		const total = sentences.length;
 		const correct = answers.filter((x) => sentences.find((y) => y.id === x.question)?.solution === x.option || false).length;
@@ -27,9 +30,11 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 		setSelectedQuestion(undefined);
 	};
 
-	const getSentenceColor = (id: string) => {
-		return sentences.find((x) => x.id === id)?.color || "";
-	};
+	useEffect(() => {
+		console.log({hasExamEnded});
+		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [hasExamEnded]);
 
 	return (
 		<>
@@ -44,7 +49,7 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 				</span>
 				<div className="flex gap-8 w-full items-center justify-between bg-mti-gray-smoke rounded-xl px-24 py-6">
 					<div className="flex flex-col gap-4">
-						{sentences.map(({sentence, id, color}) => (
+						{sentences.map(({sentence, id}) => (
 							<div key={`question_${id}`} className="flex items-center justify-end gap-2 cursor-pointer">
 								<span>{sentence} </span>
 								<button