- Adapted more of the design to be more responsive;

- Revamped some of the UserSolutions;
- Transformed the homepage chart to use actual dynamic values;
- Created an endpoint for the stats;

src/components/Exercises/MatchSentences.tsx

@@ -3,11 +3,11 @@ import {MatchSentencesExercise} from "@/interfaces/exam";
 import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
 import Icon from "@mdi/react";
 import clsx from "clsx";
-import {useState} from "react";
+import {Fragment, useState} from "react";
 import LineTo from "react-lineto";
 import {CommonProps} from ".";
 
-export default function MatchSentences({id, options, prompt, sentences, onNext, onBack}: MatchSentencesExercise & CommonProps) {
+export default function MatchSentences({id, options, type, prompt, sentences, onNext, onBack}: MatchSentencesExercise & CommonProps) {
 	const [selectedQuestion, setSelectedQuestion] = useState<string>();
 	const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]);
 
@@ -31,7 +31,14 @@ export default function MatchSentences({id, options, prompt, sentences, onNext,
 	return (
 		<>
 			<div className="flex flex-col items-center gap-8">
-				<span className="text-lg font-medium text-center px-48">{prompt}</span>
+				<span className="text-base md:text-lg font-medium text-center px-2 md:px-4 lg:px-48">
+					{prompt.split("\\n").map((line, index) => (
+						<Fragment key={index}>
+							{line}
+							<br />
+						</Fragment>
+					))}
+				</span>
 				<div className="grid grid-cols-2 gap-16 place-items-center">
 					<div className="flex flex-col gap-1">
 						{sentences.map(({sentence, id, color}) => (
@@ -85,7 +92,7 @@ export default function MatchSentences({id, options, prompt, sentences, onNext,
 				</div>
 			</div>
 
-			<div className="self-end flex gap-8">
+			<div className="self-end flex flex-col-reverse items-center w-full md:justify-between md:items-start md:flex-row gap-8">
 				<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={onBack}>
 					<div className="absolute left-4">
 						<Icon path={mdiArrowLeft} color="white" size={1} />
@@ -94,7 +101,7 @@ export default function MatchSentences({id, options, prompt, sentences, onNext,
 				</button>
 				<button
 					className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
-					onClick={() => onNext({id, solutions: userSolutions, score: calculateScore()})}>
+					onClick={() => onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type})}>
 					Next
 					<div className="absolute right-4">
 						<Icon path={mdiArrowRight} color="white" size={1} />