ENCOA-107, ENCOA-115 Fixed completion percentage, brought back the line numbers, 'Level Exam' was replaced by 'Placement Test', Next/Back instructions with quotes, 'Submit' on last level question

src/components/Exercises/FillBlanks/index.tsx

@@ -55,7 +55,6 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
             const solution = solutions.find((y) => x.id.toString() === y.id.toString())?.solution;
             if (!solution) return false;
             const option = correctWords!.find((w: any) => {
-                console.log(w);
                 if (typeof w === "string") {
                     return w.toLowerCase() === x.solution.toLowerCase();
                 } else if ('letter' in w) {
@@ -85,7 +84,8 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
                     const id = match.replaceAll(/[\{\}]/g, "");
                     const userSolution = answers.find((x) => x.id === id);
                     const styles = clsx(
-                        "rounded-full hover:text-white focus:ring-0 focus:outline-none focus:!text-white focus:bg-mti-purple transition duration-300 ease-in-out my-1 px-5 py-2 text-center",
+                        "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",
                     )
@@ -122,7 +122,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
                 })}
             </div>
         );
-    }, [variant, words, setCurrentMCSelection, answers]);
+    }, [variant, words, setCurrentMCSelection, answers, currentMCSelection]);
 
     const memoizedLines = useMemo(() => {
         return text.split("\\n").map((line, index) => (
@@ -131,7 +131,7 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
             <br />
           </p>
         ));
-      }, [text, variant, renderLines]);
+      }, [text, variant, renderLines, currentMCSelection]);
 
 
     const onSelection = (questionID: string, value: string) => {
@@ -139,10 +139,9 @@ const FillBlanks: React.FC<FillBlanksExercise & CommonProps> = ({
     }
 
     useEffect(() => {
-        //if (variant === "mc") {
-            console.log(answers);
+        if (variant === "mc") {
             setCurrentSolution({ exercise: id, solutions: answers, score: calculateScore(), type, shuffleMaps: shuffleMaps });
-        //}
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [answers])
 

src/components/Exercises/MultipleChoice.tsx

@@ -76,6 +76,7 @@ export default function MultipleChoice({ id, prompt, type, questions, userSoluti
 
 	const {
 		questionIndex,
+		exerciseIndex,
 		exam,
 		shuffles,
 		hasExamEnded,
@@ -143,7 +144,7 @@ export default function MultipleChoice({ id, prompt, type, questions, userSoluti
 			}
 			return isSolutionCorrect || false;
 		}).length;
-		const missing = total - correct;
+		const missing = total - answers!.filter((x) => questions.find((y) => x.question.toString() === y.id.toString())).length;
 		return { total, correct, missing };
 	};
 
@@ -193,7 +194,12 @@ export default function MultipleChoice({ id, prompt, type, questions, userSoluti
 				</Button>
 
 				<Button color="purple" onClick={next} className="max-w-[200px] self-end w-full">
-					Next
+					{
+						exam && exam.module === "level" && 
+						partIndex === exam.parts.length - 1 && 
+						exerciseIndex === exam.parts[partIndex].exercises.length - 1 &&
+						questionIndex === questions.length - 1 
+						? "Submit" : "Next"}
 				</Button>
 			</div>
 		</>

src/components/Medium/ModuleTitle.tsx

@@ -12,6 +12,7 @@ import Button from "../Low/Button";
 import { Dialog, Transition } from "@headlessui/react";
 import useExamStore from "@/stores/examStore";
 import Modal from "../Modal";
+import React from "react";
 
 interface Props {
 	minTimer: number;
@@ -85,7 +86,7 @@ export default function ModuleTitle({
 				return "!bg-mti-gray-davy !border--mti-gray-davy !text-mti-gray-davy !text-white hover:!bg-gray-700";
 			}
 
-			return userQuestionSolution === newSolution ? 
+			return userQuestionSolution === newSolution ?
 				"!bg-mti-purple-light !text-mti-purple-light !text-white hover:!bg-mti-purple-dark" :
 				"!bg-mti-rose-light !border-mti-rose-light !text-mti-rose-light !text-white hover:!bg-mti-rose-dark";
 		}
@@ -105,10 +106,10 @@ export default function ModuleTitle({
 								key={index}
 								className={clsx(
 									"w-12 h-12 flex items-center justify-center rounded-lg text-sm font-bold transition-all duration-200 ease-in-out",
-									(showSolutions ? 
-										getQuestionColor(questionNumber.toString(), solution, userQuestionSolution) : 
-										(isAnswered ? 
-											"bg-mti-purple-light border-mti-purple-light text-white hover:bg-mti-purple-dark hover:border-mti-purple-dark": 
+									(showSolutions ?
+										getQuestionColor(questionNumber.toString(), solution, userQuestionSolution) :
+										(isAnswered ?
+											"bg-mti-purple-light border-mti-purple-light text-white hover:bg-mti-purple-dark hover:border-mti-purple-dark" :
 											"bg-white border-gray-400 hover:bg-gray-100 hover:text-gray-700"
 										)
 									)
@@ -126,25 +127,26 @@ export default function ModuleTitle({
 			</>
 		);
 	};
-
 	return (
 		<>
 			{showTimer && <Timer minTimer={minTimer} disableTimer={disableTimer} />}
 			<div className="w-full">
 				{partLabel && (
 					<div className="text-3xl space-y-4">
-						{partLabel.split("\n\n").map((line, index) => {
-							if (index == 0)
+						{partLabel.split("\n\n").map((partInstructions, index) => {
+							if (index === 0)
 								return (
 									<p key={index} className="font-bold">
-										{line}
+										{partInstructions}
 									</p>
 								);
 							else
 								return (
-									<p key={index} className="text-2xl font-semibold">
-										{line}
-									</p>
+									<div key={index} className="text-2xl font-semibold flex flex-col gap-2">
+										{partInstructions.split("\\n").map((line, lineIndex) => (
+											<span key={lineIndex}>{line}</span>
+										))}
+									</div>
 								);
 						})}
 					</div>
@@ -154,7 +156,10 @@ export default function ModuleTitle({
 					<div className="flex flex-col gap-3 w-full">
 						<div className="w-full flex justify-between">
 							<span className="text-base font-semibold">
-								{moduleLabels[module]} exam {label && `- ${label}`}
+								{module === "level"
+									? "Placement Test"
+									: `${moduleLabels[module]} exam${label ? ` - ${label}` : ''}`
+								}
 							</span>
 							<span className="text-sm font-semibold self-end">
 								Question {exerciseIndex}/{totalExercises}

src/components/Solutions/MultipleChoice.tsx

@@ -2,7 +2,6 @@
 import { MultipleChoiceExercise, MultipleChoiceQuestion, ShuffleMap } from "@/interfaces/exam";
 import useExamStore from "@/stores/examStore";
 import clsx from "clsx";
-import { useEffect, useState } from "react";
 import reactStringReplace from "react-string-replace";
 import { CommonProps } from ".";
 import Button from "../Low/Button";
@@ -101,7 +100,7 @@ export default function MultipleChoice({ id, type, prompt, questions, userSoluti
 				}
 			},
 		).length;
-		const missing = total - userSolutions.filter((x) => questions.find((y) => y.id.toString() === x.question.toString())).length;
+		const missing = total - userSolutions.filter((x) => questions.find((y) => x.question.toString() === y.id.toString())).length;
 		return { total, correct, missing };
 	};