Updated the Speaking to also work the with exam session persistence

src/components/Exercises/InteractiveSpeaking.tsx

@@ -24,14 +24,15 @@ export default function InteractiveSpeaking({
 	const [recordingDuration, setRecordingDuration] = useState(0);
 	const [isRecording, setIsRecording] = useState(false);
 	const [mediaBlob, setMediaBlob] = useState<string>();
-	const [promptIndex, setPromptIndex] = useState(0);
 	const [answers, setAnswers] = useState<{prompt: string; blob: string}[]>([]);
 
+	const {questionIndex, setQuestionIndex} = useExamStore((state) => state);
+
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
 
 	useEffect(() => {
-		if (updateIndex) updateIndex(promptIndex);
-	}, [promptIndex, updateIndex]);
+		if (updateIndex) updateIndex(questionIndex);
+	}, [questionIndex, updateIndex]);
 
 	useEffect(() => {
 		if (hasExamEnded) {
@@ -59,14 +60,14 @@ export default function InteractiveSpeaking({
 	}, [isRecording]);
 
 	useEffect(() => {
-		if (promptIndex === answers.length - 1) {
-			setMediaBlob(answers[promptIndex].blob);
+		if (questionIndex === answers.length - 1) {
+			setMediaBlob(answers[questionIndex].blob);
 		}
-	}, [answers, promptIndex]);
+	}, [answers, questionIndex]);
 
 	const saveAnswer = () => {
 		const answer = {
-			prompt: prompts[promptIndex].text,
+			prompt: prompts[questionIndex].text,
 			blob: mediaBlob!,
 		};
 
@@ -82,8 +83,8 @@ export default function InteractiveSpeaking({
 				</div>
 				{prompts && prompts.length > 0 && (
 					<div className="flex flex-col gap-4 w-full items-center">
-						<video key={promptIndex} autoPlay controls className="max-w-3xl rounded-xl">
-							<source src={prompts[promptIndex].video_url} />
+						<video key={questionIndex} autoPlay controls className="max-w-3xl rounded-xl">
+							<source src={prompts[questionIndex].video_url} />
 						</video>
 					</div>
 				)}
@@ -91,7 +92,7 @@ export default function InteractiveSpeaking({
 
 			<ReactMediaRecorder
 				audio
-				key={promptIndex}
+				key={questionIndex}
 				onStop={(blob) => setMediaBlob(blob)}
 				render={({status, startRecording, stopRecording, pauseRecording, resumeRecording, clearBlobUrl, mediaBlobUrl}) => (
 					<div className="w-full p-4 px-8 bg-transparent border-2 border-mti-gray-platinum rounded-2xl flex-col gap-8 items-center">
@@ -227,8 +228,8 @@ export default function InteractiveSpeaking({
 					disabled={!mediaBlob}
 					onClick={() => {
 						saveAnswer();
-						if (promptIndex + 1 < prompts.length) {
-							setPromptIndex((prev) => prev + 1);
+						if (questionIndex + 1 < prompts.length) {
+							setQuestionIndex(questionIndex + 1);
 							return;
 						}
 						onNext({
@@ -236,7 +237,7 @@ export default function InteractiveSpeaking({
 							solutions: [
 								...answers,
 								{
-									prompt: prompts[promptIndex].text,
+									prompt: prompts[questionIndex].text,
 									blob: mediaBlob!,
 								},
 							],
@@ -245,7 +246,7 @@ export default function InteractiveSpeaking({
 						});
 					}}
 					className="max-w-[200px] self-end w-full">
-					{promptIndex + 1 < prompts.length ? "Next Prompt" : "Submit"}
+					{questionIndex + 1 < prompts.length ? "Next Prompt" : "Submit"}
 				</Button>
 			</div>
 		</div>