Updated the Level Exam to work based on Parts

src/components/Exercises/InteractiveSpeaking.tsx

@@ -21,7 +21,6 @@ export default function InteractiveSpeaking({
 	type,
 	prompts,
 	userSolutions,
-	updateIndex,
 	onNext,
 	onBack,
 }: InteractiveSpeakingExercise & CommonProps) {
@@ -111,10 +110,6 @@ export default function InteractiveSpeaking({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [userSolutions, mediaBlob, answers]);
 
-	useEffect(() => {
-		if (updateIndex) updateIndex(questionIndex);
-	}, [questionIndex, updateIndex]);
-
 	useEffect(() => {
 		if (hasExamEnded) {
 			const answer = {

src/components/Exercises/MultipleChoice.tsx

@@ -55,16 +55,7 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({
-	id,
-	prompt,
-	type,
-	questions,
-	userSolutions,
-	updateIndex,
-	onNext,
-	onBack,
-}: MultipleChoiceExercise & CommonProps) {
+export default function MultipleChoice({id, prompt, type, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
 	const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);
 
 	const {questionIndex, setQuestionIndex} = useExamStore((state) => state);
@@ -83,10 +74,6 @@ export default function MultipleChoice({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [hasExamEnded]);
 
-	useEffect(() => {
-		if (updateIndex) updateIndex(questionIndex);
-	}, [questionIndex, updateIndex]);
-
 	const onSelectOption = (option: string) => {
 		const question = questions[questionIndex];
 		setAnswers((prev) => [...prev.filter((x) => x.question !== question.id), {option, question: question.id}]);

src/components/Exercises/index.tsx

@@ -23,7 +23,6 @@ const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentenc
 
 export interface CommonProps {
 	examID?: string;
-	updateIndex?: (internalIndex: number) => void;
 	onNext: (userSolutions: UserSolution) => void;
 	onBack: (userSolutions: UserSolution) => void;
 }
@@ -33,7 +32,6 @@ export const renderExercise = (
 	examID: string,
 	onNext: (userSolutions: UserSolution) => void,
 	onBack: (userSolutions: UserSolution) => void,
-	updateIndex?: (internalIndex: number) => void,
 ) => {
 	switch (exercise.type) {
 		case "fillBlanks":
@@ -43,16 +41,7 @@ export const renderExercise = (
 		case "matchSentences":
 			return <MatchSentences key={exercise.id} {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} examID={examID} />;
 		case "multipleChoice":
-			return (
-				<MultipleChoice
-					key={exercise.id}
-					{...(exercise as MultipleChoiceExercise)}
-					updateIndex={updateIndex}
-					onNext={onNext}
-					onBack={onBack}
-					examID={examID}
-				/>
-			);
+			return <MultipleChoice key={exercise.id} {...(exercise as MultipleChoiceExercise)} onNext={onNext} onBack={onBack} examID={examID} />;
 		case "writeBlanks":
 			return <WriteBlanks key={exercise.id} {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} examID={examID} />;
 		case "writing":
@@ -65,7 +54,6 @@ export const renderExercise = (
 					key={exercise.id}
 					{...(exercise as InteractiveSpeakingExercise)}
 					examID={examID}
-					updateIndex={updateIndex}
 					onNext={onNext}
 					onBack={onBack}
 				/>

src/components/Solutions/MultipleChoice.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @next/next/no-img-element */
 import {MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
+import useExamStore from "@/stores/examStore";
 import clsx from "clsx";
 import {useEffect, useState} from "react";
 import {CommonProps} from ".";
@@ -61,17 +62,8 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({
-	id,
-	type,
-	prompt,
-	questions,
-	userSolutions,
-	updateIndex,
-	onNext,
-	onBack,
-}: MultipleChoiceExercise & CommonProps) {
-	const [questionIndex, setQuestionIndex] = useState(0);
+export default function MultipleChoice({id, type, prompt, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
+	const {questionIndex, setQuestionIndex} = useExamStore((state) => state);
 
 	const calculateScore = () => {
 		const total = questions.length;
@@ -83,15 +75,11 @@ export default function MultipleChoice({
 		return {total, correct, missing};
 	};
 
-	useEffect(() => {
-		if (updateIndex) updateIndex(questionIndex);
-	}, [questionIndex, updateIndex]);
-
 	const next = () => {
 		if (questionIndex === questions.length - 1) {
 			onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type});
 		} else {
-			setQuestionIndex((prev) => prev + 1);
+			setQuestionIndex(questionIndex + 1);
 		}
 	};
 
@@ -99,7 +87,7 @@ export default function MultipleChoice({
 		if (questionIndex === 0) {
 			onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type});
 		} else {
-			setQuestionIndex((prev) => prev - 1);
+			setQuestionIndex(questionIndex - 1);
 		}
 	};
 

src/components/Solutions/index.tsx

@@ -22,7 +22,6 @@ import Writing from "./Writing";
 const MatchSentences = dynamic(() => import("@/components/Solutions/MatchSentences"), {ssr: false});
 
 export interface CommonProps {
-	updateIndex?: (internalIndex: number) => void;
 	onNext: (userSolutions: UserSolution) => void;
 	onBack: (userSolutions: UserSolution) => void;
 }
@@ -36,15 +35,7 @@ export const renderSolution = (exercise: Exercise, onNext: () => void, onBack: (
 		case "matchSentences":
 			return <MatchSentences key={exercise.id} {...(exercise as MatchSentencesExercise)} onNext={onNext} onBack={onBack} />;
 		case "multipleChoice":
-			return (
-				<MultipleChoice
-					key={exercise.id}
-					{...(exercise as MultipleChoiceExercise)}
-					updateIndex={updateIndex}
-					onNext={onNext}
-					onBack={onBack}
-				/>
-			);
+			return <MultipleChoice key={exercise.id} {...(exercise as MultipleChoiceExercise)} onNext={onNext} onBack={onBack} />;
 		case "writeBlanks":
 			return <WriteBlanks key={exercise.id} {...(exercise as WriteBlanksExercise)} onNext={onNext} onBack={onBack} />;
 		case "writing":