Updated the Writing to work with another format

src/components/Exercises/Writing.tsx

@@ -7,7 +7,18 @@ import Button from "../Low/Button";
 import {Dialog, Transition} from "@headlessui/react";
 import useExamStore from "@/stores/examStore";
 
-export default function Writing({id, prompt, info, type, wordCounter, attachment, userSolutions, onNext, onBack}: WritingExercise & CommonProps) {
+export default function Writing({
+	id,
+	prompt,
+	prefix,
+	suffix,
+	type,
+	wordCounter,
+	attachment,
+	userSolutions,
+	onNext,
+	onBack,
+}: WritingExercise & CommonProps) {
 	const [isModalOpen, setIsModalOpen] = useState(false);
 	const [inputText, setInputText] = useState(userSolutions.length === 1 ? userSolutions[0].solution : "");
 	const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);
@@ -68,7 +79,14 @@ export default function Writing({id, prompt, info, type, wordCounter, attachment
 			)}
 			<div className="flex flex-col h-full w-full gap-9 mb-20">
 				<div className="flex flex-col w-full gap-7 bg-mti-gray-smoke rounded-xl py-8 pb-12 px-16">
-					<span>{info}</span>
+					<span>
+						{prefix.split("\\n").map((line) => (
+							<>
+								{line}
+								<br />
+							</>
+						))}
+					</span>
 					<span className="font-semibold">
 						{prompt.split("\\n").map((line, index) => (
 							<Fragment key={index}>
@@ -89,7 +107,12 @@ export default function Writing({id, prompt, info, type, wordCounter, attachment
 
 				<div className="w-full h-full flex flex-col gap-4">
 					<span>
-						You should write {wordCounter.type === "min" ? "at least" : "at most"} {wordCounter.limit} words.
+						{suffix.split("\\n").map((line) => (
+							<>
+								{line}
+								<br />
+							</>
+						))}
 					</span>
 					<textarea
 						className="w-full h-full min-h-[148px] cursor-text px-7 py-8 input border-2 border-mti-gray-platinum bg-white rounded-3xl"

src/interfaces/exam.ts

@@ -77,7 +77,8 @@ export interface Evaluation {
 export interface WritingExercise {
 	id: string;
 	type: "writing";
-	info: string; //* The information about the task, like the amount of time they should spend on it
+	prefix: string; //* The information about the task, like the amount of time they should spend on it
+	suffix: string;
 	prompt: string; //* The context given to the user containing what they should write about
 	wordCounter: WordCounter; //* The minimum or maximum amount of words that should be written
 	attachment?: {

src/pages/api/exam/[module]/index.ts

@@ -4,6 +4,7 @@ import {app} from "@/firebase";
 import {getFirestore, collection, getDocs, query, where} from "firebase/firestore";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
+import {shuffle} from "lodash";
 
 const db = getFirestore(app);
 
@@ -22,9 +23,11 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
 	const snapshot = await getDocs(q);
 
 	res.status(200).json(
-		snapshot.docs.map((doc) => ({
+		shuffle(
-			id: doc.id,
+			snapshot.docs.map((doc) => ({
-			...doc.data(),
+				id: doc.id,
-		})),
+				...doc.data(),
+			})),
+		),
 	);
 }