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

Finished implementing a Solutions version for each exercise

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-04-11 21:35:44 +01:00
parent 45a5cb0f5c
commit 49c515b02a
20 changed files with 610 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/exams/Reading.tsx
View File

@@ -1,4 +1,4 @@
import {ReadingExam} from "@/interfaces/exam";
import {ReadingExam, UserSolution} from "@/interfaces/exam";
import {Fragment, useEffect, useState} from "react";
import Icon from "@mdi/react";
import {mdiArrowRight, mdiNotebook} from "@mdi/js";
@@ -6,10 +6,12 @@ import clsx from "clsx";
import {infoButtonStyle} from "@/constants/buttonStyles";
import {Dialog, Transition} from "@headlessui/react";
import {renderExercise} from "@/components/Exercises";
import {renderSolution} from "@/components/Solutions";
interface Props {
exam: ReadingExam;
onFinish: () => void;
showSolutions?: boolean;
onFinish: (userSolutions: UserSolution[]) => void;
}
function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: string; content: string; onClose: () => void}) {
@@ -69,10 +71,11 @@ function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: s
);
}
export default function Reading({exam, onFinish}: Props) {
export default function Reading({exam, showSolutions = false, onFinish}: Props) {
const [exerciseIndex, setExerciseIndex] = useState(-1);
const [showTextModal, setShowTextModal] = useState(false);
const [timer, setTimer] = useState<number>();
const [userSolutions, setUserSolutions] = useState<UserSolution[]>([]);
useEffect(() => {
setTimer(exam.minTimer * 60);
@@ -83,13 +86,21 @@ export default function Reading({exam, onFinish}: Props) {
};
}, [exam.minTimer]);
const nextExercise = () => {
const nextExercise = (solution?: UserSolution) => {
if (solution) {
setUserSolutions((prev) => [...prev.filter((x) => x.id !== solution.id), solution]);
}
if (exerciseIndex + 1 < exam.exercises.length) {
setExerciseIndex((prev) => prev + 1);
return;
}
onFinish();
if (solution) {
onFinish([...userSolutions.filter((x) => x.id !== solution.id), solution].map((x) => ({...x, module: "reading"})));
} else {
onFinish(userSolutions.map((x) => ({...x, module: "reading"})));
}
};
const previousExercise = () => {
@@ -132,7 +143,12 @@ export default function Reading({exam, onFinish}: Props) {
{exerciseIndex === -1 && renderText()}
{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)}
<div className={clsx("flex gap-8", exerciseIndex > -1 ? "w-full justify-between" : "self-end")}>
{exerciseIndex > -1 && (
<button
@@ -148,7 +164,7 @@ export default function Reading({exam, onFinish}: Props) {
</button>
)}
{exerciseIndex === -1 && (
<button className={clsx("btn btn-wide gap-4 relative text-white self-end", infoButtonStyle)} onClick={nextExercise}>
<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} />