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

Updated the reading to a new format

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-09-28 14:43:43 +01:00
parent a568950aa9
commit 169ae2c959
9 changed files with 100 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,11 +19,13 @@ export default function FillBlanksSolutions({id, type, prompt, solutions, text,
const renderLines = (line: string) => {
return (
<span>
{reactStringReplace(line, /({{\d}})/g, (match) => {
{reactStringReplace(line, /({{\d+}})/g, (match) => {
const id = match.replaceAll(/[\{\}]/g, "");
const userSolution = userSolutions.find((x) => x.id === id);
const solution = solutions.find((x) => x.id === id)!;
console.log(id, match);
if (!userSolution) {
return (
<button

13
src/exams/Finish.tsx
View File

@@ -53,13 +53,22 @@ export default function Finish({user, scores, modules, isLoading, onViewResults}
},
};
const getTotalExercises = () => {
const exam = exams.find((x) => x.module === selectedModule)!;
if (exam.module === "reading") {
return exam.parts.flatMap((x) => x.exercises).length;
}
return exam.exercises.length;
};
return (
<>
<div className="w-full min-h-full h-fit flex flex-col items-center justify-between gap-8">
<ModuleTitle
module={selectedModule}
totalExercises={exams.find((x) => x.module === selectedModule)!.exercises.length}
exerciseIndex={exams.find((x) => x.module === selectedModule)!.exercises.length}
totalExercises={getTotalExercises()}
exerciseIndex={getTotalExercises()}
minTimer={exams.find((x) => x.module === selectedModule)!.minTimer}
disableTimer
/>

61
src/exams/Reading.tsx
View File

@@ -81,8 +81,11 @@ function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: s
export default function Reading({exam, showSolutions = false, onFinish}: Props) {
const [exerciseIndex, setExerciseIndex] = useState(showSolutions ? 0 : -1);
const [partIndex, setPartIndex] = useState(0);
const [showTextModal, setShowTextModal] = useState(false);
const [userSolutions, setUserSolutions] = useState<UserSolution[]>(exam.exercises.map((x) => defaultUserSolutions(x, exam)));
const [userSolutions, setUserSolutions] = useState<UserSolution[]>(
exam.parts.flatMap((x) => x.exercises).map((x) => defaultUserSolutions(x, exam)),
);
const [showBlankModal, setShowBlankModal] = useState(false);
const [hasExamEnded, setHasExamEnded] = useExamStore((state) => [state.hasExamEnded, state.setHasExamEnded]);
@@ -121,11 +124,17 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
setUserSolutions((prev) => [...prev.filter((x) => x.exercise !== solution.exercise), solution]);
}
if (exerciseIndex + 1 < exam.exercises.length && !hasExamEnded) {
if (exerciseIndex + 1 < exam.parts[partIndex].exercises.length && !hasExamEnded) {
setExerciseIndex((prev) => prev + 1);
return;
}
if (partIndex + 1 < exam.parts.length && !hasExamEnded) {
setPartIndex((prev) => prev + 1);
setExerciseIndex(showSolutions ? 0 : -1);
return;
}
if (
solution &&
![...userSolutions.filter((x) => x.exercise !== solution?.exercise).map((x) => x.score.missing), solution?.score.missing].every(
@@ -158,7 +167,7 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
};
const getExercise = () => {
const exercise = exam.exercises[exerciseIndex];
const exercise = exam.parts[partIndex].exercises[exerciseIndex];
return {
...exercise,
userSolutions: userSolutions.find((x) => x.exercise === exercise.id)?.solutions || [],
@@ -174,10 +183,10 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
<span className="text-base">You will be allowed to read the text while doing the exercises</span>
</div>
<div className="flex flex-col gap-2 w-full">
<h3 className="text-xl font-semibold">{exam.text.title}</h3>
<h3 className="text-xl font-semibold">{exam.parts[partIndex].text.title}</h3>
<div className="border border-mti-gray-dim w-full rounded-full opacity-10" />
<span className="overflow-auto">
{exam.text.content.split("\\n").map((line, index) => (
{exam.parts[partIndex].text.content.split("\\n").map((line, index) => (
<p key={index}>{line}</p>
))}
</span>
@@ -189,27 +198,33 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
<>
<div className="flex flex-col h-full w-full gap-8">
<BlankQuestionsModal isOpen={showBlankModal} onClose={confirmFinishModule} />
<TextModal {...exam.text} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
<TextModal {...exam.parts[partIndex].text} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
<ModuleTitle
minTimer={exam.minTimer}
exerciseIndex={exerciseIndex + 1}
exerciseIndex={
(exam.parts
.flatMap((x) => x.exercises)
.findIndex(
(x) => x.id === exam.parts[partIndex].exercises[exerciseIndex === -1 ? exerciseIndex + 1 : exerciseIndex]?.id,
) || 0) + (exerciseIndex === -1 ? 0 : 1)
}
module="reading"
totalExercises={exam.exercises.length}
totalExercises={exam.parts.flatMap((x) => x.exercises).length}
disableTimer={showSolutions}
label={exerciseIndex === -1 ? undefined : convertCamelCaseToReadable(exam.exercises[exerciseIndex].type)}
label={exerciseIndex === -1 ? undefined : convertCamelCaseToReadable(exam.parts[partIndex].exercises[exerciseIndex].type)}
/>
<div className={clsx("mb-20 w-full", exerciseIndex > -1 && "grid grid-cols-2 gap-4")}>
{renderText()}
{exerciseIndex > -1 &&
exerciseIndex < exam.exercises.length &&
exerciseIndex < exam.parts[partIndex].exercises.length &&
!showSolutions &&
renderExercise(getExercise(), nextExercise, previousExercise)}
{exerciseIndex > -1 &&
exerciseIndex < exam.exercises.length &&
exerciseIndex < exam.parts[partIndex].exercises.length &&
showSolutions &&
renderSolution(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
renderSolution(exam.parts[partIndex].exercises[exerciseIndex], nextExercise, previousExercise)}
</div>
{exerciseIndex > -1 && exerciseIndex < exam.exercises.length && (
{exerciseIndex > -1 && exerciseIndex < exam.parts[partIndex].exercises.length && (
<Button
color="purple"
variant="outline"
@@ -219,7 +234,25 @@ export default function Reading({exam, showSolutions = false, onFinish}: Props)
</Button>
)}
</div>
{exerciseIndex === -1 && (
{exerciseIndex === -1 && partIndex > 0 && (
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button
color="purple"
variant="outline"
onClick={() => {
setExerciseIndex(exam.parts[partIndex - 1].exercises.length - 1);
setPartIndex((prev) => prev - 1);
}}
className="max-w-[200px] w-full">
Back
</Button>
<Button color="purple" onClick={() => nextExercise()} className="max-w-[200px] self-end w-full">
Next
</Button>
</div>
)}
{exerciseIndex === -1 && partIndex === 0 && (
<Button color="purple" onClick={() => nextExercise()} className="max-w-[200px] self-end w-full">
Start now
</Button>

4
src/interfaces/exam.ts
View File

@@ -3,12 +3,14 @@ import {Module} from ".";
export type Exam = ReadingExam | ListeningExam | WritingExam | SpeakingExam;
export interface ReadingExam {
parts: {
text: {
title: string;
content: string;
};
id: string;
exercises: Exercise[];
}[];
id: string;
module: "reading";
minTimer: number;
type: "academic" | "general";

11
src/pages/(admin)/Lists/ExamList.tsx
View File

@@ -45,6 +45,15 @@ export default function ExamList() {
router.push("/exercises");
};
const getTotalExercises = (module: Module) => {
const exam = exams.find((x) => x.module === module)!;
if (exam.module === "reading") {
return exam.parts.flatMap((x) => x.exercises).length;
}
return exam.exercises.length;
};
const defaultColumns = [
columnHelper.accessor("id", {
header: "ID",
@@ -54,7 +63,7 @@ export default function ExamList() {
header: "Module",
cell: (info) => <span className={CLASSES[info.getValue()]}>{capitalize(info.getValue())}</span>,
}),
columnHelper.accessor((x) => x.exercises.length, {
columnHelper.accessor((x) => getTotalExercises(x.module), {
header: "Exercises",
cell: (info) => info.getValue(),
}),

2
src/pages/api/exam/[module]/index.ts
View File

@@ -21,7 +21,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
const {module, avoidRepeated} = req.query as {module: string; avoidRepeated: string};
const moduleRef = collection(db, module);
const q = query(moduleRef, where("isDiagnostic", "==", false));
const q = query(moduleRef, where("isDiagnostic", "==", true));
const snapshot = await getDocs(q);
const exams: Exam[] = shuffle(

10
src/pages/exam.tsx
View File

@@ -137,10 +137,16 @@ export default function Page() {
};
const updateExamWithUserSolutions = (exam: Exam): Exam => {
const exercises = exam.exercises.map((x) =>
Object.assign(x, !x.userSolutions ? {userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions} : x.userSolutions),
if (exam.module === "reading") {
const parts = exam.parts.map((p) =>
Object.assign(p, {
exercises: p.exercises.map((x) => Object.assign(x, {userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions})),
}),
);
return Object.assign(exam, {parts});
}
const exercises = exam.exercises.map((x) => Object.assign(x, {userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions}));
return Object.assign(exam, {exercises});
};

10
src/pages/exercises.tsx
View File

@@ -141,8 +141,16 @@ export default function Page() {
};
const updateExamWithUserSolutions = (exam: Exam): Exam => {
const exercises = exam.exercises.map((x) => Object.assign(x, {userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions}));
if (exam.module === "reading") {
const parts = exam.parts.map((p) =>
Object.assign(p, {
exercises: p.exercises.map((x) => Object.assign(x, {userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions})),
}),
);
return Object.assign(exam, {parts});
}
const exercises = exam.exercises.map((x) => Object.assign(x, {userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions}));
return Object.assign(exam, {exercises});
};

6
src/utils/evaluation.ts
View File

@@ -1,9 +1,9 @@
import {Evaluation, Exam, InteractiveSpeakingExercise, SpeakingExercise, UserSolution, WritingExercise} from "@/interfaces/exam";
import {Evaluation, Exam, SpeakingExam, SpeakingExercise, UserSolution, WritingExam, WritingExercise} from "@/interfaces/exam";
import axios from "axios";
import {speakingReverseMarking, writingReverseMarking} from "./score";
export const evaluateWritingAnswer = async (exams: Exam[], examId: string, exerciseId: string, solution: UserSolution) => {
const writingExam = exams.find((x) => x.id === examId)!;
const writingExam = exams.find((x) => x.id === examId)! as WritingExam;
const exercise = writingExam.exercises.find((x) => x.id === exerciseId)! as WritingExercise;
const response = await axios.post<Evaluation>("/api/evaluate/writing", {
@@ -27,7 +27,7 @@ export const evaluateWritingAnswer = async (exams: Exam[], examId: string, exerc
};
export const evaluateSpeakingAnswer = async (exams: Exam[], examId: string, exerciseId: string, solution: UserSolution) => {
const speakingExam = exams.find((x) => x.id === examId)!;
const speakingExam = exams.find((x) => x.id === examId)! as SpeakingExam;
const exercise = speakingExam.exercises.find((x) => x.id === exerciseId);
switch (exercise?.type) {