Merge remote-tracking branch 'origin/develop' into feature/training-content

src/components/DemographicInformationInput.tsx

@@ -21,14 +21,18 @@ interface Props {
 }
 
 export default function DemographicInformationInput({user, mutateUser}: Props) {
-	const [country, setCountry] = useState<string>();
-	const [phone, setPhone] = useState<string>();
+	const [country, setCountry] = useState(user.demographicInformation?.country);
+	const [phone, setPhone] = useState(user.demographicInformation?.phone);
 	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
 	const [gender, setGender] = useState<Gender>();
 	const [employment, setEmployment] = useState<EmploymentStatus>();
-	const [position, setPosition] = useState<string>();
 	const [timezone, setTimezone] = useState<string>(moment.tz.guess());
 	const [isLoading, setIsLoading] = useState(false);
+	const [position, setPosition] = useState(
+		user.type === "corporate" || user.type === "mastercorporate"
+			? user.demographicInformation?.position
+			: user.demographicInformation?.employment,
+	);
 
 	const [companyName, setCompanyName] = useState<string>();
 	const [commercialRegistration, setCommercialRegistration] = useState<string>();
@@ -85,7 +89,7 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 						<label className="font-normal text-base text-mti-gray-dim">Country *</label>
 						<CountrySelect value={country} onChange={setCountry} />
 					</div>
-					<Input type="tel" name="phone" label="Phone number" onChange={(e) => setPhone(e)} placeholder="Enter phone number" required />
+					<Input type="tel" name="phone" label="Phone number" onChange={(e) => setPhone(e)} value={phone} placeholder="Enter phone number" required />
 				</div>
 				{user.type === "student" && (
 					<Input

src/components/Exercises/FillBlanks/MCDropdown.tsx

@@ -0,0 +1,84 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { animated, useSpring } from '@react-spring/web';
+import clsx from 'clsx';
+
+interface MCDropdownProps {
+  id: string;
+  options: { [key: string]: string };
+  onSelect: (value: string) => void;
+  selectedValue?: string;
+  className?: string;
+  width: number;
+  isOpen: boolean;
+  onToggle: (id: string) => void;
+}
+
+const MCDropdown: React.FC<MCDropdownProps> = ({
+  id,
+  options,
+  onSelect,
+  selectedValue,
+  className = "relative",
+  width,
+  isOpen,
+  onToggle,
+}) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [contentHeight, setContentHeight] = useState(0);
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setContentHeight(contentRef.current.scrollHeight);
+    }
+  }, [options]);
+
+  const springProps = useSpring({
+    height: isOpen ? contentHeight : 0,
+    opacity: isOpen ? 1 : 0,
+    config: { tension: 300, friction: 30 }
+  });
+
+  return (
+    <div className={`${className} inline-block`} style={{ width: `${width}px` }}>
+      <button
+        onClick={() => onToggle(id)}
+        className={
+          clsx("rounded-full hover:text-white transition duration-300 ease-in-out px-5 py-2 text-center w-full flex items-center justify-between",
+          selectedValue ? "bg-mti-purple text-white" : "bg-mti-purple-ultralight text-mti-purple-light"
+        )}
+      >
+        <span className="truncate p-1">{selectedValue || 'Select an option'}</span>
+        <svg
+          className={`w-4 h-4 transform transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      <animated.div
+        style={{ ...springProps, width: `${width}px` }}
+        className="absolute z-10 mt-1 overflow-hidden bg-white rounded-md shadow-lg"
+      >
+        <div ref={contentRef}>
+          {Object.entries(options).sort((a, b) => a[0].localeCompare(b[0])).map(([key, value]) => (
+            <div
+              key={key}
+              onClick={() => {
+                onSelect(value);
+                onToggle(id);
+              }}
+              className="p-4 hover:bg-mti-purple-ultralight cursor-pointer whitespace-nowrap"
+            >
+              <span>{value}</span>
+            </div>
+          ))}
+        </div>
+      </animated.div>
+    </div>
+  );
+};
+
+export default MCDropdown;

src/components/Exercises/FillBlanks/index.tsx

@@ -1,250 +1,239 @@
 import { FillBlanksExercise, FillBlanksMCOption } from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import clsx from "clsx";
-import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import reactStringReplace from "react-string-replace";
 import { CommonProps } from "..";
 import Button from "../../Low/Button";
 import { v4 } from "uuid";
-
+import MCDropdown from "./MCDropdown";
 
 const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
-    id,
-    type,
-    prompt,
-    solutions,
-    text,
-    words,
-    userSolutions,
-    variant,
-    onNext,
-    onBack,
+	id,
+	type,
+	prompt,
+	solutions,
+	text,
+	words,
+	userSolutions,
+	variant,
+	onNext,
+	onBack,
 }) => {
-    const { shuffles, exam, partIndex, questionIndex, exerciseIndex } = useExamStore((state) => state);
-    const [answers, setAnswers] = useState<{ id: string; solution: string }[]>(userSolutions);
-    const hasExamEnded = useExamStore((state) => state.hasExamEnded);
-    const setCurrentSolution = useExamStore((state) => state.setCurrentSolution);
-    const shuffleMaps = shuffles.find((x) => x.exerciseID == id)?.shuffles;
+	const { shuffles, exam, partIndex, questionIndex, exerciseIndex } = useExamStore((state) => state);
+	const [answers, setAnswers] = useState<{ id: string; solution: string }[]>(userSolutions);
+	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
+	const setCurrentSolution = useExamStore((state) => state.setCurrentSolution);
+	const shuffleMaps = shuffles.find((x) => x.exerciseID == id)?.shuffles;
+	const dropdownRef = useRef<HTMLDivElement>(null);
 
-    const [currentMCSelection, setCurrentMCSelection] = useState<{ id: string, selection: FillBlanksMCOption }>();
+	const excludeWordMCType = (x: any) => {
+		return typeof x === "string" ? x : (x as { letter: string; word: string });
+	};
 
-    const typeCheckWordsMC = (words: any[]): words is FillBlanksMCOption[] => {
-        return Array.isArray(words) && words.every(
-            word => word && typeof word === 'object' && 'id' in word && 'options' in word
-        );
-    }
+	useEffect(() => {
+		if (hasExamEnded) onNext({ exercise: id, solutions: answers, score: calculateScore(), type });
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [hasExamEnded]);
 
-    const excludeWordMCType = (x: any) => {
-        return typeof x === "string" ? x : x as { letter: string; word: string };
-    }
+	let correctWords: any;
+	if (exam && (exam.module === "level" || exam.module === "reading") && exam.parts[partIndex].exercises[exerciseIndex].type === "fillBlanks") {
+		correctWords = (exam.parts[partIndex].exercises[exerciseIndex] as FillBlanksExercise).words;
+	}
 
-    useEffect(() => {
-        if (hasExamEnded) onNext({ exercise: id, solutions: answers, score: calculateScore(), type });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [hasExamEnded]);
+	useEffect(() => {
+		const handleClickOutside = (event: MouseEvent) => {
+		  if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+			setOpenDropdownId(null);
+		  }
+		};
+	  
+		document.addEventListener('mousedown', handleClickOutside);
+		return () => {
+		  document.removeEventListener('mousedown', handleClickOutside);
+		};
+	  }, []);
 
+	const calculateScore = () => {
+		const total = text.match(/({{\d+}})/g)?.length || 0;
+		const correct = answers!.filter((x) => {
+			const solution = solutions.find((y) => x.id.toString() === y.id.toString())?.solution;
+			if (!solution) return false;
+			const option = correctWords!.find((w: any) => {
+				if (typeof w === "string") {
+					return w.toLowerCase() === x.solution.toLowerCase();
+				} else if ("letter" in w) {
+					return w.letter.toLowerCase() === x.solution.toLowerCase();
+				} else {
+					return w.id.toString() === x.id.toString();
+				}
+			});
+			if (!option) return false;
 
-    let correctWords: any;
-    if (exam && (exam.module === "level" || exam.module === "reading") && exam.parts[partIndex].exercises[exerciseIndex].type === "fillBlanks") {
-        correctWords = (exam.parts[partIndex].exercises[exerciseIndex] as FillBlanksExercise).words;
-    }
+			if (typeof option === "string") {
+				return solution.toLowerCase() === option.toLowerCase();
+			} else if ("letter" in option) {
+				return solution.toLowerCase() === option.word.toLowerCase();
+			} else if ("options" in option) {
+				return option.options[solution as keyof typeof option.options] == x.solution;
+			}
+			return false;
+		}).length;
+		const missing = total - answers!.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
+		return { total, correct, missing };
+	};
 
-    const calculateScore = () => {
-        const total = text.match(/({{\d+}})/g)?.length || 0;
-        const correct = answers!.filter((x) => {
-            const solution = solutions.find((y) => x.id.toString() === y.id.toString())?.solution;
-            if (!solution) return false;
-            const option = correctWords!.find((w: any) => {
-                if (typeof w === "string") {
-                    return w.toLowerCase() === x.solution.toLowerCase();
-                } else if ('letter' in w) {
-                    return w.letter.toLowerCase() === x.solution.toLowerCase();
-                } else {
-                    return w.id.toString() === x.id.toString();
-                }
-            });
-            if (!option) return false;
+	const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);
 
-            if (typeof option === "string") {
-                return solution.toLowerCase() === option.toLowerCase();
-            } else if ('letter' in option) {
-                return solution.toLowerCase() === option.word.toLowerCase();
-            } else if ('options' in option) {
-                return option.options[solution as keyof typeof option.options] == x.solution;
-            }
-            return false;
-        }).length;
-        const missing = total - answers!.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
-        return { total, correct, missing };
-    };
-    const renderLines = useCallback((line: string) => {
-        return (
-            <div className="text-base leading-5" key={v4()}>
-                {reactStringReplace(line, /({{\d+}})/g, (match) => {
-                    const id = match.replaceAll(/[\{\}]/g, "");
-                    const userSolution = answers.find((x) => x.id === id);
-                    const styles = clsx(
-                        "rounded-full hover:text-white transition duration-300 ease-in-out my-1 px-5 py-2 text-center",
-                        currentMCSelection?.id == id && "!bg-mti-purple !text-white !outline-none !ring-0",
-                        !userSolution && "text-center text-mti-purple-light bg-mti-purple-ultralight",
-                        userSolution && "text-center text-mti-purple-dark bg-mti-purple-ultralight",
-                    )
-                    return (
-                        variant === "mc" ? (
-                            <>
-                                {/*<span className="mr-2">{`(${id})`}</span>*/}
-                                <button
-                                    className={styles}
-                                    onClick={() => {
-                                        setCurrentMCSelection(
-                                            {
-                                                id: id,
-                                                selection: words.find((x) => {
-                                                    if (typeof x !== "string" && 'id' in x) {
-                                                        return (x as FillBlanksMCOption).id.toString() == id.toString();
-                                                    }
-                                                    return false;
-                                                }) as FillBlanksMCOption
-                                            }
-                                        );
-                                    }}
-                                >
-                                    {userSolution?.solution === undefined ? <span className="text-transparent select-none">placeholder</span> : <span> {userSolution.solution} </span>}
-                                </button>
-                            </>
-                        ) : (
-                            <input
-                                className={styles}
-                                onChange={(e) => setAnswers((prev) => [...prev.filter((x) => x.id !== id), { id, solution: e.target.value }])}
-                                value={userSolution?.solution} />
-                        )
-                    );
-                })}
-            </div>
-        );
-    }, [variant, words, setCurrentMCSelection, answers, currentMCSelection]);
+	const renderLines = useCallback(
+		(line: string) => {
+			return (
+				<div className="text-xl leading-5" key={v4()} ref={dropdownRef}>
+					{reactStringReplace(line, /({{\d+}})/g, (match) => {
+						const id = match.replaceAll(/[\{\}]/g, "");
+						const userSolution = answers.find((x) => x.id === id);
+						const styles = clsx(
+							"rounded-full hover:text-white transition duration-300 ease-in-out my-1 px-5 py-2 text-center w-fit",
+							!userSolution && "text-center text-mti-purple-light bg-mti-purple-ultralight",
+							userSolution && "text-center text-mti-purple-dark bg-mti-purple-ultralight",
+						);
 
-    const memoizedLines = useMemo(() => {
-        return text.split("\\n").map((line, index) => (
-          <p key={index} className={clsx(variant === "mc" && "whitespace-pre-wrap")}>
-            {renderLines(line)}
-            <br />
-          </p>
-        ));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-      }, [text, variant, renderLines, currentMCSelection]);
+						const currentSelection = words.find((x) => {
+							if (typeof x !== "string" && "id" in x) {
+								return (x as FillBlanksMCOption).id.toString() == id.toString();
+							}
+							return false;
+						}) as FillBlanksMCOption;
 
+						return variant === "mc" ? (
+							<MCDropdown
+								id={id}
+								options={currentSelection.options}
+								onSelect={(value) => onSelection(id, value)}
+								selectedValue={userSolution?.solution}
+								className="inline-block py-2 px-1"
+								width={220}
+								isOpen={openDropdownId === id}
+								onToggle={()=> setOpenDropdownId(prevId => prevId === id ? null : id)}
+							/>
+						) : (
+							<input
+								className={styles}
+								onChange={(e) => setAnswers((prev) => [...prev.filter((x) => x.id !== id), { id, solution: e.target.value }])}
+								value={userSolution?.solution}
+							/>
+						);
+					})
+					}
+				</div >
+			);
+		},
+		[variant, words, answers, openDropdownId],
+	);
 
-    const onSelection = (questionID: string, value: string) => {
-        setAnswers((prev) => [...prev.filter((x) => x.id !== questionID), { id: questionID, solution: value }]);
-    }
+	const memoizedLines = useMemo(() => {
+		return text.split("\\n").map((line, index) => (
+			<p key={index} className={clsx(variant === "mc" && "whitespace-pre-wrap")}>
+				{renderLines(line)}
+				<br />
+			</p>
+		));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [text, variant, renderLines]);
 
-    useEffect(() => {
-        if (variant === "mc") {
-            setCurrentSolution({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [answers])
+	const onSelection = (questionID: string, value: string) => {
+		setAnswers((prev) => [...prev.filter((x) => x.id !== questionID), { id: questionID, solution: value }]);
+	};
 
-    return (
-        <>
-            <div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
-                {variant !== "mc" && <span className="text-sm w-full leading-6">
-                    {prompt.split("\\n").map((line, index) => (
-                        <Fragment key={index}>
-                            {line}
-                            <br />
-                        </Fragment>
-                    ))}
-                </span>}
-                <span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
-                    {memoizedLines}
-                </span>
-                {variant === "mc" && typeCheckWordsMC(words) ? (
-                    <>
-                        {currentMCSelection && (
-                            <div className="bg-mti-gray-smoke rounded-xl flex flex-col gap-4 px-16 py-8">
-                                <span className="font-medium text-lg text-mti-purple-dark mb-4 px-2">{`${currentMCSelection.id} - Select the appropriate word.`}</span>
-                                <div className="flex gap-4 flex-wrap justify-between">
-                                    {currentMCSelection.selection?.options && Object.entries(currentMCSelection.selection.options).sort((a, b) => a[0].localeCompare(b[0])).map(([key, value]) => {
-                                        return <div
-                                            key={v4()}
-                                            onClick={() => onSelection(currentMCSelection.id, value)}
-                                            className={clsx(
-                                                "flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-base",
-                                                !!answers.find((x) => x.solution.toLocaleLowerCase() === value.toLocaleLowerCase() && x.id === currentMCSelection.id) &&
-                                                "border-mti-purple-light",
-                                            )}>
-                                            <span className="font-semibold">{key}.</span>
-                                            <span>{value}</span>
-                                        </div>
+	useEffect(() => {
+		if (variant === "mc") {
+			setCurrentSolution({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [answers]);
 
-                                        /*<button
-                                            className={clsx(
-                                                "border border-mti-purple-light rounded-full px-3 py-0.5 transition ease-in-out duration-300",
-                                                !!answers.find((x) => x.solution.toLocaleLowerCase() === value.toLocaleLowerCase() && x.id === currentMCSelection.id) &&
-                                                "bg-mti-purple-dark text-white",
-                                            )}
-                                            key={v4()}
-                                            onClick={() => onSelection(currentMCSelection.id, value)}
-                                        >
-                                            {value}
-                                        </button>;*/
-                                    })}
-                                </div>
-                            </div>
-                        )}
-                    </>
-                ) : (
-                    <div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-4">
-                        <span className="font-medium text-mti-purple-dark">Options</span>
-                        <div className="flex gap-4 flex-wrap">
-                            {words.map((v) => {
-                                v = excludeWordMCType(v);
-                                const text = typeof v === "string" ? v : `${v.letter} - ${v.word}`;
+	return (
+		<div className="flex flex-col gap-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps })}
+					className="max-w-[200px] w-full"
+					disabled={exam && exam.module === "level" && partIndex === 0 && questionIndex === 0}>
+					Previous Page
+				</Button>
 
-                                return (
-                                    <span
-                                        className={clsx(
-                                            "border border-mti-purple-light rounded-full px-3 py-0.5 transition ease-in-out duration-300",
-                                            !!answers.find((x) => x.solution.toLowerCase() === (typeof v === "string" ? v : ("letter" in v ? v.letter : "")).toLowerCase()) &&
-                                            "bg-mti-purple-dark text-white",
-                                        )}
-                                        key={v4()}
-                                    >
-                                        {text}
-                                    </span>
-                                )
-                            })}
-                        </div>
-                    </div >
-                )}
-            </div>
-            <div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-                <Button
-                    color="purple"
-                    variant="outline"
-                    onClick={() => onBack({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps })}
-                    className="max-w-[200px] w-full"
-                    disabled={
-                        exam && exam.module === "level" &&
-                        typeof exam.parts[0].intro === "string" &&
-                        partIndex === 0 &&
-                        questionIndex === 0
-                    }
-                >
-                    Back
-                </Button>
+				<Button
+					color="purple"
+					onClick={() => {
+						onNext({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
+					}}
+					className="max-w-[200px] self-end w-full">
+					Next Page
+				</Button>
+			</div>
 
-                <Button
-                    color="purple"
-                    onClick={() => { onNext({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps }) }}
-                    className="max-w-[200px] self-end w-full">
-                    Next
-                </Button>
-            </div>
-        </>
-    );
-}
+			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
+				{variant !== "mc" && (
+					<span className="text-sm w-full leading-6">
+						{prompt.split("\\n").map((line, index) => (
+							<Fragment key={index}>
+								{line}
+								<br />
+							</Fragment>
+						))}
+					</span>
+				)}
+				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">{memoizedLines}</span>
+				{variant !== "mc" && (
+					<div className="bg-mti-gray-smoke rounded-xl px-5 py-6 flex flex-col gap-4">
+						<span className="font-medium text-mti-purple-dark">Options</span>
+						<div className="flex gap-4 flex-wrap">
+							{words.map((v) => {
+								v = excludeWordMCType(v);
+								const text = typeof v === "string" ? v : `${v.letter} - ${v.word}`;
+
+								return (
+									<span
+										className={clsx(
+											"border border-mti-purple-light rounded-full px-3 py-0.5 transition ease-in-out duration-300",
+											!!answers.find(
+												(x) =>
+													x.solution.toLowerCase() ===
+													(typeof v === "string" ? v : "letter" in v ? v.letter : "").toLowerCase(),
+											) && "bg-mti-purple-dark text-white",
+										)}
+										key={v4()}>
+										{text}
+									</span>
+								);
+							})}
+						</div>
+					</div>
+				)}
+			</div>
+			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps })}
+					className="max-w-[200px] w-full"
+					disabled={exam && exam.module === "level" && partIndex === 0 && questionIndex === 0}>
+					Previous Page
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => {
+						onNext({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
+					}}
+					className="max-w-[200px] self-end w-full">
+					Next Page
+				</Button>
+			</div>
+		</div>
+	);
+};
 
 export default FillBlanks;

src/components/Exercises/InteractiveSpeaking.tsx

@@ -152,139 +152,8 @@ export default function InteractiveSpeaking({
 	};
 
 	return (
-		<div className="flex flex-col h-full w-full gap-9">
-			<div className="flex flex-col w-full gap-8 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
-				<div className="flex flex-col gap-3">
-					<span className="font-semibold">{!!first_title && !!second_title ? `${first_title} & ${second_title}` : title}</span>
-				</div>
-				{prompts && prompts.length > 0 && (
-					<div className="flex flex-col gap-4 w-full items-center">
-						<video key={questionIndex} autoPlay controls className="max-w-3xl rounded-xl">
-							<source src={prompts[questionIndex].video_url} />
-						</video>
-					</div>
-				)}
-			</div>
-
-			<ReactMediaRecorder
-				audio
-				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">
-						<p className="text-base font-normal">Record your answer:</p>
-						<div className="flex gap-8 items-center justify-center py-8">
-							{status === "idle" && (
-								<>
-									<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-									{status === "idle" && (
-										<BsMicFill
-											onClick={() => {
-												setRecordingDuration(0);
-												startRecording();
-												setIsRecording(true);
-											}}
-											className="h-5 w-5 text-mti-gray-cool cursor-pointer"
-										/>
-									)}
-								</>
-							)}
-							{status === "recording" && (
-								<>
-									<div className="flex gap-4 items-center">
-										<span className="text-xs w-9">
-											{Math.floor(recordingDuration / 60)
-												.toString(10)
-												.padStart(2, "0")}
-											:
-											{Math.floor(recordingDuration % 60)
-												.toString(10)
-												.padStart(2, "0")}
-										</span>
-									</div>
-									<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-									<div className="flex gap-4 items-center">
-										<BsPauseCircle
-											onClick={() => {
-												setIsRecording(false);
-												pauseRecording();
-											}}
-											className="text-red-500 w-8 h-8 cursor-pointer"
-										/>
-										<BsCheckCircleFill
-											onClick={() => {
-												setIsRecording(false);
-												stopRecording();
-											}}
-											className="text-mti-purple-light w-8 h-8 cursor-pointer"
-										/>
-									</div>
-								</>
-							)}
-							{status === "paused" && (
-								<>
-									<div className="flex gap-4 items-center">
-										<span className="text-xs w-9">
-											{Math.floor(recordingDuration / 60)
-												.toString(10)
-												.padStart(2, "0")}
-											:
-											{Math.floor(recordingDuration % 60)
-												.toString(10)
-												.padStart(2, "0")}
-										</span>
-									</div>
-									<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-									<div className="flex gap-4 items-center">
-										<BsPlayCircle
-											onClick={() => {
-												setIsRecording(true);
-												resumeRecording();
-											}}
-											className="text-mti-purple-light w-8 h-8 cursor-pointer"
-										/>
-										<BsCheckCircleFill
-											onClick={() => {
-												setIsRecording(false);
-												stopRecording();
-											}}
-											className="text-mti-purple-light w-8 h-8 cursor-pointer"
-										/>
-									</div>
-								</>
-							)}
-							{status === "stopped" && mediaBlobUrl && (
-								<>
-									<Waveform audio={mediaBlobUrl} waveColor="#FCDDEC" progressColor="#EF5DA8" />
-									<div className="flex gap-4 items-center">
-										<BsTrashFill
-											className="text-mti-gray-cool cursor-pointer w-5 h-5"
-											onClick={() => {
-												setRecordingDuration(0);
-												clearBlobUrl();
-												setMediaBlob(undefined);
-											}}
-										/>
-
-										<BsMicFill
-											onClick={() => {
-												clearBlobUrl();
-												setRecordingDuration(0);
-												startRecording();
-												setIsRecording(true);
-												setMediaBlob(undefined);
-											}}
-											className="h-5 w-5 text-mti-gray-cool cursor-pointer"
-										/>
-									</div>
-								</>
-							)}
-						</div>
-					</div>
-				)}
-			/>
-
-			<div className="self-end flex justify-between w-full  gap-8">
+		<div className="flex flex-col gap-4 mt-4 w-full">
+			<div className="flex justify-between w-full gap-8">
 				<Button color="purple" variant="outline" isLoading={isLoading} onClick={back} className="max-w-[200px] self-end w-full">
 					Back
 				</Button>
@@ -292,6 +161,148 @@ export default function InteractiveSpeaking({
 					{questionIndex + 1 < prompts.length ? "Next Prompt" : "Submit"}
 				</Button>
 			</div>
+
+			<div className="flex flex-col h-full w-full gap-9">
+				<div className="flex flex-col w-full gap-8 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
+					<div className="flex flex-col gap-3">
+						<span className="font-semibold">{!!first_title && !!second_title ? `${first_title} & ${second_title}` : title}</span>
+					</div>
+					{prompts && prompts.length > 0 && (
+						<div className="flex flex-col gap-4 w-full items-center">
+							<video key={questionIndex} autoPlay controls className="max-w-3xl rounded-xl">
+								<source src={prompts[questionIndex].video_url} />
+							</video>
+						</div>
+					)}
+				</div>
+
+				<ReactMediaRecorder
+					audio
+					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">
+							<p className="text-base font-normal">Record your answer:</p>
+							<div className="flex gap-8 items-center justify-center py-8">
+								{status === "idle" && (
+									<>
+										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
+										{status === "idle" && (
+											<BsMicFill
+												onClick={() => {
+													setRecordingDuration(0);
+													startRecording();
+													setIsRecording(true);
+												}}
+												className="h-5 w-5 text-mti-gray-cool cursor-pointer"
+											/>
+										)}
+									</>
+								)}
+								{status === "recording" && (
+									<>
+										<div className="flex gap-4 items-center">
+											<span className="text-xs w-9">
+												{Math.floor(recordingDuration / 60)
+													.toString(10)
+													.padStart(2, "0")}
+												:
+												{Math.floor(recordingDuration % 60)
+													.toString(10)
+													.padStart(2, "0")}
+											</span>
+										</div>
+										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
+										<div className="flex gap-4 items-center">
+											<BsPauseCircle
+												onClick={() => {
+													setIsRecording(false);
+													pauseRecording();
+												}}
+												className="text-red-500 w-8 h-8 cursor-pointer"
+											/>
+											<BsCheckCircleFill
+												onClick={() => {
+													setIsRecording(false);
+													stopRecording();
+												}}
+												className="text-mti-purple-light w-8 h-8 cursor-pointer"
+											/>
+										</div>
+									</>
+								)}
+								{status === "paused" && (
+									<>
+										<div className="flex gap-4 items-center">
+											<span className="text-xs w-9">
+												{Math.floor(recordingDuration / 60)
+													.toString(10)
+													.padStart(2, "0")}
+												:
+												{Math.floor(recordingDuration % 60)
+													.toString(10)
+													.padStart(2, "0")}
+											</span>
+										</div>
+										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
+										<div className="flex gap-4 items-center">
+											<BsPlayCircle
+												onClick={() => {
+													setIsRecording(true);
+													resumeRecording();
+												}}
+												className="text-mti-purple-light w-8 h-8 cursor-pointer"
+											/>
+											<BsCheckCircleFill
+												onClick={() => {
+													setIsRecording(false);
+													stopRecording();
+												}}
+												className="text-mti-purple-light w-8 h-8 cursor-pointer"
+											/>
+										</div>
+									</>
+								)}
+								{status === "stopped" && mediaBlobUrl && (
+									<>
+										<Waveform audio={mediaBlobUrl} waveColor="#FCDDEC" progressColor="#EF5DA8" />
+										<div className="flex gap-4 items-center">
+											<BsTrashFill
+												className="text-mti-gray-cool cursor-pointer w-5 h-5"
+												onClick={() => {
+													setRecordingDuration(0);
+													clearBlobUrl();
+													setMediaBlob(undefined);
+												}}
+											/>
+
+											<BsMicFill
+												onClick={() => {
+													clearBlobUrl();
+													setRecordingDuration(0);
+													startRecording();
+													setIsRecording(true);
+													setMediaBlob(undefined);
+												}}
+												className="h-5 w-5 text-mti-gray-cool cursor-pointer"
+											/>
+										</div>
+									</>
+								)}
+							</div>
+						</div>
+					)}
+				/>
+
+				<div className="self-end flex justify-between w-full  gap-8">
+					<Button color="purple" variant="outline" isLoading={isLoading} onClick={back} className="max-w-[200px] self-end w-full">
+						Back
+					</Button>
+					<Button color="purple" disabled={!mediaBlob} isLoading={isLoading} onClick={next} className="max-w-[200px] self-end w-full">
+						{questionIndex + 1 < prompts.length ? "Next Prompt" : "Submit"}
+					</Button>
+				</div>
+			</div>
 		</div>
 	);
 }

src/components/Exercises/MatchSentences.tsx

@@ -68,6 +68,13 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
 
+	const setCurrentSolution = useExamStore((state) => state.setCurrentSolution);
+
+	useEffect(() => {
+		setCurrentSolution({exercise: id, solutions: answers, score: calculateScore(), type});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [answers, setAnswers]);
+
 	const handleDragEnd = (event: DragEndEvent) => {
 		if (event.over && event.over.id.toString().startsWith("droppable")) {
 			const optionID = event.active.id.toString().replace("draggable_option_", "");
@@ -93,7 +100,24 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 	}, [hasExamEnded]);
 
 	return (
-		<>
+		<div className="flex flex-col gap-4 mt-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] w-full">
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
 			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
@@ -143,6 +167,6 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Exercises/MultipleChoice.tsx

@@ -1,12 +1,12 @@
 /* eslint-disable @next/next/no-img-element */
-import { MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap } from "@/interfaces/exam";
+import {MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap} from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import clsx from "clsx";
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import reactStringReplace from "react-string-replace";
-import { CommonProps } from ".";
+import {CommonProps} from ".";
 import Button from "../Low/Button";
-import { v4 } from "uuid";
+import {v4} from "uuid";
 
 function Question({
 	id,
@@ -18,9 +18,8 @@ function Question({
 }: MultipleChoiceQuestion & {
 	userSolution: string | undefined;
 	onSelectOption?: (option: string) => void;
-	showSolution?: boolean,
+	showSolution?: boolean;
 }) {
-
 	const renderPrompt = (prompt: string) => {
 		return reactStringReplace(prompt, /(<u>.*?<\/u>)/g, (match) => {
 			const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
@@ -49,7 +48,9 @@ function Question({
 								"flex flex-col items-center border border-mti-gray-platinum p-4 px-8 rounded-xl gap-4 cursor-pointer bg-white relative select-none",
 								userSolution === option.id.toString() && "border-mti-purple-light",
 							)}>
-							<span key={v4()} className={clsx("text-sm", userSolution !== option.id.toString() && "opacity-50")}>{option.id.toString()}</span>
+							<span key={v4()} className={clsx("text-sm", userSolution !== option.id.toString() && "opacity-50")}>
+								{option.id.toString()}
+							</span>
 							<img src={option.src!} alt={`Option ${option.id.toString()}`} />
 						</div>
 					))}
@@ -60,7 +61,7 @@ function Question({
 							onClick={() => (onSelectOption ? onSelectOption(option.id.toString()) : null)}
 							className={clsx(
 								"flex border p-4 rounded-xl gap-2 cursor-pointer bg-white text-base select-none",
-								userSolution === option.id.toString() && "border-mti-purple-light",
+								userSolution === option.id.toString() && "!bg-mti-purple-light !text-white",
 							)}>
 							<span className="font-semibold">{option.id.toString()}.</span>
 							<span>{option.text}</span>
@@ -71,38 +72,30 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({ id, prompt, type, questions, userSolutions, onNext, onBack }: MultipleChoiceExercise & CommonProps) {
-	const [answers, setAnswers] = useState<{ question: string; option: string }[]>(userSolutions);
+export default function MultipleChoice({id, prompt, type, questions, userSolutions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
+	const [answers, setAnswers] = useState<{question: string; option: string}[]>(userSolutions);
 
-	const {
-		questionIndex,
-		exerciseIndex,
-		exam,
-		shuffles,
-		hasExamEnded,
-		partIndex,
-		setQuestionIndex,
-		setCurrentSolution
-	} = useExamStore((state) => state);
+	const {questionIndex, exerciseIndex, exam, shuffles, hasExamEnded, partIndex, setQuestionIndex, setCurrentSolution} = useExamStore(
+		(state) => state,
+	);
 
 	const shuffleMaps = shuffles.find((x) => x.exerciseID == id)?.shuffles;
 
 	const scrollToTop = () => Array.from(document.getElementsByTagName("body")).forEach((body) => body.scrollTo(0, 0));
 
 	useEffect(() => {
-		if (hasExamEnded) onNext({ exercise: id, solutions: answers, score: calculateScore(), type });
+		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [hasExamEnded]);
 
-	const onSelectOption = (option: string) => {
-		const question = questions[questionIndex];
-		setAnswers((prev) => [...prev.filter((x) => x.question !== question.id), { option, question: question.id }]);
+	const onSelectOption = (option: string, question: MultipleChoiceQuestion) => {
+		setAnswers((prev) => [...prev.filter((x) => x.question !== question.id), {option, question: question.id}]);
 	};
 
 	useEffect(() => {
-		setCurrentSolution({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
+		setCurrentSolution({exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps});
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [answers, setAnswers])
+	}, [answers, setAnswers]);
 
 	const getShuffledSolution = (originalSolution: string, questionShuffleMap: ShuffleMap) => {
 		for (const [newPosition, originalPosition] of Object.entries(questionShuffleMap.map)) {
@@ -111,8 +104,7 @@ export default function MultipleChoice({ id, prompt, type, questions, userSoluti
 			}
 		}
 		return originalSolution;
-	}
-
+	};
 
 	const calculateScore = () => {
 		const total = questions.length;
@@ -135,63 +127,95 @@ export default function MultipleChoice({ id, prompt, type, questions, userSoluti
 			return isSolutionCorrect || false;
 		}).length;
 		const missing = total - answers!.filter((x) => questions.find((y) => x.question.toString() === y.id.toString())).length;
-		return { total, correct, missing };
+		return {total, correct, missing};
 	};
 
 	const next = () => {
-		if (questionIndex === questions.length - 1) {
-			onNext({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
+		if (questionIndex + 1 >= questions.length - 1) {
+			onNext({exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps});
 		} else {
-			setQuestionIndex(questionIndex + 1);
+			setQuestionIndex(questionIndex + 2);
 		}
 		scrollToTop();
 	};
 
 	const back = () => {
 		if (questionIndex === 0) {
-			onBack({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
+			onBack({exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps});
 		} else {
-			if (exam?.module === "level" && typeof exam.parts[0].intro !== "undefined" && questionIndex === 0) return; 
-			setQuestionIndex(questionIndex - 1);
+			if (exam?.module === "level" && typeof exam.parts[0].intro !== "undefined" && questionIndex === 0) return;
+			setQuestionIndex(questionIndex - 2);
 		}
 
 		scrollToTop();
 	};
 
 	return (
-		<>
-			<div className="flex flex-col gap-2 mt-4 h-fit w-full mb-20 bg-mti-gray-smoke rounded-xl px-16 py-8">
-				{/*<span className="text-xl font-semibold mb-2">{"Select the appropriate option."}</span>*/}
-				{questionIndex < questions.length && (
-					<Question
-						{...questions[questionIndex]}
-						userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
-						onSelectOption={onSelectOption}
-					/>
-				)}
-			</div>
-
-			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
-				<Button color="purple" variant="outline" onClick={back} className="max-w-[200px] w-full"
-					disabled={
-						exam && exam.module === "level" && 
-						typeof exam.parts[0].intro === "string" && 
-						partIndex === 0 &&
-						questionIndex === 0
-					}
-				>
+		<div className="flex flex-col gap-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={back}
+					className="max-w-[200px] w-full"
+					disabled={exam && exam.module === "level" && partIndex === 0 && questionIndex === 0}>
 					Back
 				</Button>
 
 				<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
-					{
-						exam && exam.module === "level" && 
-						partIndex === exam.parts.length - 1 && 
-						exerciseIndex === exam.parts[partIndex].exercises.length - 1 &&
-						questionIndex === questions.length - 1 
-						? "Submit" : "Next"}
+					{exam &&
+					exam.module === "level" &&
+					partIndex === exam.parts.length - 1 &&
+					exerciseIndex === exam.parts[partIndex].exercises.length - 1 &&
+					questionIndex + 1 >= questions.length - 1
+						? "Submit"
+						: "Next"}
 				</Button>
 			</div>
-		</>
+
+			<div className="flex flex-col gap-4 mt-4 mb-20">
+				<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
+					{/*<span className="text-xl font-semibold mb-2">{"Select the appropriate option."}</span>*/}
+					{questionIndex < questions.length && (
+						<Question
+							{...questions[questionIndex]}
+							userSolution={answers.find((x) => questions[questionIndex].id === x.question)?.option}
+							onSelectOption={(option) => onSelectOption(option, questions[questionIndex])}
+						/>
+					)}
+				</div>
+
+				{questionIndex + 1 < questions.length && (
+					<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
+						<Question
+							{...questions[questionIndex + 1]}
+							userSolution={answers.find((x) => questions[questionIndex + 1].id === x.question)?.option}
+							onSelectOption={(option) => onSelectOption(option, questions[questionIndex + 1])}
+						/>
+					</div>
+				)}
+			</div>
+
+			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={back}
+					className="max-w-[200px] w-full"
+					disabled={exam && exam.module === "level" && partIndex === 0 && questionIndex === 0}>
+					Back
+				</Button>
+
+				<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
+					{exam &&
+					exam.module === "level" &&
+					partIndex === exam.parts.length - 1 &&
+					exerciseIndex === exam.parts[partIndex].exercises.length - 1 &&
+					questionIndex + 1 >= questions.length - 1
+						? "Submit"
+						: "Next"}
+				</Button>
+			</div>
+		</div>
 	);
 }

src/components/Exercises/Speaking.tsx

@@ -1,20 +1,20 @@
-import { SpeakingExercise } from "@/interfaces/exam";
-import { CommonProps } from ".";
-import { Fragment, useEffect, useState } from "react";
-import { BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPlayCircle, BsTrashFill } from "react-icons/bs";
+import {SpeakingExercise} from "@/interfaces/exam";
+import {CommonProps} from ".";
+import {Fragment, useEffect, useState} from "react";
+import {BsCheckCircleFill, BsMicFill, BsPauseCircle, BsPlayCircle, BsTrashFill} from "react-icons/bs";
 import dynamic from "next/dynamic";
 import Button from "../Low/Button";
 import useExamStore from "@/stores/examStore";
-import { downloadBlob } from "@/utils/evaluation";
+import {downloadBlob} from "@/utils/evaluation";
 import axios from "axios";
 import Modal from "../Modal";
 
-const Waveform = dynamic(() => import("../Waveform"), { ssr: false });
+const Waveform = dynamic(() => import("../Waveform"), {ssr: false});
 const ReactMediaRecorder = dynamic(() => import("react-media-recorder").then((mod) => mod.ReactMediaRecorder), {
 	ssr: false,
 });
 
-export default function Speaking({ id, title, text, video_url, type, prompts, suffix, userSolutions, onNext, onBack }: SpeakingExercise & CommonProps) {
+export default function Speaking({id, title, text, video_url, type, prompts, suffix, userSolutions, onNext, onBack}: SpeakingExercise & CommonProps) {
 	const [recordingDuration, setRecordingDuration] = useState(0);
 	const [isRecording, setIsRecording] = useState(false);
 	const [mediaBlob, setMediaBlob] = useState<string>();
@@ -28,7 +28,7 @@ export default function Speaking({ id, title, text, video_url, type, prompts, su
 	const saveToStorage = async () => {
 		if (mediaBlob && mediaBlob.startsWith("blob")) {
 			const blobBuffer = await downloadBlob(mediaBlob);
-			const audioFile = new File([blobBuffer], "audio.wav", { type: "audio/wav" });
+			const audioFile = new File([blobBuffer], "audio.wav", {type: "audio/wav"});
 
 			const seed = Math.random().toString().replace("0.", "");
 
@@ -42,8 +42,8 @@ export default function Speaking({ id, title, text, video_url, type, prompts, su
 				},
 			};
 
-			const response = await axios.post<{ path: string }>("/api/storage/insert", formData, config);
-			if (audioURL) await axios.post("/api/storage/delete", { path: audioURL });
+			const response = await axios.post<{path: string}>("/api/storage/insert", formData, config);
+			if (audioURL) await axios.post("/api/storage/delete", {path: audioURL});
 			return response.data.path;
 		}
 
@@ -52,7 +52,7 @@ export default function Speaking({ id, title, text, video_url, type, prompts, su
 
 	useEffect(() => {
 		if (userSolutions.length > 0) {
-			const { solution } = userSolutions[0] as { solution?: string };
+			const {solution} = userSolutions[0] as {solution?: string};
 			if (solution && !mediaBlob) setMediaBlob(solution);
 			if (solution && !solution.startsWith("blob")) setAudioURL(solution);
 		}
@@ -79,8 +79,8 @@ export default function Speaking({ id, title, text, video_url, type, prompts, su
 	const next = async () => {
 		onNext({
 			exercise: id,
-			solutions: mediaBlob ? [{ id, solution: mediaBlob }] : [],
-			score: { correct: 0, total: 100, missing: 0 },
+			solutions: mediaBlob ? [{id, solution: mediaBlob}] : [],
+			score: {correct: 0, total: 100, missing: 0},
 			type,
 		});
 	};
@@ -88,8 +88,8 @@ export default function Speaking({ id, title, text, video_url, type, prompts, su
 	const back = async () => {
 		onBack({
 			exercise: id,
-			solutions: mediaBlob ? [{ id, solution: mediaBlob }] : [],
-			score: { correct: 0, total: 100, missing: 0 },
+			solutions: mediaBlob ? [{id, solution: mediaBlob}] : [],
+			score: {correct: 0, total: 100, missing: 0},
 			type,
 		});
 	};
@@ -98,7 +98,7 @@ export default function Speaking({ id, title, text, video_url, type, prompts, su
 		const newText = e.target.value;
 		const words = newText.match(/\S+/g);
 		const wordCount = words ? words.length : 0;
-		
+
 		if (wordCount <= 100) {
 			setInputText(newText);
 		} else {
@@ -110,188 +110,14 @@ export default function Speaking({ id, title, text, video_url, type, prompts, su
 				if (count > 100) break;
 				lastIndex = match.index! + match[0].length;
 			}
-			
+
 			setInputText(newText.slice(0, lastIndex));
 		}
 	};
 
 	return (
-		<div className="flex flex-col h-full w-full gap-9">
-			<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) => (
-							<li className="italic" key={index}>
-								{x}
-							</li>
-						))}
-					</div>
-					{!!suffix && <span className="font-bold">{suffix}</span>}
-				</div>
-			</Modal>
-			<div className="flex flex-col w-full gap-2 bg-mti-gray-smoke rounded-xl py-8 px-16">
-				<div className="flex flex-col gap-3">
-					<div className="flex flex-col gap-0">
-						<span className="font-semibold">{title}</span>
-						{prompts.length > 0 && (
-							<span className="font-semibold">You should talk for at least 1 minute and 30 seconds for your answer to be valid.</span>
-						)}
-					</div>
-					{!video_url && (
-						<span className="font-regular">
-							{text.split("\\n").map((line, index) => (
-								<Fragment key={index}>
-									<span>{line}</span>
-									<br />
-								</Fragment>
-							))}
-						</span>
-					)}
-				</div>
-				<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">
-								<source src={video_url} />
-							</video>
-						</div>
-					)}
-					{prompts && prompts.length > 0 && <Button onClick={() => setIsPromptsModalOpen(true)}>View Prompts</Button>}
-				</div>
-			</div>
-
-			{prompts && prompts.length > 0 && (
-				<div className="w-full h-full flex flex-col gap-4">
-					<textarea
-						onContextMenu={(e) => e.preventDefault()}
-						className="w-full h-full min-h-[200px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
-						onChange={handleNoteWriting}
-						value={inputText}
-						placeholder="Write your notes here..."
-						spellCheck={false}
-					/>
-					<span className="text-base self-end text-mti-gray-cool">Word Count: {(inputText.match(/\S+/g) || []).length}/100</span>
-				</div>
-			)}
-
-			<ReactMediaRecorder
-				audio
-				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">
-						<p className="text-base font-normal">Record your answer:</p>
-						<div className="flex gap-8 items-center justify-center py-8">
-							{status === "idle" && !mediaBlob && (
-								<>
-									<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-									{status === "idle" && (
-										<BsMicFill
-											onClick={() => {
-												setRecordingDuration(0);
-												startRecording();
-												setIsRecording(true);
-											}}
-											className="h-5 w-5 text-mti-gray-cool cursor-pointer"
-										/>
-									)}
-								</>
-							)}
-							{status === "recording" && (
-								<>
-									<div className="flex gap-4 items-center">
-										<span className="text-xs w-9">
-											{Math.floor(recordingDuration / 60)
-												.toString(10)
-												.padStart(2, "0")}
-											:
-											{Math.floor(recordingDuration % 60)
-												.toString(10)
-												.padStart(2, "0")}
-										</span>
-									</div>
-									<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-									<div className="flex gap-4 items-center">
-										<BsPauseCircle
-											onClick={() => {
-												setIsRecording(false);
-												pauseRecording();
-											}}
-											className="text-red-500 w-8 h-8 cursor-pointer"
-										/>
-										<BsCheckCircleFill
-											onClick={() => {
-												setIsRecording(false);
-												stopRecording();
-											}}
-											className="text-mti-purple-light w-8 h-8 cursor-pointer"
-										/>
-									</div>
-								</>
-							)}
-							{status === "paused" && (
-								<>
-									<div className="flex gap-4 items-center">
-										<span className="text-xs w-9">
-											{Math.floor(recordingDuration / 60)
-												.toString(10)
-												.padStart(2, "0")}
-											:
-											{Math.floor(recordingDuration % 60)
-												.toString(10)
-												.padStart(2, "0")}
-										</span>
-									</div>
-									<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
-									<div className="flex gap-4 items-center">
-										<BsPlayCircle
-											onClick={() => {
-												setIsRecording(true);
-												resumeRecording();
-											}}
-											className="text-mti-purple-light w-8 h-8 cursor-pointer"
-										/>
-										<BsCheckCircleFill
-											onClick={() => {
-												setIsRecording(false);
-												stopRecording();
-											}}
-											className="text-mti-purple-light w-8 h-8 cursor-pointer"
-										/>
-									</div>
-								</>
-							)}
-							{((status === "stopped" && mediaBlobUrl) || (status === "idle" && mediaBlob)) && (
-								<>
-									<Waveform audio={mediaBlobUrl ? mediaBlobUrl : mediaBlob!} waveColor="#FCDDEC" progressColor="#EF5DA8" />
-									<div className="flex gap-4 items-center">
-										<BsTrashFill
-											className="text-mti-gray-cool cursor-pointer w-5 h-5"
-											onClick={() => {
-												setRecordingDuration(0);
-												clearBlobUrl();
-												setMediaBlob(undefined);
-											}}
-										/>
-
-										<BsMicFill
-											onClick={() => {
-												clearBlobUrl();
-												setRecordingDuration(0);
-												startRecording();
-												setIsRecording(true);
-												setMediaBlob(undefined);
-											}}
-											className="h-5 w-5 text-mti-gray-cool cursor-pointer"
-										/>
-									</div>
-								</>
-							)}
-						</div>
-					</div>
-				)}
-			/>
-
-			<div className="self-end flex justify-between w-full  gap-8">
+		<div className="flex flex-col gap-4 mt-4 w-full">
+			<div className="flex justify-between w-full gap-8">
 				<Button color="purple" variant="outline" isLoading={isLoading} onClick={back} className="max-w-[200px] self-end w-full">
 					Back
 				</Button>
@@ -299,6 +125,193 @@ export default function Speaking({ id, title, text, video_url, type, prompts, su
 					Next
 				</Button>
 			</div>
+
+			<div className="flex flex-col h-full w-full gap-9">
+				<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) => (
+								<li className="italic" key={index}>
+									{x}
+								</li>
+							))}
+						</div>
+						{!!suffix && <span className="font-bold">{suffix}</span>}
+					</div>
+				</Modal>
+				<div className="flex flex-col w-full gap-2 bg-mti-gray-smoke rounded-xl py-8 px-16">
+					<div className="flex flex-col gap-3">
+						<div className="flex flex-col gap-0">
+							<span className="font-semibold">{title}</span>
+							{prompts.length > 0 && (
+								<span className="font-semibold">
+									You should talk for at least 1 minute and 30 seconds for your answer to be valid.
+								</span>
+							)}
+						</div>
+						{!video_url && (
+							<span className="font-regular">
+								{text.split("\\n").map((line, index) => (
+									<Fragment key={index}>
+										<span>{line}</span>
+										<br />
+									</Fragment>
+								))}
+							</span>
+						)}
+					</div>
+					<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">
+									<source src={video_url} />
+								</video>
+							</div>
+						)}
+						{prompts && prompts.length > 0 && <Button onClick={() => setIsPromptsModalOpen(true)}>View Prompts</Button>}
+					</div>
+				</div>
+
+				{prompts && prompts.length > 0 && (
+					<div className="w-full h-full flex flex-col gap-4">
+						<textarea
+							onContextMenu={(e) => e.preventDefault()}
+							className="w-full h-full min-h-[200px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"
+							onChange={handleNoteWriting}
+							value={inputText}
+							placeholder="Write your notes here..."
+							spellCheck={false}
+						/>
+						<span className="text-base self-end text-mti-gray-cool">Word Count: {(inputText.match(/\S+/g) || []).length}/100</span>
+					</div>
+				)}
+
+				<ReactMediaRecorder
+					audio
+					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">
+							<p className="text-base font-normal">Record your answer:</p>
+							<div className="flex gap-8 items-center justify-center py-8">
+								{status === "idle" && !mediaBlob && (
+									<>
+										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
+										{status === "idle" && (
+											<BsMicFill
+												onClick={() => {
+													setRecordingDuration(0);
+													startRecording();
+													setIsRecording(true);
+												}}
+												className="h-5 w-5 text-mti-gray-cool cursor-pointer"
+											/>
+										)}
+									</>
+								)}
+								{status === "recording" && (
+									<>
+										<div className="flex gap-4 items-center">
+											<span className="text-xs w-9">
+												{Math.floor(recordingDuration / 60)
+													.toString(10)
+													.padStart(2, "0")}
+												:
+												{Math.floor(recordingDuration % 60)
+													.toString(10)
+													.padStart(2, "0")}
+											</span>
+										</div>
+										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
+										<div className="flex gap-4 items-center">
+											<BsPauseCircle
+												onClick={() => {
+													setIsRecording(false);
+													pauseRecording();
+												}}
+												className="text-red-500 w-8 h-8 cursor-pointer"
+											/>
+											<BsCheckCircleFill
+												onClick={() => {
+													setIsRecording(false);
+													stopRecording();
+												}}
+												className="text-mti-purple-light w-8 h-8 cursor-pointer"
+											/>
+										</div>
+									</>
+								)}
+								{status === "paused" && (
+									<>
+										<div className="flex gap-4 items-center">
+											<span className="text-xs w-9">
+												{Math.floor(recordingDuration / 60)
+													.toString(10)
+													.padStart(2, "0")}
+												:
+												{Math.floor(recordingDuration % 60)
+													.toString(10)
+													.padStart(2, "0")}
+											</span>
+										</div>
+										<div className="w-full h-2 max-w-4xl bg-mti-gray-smoke rounded-full" />
+										<div className="flex gap-4 items-center">
+											<BsPlayCircle
+												onClick={() => {
+													setIsRecording(true);
+													resumeRecording();
+												}}
+												className="text-mti-purple-light w-8 h-8 cursor-pointer"
+											/>
+											<BsCheckCircleFill
+												onClick={() => {
+													setIsRecording(false);
+													stopRecording();
+												}}
+												className="text-mti-purple-light w-8 h-8 cursor-pointer"
+											/>
+										</div>
+									</>
+								)}
+								{((status === "stopped" && mediaBlobUrl) || (status === "idle" && mediaBlob)) && (
+									<>
+										<Waveform audio={mediaBlobUrl ? mediaBlobUrl : mediaBlob!} waveColor="#FCDDEC" progressColor="#EF5DA8" />
+										<div className="flex gap-4 items-center">
+											<BsTrashFill
+												className="text-mti-gray-cool cursor-pointer w-5 h-5"
+												onClick={() => {
+													setRecordingDuration(0);
+													clearBlobUrl();
+													setMediaBlob(undefined);
+												}}
+											/>
+
+											<BsMicFill
+												onClick={() => {
+													clearBlobUrl();
+													setRecordingDuration(0);
+													startRecording();
+													setIsRecording(true);
+													setMediaBlob(undefined);
+												}}
+												className="h-5 w-5 text-mti-gray-cool cursor-pointer"
+											/>
+										</div>
+									</>
+								)}
+							</div>
+						</div>
+					)}
+				/>
+
+				<div className="self-end flex justify-between w-full  gap-8">
+					<Button color="purple" variant="outline" isLoading={isLoading} onClick={back} className="max-w-[200px] self-end w-full">
+						Back
+					</Button>
+					<Button color="purple" isLoading={isLoading} disabled={!mediaBlob} onClick={next} className="max-w-[200px] self-end w-full">
+						Next
+					</Button>
+				</div>
+			</div>
 		</div>
 	);
 }

src/components/Exercises/TrueFalse.tsx

@@ -8,6 +8,7 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 	const [answers, setAnswers] = useState<{id: string; solution: "true" | "false" | "not_given"}[]>(userSolutions);
 
 	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
+	const setCurrentSolution = useExamStore((state) => state.setCurrentSolution);
 
 	useEffect(() => {
 		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
@@ -28,6 +29,11 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 		return {total, correct, missing};
 	};
 
+	useEffect(() => {
+		setCurrentSolution({exercise: id, solutions: answers, score: calculateScore(), type});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [answers, setAnswers]);
+
 	const toggleAnswer = (solution: "true" | "false" | "not_given", questionId: string) => {
 		const answer = answers.find((x) => x.id === questionId);
 		if (answer && answer.solution === solution) {
@@ -39,7 +45,24 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 	};
 
 	return (
-		<>
+		<div className="flex flex-col gap-4 mt-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] w-full">
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
 			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
@@ -116,6 +139,6 @@ export default function TrueFalse({id, type, prompt, questions, userSolutions, o
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Exercises/WriteBlanks.tsx

@@ -49,7 +49,7 @@ function Blank({
 export default function WriteBlanks({id, prompt, type, maxWords, solutions, userSolutions, text, onNext, onBack}: WriteBlanksExercise & CommonProps) {
 	const [answers, setAnswers] = useState<{id: string; solution: string}[]>(userSolutions);
 
-	const hasExamEnded = useExamStore((state) => state.hasExamEnded);
+	const {hasExamEnded, setCurrentSolution} = useExamStore((state) => state);
 
 	useEffect(() => {
 		if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
@@ -70,6 +70,11 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 		return {total, correct, missing};
 	};
 
+	useEffect(() => {
+		setCurrentSolution({exercise: id, solutions: answers, score: calculateScore(), type});
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [answers, setAnswers]);
+
 	const renderLines = (line: string) => {
 		return (
 			<span className="text-base leading-5">
@@ -87,7 +92,24 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 	};
 
 	return (
-		<>
+		<div className="flex flex-col gap-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] w-full">
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: answers, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
 			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
@@ -123,6 +145,6 @@ export default function WriteBlanks({id, prompt, type, maxWords, solutions, user
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Exercises/Writing.tsx

@@ -84,7 +84,34 @@ export default function Writing({
 	}, [inputText, wordCounter]);
 
 	return (
-		<>
+		<div className="flex flex-col gap-4 mt-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() =>
+						onBack({exercise: id, solutions: [{id, solution: inputText}], score: {correct: 100, total: 100, missing: 0}, type})
+					}
+					className="max-w-[200px] self-end w-full">
+					Back
+				</Button>
+				<Button
+					color="purple"
+					disabled={!isSubmitEnabled}
+					onClick={() =>
+						onNext({
+							exercise: id,
+							solutions: [{id, solution: inputText.replaceAll(/\s{2,}/g, " ")}],
+							score: {correct: 100, total: 100, missing: 0},
+							type,
+							module: "writing",
+						})
+					}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
 			{attachment && (
 				<Transition show={isModalOpen} as={Fragment}>
 					<Dialog onClose={() => setIsModalOpen(false)} className="relative z-50">
@@ -170,6 +197,6 @@ export default function Writing({
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Generation/fill.blanks.edit.tsx

@@ -1,6 +1,7 @@
-import {FillBlanksExercise} from "@/interfaces/exam";
+import { FillBlanksExercise, FillBlanksMCOption } from "@/interfaces/exam";
 import React from "react";
 import Input from "@/components/Low/Input";
+import clsx from "clsx";
 
 interface Props {
 	exercise: FillBlanksExercise;
@@ -8,11 +9,16 @@ interface Props {
 }
 
 const FillBlanksEdit = (props: Props) => {
-	const {exercise, updateExercise} = props;
+	const { exercise, updateExercise } = props;
+
+	const typeCheckWordsMC = (words: any[]): words is FillBlanksMCOption[] => {
+		return Array.isArray(words) && words.every((word) => word && typeof word === "object" && "id" in word && "options" in word);
+	};
+
 	return (
 		<>
 			<Input
-				type="text"
+				type={exercise?.variant && exercise.variant === "mc" ? "textarea" : "text"}
 				label="Prompt"
 				name="prompt"
 				required
@@ -24,18 +30,18 @@ const FillBlanksEdit = (props: Props) => {
 				}
 			/>
 			<Input
-				type="text"
+				type={exercise?.variant && exercise.variant === "mc" ? "textarea" : "text"}
 				label="Text"
 				name="text"
 				required
 				value={exercise.text}
 				onChange={(value) =>
 					updateExercise({
-						text: value,
+						text: exercise?.variant && exercise.variant === "mc" ? value : value,
 					})
 				}
 			/>
-			<h1>Solutions</h1>
+			<h1 className="mt-4">Solutions</h1>
 			<div className="w-full flex flex-wrap -mx-2">
 				{exercise.solutions.map((solution, index) => (
 					<div key={solution.id} className="flex sm:w-1/2 lg:w-1/4 px-2">
@@ -47,33 +53,75 @@ const FillBlanksEdit = (props: Props) => {
 							value={solution.solution}
 							onChange={(value) =>
 								updateExercise({
-									solutions: exercise.solutions.map((sol) => (sol.id === solution.id ? {...sol, solution: value} : sol)),
+									solutions: exercise.solutions.map((sol) => (sol.id === solution.id ? { ...sol, solution: value } : sol)),
 								})
 							}
 						/>
 					</div>
 				))}
 			</div>
-			<h1>Words</h1>
-			<div className="w-full flex flex-wrap -mx-2">
-				{exercise.words.map((word, index) => (
-					<div key={index} className="flex sm:w-1/2 lg:w-1/4 px-2">
-						<Input
-							type="text"
-							label={`Word ${index + 1}`}
-							name="word"
-							required
-							value={typeof word === "string" ? word : ("word" in word ? word.word : "")}
-							onChange={(value) =>
-								updateExercise({
-									words: exercise.words.map((sol, idx) =>
-										index === idx ? (typeof word === "string" ? value : {...word, word: value}) : sol,
-									),
-								})
-							}
-						/>
-					</div>
-				))}
+			<h1 className="mt-4">Words</h1>
+			<div className={clsx(exercise?.variant && exercise.variant === "mc" ? "w-full flex flex-row" : "w-full flex flex-wrap -mx-2")}>
+				{exercise?.variant && exercise.variant === "mc" && typeCheckWordsMC(exercise.words) ?
+					(
+						<div className="flex flex-col w-full">
+							{exercise.words.flatMap((mcOptions, wordIndex) =>
+								<>
+									<label className="font-semibold">{`Word ${wordIndex + 1}`}</label>
+									<div className="flex flex-row">
+									{Object.entries(mcOptions.options).map(([key, value], optionIndex) => (
+										<div key={`${wordIndex}-${optionIndex}-${key}`} className="flex sm:w-1/2 lg:w-1/4 px-2 mb-4">
+											<Input
+												type="text"
+												label={`Option ${key}`}
+												name="word"
+												required
+												value={value}
+												onChange={(newValue) =>
+													updateExercise({
+														words: exercise.words.map((word, idx) =>
+															idx === wordIndex
+																? {
+																	...(word as FillBlanksMCOption),
+																	options: {
+																		...(word as FillBlanksMCOption).options,
+																		[key]: newValue
+																	}
+																}
+																: word
+														)
+													})
+												}
+											/>
+										</div>
+									))}
+									</div>
+								</>
+							)}
+						</div>
+					)
+					:
+					(
+						exercise.words.map((word, index) => (
+							<div key={index} className="flex sm:w-1/2 lg:w-1/4 px-2">
+								<Input
+									type="text"
+									label={`Word ${index + 1}`}
+									name="word"
+									required
+									value={typeof word === "string" ? word : ("word" in word ? word.word : "")}
+									onChange={(value) =>
+										updateExercise({
+											words: exercise.words.map((sol, idx) =>
+												index === idx ? (typeof word === "string" ? value : { ...word, word: value }) : sol,
+											),
+										})
+									}
+								/>
+							</div>
+						))
+					)
+				}
 			</div>
 		</>
 	);

src/components/Low/Input.tsx

@@ -1,8 +1,8 @@
 import clsx from "clsx";
-import {useState} from "react";
+import { useState } from "react";
 
 interface Props {
-	type: "email" | "text" | "password" | "tel" | "number";
+	type: "email" | "text" | "password" | "tel" | "number" | "textarea";
 	roundness?: "full" | "xl";
 	required?: boolean;
 	label?: string;
@@ -32,6 +32,20 @@ export default function Input({
 }: Props) {
 	const [showPassword, setShowPassword] = useState(false);
 
+	if (type === "textarea") {
+		return (
+			<textarea
+				onContextMenu={(e) => e.preventDefault()}
+				className="w-full h-full cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl min-h-[200px]"
+				onChange={(e) => onChange(e.target.value)}
+				value={value}
+				placeholder={placeholder}
+				spellCheck={false}
+			/>
+		);
+	}
+
+
 	if (type === "password") {
 		return (
 			<div className="relative flex flex-col gap-3 w-full">

src/components/Medium/ModuleTitle.tsx

@@ -1,15 +1,13 @@
 import { Module } from "@/interfaces";
 import { moduleLabels } from "@/utils/moduleUtils";
 import clsx from "clsx";
-import { Fragment, ReactNode, useCallback, useState } from "react";
+import { ReactNode, useState } from "react";
 import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsStopwatch } from "react-icons/bs";
 import ProgressBar from "../Low/ProgressBar";
 import Timer from "./Timer";
-import { Exam, LevelExam, MultipleChoiceExercise, ShuffleMap, UserSolution } from "@/interfaces/exam";
+import { Exercise, LevelExam, MultipleChoiceExercise, ShuffleMap, UserSolution } from "@/interfaces/exam";
 import { BsFillGrid3X3GapFill } from "react-icons/bs";
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import Button from "../Low/Button";
-import { Dialog, Transition } from "@headlessui/react";
 import useExamStore from "@/stores/examStore";
 import Modal from "../Modal";
 import React from "react";
@@ -17,6 +15,7 @@ import React from "react";
 interface Props {
 	minTimer: number;
 	module: Module;
+	examLabel?: string;
 	label?: string;
 	exerciseIndex: number;
 	totalExercises: number;
@@ -24,6 +23,7 @@ interface Props {
 	partLabel?: string;
 	showTimer?: boolean;
 	showSolutions?: boolean;
+	currentExercise?: Exercise;
 	runOnClick?: ((questionIndex: number) => void) | undefined;
 }
 
@@ -31,6 +31,7 @@ export default function ModuleTitle({
 	minTimer,
 	module,
 	label,
+	examLabel,
 	exerciseIndex,
 	totalExercises,
 	disableTimer = false,
@@ -68,9 +69,9 @@ export default function ModuleTitle({
 		if (!isMultipleChoiceLevelExercise() && !userSolutions) return null;
 
 		const currentExercise = (exam as LevelExam).parts[partIndex!].exercises[examExerciseIndex] as MultipleChoiceExercise;
-		const userSolution = userSolutions!.find((x) => x.exercise == currentExercise.id)!;
-		const answeredQuestions = new Set(userSolution.solutions.map(sol => sol.question));
-		const exerciseOffset = currentExercise.questions[0].id;
+		const userSolution = userSolutions!.find((x) => x.exercise.toString() == currentExercise.id.toString())!;
+		const answeredQuestions = new Set(userSolution.solutions.map(sol => sol.question.toString()));
+		const exerciseOffset = Number(currentExercise.questions[0].id);
 		const lastExercise = exerciseOffset + (currentExercise.questions.length - 1);
 
 		const getQuestionColor = (questionId: string, solution: string, userQuestionSolution: string | undefined) => {
@@ -96,10 +97,10 @@ export default function ModuleTitle({
 				<div className="grid grid-cols-5 gap-3 px-4 py-2">
 					{currentExercise.questions.map((_, index) => {
 						const questionNumber = exerciseOffset + index;
-						const isAnswered = answeredQuestions.has(questionNumber);
-						const solution = currentExercise.questions.find((x) => x.id == questionNumber)!.solution;
+						const isAnswered = answeredQuestions.has(questionNumber.toString());
+						const solution = currentExercise.questions.find((x) => x.id.toString() == questionNumber.toString())!.solution;
 
-						const userQuestionSolution = currentExercise.userSolutions?.find((x) => x.question == questionNumber)?.option;
+						const userQuestionSolution = currentExercise.userSolutions?.find((x) => x.question.toString() == questionNumber.toString())?.option;
 						return (
 							<Button
 								variant={showSolutions ? "solid" : (isAnswered ? "solid" : "outline")}
@@ -144,7 +145,7 @@ export default function ModuleTitle({
 								return (
 									<div key={index} className="text-2xl font-semibold flex flex-col gap-2">
 										{partInstructions.split("\\n").map((line, lineIndex) => (
-											<span key={lineIndex}>{line}</span>
+											<span key={lineIndex} dangerouslySetInnerHTML={{__html: line.replace('that is not correct', 'that is <span class="font-bold"><u>not correct</u></span>')}}></span>
 										))}
 									</div>
 								);
@@ -157,7 +158,7 @@ export default function ModuleTitle({
 						<div className="w-full flex justify-between">
 							<span className="text-base font-semibold">
 								{module === "level"
-									? "Placement Test"
+									? (examLabel ? examLabel : "Placement Test")
 									: `${moduleLabels[module]} exam${label ? ` - ${label}` : ''}`
 								}
 							</span>

src/components/Medium/SessionCard.tsx

@@ -40,61 +40,71 @@ export default function SessionCard({
 	};
 
 	return (
-		<div className="border-mti-gray-anti-flash flex w-64 flex-col gap-3 rounded-xl border p-4 text-black">
-			<span className="flex gap-1">
-				<b>ID:</b>
-				{session.sessionId}
-			</span>
-			<span className="flex gap-1">
-				<b>Date:</b>
-				{moment(session.date).format("DD/MM/YYYY - HH:mm")}
-			</span>
-			<div className="flex w-full items-center justify-between">
-				<div className="-md:mt-2 grid w-full grid-cols-4 place-items-center justify-center gap-2">
-					{session.selectedModules.sort(sortByModuleName).map((module) => (
-						<div
-							key={module}
-							data-tip={capitalize(module)}
-							className={clsx(
-								"-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
-								module === "reading" && "bg-ielts-reading",
-								module === "listening" && "bg-ielts-listening",
-								module === "writing" && "bg-ielts-writing",
-								module === "speaking" && "bg-ielts-speaking",
-								module === "level" && "bg-ielts-level",
-							)}>
-							{module === "reading" && <BsBook className="h-4 w-4" />}
-							{module === "listening" && <BsHeadphones className="h-4 w-4" />}
-							{module === "writing" && <BsPen className="h-4 w-4" />}
-							{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
-							{module === "level" && <BsClipboard className="h-4 w-4" />}
-						</div>
-					))}
-				</div>
+		<div className="border-mti-gray-anti-flash flex w-64 flex-col justify-between gap-3 rounded-xl border p-4 text-black">
+			<div className="flex flex-col gap-3">
+				<span className="flex gap-1">
+					<b>ID:</b>
+					{session.sessionId}
+				</span>
+				<span className="flex gap-1">
+					<b>Date:</b>
+					{moment(session.date).format("DD/MM/YYYY - HH:mm")}
+				</span>
+				{session.assignment && (
+					<span className="flex flex-col gap-0">
+						<b>Assignment:</b>
+						{session.assignment.name}
+					</span>
+				)}
 			</div>
-			<div className="flex items-center gap-2 w-full">
-				<button
-					onClick={async () => await loadSession(session)}
-					disabled={isLoading}
-					className="bg-mti-green-ultralight w-full hover:bg-mti-green-light rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
-					{!isLoading && "Resume"}
-					{isLoading && (
-						<div className="flex items-center justify-center">
-							<BsArrowRepeat className="animate-spin text-white" size={25} />
-						</div>
-					)}
-				</button>
-				<button
-					onClick={deleteSession}
-					disabled={isLoading}
-					className="bg-mti-red-ultralight w-full hover:bg-mti-red-light rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
-					{!isLoading && "Delete"}
-					{isLoading && (
-						<div className="flex items-center justify-center">
-							<BsArrowRepeat className="animate-spin text-white" size={25} />
-						</div>
-					)}
-				</button>
+			<div className="flex flex-col gap-3">
+				<div className="flex w-full items-center justify-between">
+					<div className="-md:mt-2 grid w-full grid-cols-4 place-items-center justify-center gap-2">
+						{session.selectedModules.sort(sortByModuleName).map((module) => (
+							<div
+								key={module}
+								data-tip={capitalize(module)}
+								className={clsx(
+									"-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
+									module === "reading" && "bg-ielts-reading",
+									module === "listening" && "bg-ielts-listening",
+									module === "writing" && "bg-ielts-writing",
+									module === "speaking" && "bg-ielts-speaking",
+									module === "level" && "bg-ielts-level",
+								)}>
+								{module === "reading" && <BsBook className="h-4 w-4" />}
+								{module === "listening" && <BsHeadphones className="h-4 w-4" />}
+								{module === "writing" && <BsPen className="h-4 w-4" />}
+								{module === "speaking" && <BsMegaphone className="h-4 w-4" />}
+								{module === "level" && <BsClipboard className="h-4 w-4" />}
+							</div>
+						))}
+					</div>
+				</div>
+				<div className="flex items-center gap-2 w-full">
+					<button
+						onClick={async () => await loadSession(session)}
+						disabled={isLoading}
+						className="bg-mti-green-ultralight w-full hover:bg-mti-green-light rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
+						{!isLoading && "Resume"}
+						{isLoading && (
+							<div className="flex items-center justify-center">
+								<BsArrowRepeat className="animate-spin text-white" size={25} />
+							</div>
+						)}
+					</button>
+					<button
+						onClick={deleteSession}
+						disabled={isLoading}
+						className="bg-mti-red-ultralight w-full hover:bg-mti-red-light rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed">
+						{!isLoading && "Delete"}
+						{isLoading && (
+							<div className="flex items-center justify-center">
+								<BsArrowRepeat className="animate-spin text-white" size={25} />
+							</div>
+						)}
+					</button>
+				</div>
 			</div>
 		</div>
 	);

src/components/Medium/StatGridItem.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {BsClock, BsXCircle} from "react-icons/bs";
 import clsx from "clsx";
 import {Stat, User} from "@/interfaces/user";
-import {Module} from "@/interfaces";
+import {Module, Step} from "@/interfaces";
 import ai_usage from "@/utils/ai.detection";
 import {calculateBandScore} from "@/utils/score";
 import moment from "moment";
@@ -77,6 +77,7 @@ interface StatsGridItemProps {
 	assignments: Assignment[];
 	users: User[];
 	training?: boolean;
+	gradingSystem?: Step[];
 	selectedTrainingExams?: string[];
 	maxTrainingExams?: number;
 	setSelectedTrainingExams?: React.Dispatch<React.SetStateAction<string[]>>;
@@ -97,6 +98,7 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 	users,
 	training,
 	selectedTrainingExams,
+	gradingSystem,
 	setSelectedTrainingExams,
 	setExams,
 	setShowSolutions,
@@ -214,10 +216,14 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 				</div>
 				<div className="flex flex-col gap-2">
 					<div className="flex flex-row gap-2">
-						<span className={textColor}>
-							Level{" "}
-							{(aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length).toFixed(1)}
-						</span>
+						{!!assignment && (assignment.released || assignment.released === undefined) && (
+							<span className={textColor}>
+								Level{" "}
+								{(
+									aggregatedLevels.reduce((accumulator, current) => accumulator + current.level, 0) / aggregatedLevels.length
+								).toFixed(1)}
+							</span>
+						)}
 						{shouldRenderPDFIcon() && renderPdfIcon(session, textColor, textColor)}
 					</div>
 					{examNumber === undefined ? (
@@ -242,9 +248,9 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 
 			<div className="w-full flex flex-col gap-1">
 				<div className={clsx("grid grid-cols-4 gap-2 place-items-start w-full -md:mt-2", examNumber !== undefined && "pr-10")}>
-					{aggregatedLevels.map(({module, level}) => (
-						<ModuleBadge key={module} module={module} level={level} />
-					))}
+					{!!assignment &&
+						(assignment.released || assignment.released === undefined) &&
+						aggregatedLevels.map(({module, level}) => <ModuleBadge key={module} module={module} level={level} />)}
 				</div>
 
 				{assignment && (
@@ -271,7 +277,11 @@ const StatsGridItem: React.FC<StatsGridItemProps> = ({
 						selectedTrainingExams.some((exam) => exam.includes(timestamp)) &&
 						"border-2 border-slate-600",
 				)}
-				onClick={examNumber === undefined ? selectExam : undefined}
+				onClick={() => {
+					if (!!assignment && !assignment.released) return;
+					if (examNumber === undefined) return selectExam();
+					return;
+				}}
 				style={{
 					...(width !== undefined && {width}),
 					...(height !== undefined && {height}),

src/components/Modal.tsx

@@ -7,10 +7,11 @@ interface Props {
 	onClose: () => void;
 	title?: string;
 	className?: string;
+	titleClassName?: string;
 	children?: ReactElement;
 }
 
-export default function Modal({isOpen, title, className, onClose, children}: Props) {
+export default function Modal({isOpen, title, className, titleClassName, onClose, children}: Props) {
 	return (
 		<Transition appear show={isOpen} as={Fragment}>
 			<Dialog as="div" className="relative z-[200]" onClose={onClose}>
@@ -41,7 +42,7 @@ export default function Modal({isOpen, title, className, onClose, children}: Pro
 									className,
 								)}>
 								{title && (
-									<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+									<Dialog.Title as="h3" className={clsx(titleClassName ? titleClassName : "text-lg font-medium leading-6 text-gray-900")}>
 										{title}
 									</Dialog.Title>
 								)}

src/components/ModuleBadge.tsx

@@ -1,24 +1,34 @@
+import {Step} from "@/interfaces";
+import {getGradingLabel, getLevelLabel} from "@/utils/score";
 import clsx from "clsx";
-import { BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen } from "react-icons/bs";
+import {BsBook, BsClipboard, BsHeadphones, BsMegaphone, BsPen} from "react-icons/bs";
 
-const ModuleBadge: React.FC<{ module: string; level?: number }> = ({ module, level }) => (
-    <div
-        className={clsx(
-            "flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
-            module === "reading" && "bg-ielts-reading",
-            module === "listening" && "bg-ielts-listening",
-            module === "writing" && "bg-ielts-writing",
-            module === "speaking" && "bg-ielts-speaking",
-            module === "level" && "bg-ielts-level",
-        )}>
-        {module === "reading" && <BsBook className="w-4 h-4" />}
-        {module === "listening" && <BsHeadphones className="w-4 h-4" />}
-        {module === "writing" && <BsPen className="w-4 h-4" />}
-        {module === "speaking" && <BsMegaphone className="w-4 h-4" />}
-        {module === "level" && <BsClipboard className="w-4 h-4" />}
-        {/* do not switch to level && it will convert the 0.0 to 0*/}
-        {level !== undefined && (<span className="text-sm">{level.toFixed(1)}</span>)}
-    </div>
+const ModuleBadge: React.FC<{module: string; level?: number; gradingSystem?: Step[]; className?: string}> = ({
+	module,
+	level,
+	gradingSystem,
+	className,
+}) => (
+	<div
+		className={clsx(
+			"flex gap-2 justify-center items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl",
+			module === "reading" && "bg-ielts-reading",
+			module === "listening" && "bg-ielts-listening",
+			module === "writing" && "bg-ielts-writing",
+			module === "speaking" && "bg-ielts-speaking",
+			module === "level" && "bg-ielts-level",
+			className,
+		)}>
+		{module === "reading" && <BsBook className="w-4 h-4" />}
+		{module === "listening" && <BsHeadphones className="w-4 h-4" />}
+		{module === "writing" && <BsPen className="w-4 h-4" />}
+		{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
+		{module === "level" && <BsClipboard className="w-4 h-4" />}
+		{/* do not switch to level && it will convert the 0.0 to 0*/}
+		{level !== undefined && (
+			<span className="text-sm">{module === "level" && gradingSystem ? getGradingLabel(level, gradingSystem) : level.toFixed(1)}</span>
+		)}
+	</div>
 );
 
-export default ModuleBadge;
+export default ModuleBadge;

src/components/Navbar.tsx

@@ -145,8 +145,10 @@ export default function Navbar({user, path, navDisabled = false, focusMode = fal
 					<Link href={disableNavigation ? "" : "/profile"} className="-md:hidden flex items-center justify-end gap-6">
 						<img src={user.profilePicture} alt={user.name} className="h-10 w-10 rounded-full object-cover" />
 						<span className="-md:hidden text-right">
-							{user.type === "corporate" ? `${user.corporateInformation?.companyInformation.name} |` : ""} {user.name} |{" "}
-							{USER_TYPE_LABELS[user.type]}
+							{(user.type === "corporate" || user.type === "mastercorporate") && !!user.corporateInformation?.companyInformation?.name
+								? `${user.corporateInformation?.companyInformation.name} |`
+								: ""}{" "}
+							{user.name} | {USER_TYPE_LABELS[user.type]}
 							{user.type === "corporate" &&
 								!!user.demographicInformation?.position &&
 								` | ${user.demographicInformation?.position || "N/A"}`}

src/components/Solutions/FillBlanks.tsx

@@ -1,27 +1,17 @@
-import { FillBlanksExercise, FillBlanksMCOption, ShuffleMap } from "@/interfaces/exam";
+import {FillBlanksExercise, FillBlanksMCOption, ShuffleMap} from "@/interfaces/exam";
 import clsx from "clsx";
 import reactStringReplace from "react-string-replace";
-import { CommonProps } from ".";
-import { Fragment } from "react";
+import {CommonProps} from ".";
+import {Fragment} from "react";
 import Button from "../Low/Button";
 import useExamStore from "@/stores/examStore";
 
-export default function FillBlanksSolutions({
-	id,
-	type,
-	prompt,
-	solutions,
-	words,
-	text,
-	onNext,
-	onBack,
-}: FillBlanksExercise & CommonProps) {
+export default function FillBlanksSolutions({id, type, prompt, solutions, words, text, onNext, onBack}: FillBlanksExercise & CommonProps) {
 	const storeUserSolutions = useExamStore((state) => state.userSolutions);
+	const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state);
+
+	const correctUserSolutions = storeUserSolutions.find((solution) => solution.exercise === id)?.solutions;
 
-	const correctUserSolutions = storeUserSolutions.find(
-		(solution) => solution.exercise === id
-	)?.solutions;
-	
 	const shuffles = useExamStore((state) => state.shuffles);
 
 	const calculateScore = () => {
@@ -33,7 +23,7 @@ export default function FillBlanksSolutions({
 			const option = words.find((w) => {
 				if (typeof w === "string") {
 					return w.toLowerCase() === x.solution.toLowerCase();
-				} else if ('letter' in w) {
+				} else if ("letter" in w) {
 					return w.letter.toLowerCase() === x.solution.toLowerCase();
 				} else {
 					return w.id.toString() === x.id.toString();
@@ -43,23 +33,20 @@ export default function FillBlanksSolutions({
 
 			if (typeof option === "string") {
 				return solution.toLowerCase() === option.toLowerCase();
-			} else if ('letter' in option) {
+			} else if ("letter" in option) {
 				return solution.toLowerCase() === option.word.toLowerCase();
-			} else if ('options' in option) {
+			} else if ("options" in option) {
 				return option.options[solution as keyof typeof option.options] == x.solution;
 			}
 			return false;
 		}).length;
 		const missing = total - correctUserSolutions!.filter((x) => solutions.find((y) => x.id.toString() === y.id.toString())).length;
-		return { total, correct, missing };
+		return {total, correct, missing};
 	};
 
-
 	const typeCheckWordsMC = (words: any[]): words is FillBlanksMCOption[] => {
-		return Array.isArray(words) && words.every(
-			word => word && typeof word === 'object' && 'id' in word && 'options' in word
-		);
-	}
+		return Array.isArray(words) && words.every((word) => word && typeof word === "object" && "id" in word && "options" in word);
+	};
 
 	const renderLines = (line: string) => {
 		return (
@@ -67,17 +54,17 @@ export default function FillBlanksSolutions({
 				{reactStringReplace(line, /({{\d+}})/g, (match) => {
 					const questionId = match.replaceAll(/[\{\}]/g, "");
 					const userSolution = correctUserSolutions!.find((x) => x.id.toString() === questionId.toString());
-					const answerSolution = solutions.find(sol => sol.id.toString() === questionId.toString())!.solution;
+					const answerSolution = solutions.find((sol) => sol.id.toString() === questionId.toString())!.solution;
 					const questionShuffleMap = shuffles.find((x) => x.exerciseID == id)?.shuffles.find((y) => y.questionID == questionId);
-					const newAnswerSolution = questionShuffleMap ? questionShuffleMap.map[answerSolution].toLowerCase() : answerSolution.toLowerCase();
+					const newAnswerSolution = questionShuffleMap
+						? questionShuffleMap.map[answerSolution].toLowerCase()
+						: answerSolution.toLowerCase();
 
 					if (!userSolution) {
 						let answerText;
 						if (typeCheckWordsMC(words)) {
 							const options = words.find((x) => x.id.toString() === questionId.toString());
-							const correctKey = Object.keys(options!.options).find(key =>
-								key.toLowerCase() === newAnswerSolution
-							);
+							const correctKey = Object.keys(options!.options).find((key) => key.toLowerCase() === newAnswerSolution);
 							answerText = options!.options[correctKey as keyof typeof options];
 						} else {
 							answerText = answerSolution;
@@ -96,37 +83,34 @@ export default function FillBlanksSolutions({
 					const userSolutionWord = words.find((w) =>
 						typeof w === "string"
 							? w.toLowerCase() === userSolution.solution.toLowerCase()
-							: 'letter' in w
-								? w.letter.toLowerCase() === userSolution.solution.toLowerCase()
-								: 'options' in w
-									? w.id === userSolution.questionId
-									: false
+							: "letter" in w
+							? w.letter.toLowerCase() === userSolution.solution.toLowerCase()
+							: "options" in w
+							? w.id === userSolution.questionId
+							: false,
 					);
 
 					const userSolutionText =
 						typeof userSolutionWord === "string"
 							? userSolutionWord
-							: userSolutionWord && 'letter' in userSolutionWord
-								? userSolutionWord.word
-								: userSolutionWord && 'options' in userSolutionWord
-									? userSolution.solution
-									: userSolution.solution;
+							: userSolutionWord && "letter" in userSolutionWord
+							? userSolutionWord.word
+							: userSolutionWord && "options" in userSolutionWord
+							? userSolution.solution
+							: userSolution.solution;
 
 					let correct;
 					let solutionText;
 					if (typeCheckWordsMC(words)) {
 						const options = words.find((x) => x.id.toString() === questionId.toString());
 						if (options) {
-							const correctKey = Object.keys(options.options).find(key =>
-								key.toLowerCase() === newAnswerSolution
-							);
+							const correctKey = Object.keys(options.options).find((key) => key.toLowerCase() === newAnswerSolution);
 							correct = userSolution.solution == options.options[correctKey as keyof typeof options.options];
 							solutionText = options.options[correctKey as keyof typeof options.options] || answerSolution;
 						} else {
 							correct = false;
 							solutionText = answerSolution;
 						}
-
 					} else {
 						correct = userSolutionText === answerSolution;
 						solutionText = answerSolution;
@@ -169,7 +153,25 @@ export default function FillBlanksSolutions({
 	};
 
 	return (
-		<>
+		<div className="flex flex-col gap-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type})}
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
 			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="bg-mti-gray-smoke rounded-xl px-5 py-6">
 					{correctUserSolutions &&
@@ -200,18 +202,19 @@ export default function FillBlanksSolutions({
 				<Button
 					color="purple"
 					variant="outline"
-					onClick={() => onBack({ exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type })}
-					className="max-w-[200px] w-full">
+					onClick={() => onBack({exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type})}
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
 					Back
 				</Button>
 
 				<Button
 					color="purple"
-					onClick={() => onNext({ exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type })}
+					onClick={() => onNext({exercise: id, solutions: correctUserSolutions!, score: calculateScore(), type})}
 					className="max-w-[200px] self-end w-full">
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Solutions/InteractiveSpeaking.tsx

@@ -1,17 +1,17 @@
 /* eslint-disable @next/next/no-img-element */
-import { InteractiveSpeakingExercise } from "@/interfaces/exam";
-import { CommonProps } from ".";
-import { useEffect, useState } from "react";
+import {InteractiveSpeakingExercise} from "@/interfaces/exam";
+import {CommonProps} from ".";
+import {useEffect, useState} from "react";
 import Button from "../Low/Button";
 import dynamic from "next/dynamic";
 import axios from "axios";
-import { speakingReverseMarking } from "@/utils/score";
-import { Tab } from "@headlessui/react";
+import {speakingReverseMarking} from "@/utils/score";
+import {Tab} from "@headlessui/react";
 import clsx from "clsx";
 import Modal from "../Modal";
-import ReactDiffViewer, { DiffMethod } from "react-diff-viewer";
+import ReactDiffViewer, {DiffMethod} from "react-diff-viewer";
 
-const Waveform = dynamic(() => import("../Waveform"), { ssr: false });
+const Waveform = dynamic(() => import("../Waveform"), {ssr: false});
 
 export default function InteractiveSpeaking({
 	id,
@@ -26,20 +26,24 @@ export default function InteractiveSpeaking({
 	const [solutionsURL, setSolutionsURL] = useState<string[]>([]);
 	const [diffNumber, setDiffNumber] = useState(0);
 
-	const tooltips: { [key: string]: string } = {
-		"Grammatical Range and Accuracy": "Assesses the variety and correctness of grammatical structures used. A higher score indicates a wide range of complex and accurate grammar; a lower score suggests the need for more basic grammar practice.",
-		"Fluency and Coherence": "Evaluates smoothness and logical flow of speech. A higher score means natural, effortless speech and clear idea progression; a lower score indicates frequent pauses and difficulty in maintaining coherence.",
-		"Pronunciation": "Measures clarity and accuracy of spoken words. A higher score reflects clear, well-articulated speech with correct intonation; a lower score shows challenges in being understood.",
-		"Lexical Resource": "Looks at the range and appropriateness of vocabulary. A higher score demonstrates a rich and precise vocabulary; a lower score suggests limited vocabulary usage and appropriateness.",
+	const tooltips: {[key: string]: string} = {
+		"Grammatical Range and Accuracy":
+			"Assesses the variety and correctness of grammatical structures used. A higher score indicates a wide range of complex and accurate grammar; a lower score suggests the need for more basic grammar practice.",
+		"Fluency and Coherence":
+			"Evaluates smoothness and logical flow of speech. A higher score means natural, effortless speech and clear idea progression; a lower score indicates frequent pauses and difficulty in maintaining coherence.",
+		Pronunciation:
+			"Measures clarity and accuracy of spoken words. A higher score reflects clear, well-articulated speech with correct intonation; a lower score shows challenges in being understood.",
+		"Lexical Resource":
+			"Looks at the range and appropriateness of vocabulary. A higher score demonstrates a rich and precise vocabulary; a lower score suggests limited vocabulary usage and appropriateness.",
 	};
 
 	useEffect(() => {
 		if (userSolutions && userSolutions.length > 0 && userSolutions[0].solution) {
-			Promise.all(userSolutions[0].solution.map((x) => axios.post(`/api/speaking`, { path: x.answer }, { responseType: "arraybuffer" }))).then(
+			Promise.all(userSolutions[0].solution.map((x) => axios.post(`/api/speaking`, {path: x.answer}, {responseType: "arraybuffer"}))).then(
 				(values) => {
 					setSolutionsURL(
-						values.map(({ data }) => {
-							const blob = new Blob([data], { type: "audio/wav" });
+						values.map(({data}) => {
+							const blob = new Blob([data], {type: "audio/wav"});
 							const url = URL.createObjectURL(blob);
 
 							return url;
@@ -51,7 +55,41 @@ export default function InteractiveSpeaking({
 	}, [userSolutions]);
 
 	return (
-		<>
+		<div className="flex flex-col gap-4 mt-4 w-full">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() =>
+						onBack({
+							exercise: id,
+							solutions: userSolutions,
+							score: {total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
+							type,
+						})
+					}
+					className="max-w-[200px] self-end w-full">
+					Back
+				</Button>
+				<Button
+					color="purple"
+					onClick={() =>
+						onNext({
+							exercise: id,
+							solutions: userSolutions,
+							score: {
+								total: 100,
+								missing: 0,
+								correct: userSolutions[0]?.evaluation ? speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0 : 0,
+							},
+							type,
+						})
+					}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
 			<Modal title={`Correction (Prompt ${diffNumber})`} isOpen={diffNumber !== 0} onClose={() => setDiffNumber(0)}>
 				<>
 					{userSolutions &&
@@ -71,13 +109,13 @@ export default function InteractiveSpeaking({
 											fontFamily: '"Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif',
 											padding: "32px 28px",
 										},
-										marker: { display: "none" },
-										diffRemoved: { padding: "32px 28px" },
-										diffAdded: { padding: "32px 28px" },
+										marker: {display: "none"},
+										diffRemoved: {padding: "32px 28px"},
+										diffAdded: {padding: "32px 28px"},
 
-										wordRemoved: { padding: "0px", display: "initial" },
-										wordAdded: { padding: "0px", display: "initial" },
-										wordDiff: { padding: "0px", display: "initial" },
+										wordRemoved: {padding: "0px", display: "initial"},
+										wordAdded: {padding: "0px", display: "initial"},
+										wordDiff: {padding: "0px", display: "initial"},
 									}}
 									oldValue={userSolutions[0].evaluation[`transcript_${diffNumber}`]?.replaceAll("\\n", "\n")}
 									newValue={userSolutions[0].evaluation[`fixed_text_${diffNumber}`]?.replaceAll("\\n", "\n")}
@@ -122,13 +160,13 @@ export default function InteractiveSpeaking({
 								{userSolutions &&
 									userSolutions.length > 0 &&
 									userSolutions[0].evaluation &&
-									userSolutions[0].evaluation[`transcript_${(index + 1)}`] &&
-									userSolutions[0].evaluation[`fixed_text_${(index + 1)}`] && (
+									userSolutions[0].evaluation[`transcript_${index + 1}`] &&
+									userSolutions[0].evaluation[`fixed_text_${index + 1}`] && (
 										<Button
 											className="w-full max-w-[180px] !py-2 self-center"
 											color="pink"
 											variant="outline"
-											onClick={() => setDiffNumber((index + 1))}>
+											onClick={() => setDiffNumber(index + 1)}>
 											View Correction
 										</Button>
 									)}
@@ -144,20 +182,24 @@ export default function InteractiveSpeaking({
 									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
 
 									return (
-										<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 tooltip tooltip-bottom",
-											index === 0 && "tooltip-right"
-										)} key={key} data-tip={tooltips[key] || "No additional information available"}>
+										<div
+											className={clsx(
+												"bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 tooltip tooltip-bottom",
+												index === 0 && "tooltip-right",
+											)}
+											key={key}
+											data-tip={tooltips[key] || "No additional information available"}>
 											{key}: Level {grade}
 										</div>
 									);
 								})}
 							</div>
 							{userSolutions[0].evaluation &&
-								Object.keys(userSolutions[0].evaluation).filter((x) => x.startsWith("perfect_answer")).length > 0 ? (
+							Object.keys(userSolutions[0].evaluation).filter((x) => x.startsWith("perfect_answer")).length > 0 ? (
 								<Tab.Group>
 									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-speaking/20 p-1">
 										<Tab
-											className={({ selected }) =>
+											className={({selected}) =>
 												clsx(
 													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
 													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
@@ -168,7 +210,7 @@ export default function InteractiveSpeaking({
 											General Feedback
 										</Tab>
 										<Tab
-											className={({ selected }) =>
+											className={({selected}) =>
 												clsx(
 													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
 													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
@@ -178,20 +220,26 @@ export default function InteractiveSpeaking({
 											}>
 											Evaluation
 										</Tab>
-										{Object.keys(userSolutions[0].evaluation).filter((x) => x.startsWith("perfect_answer")).map((key, index) => (
-											<Tab
-												key={key}
-												className={({ selected }) =>
-													clsx(
-														"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
-														"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
-														"transition duration-300 ease-in-out",
-														selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
-													)
-												}>
-												Recommended Answer<br />(Prompt {index + 1})
-											</Tab>
-										))}
+										{Object.keys(userSolutions[0].evaluation)
+											.filter((x) => x.startsWith("perfect_answer"))
+											.map((key, index) => (
+												<Tab
+													key={key}
+													className={({selected}) =>
+														clsx(
+															"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
+															"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
+															"transition duration-300 ease-in-out",
+															selected
+																? "bg-white shadow"
+																: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
+														)
+													}>
+													Recommended Answer
+													<br />
+													(Prompt {index + 1})
+												</Tab>
+											))}
 									</Tab.List>
 									<Tab.Panels>
 										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
@@ -202,10 +250,16 @@ export default function InteractiveSpeaking({
 
 													return (
 														<div key={key} className="flex flex-col gap-2">
-															<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 w-fit")} key={key}>
+															<div
+																className={clsx(
+																	"bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 w-fit",
+																)}
+																key={key}>
 																{key}: Level {grade}
 															</div>
-															{typeof taskResponse !== "number" && <span className="px-2 py-2">{taskResponse.comment}</span>}
+															{typeof taskResponse !== "number" && (
+																<span className="px-2 py-2">{taskResponse.comment}</span>
+															)}
 														</div>
 													);
 												})}
@@ -214,13 +268,18 @@ export default function InteractiveSpeaking({
 										<Tab.Panel className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
 											<span className="w-full h-full min-h-fit cursor-text">{userSolutions[0].evaluation!.comment}</span>
 										</Tab.Panel>
-										{Object.keys(userSolutions[0].evaluation).filter((x) => x.startsWith("perfect_answer")).map((key, index) => (
-											<Tab.Panel key={key} className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
-												<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
-													{userSolutions[0].evaluation![`perfect_answer_${(index + 1)}`].answer.replaceAll(/\s{2,}/g, "\n\n")}
-												</span>
-											</Tab.Panel>
-										))}
+										{Object.keys(userSolutions[0].evaluation)
+											.filter((x) => x.startsWith("perfect_answer"))
+											.map((key, index) => (
+												<Tab.Panel key={key} className="w-full bg-ielts-speaking/10 h-fit rounded-xl p-6 flex flex-col gap-4">
+													<span className="w-full h-full min-h-fit cursor-text whitespace-pre-wrap">
+														{userSolutions[0].evaluation![`perfect_answer_${index + 1}`].answer.replaceAll(
+															/\s{2,}/g,
+															"\n\n",
+														)}
+													</span>
+												</Tab.Panel>
+											))}
 									</Tab.Panels>
 								</Tab.Group>
 							) : (
@@ -241,7 +300,7 @@ export default function InteractiveSpeaking({
 						onBack({
 							exercise: id,
 							solutions: userSolutions,
-							score: { total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0 },
+							score: {total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
 							type,
 						})
 					}
@@ -266,6 +325,6 @@ export default function InteractiveSpeaking({
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Solutions/MatchSentences.tsx

@@ -8,6 +8,7 @@ import Icon from "@mdi/react";
 import {Fragment} from "react";
 import Button from "../Low/Button";
 import Xarrow from "react-xarrows";
+import useExamStore from "@/stores/examStore";
 
 function QuestionSolutionArea({
 	question,
@@ -61,6 +62,8 @@ export default function MatchSentencesSolutions({
 	onNext,
 	onBack,
 }: MatchSentencesExercise & CommonProps) {
+	const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state);
+
 	const calculateScore = () => {
 		const total = sentences.length;
 		const correct = userSolutions.filter(
@@ -72,7 +75,25 @@ export default function MatchSentencesSolutions({
 	};
 
 	return (
-		<>
+		<div className="flex flex-col gap-4 mt-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
 			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
@@ -112,7 +133,8 @@ export default function MatchSentencesSolutions({
 					color="purple"
 					variant="outline"
 					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] w-full">
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
 					Back
 				</Button>
 
@@ -123,6 +145,6 @@ export default function MatchSentencesSolutions({
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Solutions/MultipleChoice.tsx

@@ -111,10 +111,10 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 	};
 
 	const next = () => {
-		if (questionIndex === questions.length - 1) {
+		if (questionIndex + 1 >= questions.length - 1) {
 			onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type});
 		} else {
-			setQuestionIndex(questionIndex + 1);
+			setQuestionIndex(questionIndex + 2);
 		}
 	};
 
@@ -122,22 +122,49 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 		if (questionIndex === 0) {
 			onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type});
 		} else {
-			setQuestionIndex(questionIndex - 1);
+			setQuestionIndex(questionIndex - 2);
 		}
 	};
 
 	return (
-		<>
-			<div className="flex flex-col gap-4 w-full h-full mb-20">
-				<div className="flex flex-col gap-2 mt-4 h-full bg-mti-gray-smoke rounded-xl px-16 py-8">
-					{/*<span className="text-xl font-semibold">{prompt}</span>*/}
-					{userSolutions && questionIndex < questions.length && (
-						<Question
-							{...questions[questionIndex]}
-							userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
-						/>
+		<div className="flex flex-col gap-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={back}
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
+					Back
+				</Button>
+
+				<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
+			<div className="flex flex-col gap-4 w-full h-full mb-20 mt-4">
+				<div className="flex flex-col gap-4 mt-2">
+					<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
+						{/*<span className="text-xl font-semibold">{prompt}</span>*/}
+						{userSolutions && questionIndex < questions.length && (
+							<Question
+								{...questions[questionIndex]}
+								userSolution={userSolutions.find((x) => questions[questionIndex].id === x.question)?.option}
+							/>
+						)}
+					</div>
+
+					{userSolutions && questionIndex + 1 < questions.length && (
+						<div className="flex flex-col gap-8 h-fit w-full bg-mti-gray-smoke rounded-xl px-16 py-8">
+							<Question
+								{...questions[questionIndex + 1]}
+								userSolution={userSolutions.find((x) => questions[questionIndex + 1].id === x.question)?.option}
+							/>
+						</div>
 					)}
 				</div>
+
 				<div className="flex gap-4 items-center">
 					<div className="flex gap-2 items-center">
 						<div className="w-4 h-4 rounded-full bg-mti-purple" />
@@ -160,14 +187,7 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 					variant="outline"
 					onClick={back}
 					className="max-w-[200px] w-full"
-					disabled={
-						exam &&
-						typeof partIndex !== "undefined" &&
-						exam.module === "level" &&
-						typeof exam.parts[0].intro === "string" &&
-						questionIndex === 0 &&
-						partIndex === 0
-					}>
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
 					Back
 				</Button>
 
@@ -175,6 +195,6 @@ export default function MultipleChoice({id, type, prompt, questions, userSolutio
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Solutions/Speaking.tsx

@@ -1,20 +1,20 @@
 /* eslint-disable @next/next/no-img-element */
-import { SpeakingExercise } from "@/interfaces/exam";
-import { CommonProps } from ".";
-import { Fragment, useEffect, useState } from "react";
+import {SpeakingExercise} from "@/interfaces/exam";
+import {CommonProps} from ".";
+import {Fragment, useEffect, useState} from "react";
 import Button from "../Low/Button";
 import dynamic from "next/dynamic";
 import axios from "axios";
-import { speakingReverseMarking } from "@/utils/score";
-import { Tab } from "@headlessui/react";
+import {speakingReverseMarking} from "@/utils/score";
+import {Tab} from "@headlessui/react";
 import clsx from "clsx";
 import Modal from "../Modal";
-import { BsQuestionCircleFill } from "react-icons/bs";
-import ReactDiffViewer, { DiffMethod } from "react-diff-viewer";
+import {BsQuestionCircleFill} from "react-icons/bs";
+import ReactDiffViewer, {DiffMethod} from "react-diff-viewer";
 
-const Waveform = dynamic(() => import("../Waveform"), { ssr: false });
+const Waveform = dynamic(() => import("../Waveform"), {ssr: false});
 
-export default function Speaking({ id, type, title, video_url, text, prompts, userSolutions, onNext, onBack }: SpeakingExercise & CommonProps) {
+export default function Speaking({id, type, title, video_url, text, prompts, userSolutions, onNext, onBack}: SpeakingExercise & CommonProps) {
 	const [solutionURL, setSolutionURL] = useState<string>();
 	const [showDiff, setShowDiff] = useState(false);
 
@@ -23,8 +23,8 @@ export default function Speaking({ id, type, title, video_url, text, prompts, us
 			const solution = userSolutions[0].solution;
 
 			if (solution.startsWith("https://")) return setSolutionURL(solution);
-			axios.post(`/api/speaking`, { path: userSolutions[0].solution }, { responseType: "arraybuffer" }).then(({ data }) => {
-				const blob = new Blob([data], { type: "audio/wav" });
+			axios.post(`/api/speaking`, {path: userSolutions[0].solution}, {responseType: "arraybuffer"}).then(({data}) => {
+				const blob = new Blob([data], {type: "audio/wav"});
 				const url = URL.createObjectURL(blob);
 
 				setSolutionURL(url);
@@ -32,15 +32,53 @@ export default function Speaking({ id, type, title, video_url, text, prompts, us
 		}
 	}, [userSolutions]);
 
-	const tooltips: { [key: string]: string } = {
-		"Grammatical Range and Accuracy": "Assesses the variety and correctness of grammatical structures used. A higher score indicates a wide range of complex and accurate grammar; a lower score suggests the need for more basic grammar practice.",
-		"Fluency and Coherence": "Evaluates smoothness and logical flow of speech. A higher score means natural, effortless speech and clear idea progression; a lower score indicates frequent pauses and difficulty in maintaining coherence.",
-		"Pronunciation": "Measures clarity and accuracy of spoken words. A higher score reflects clear, well-articulated speech with correct intonation; a lower score shows challenges in being understood.",
-		"Lexical Resource": "Looks at the range and appropriateness of vocabulary. A higher score demonstrates a rich and precise vocabulary; a lower score suggests limited vocabulary usage and appropriateness.",
+	const tooltips: {[key: string]: string} = {
+		"Grammatical Range and Accuracy":
+			"Assesses the variety and correctness of grammatical structures used. A higher score indicates a wide range of complex and accurate grammar; a lower score suggests the need for more basic grammar practice.",
+		"Fluency and Coherence":
+			"Evaluates smoothness and logical flow of speech. A higher score means natural, effortless speech and clear idea progression; a lower score indicates frequent pauses and difficulty in maintaining coherence.",
+		Pronunciation:
+			"Measures clarity and accuracy of spoken words. A higher score reflects clear, well-articulated speech with correct intonation; a lower score shows challenges in being understood.",
+		"Lexical Resource":
+			"Looks at the range and appropriateness of vocabulary. A higher score demonstrates a rich and precise vocabulary; a lower score suggests limited vocabulary usage and appropriateness.",
 	};
 
 	return (
-		<>
+		<div className="flex flex-col gap-4 mt-4 w-full">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() =>
+						onBack({
+							exercise: id,
+							solutions: userSolutions,
+							score: {total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
+							type,
+						})
+					}
+					className="max-w-[200px] self-end w-full">
+					Back
+				</Button>
+				<Button
+					color="purple"
+					onClick={() =>
+						onNext({
+							exercise: id,
+							solutions: userSolutions,
+							score: {
+								total: 100,
+								missing: 0,
+								correct: userSolutions[0]?.evaluation ? speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0 : 0,
+							},
+							type,
+						})
+					}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
 			<Modal title="Correction" isOpen={showDiff} onClose={() => setShowDiff(false)}>
 				<>
 					{userSolutions &&
@@ -58,13 +96,13 @@ export default function Speaking({ id, type, title, video_url, text, prompts, us
 											fontFamily: '"Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif',
 											padding: "32px 28px",
 										},
-										marker: { display: "none" },
-										diffRemoved: { padding: "32px 28px" },
-										diffAdded: { padding: "32px 28px" },
+										marker: {display: "none"},
+										diffRemoved: {padding: "32px 28px"},
+										diffAdded: {padding: "32px 28px"},
 
-										wordRemoved: { padding: "0px", display: "initial" },
-										wordAdded: { padding: "0px", display: "initial" },
-										wordDiff: { padding: "0px", display: "initial" },
+										wordRemoved: {padding: "0px", display: "initial"},
+										wordAdded: {padding: "0px", display: "initial"},
+										wordDiff: {padding: "0px", display: "initial"},
 									}}
 									oldValue={userSolutions[0].evaluation.transcript_1.replaceAll("\\n", "\n")}
 									newValue={userSolutions[0].evaluation.fixed_text_1.replaceAll("\\n", "\n")}
@@ -138,20 +176,24 @@ export default function Speaking({ id, type, title, video_url, text, prompts, us
 									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
 
 									return (
-										<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 tooltip tooltip-bottom",
-											index === 0 && "tooltip-right"
-										)} key={key} data-tip={tooltips[key] || "No additional information available"}>
+										<div
+											className={clsx(
+												"bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 tooltip tooltip-bottom",
+												index === 0 && "tooltip-right",
+											)}
+											key={key}
+											data-tip={tooltips[key] || "No additional information available"}>
 											{key}: Level {grade}
 										</div>
 									);
 								})}
 							</div>
 							{userSolutions[0].evaluation &&
-								(userSolutions[0].evaluation.perfect_answer || userSolutions[0].evaluation.perfect_answer_1) ? (
+							(userSolutions[0].evaluation.perfect_answer || userSolutions[0].evaluation.perfect_answer_1) ? (
 								<Tab.Group>
 									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-speaking/20 p-1">
 										<Tab
-											className={({ selected }) =>
+											className={({selected}) =>
 												clsx(
 													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
 													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
@@ -162,7 +204,7 @@ export default function Speaking({ id, type, title, video_url, text, prompts, us
 											General Feedback
 										</Tab>
 										<Tab
-											className={({ selected }) =>
+											className={({selected}) =>
 												clsx(
 													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
 													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
@@ -173,7 +215,7 @@ export default function Speaking({ id, type, title, video_url, text, prompts, us
 											Evaluation
 										</Tab>
 										<Tab
-											className={({ selected }) =>
+											className={({selected}) =>
 												clsx(
 													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/80",
 													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
@@ -194,10 +236,16 @@ export default function Speaking({ id, type, title, video_url, text, prompts, us
 
 													return (
 														<div key={key} className="flex flex-col gap-2">
-															<div className={clsx("bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 w-fit")} key={key}>
+															<div
+																className={clsx(
+																	"bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2 w-fit",
+																)}
+																key={key}>
 																{key}: Level {grade}
 															</div>
-															{typeof taskResponse !== "number" && <span className="px-2 py-2">{taskResponse.comment}</span>}
+															{typeof taskResponse !== "number" && (
+																<span className="px-2 py-2">{taskResponse.comment}</span>
+															)}
 														</div>
 													);
 												})}
@@ -236,7 +284,7 @@ export default function Speaking({ id, type, title, video_url, text, prompts, us
 						onBack({
 							exercise: id,
 							solutions: userSolutions,
-							score: { total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0 },
+							score: {total: 100, missing: 0, correct: speakingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
 							type,
 						})
 					}
@@ -261,6 +309,6 @@ export default function Speaking({ id, type, title, video_url, text, prompts, us
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Solutions/TrueFalse.tsx

@@ -4,10 +4,13 @@ import reactStringReplace from "react-string-replace";
 import {CommonProps} from ".";
 import {Fragment} from "react";
 import Button from "../Low/Button";
+import useExamStore from "@/stores/examStore";
 
 type Solution = "true" | "false" | "not_given";
 
 export default function TrueFalseSolution({prompt, type, id, questions, userSolutions, onNext, onBack}: TrueFalseExercise & CommonProps) {
+	const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state);
+
 	const calculateScore = () => {
 		const total = questions.length || 0;
 		const correct = userSolutions.filter(
@@ -37,7 +40,25 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 	};
 
 	return (
-		<>
+		<div className="flex flex-col gap-4 mt-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
 			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
@@ -121,7 +142,8 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 					color="purple"
 					variant="outline"
 					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] w-full">
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
 					Back
 				</Button>
 
@@ -132,6 +154,6 @@ export default function TrueFalseSolution({prompt, type, id, questions, userSolu
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Solutions/WriteBlanks.tsx

@@ -8,6 +8,7 @@ import reactStringReplace from "react-string-replace";
 import {CommonProps} from ".";
 import {toast} from "react-toastify";
 import Button from "../Low/Button";
+import useExamStore from "@/stores/examStore";
 
 function Blank({
 	id,
@@ -71,6 +72,8 @@ export default function WriteBlanksSolutions({
 	onNext,
 	onBack,
 }: WriteBlanksExercise & CommonProps) {
+	const {questionIndex, setQuestionIndex, partIndex, exam} = useExamStore((state) => state);
+
 	const calculateScore = () => {
 		const total = text.match(/({{\d+}})/g)?.length || 0;
 		const correct = userSolutions.filter(
@@ -102,7 +105,25 @@ export default function WriteBlanksSolutions({
 	};
 
 	return (
-		<>
+		<div className="flex flex-col gap-4">
+			<div className="flex justify-between w-full gap-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
+					Back
+				</Button>
+
+				<Button
+					color="purple"
+					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
 			<div className="flex flex-col gap-4 mt-4 h-full w-full mb-20">
 				<span className="text-sm w-full leading-6">
 					{prompt.split("\\n").map((line, index) => (
@@ -142,7 +163,8 @@ export default function WriteBlanksSolutions({
 					color="purple"
 					variant="outline"
 					onClick={() => onBack({exercise: id, solutions: userSolutions, score: calculateScore(), type})}
-					className="max-w-[200px] w-full">
+					className="max-w-[200px] w-full"
+					disabled={exam && typeof partIndex !== "undefined" && exam.module === "level" && questionIndex === 0 && partIndex === 0}>
 					Back
 				</Button>
 
@@ -153,6 +175,6 @@ export default function WriteBlanksSolutions({
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/Solutions/Writing.tsx

@@ -1,32 +1,70 @@
 /* eslint-disable @next/next/no-img-element */
-import { WritingExercise } from "@/interfaces/exam";
-import { CommonProps } from ".";
-import { Fragment, useEffect, useState } from "react";
+import {WritingExercise} from "@/interfaces/exam";
+import {CommonProps} from ".";
+import {Fragment, useEffect, useState} from "react";
 import Button from "../Low/Button";
-import { Dialog, Tab, Transition } from "@headlessui/react";
-import { writingReverseMarking } from "@/utils/score";
+import {Dialog, Tab, Transition} from "@headlessui/react";
+import {writingReverseMarking} from "@/utils/score";
 import clsx from "clsx";
-import ReactDiffViewer, { DiffMethod } from "react-diff-viewer";
+import ReactDiffViewer, {DiffMethod} from "react-diff-viewer";
 import useUser from "@/hooks/useUser";
 import AIDetection from "../AIDetection";
 
-export default function Writing({ id, type, prompt, attachment, userSolutions, onNext, onBack }: WritingExercise & CommonProps) {
+export default function Writing({id, type, prompt, attachment, userSolutions, onNext, onBack}: WritingExercise & CommonProps) {
 	const [isModalOpen, setIsModalOpen] = useState(false);
 	const [showDiff, setShowDiff] = useState(false);
 
-	const { user } = useUser();
+	const {user} = useUser();
 
 	const aiEval = userSolutions && userSolutions.length > 0 ? userSolutions[0].evaluation?.ai_detection : undefined;
 
-	const tooltips: { [key: string]: string } = {
-		"Lexical Resource": "Assesses the diversity and accuracy of vocabulary used. A higher score indicates varied and precise word choice; a lower score points to limited vocabulary and inaccuracies.",
-		"Task Achievement": "Evaluates how well the task requirements are fulfilled. A higher score means all parts of the task are addressed thoroughly; a lower score shows incomplete or inadequate task response.",
-		"Coherence and Cohesion": "Measures logical organization and flow of writing. A higher score reflects well-structured and connected ideas; a lower score indicates disorganized writing and poor linkage between ideas.",
-		"Grammatical Range and Accuracy": "Looks at the range and precision of grammatical structures. A higher score shows varied and accurate grammar use; a lower score suggests frequent errors and limited range.",
+	const tooltips: {[key: string]: string} = {
+		"Lexical Resource":
+			"Assesses the diversity and accuracy of vocabulary used. A higher score indicates varied and precise word choice; a lower score points to limited vocabulary and inaccuracies.",
+		"Task Achievement":
+			"Evaluates how well the task requirements are fulfilled. A higher score means all parts of the task are addressed thoroughly; a lower score shows incomplete or inadequate task response.",
+		"Coherence and Cohesion":
+			"Measures logical organization and flow of writing. A higher score reflects well-structured and connected ideas; a lower score indicates disorganized writing and poor linkage between ideas.",
+		"Grammatical Range and Accuracy":
+			"Looks at the range and precision of grammatical structures. A higher score shows varied and accurate grammar use; a lower score suggests frequent errors and limited range.",
 	};
 
 	return (
-		<>
+		<div className="flex flex-col gap-4 mt-4">
+			<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
+				<Button
+					color="purple"
+					variant="outline"
+					onClick={() =>
+						onBack({
+							exercise: id,
+							solutions: userSolutions,
+							score: {total: 100, missing: 0, correct: writingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
+							type,
+						})
+					}
+					className="max-w-[200px] self-end w-full">
+					Back
+				</Button>
+				<Button
+					color="purple"
+					onClick={() =>
+						onNext({
+							exercise: id,
+							solutions: userSolutions,
+							score: {
+								total: 100,
+								missing: 0,
+								correct: userSolutions[0]?.evaluation ? writingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0 : 0,
+							},
+							type,
+						})
+					}
+					className="max-w-[200px] self-end w-full">
+					Next
+				</Button>
+			</div>
+
 			{attachment && (
 				<Transition show={isModalOpen} as={Fragment}>
 					<Dialog onClose={() => setIsModalOpen(false)} className="relative z-50">
@@ -99,13 +137,13 @@ export default function Writing({ id, type, prompt, attachment, userSolutions, o
 													fontFamily: '"Open Sans", system-ui, -apple-system, "Helvetica Neue", sans-serif',
 													padding: "32px 28px",
 												},
-												marker: { display: "none" },
-												diffRemoved: { padding: "32px 28px" },
-												diffAdded: { padding: "32px 28px" },
+												marker: {display: "none"},
+												diffRemoved: {padding: "32px 28px"},
+												diffAdded: {padding: "32px 28px"},
 
-												wordRemoved: { padding: "0px", display: "initial" },
-												wordAdded: { padding: "0px", display: "initial" },
-												wordDiff: { padding: "0px", display: "initial" },
+												wordRemoved: {padding: "0px", display: "initial"},
+												wordAdded: {padding: "0px", display: "initial"},
+												wordDiff: {padding: "0px", display: "initial"},
 											}}
 											oldValue={userSolutions[0].solution.replaceAll("\\n", "\n")}
 											newValue={userSolutions[0].evaluation!.fixed_text!.replaceAll("\\n", "\n")}
@@ -135,10 +173,13 @@ export default function Writing({ id, type, prompt, attachment, userSolutions, o
 									const grade: number = typeof taskResponse === "number" ? taskResponse : taskResponse.grade;
 
 									return (
-										<div className={clsx(
-											"bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2 tooltip tooltip-bottom",
-											index === 0 && "tooltip-right"
-										)} key={key} data-tip={tooltips[key] || "No additional information available"}>
+										<div
+											className={clsx(
+												"bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2 tooltip tooltip-bottom",
+												index === 0 && "tooltip-right",
+											)}
+											key={key}
+											data-tip={tooltips[key] || "No additional information available"}>
 											{key}: Level {grade}
 										</div>
 									);
@@ -148,7 +189,7 @@ export default function Writing({ id, type, prompt, attachment, userSolutions, o
 								<Tab.Group>
 									<Tab.List className="flex space-x-1 rounded-xl bg-ielts-writing/20 p-1">
 										<Tab
-											className={({ selected }) =>
+											className={({selected}) =>
 												clsx(
 													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
 													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
@@ -159,7 +200,7 @@ export default function Writing({ id, type, prompt, attachment, userSolutions, o
 											General Feedback
 										</Tab>
 										<Tab
-											className={({ selected }) =>
+											className={({selected}) =>
 												clsx(
 													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
 													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
@@ -170,7 +211,7 @@ export default function Writing({ id, type, prompt, attachment, userSolutions, o
 											Evaluation
 										</Tab>
 										<Tab
-											className={({ selected }) =>
+											className={({selected}) =>
 												clsx(
 													"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
 													"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
@@ -182,7 +223,7 @@ export default function Writing({ id, type, prompt, attachment, userSolutions, o
 										</Tab>
 										{aiEval && user?.type !== "student" && (
 											<Tab
-												className={({ selected }) =>
+												className={({selected}) =>
 													clsx(
 														"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-writing/80",
 														"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-writing focus:outline-none focus:ring-2",
@@ -204,10 +245,16 @@ export default function Writing({ id, type, prompt, attachment, userSolutions, o
 
 													return (
 														<div key={key} className="flex flex-col gap-2">
-															<div className={clsx("bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2 w-fit")} key={key}>
+															<div
+																className={clsx(
+																	"bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2 w-fit",
+																)}
+																key={key}>
 																{key}: Level {grade}
 															</div>
-															{typeof taskResponse !== "number" && <span className="px-2 py-2">{taskResponse.comment}</span>}
+															{typeof taskResponse !== "number" && (
+																<span className="px-2 py-2">{taskResponse.comment}</span>
+															)}
 														</div>
 													);
 												})}
@@ -248,7 +295,7 @@ export default function Writing({ id, type, prompt, attachment, userSolutions, o
 						onBack({
 							exercise: id,
 							solutions: userSolutions,
-							score: { total: 100, missing: 0, correct: writingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0 },
+							score: {total: 100, missing: 0, correct: writingReverseMarking[userSolutions[0]!.evaluation!.overall] || 0},
 							type,
 						})
 					}
@@ -273,6 +320,6 @@ export default function Writing({ id, type, prompt, attachment, userSolutions, o
 					Next
 				</Button>
 			</div>
-		</>
+		</div>
 	);
 }

src/components/UserCard.tsx

@@ -1,5 +1,5 @@
 import useFilterRecordsByUser from "@/hooks/useFilterRecordsByUser";
-import {CorporateInformation, CorporateUser, EMPLOYMENT_STATUS, User, Type, Stat} from "@/interfaces/user";
+import {CorporateInformation, CorporateUser, EMPLOYMENT_STATUS, User, Type, Stat, Gender} from "@/interfaces/user";
 import {groupBySession, averageScore} from "@/utils/stats";
 import {RadioGroup} from "@headlessui/react";
 import axios from "axios";
@@ -92,6 +92,9 @@ const UserCard = ({
 		user.type === "corporate" || user.type === "mastercorporate" ? user.demographicInformation?.position : undefined,
 	);
 	const [studentID, setStudentID] = useState<string | undefined>(user.type === "student" ? user.studentID : undefined);
+	const [name, setName] = useState<string>(user.name);
+	const [phone, setPhone] = useState<string | undefined>(user.demographicInformation?.phone);
+	const [gender, setGender] = useState<Gender | undefined>(user.demographicInformation?.gender);
 
 	const [referralAgent, setReferralAgent] = useState(
 		user.type === "corporate" || user.type === "mastercorporate" ? user.corporateInformation?.referralAgent : undefined,
@@ -140,7 +143,11 @@ const UserCard = ({
 	}, [users, referralAgent]);
 
 	const updateUser = () => {
-		if ((user.type === "corporate" || user.type === "mastercorporate") && (!paymentValue || paymentValue < 0))
+		if (
+			(user.type === "corporate" || user.type === "mastercorporate") &&
+			(!paymentValue || paymentValue < 0) &&
+			["admin", "developer"].includes(loggedInUser.type)
+		)
 			return toast.error("Please set a price for the user's package before updating!");
 
 		if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;
@@ -152,6 +159,11 @@ const UserCard = ({
 				studentID,
 				type,
 				status,
+				name,
+				demographicInformation: {
+					...(!!user.demographicInformation ? user.demographicInformation : {}),
+					phone,
+				},
 				agentInformation:
 					type === "agent"
 						? {
@@ -161,7 +173,7 @@ const UserCard = ({
 						  }
 						: undefined,
 				corporateInformation:
-					type === "corporate"
+					type === "corporate" || type === "mastercorporate"
 						? {
 								referralAgent,
 								monthlyDuration,
@@ -429,10 +441,10 @@ const UserCard = ({
 						label="Name"
 						type="text"
 						name="name"
-						onChange={() => null}
+						onChange={setName}
 						placeholder="Enter your name"
-						defaultValue={user.name}
-						disabled
+						defaultValue={name}
+						disabled={disabled}
 					/>
 					<Input
 						label="E-mail Address"
@@ -454,10 +466,10 @@ const UserCard = ({
 						type="tel"
 						name="phone"
 						label="Phone number"
-						onChange={() => null}
+						onChange={setPhone}
 						placeholder="Enter phone number"
-						defaultValue={user.demographicInformation?.phone}
-						disabled
+						defaultValue={phone}
+						disabled={disabled}
 					/>
 				</div>
 
@@ -528,7 +540,8 @@ const UserCard = ({
 						<div className="relative flex flex-col gap-3 w-full">
 							<label className="font-normal text-base text-mti-gray-dim">Gender</label>
 							<RadioGroup
-								value={user.demographicInformation?.gender}
+								value={gender}
+								onChange={(e) => setGender(e)}
 								className="flex flex-row gap-4 justify-between"
 								disabled={disabled}>
 								<RadioGroup.Option value="male">
@@ -582,7 +595,9 @@ const UserCard = ({
 									isChecked={!!expiryDate}
 									onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : null)}
 									disabled={
-										disabled || (!["admin", "developer"].includes(loggedInUser.type) && !!loggedInUser.subscriptionExpirationDate)
+										disabled ||
+										(!["admin", "developer", "mastercorporate", "corporate"].includes(loggedInUser.type) &&
+											!!loggedInUser.subscriptionExpirationDate)
 									}>
 									Enabled
 								</Checkbox>