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

@@ -70,7 +70,7 @@ function WordsPopout({words, isOpen, onCancel, onAnswer}: WordsPopoutProps) {
 	);
 }
 
-export default function FillBlanks({id, allowRepetition, prompt, solutions, text, words, onNext, onBack}: FillBlanksExercise & CommonProps) {
+export default function FillBlanks({id, allowRepetition, type, prompt, solutions, text, words, onNext, onBack}: FillBlanksExercise & CommonProps) {
 	const [userSolutions, setUserSolutions] = useState<{id: string; solution: string}[]>([]);
 	const [currentBlankId, setCurrentBlankId] = useState<string>();
 
@@ -128,7 +128,7 @@ export default function FillBlanks({id, allowRepetition, prompt, solutions, text
 				</span>
 			</div>
 
-			<div className="self-end flex flex-col items-center md:items-start md:flex-row 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} />
@@ -137,7 +137,7 @@ export default function FillBlanks({id, allowRepetition, prompt, solutions, text
 				</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} />