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

@@ -7,7 +7,7 @@ import {CommonProps} from ".";
 import {Fragment, useEffect, useState} from "react";
 import {toast} from "react-toastify";
 
-export default function Speaking({id, title, text, prompts, onNext, onBack}: SpeakingExercise & CommonProps) {
+export default function Speaking({id, title, text, type, prompts, onNext, onBack}: SpeakingExercise & CommonProps) {
 	return (
 		<div className="flex flex-col h-full w-2/3 items-center justify-center gap-8">
 			<div className="flex flex-col max-w-2xl gap-4">
@@ -32,7 +32,7 @@ export default function Speaking({id, title, text, prompts, onNext, onBack}: Spe
 				</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} />
@@ -41,7 +41,7 @@ export default function Speaking({id, title, text, prompts, onNext, onBack}: Spe
 				</button>
 				<button
 					className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
-					onClick={() => onNext({id, solutions: [], score: {correct: 0, total: 0}})}>
+					onClick={() => onNext({exercise: id, solutions: [], score: {correct: 0, total: 0}, type})}>
 					Next
 					<div className="absolute right-4">
 						<Icon path={mdiArrowRight} color="white" size={1} />