Fixed some more issues with the Speaking

src/components/Exercises/InteractiveSpeaking.tsx

@@ -60,13 +60,16 @@ export default function InteractiveSpeaking({
 		setIsLoading(true);
 
 		const answer = await saveAnswer(questionIndex);
+		console.log(questionIndex + 1 < prompts.length, questionIndex, prompts.length);
 		if (questionIndex + 1 < prompts.length) {
 			setQuestionIndex(questionIndex + 1);
 			setIsLoading(false);
 
 			return;
 		}
+
 		setIsLoading(false);
+		setQuestionIndex(0);
 
 		onNext({
 			exercise: id,

src/components/Exercises/Speaking.tsx

@@ -95,7 +95,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
 
 	return (
 		<div className="flex flex-col h-full w-full gap-9">
-			<Modal className="!w-96 aspect-square" isOpen={isPromptsModalOpen} onClose={() => setIsPromptsModalOpen(false)}>
+			<Modal title="Prompts" className="!w-96 aspect-square" isOpen={isPromptsModalOpen} onClose={() => setIsPromptsModalOpen(false)}>
 				<div className="flex flex-col items-center justify-center gap-4 w-full h-full">
 					<div className="flex flex-col gap-1 ml-4">
 						{prompts.map((x, index) => (
@@ -126,7 +126,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
 						</span>
 					)}
 				</div>
-				<div className="flex gap-6 items-center">
+				<div className="flex flex-col gap-6 items-center">
 					{video_url && (
 						<div className="flex flex-col gap-4 w-full items-center">
 							<video key={id} autoPlay controls className="max-w-3xl rounded-xl">
@@ -134,11 +134,7 @@ export default function Speaking({id, title, text, video_url, type, prompts, suf
 							</video>
 						</div>
 					)}
-					{prompts && prompts.length > 0 && (
+					{prompts && prompts.length > 0 && <Button onClick={() => setIsPromptsModalOpen(true)}>View Prompts</Button>}
-						<div className="w-full aspect-square bg-white shadow rounded-xl flex items-center justify-center">
-							<Button onClick={() => setIsPromptsModalOpen(true)}>View Prompts</Button>
-						</div>
-					)}
 				</div>
 			</div>
 

src/exams/Speaking.tsx

@@ -20,6 +20,8 @@ interface Props {
 }
 
 export default function Speaking({exam, showSolutions = false, onFinish}: Props) {
+	const [speakingPromptsDone, setSpeakingPromptsDone] = useState<{id: string; amount: number}[]>([]);
+
 	const {userSolutions, setUserSolutions} = useExamStore((state) => state);
 	const {questionIndex, setQuestionIndex} = useExamStore((state) => state);
 	const {hasExamEnded, setHasExamEnded} = useExamStore((state) => state);
@@ -33,6 +35,12 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 			setUserSolutions([...userSolutions.filter((x) => x.exercise !== solution.exercise), {...solution, module: "speaking", exam: exam.id}]);
 		}
 
+		if (questionIndex > 0) {
+			const exercise = getExercise();
+			setSpeakingPromptsDone((prev) => [...prev.filter((x) => x.id !== exercise.id), {id: exercise.id, amount: questionIndex}]);
+		}
+		setQuestionIndex(0);
+
 		if (exerciseIndex + 1 < exam.exercises.length) {
 			setExerciseIndex(exerciseIndex + 1);
 			return;
@@ -75,7 +83,7 @@ export default function Speaking({exam, showSolutions = false, onFinish}: Props)
 				<ModuleTitle
 					label={convertCamelCaseToReadable(exam.exercises[exerciseIndex].type)}
 					minTimer={exam.minTimer}
-					exerciseIndex={exerciseIndex + 1 + questionIndex}
+					exerciseIndex={exerciseIndex + 1 + questionIndex + speakingPromptsDone.reduce((acc, curr) => acc + curr.amount, 0)}
 					module="speaking"
 					totalExercises={countExercises(exam.exercises)}
 					disableTimer={showSolutions}