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

Updated the writing exam to work based on exercises instead of just a single one

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-04-17 13:03:48 +01:00
parent 5df816c73c
commit 207328dade
9 changed files with 359 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/exams/Listening.tsx
View File

@@ -39,9 +39,9 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
}
if (solution) {
onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "listening"})));
onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "listening", exam: exam.id})));
} else {
onFinish(userSolutions.map((x) => ({...x, module: "listening"})));
onFinish(userSolutions.map((x) => ({...x, module: "listening", exam: exam.id})));
}
};

4
src/exams/Reading.tsx
View File

@@ -99,9 +99,9 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
}
if (solution) {
onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "reading"})));
onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "reading", exam: exam.id})));
} else {
onFinish(userSolutions.map((x) => ({...x, module: "reading"})));
onFinish(userSolutions.map((x) => ({...x, module: "reading", exam: exam.id})));
}
};

95
src/exams/Writing.tsx
View File

@@ -1,5 +1,9 @@
import {renderExercise} from "@/components/Exercises";
import {renderSolution} from "@/components/Solutions";
import {infoButtonStyle} from "@/constants/buttonStyles";
import {UserSolution, WritingExam} from "@/interfaces/exam";
import {mdiArrowRight} from "@mdi/js";
import Icon from "@mdi/react";
import clsx from "clsx";
import {Fragment, useEffect, useState} from "react";
import {toast} from "react-toastify";
@@ -11,9 +15,9 @@ interface Props {
}
export default function Writing({exam, showSolutions = false, onFinish}: Props) {
const [inputText, setInputText] = useState("");
const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);
const [exerciseIndex, setExerciseIndex] = useState(0);
const [timer, setTimer] = useState<number>();
const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
useEffect(() => {
setTimer(exam.minTimer * 60);
@@ -24,22 +28,29 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
};
}, [exam.minTimer]);
useEffect(() => {
const words = inputText.split(" ").filter((x) => x !== "");
const {wordCounter} = exam.text;
if (wordCounter.type === "min") {
setIsSubmitEnabled(wordCounter.limit <= words.length);
} else {
setIsSubmitEnabled(true);
if (wordCounter.limit < words.length) {
toast.warning(`You have reached your word limit of ${wordCounter.limit} words!`, {toastId: "word-limit"});
setInputText(words.slice(0, words.length - 1).join(" "));
}
const nextExercise = (solution?: UserSolution) => {
if (solution) {
setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
}
}, [inputText, exam]);
if (exerciseIndex + 1 < exam.exercises.length) {
setExerciseIndex((prev) => prev + 1);
return;
}
if (solution) {
onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "writing", exam: exam.id})));
} else {
onFinish(userSolutions.map((x) => ({...x, module: "writing", exam: exam.id})));
}
};
const previousExercise = () => {
setExerciseIndex((prev) => prev - 1);
};
return (
<div className="h-full w-full flex flex-col items-center justify-center gap-8 relative">
<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
{timer && (
<div className="absolute w-24 top-8 text-center right-8 font-semibold text-lg border-ielts-writing border-2 p-2 rounded-xl bg-ielts-writing-transparent text-white">
{Math.floor(timer / 60) < 10 ? "0" : ""}
@@ -47,46 +58,22 @@ export default function Writing({exam, showSolutions = false, onFinish}: Props)
{timer % 60}
</div>
)}
<div className="flex flex-col max-w-2xl gap-2">
<span>{exam.text.info}</span>
<span className="font-bold ml-8">
{exam.text.prompt.split("\\n").map((line, index) => (
<Fragment key={index}>
<span>{line}</span>
<br />
</Fragment>
))}
</span>
<span>
You should write {exam.text.wordCounter.type === "min" ? "at least" : "at most"} {exam.text.wordCounter.limit} words.
</span>
</div>
<textarea
className="w-1/2 h-1/3 cursor-text p-2 input input-bordered bg-white"
onChange={(e) => setInputText(e.target.value)}
value={inputText}
placeholder="Write your text here..."
/>
<div className="w-1/2 flex justify-end">
{!isSubmitEnabled && (
<div className="tooltip" data-tip={`You have not yet reached your minimum word count of ${exam.text.wordCounter.limit} words!`}>
<button
className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
disabled={!isSubmitEnabled}
onClick={() => onFinish([{id: exam.id, solutions: [inputText.trim()], score: {correct: 0, total: 1}}])}>
Next
</button>
{exerciseIndex > -1 &&
exerciseIndex < exam.exercises.length &&
!showSolutions &&
renderExercise(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
{exerciseIndex > -1 &&
exerciseIndex < exam.exercises.length &&
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()}>
Next
<div className="absolute right-4">
<Icon path={mdiArrowRight} color="white" size={1} />
</div>
)}
{isSubmitEnabled && (
<button
className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)}
disabled={!isSubmitEnabled}
onClick={() => onFinish([{id: exam.id, solutions: [inputText.trim()], score: {correct: 0, total: 1}}])}>
Next
</button>
)}
</div>
</button>
)}
</div>
);
}