From ed11d6f9d6379b4e1b6cc678b8b3e28ec1046e0c Mon Sep 17 00:00:00 2001
From: Tiago Ribeiro <tiago.ribeiro@ecrop.dev>
Date: Thu, 20 Apr 2023 22:55:24 +0100
Subject: [PATCH] Improved the solutions to be more mobile friendly

---
 src/components/Exercises/MultipleChoice.tsx |  8 ++++----
 src/components/Solutions/FillBlanks.tsx     | 22 ++++++++++++++-------
 src/components/Solutions/MatchSentences.tsx | 15 +++++++++++---
 src/components/Solutions/MultipleChoice.tsx |  7 ++++---
 src/components/Solutions/WriteBlanks.tsx    |  4 ++--
 src/exams/Listening.tsx                     |  6 ++++--
 6 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/src/components/Exercises/MultipleChoice.tsx b/src/components/Exercises/MultipleChoice.tsx
index f14403ef..72516c98 100644
--- a/src/components/Exercises/MultipleChoice.tsx
+++ b/src/components/Exercises/MultipleChoice.tsx
@@ -52,8 +52,8 @@ function Question({
 
 	return (
 		<div className="flex flex-col items-center gap-4">
-			<span>{prompt}</span>
-			<div className="grid grid-cols-4 gap-4 place-items-center">
+			<span className="text-center">{prompt}</span>
+			<div className="grid grid-rows-4 md:grid-rows-1 md:grid-cols-4 gap-4 place-items-center">
 				{variant === "image" &&
 					options.map((option) => (
 						<div
@@ -117,8 +117,8 @@ export default function MultipleChoice({id, prompt, type, questions, onNext, onB
 
 	return (
 		<>
-			<div className="flex flex-col items-center gap-8">
-				<span className="text-lg font-medium text-center px-48">{prompt}</span>
+			<div className="flex flex-col items-center gap-4">
+				<span className="text-base md:text-lg font-medium text-center px-2 md:px-4 lg:px-48">{prompt}</span>
 				{questionIndex < questions.length && (
 					<Question
 						{...questions[questionIndex]}
diff --git a/src/components/Solutions/FillBlanks.tsx b/src/components/Solutions/FillBlanks.tsx
index 86fafc1d..02634477 100644
--- a/src/components/Solutions/FillBlanks.tsx
+++ b/src/components/Solutions/FillBlanks.tsx
@@ -5,6 +5,7 @@ import Icon from "@mdi/react";
 import clsx from "clsx";
 import reactStringReplace from "react-string-replace";
 import {CommonProps} from ".";
+import {Fragment} from "react";
 
 export default function FillBlanksSolutions({prompt, solutions, text, userSolutions, onNext, onBack}: FillBlanksExercise & CommonProps) {
 	const renderLines = (line: string) => {
@@ -44,26 +45,33 @@ export default function FillBlanksSolutions({prompt, solutions, text, userSoluti
 
 	return (
 		<>
-			<div className="flex flex-col">
-				<span className="text-lg font-medium text-center px-48">{prompt}</span>
+			<div className="flex flex-col gap-4">
+				<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>
 				<span>
-					{text.split("\\n").map((line) => (
-						<>
+					{text.split("\\n").map((line, index) => (
+						<Fragment key={index}>
 							{renderLines(line)}
 							<br />
-						</>
+						</Fragment>
 					))}
 				</span>
 			</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} />
 					</div>
 					Back
 				</button>
-				<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={() => onNext()}>
+				<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={onNext}>
 					Next
 					<div className="absolute right-4">
 						<Icon path={mdiArrowRight} color="white" size={1} />
diff --git a/src/components/Solutions/MatchSentences.tsx b/src/components/Solutions/MatchSentences.tsx
index cb3d77dc..a798efed 100644
--- a/src/components/Solutions/MatchSentences.tsx
+++ b/src/components/Solutions/MatchSentences.tsx
@@ -5,12 +5,21 @@ import {CommonProps} from ".";
 import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
 import {mdiArrowLeft, mdiArrowRight} from "@mdi/js";
 import Icon from "@mdi/react";
+import {Fragment} from "react";
 
 export default function MatchSentencesSolutions({options, prompt, sentences, userSolutions, onNext, onBack}: MatchSentencesExercise & CommonProps) {
 	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, solution}) => (
@@ -54,14 +63,14 @@ export default function MatchSentencesSolutions({options, prompt, sentences, use
 				</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} />
 					</div>
 					Back
 				</button>
-				<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={() => onNext()}>
+				<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={onNext}>
 					Next
 					<div className="absolute right-4">
 						<Icon path={mdiArrowRight} color="white" size={1} />
diff --git a/src/components/Solutions/MultipleChoice.tsx b/src/components/Solutions/MultipleChoice.tsx
index 8555d590..dd51a9ea 100644
--- a/src/components/Solutions/MultipleChoice.tsx
+++ b/src/components/Solutions/MultipleChoice.tsx
@@ -105,8 +105,8 @@ export default function MultipleChoice({prompt, questions, userSolutions, onNext
 
 	return (
 		<>
-			<div className="flex flex-col items-center gap-8">
-				<span className="text-lg font-medium text-center px-48">{prompt}</span>
+			<div className="flex flex-col items-center gap-4">
+				<span className="text-base md:text-lg font-medium text-center px-2 md:px-4 lg:px-48">{prompt}</span>
 				{questionIndex < questions.length && (
 					<Question
 						{...questions[questionIndex]}
@@ -115,7 +115,8 @@ export default function MultipleChoice({prompt, questions, userSolutions, onNext
 					/>
 				)}
 			</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} />
diff --git a/src/components/Solutions/WriteBlanks.tsx b/src/components/Solutions/WriteBlanks.tsx
index 4dc3647a..825fa3c9 100644
--- a/src/components/Solutions/WriteBlanks.tsx
+++ b/src/components/Solutions/WriteBlanks.tsx
@@ -91,14 +91,14 @@ export default function WriteBlanksSolutions({
 				</span>
 			</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} />
 					</div>
 					Back
 				</button>
-				<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={() => onNext()}>
+				<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={onNext}>
 					Next
 					<div className="absolute right-4">
 						<Icon path={mdiArrowRight} color="white" size={1} />
diff --git a/src/exams/Listening.tsx b/src/exams/Listening.tsx
index 8f291c9c..9b08d07e 100644
--- a/src/exams/Listening.tsx
+++ b/src/exams/Listening.tsx
@@ -71,7 +71,7 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 
 	return (
 		<>
-			<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
+			<div className="w-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
 				{renderAudioPlayer()}
 				{exerciseIndex > -1 &&
 					exerciseIndex < exam.exercises.length &&
@@ -82,7 +82,9 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
 					showSolutions &&
 					renderSolution(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
 				{exerciseIndex === -1 && (
-					<button className={clsx("btn btn-wide gap-4 relative text-white self-end", infoButtonStyle)} onClick={() => nextExercise()}>
+					<button
+						className={clsx("btn md:btn-wide w-full gap-4 relative text-white self-end", infoButtonStyle)}
+						onClick={() => nextExercise()}>
 						Next
 						<div className="absolute right-4">
 							<Icon path={mdiArrowRight} color="white" size={1} />