devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved the solutions to be more mobile friendly

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-04-20 22:55:24 +01:00
parent 02d76e4c3c
commit ed11d6f9d6
6 changed files with 41 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/Solutions/FillBlanks.tsx
View File

@@ -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} />

15
src/components/Solutions/MatchSentences.tsx
View File

@@ -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} />

7
src/components/Solutions/MultipleChoice.tsx
View File

@@ -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} />

4
src/components/Solutions/WriteBlanks.tsx
View File

@@ -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} />