- 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/MultipleChoice.tsx

@@ -83,7 +83,7 @@ function Question({
 	);
 }
 
-export default function MultipleChoice({id, prompt, questions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
+export default function MultipleChoice({id, prompt, type, questions, onNext, onBack}: MultipleChoiceExercise & CommonProps) {
 	const [userSolutions, setUserSolutions] = useState<{question: string; option: string}[]>([]);
 	const [questionIndex, setQuestionIndex] = useState(0);
 
@@ -101,7 +101,7 @@ export default function MultipleChoice({id, prompt, questions, onNext, onBack}:
 
 	const next = () => {
 		if (questionIndex === questions.length - 1) {
-			onNext({id, solutions: userSolutions, score: calculateScore()});
+			onNext({exercise: id, solutions: userSolutions, score: calculateScore(), type});
 		} else {
 			setQuestionIndex((prev) => prev + 1);
 		}
@@ -127,7 +127,8 @@ export default function MultipleChoice({id, prompt, questions, onNext, onBack}:
 					/>
 				)}
 			</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={back}>
 					<div className="absolute left-4">
 						<Icon path={mdiArrowLeft} color="white" size={1} />