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

Possibly solved part of the issue with speaking

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-05-20 21:28:45 +01:00
parent e3ded29e77
commit 489c9c3b7e
3 changed files with 394 additions and 510 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
src/pages/(exam)/ExamPage.tsx
View File

@@ -1,6 +1,6 @@
/* eslint-disable @next/next/no-img-element */ /* eslint-disable @next/next/no-img-element */
import { Module } from "@/interfaces"; import {Module} from "@/interfaces";
import { useEffect, useState } from "react"; import {useEffect, useState} from "react";
import AbandonPopup from "@/components/AbandonPopup"; import AbandonPopup from "@/components/AbandonPopup";
import Layout from "@/components/High/Layout"; import Layout from "@/components/High/Layout";
@@ -12,18 +12,15 @@ import Selection from "@/exams/Selection";
import Speaking from "@/exams/Speaking"; import Speaking from "@/exams/Speaking";
import Writing from "@/exams/Writing"; import Writing from "@/exams/Writing";
import useUser from "@/hooks/useUser"; import useUser from "@/hooks/useUser";
import { Exam, UserSolution, Variant } from "@/interfaces/exam"; import {Exam, UserSolution, Variant} from "@/interfaces/exam";
import { Stat } from "@/interfaces/user"; import {Stat} from "@/interfaces/user";
import useExamStore from "@/stores/examStore"; import useExamStore from "@/stores/examStore";
import { import {evaluateSpeakingAnswer, evaluateWritingAnswer} from "@/utils/evaluation";
evaluateSpeakingAnswer, import {defaultExamUserSolutions, getExam} from "@/utils/exams";
evaluateWritingAnswer,
} from "@/utils/evaluation";
import { defaultExamUserSolutions, getExam } from "@/utils/exams";
import axios from "axios"; import axios from "axios";
import { useRouter } from "next/router"; import {useRouter} from "next/router";
import { toast, ToastContainer } from "react-toastify"; import {toast, ToastContainer} from "react-toastify";
import { v4 as uuidv4 } from "uuid"; import {v4 as uuidv4} from "uuid";
import useSessions from "@/hooks/useSessions"; import useSessions from "@/hooks/useSessions";
import ShortUniqueId from "short-unique-id"; import ShortUniqueId from "short-unique-id";
@@ -31,15 +28,13 @@ interface Props {
page: "exams" | "exercises"; page: "exams" | "exercises";
} }
export default function ExamPage({ page }: Props) { export default function ExamPage({page}: Props) {
const [variant, setVariant] = useState<Variant>("full"); const [variant, setVariant] = useState<Variant>("full");
const [avoidRepeated, setAvoidRepeated] = useState(false); const [avoidRepeated, setAvoidRepeated] = useState(false);
const [hasBeenUploaded, setHasBeenUploaded] = useState(false); const [hasBeenUploaded, setHasBeenUploaded] = useState(false);
const [showAbandonPopup, setShowAbandonPopup] = useState(false); const [showAbandonPopup, setShowAbandonPopup] = useState(false);
const [isEvaluationLoading, setIsEvaluationLoading] = useState(false); const [isEvaluationLoading, setIsEvaluationLoading] = useState(false);
const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState< const [statsAwaitingEvaluation, setStatsAwaitingEvaluation] = useState<string[]>([]);
string[]
>([]);
const [timeSpent, setTimeSpent] = useState(0); const [timeSpent, setTimeSpent] = useState(0);
const resetStore = useExamStore((state) => state.reset); const resetStore = useExamStore((state) => state.reset);
@@ -48,20 +43,18 @@ export default function ExamPage({ page }: Props) {
const examStore = useExamStore; const examStore = useExamStore;
const { exam, setExam } = useExamStore((state) => state); const {exam, setExam} = useExamStore((state) => state);
const { exams, setExams } = useExamStore((state) => state); const {exams, setExams} = useExamStore((state) => state);
const { sessionId, setSessionId } = useExamStore((state) => state); const {sessionId, setSessionId} = useExamStore((state) => state);
const { partIndex, setPartIndex } = useExamStore((state) => state); const {partIndex, setPartIndex} = useExamStore((state) => state);
const { moduleIndex, setModuleIndex } = useExamStore((state) => state); const {moduleIndex, setModuleIndex} = useExamStore((state) => state);
const { questionIndex, setQuestionIndex } = useExamStore((state) => state); const {questionIndex, setQuestionIndex} = useExamStore((state) => state);
const { exerciseIndex, setExerciseIndex } = useExamStore((state) => state); const {exerciseIndex, setExerciseIndex} = useExamStore((state) => state);
const { userSolutions, setUserSolutions } = useExamStore((state) => state); const {userSolutions, setUserSolutions} = useExamStore((state) => state);
const { showSolutions, setShowSolutions } = useExamStore((state) => state); const {showSolutions, setShowSolutions} = useExamStore((state) => state);
const { selectedModules, setSelectedModules } = useExamStore( const {selectedModules, setSelectedModules} = useExamStore((state) => state);
(state) => state,
);
const { user } = useUser({ redirectTo: "/login" }); const {user} = useUser({redirectTo: "/login"});
const router = useRouter(); const router = useRouter();
const reset = () => { const reset = () => {
@@ -97,10 +90,7 @@ export default function ExamPage({ page }: Props) {
}); });
}; };
useEffect( useEffect(() => setTimeSpent((prev) => prev + initialTimeSpent), [initialTimeSpent]);
() => setTimeSpent((prev) => prev + initialTimeSpent),
[initialTimeSpent],
);
useEffect(() => { useEffect(() => {
if (userSolutions.length === 0 && exams.length > 0) { if (userSolutions.length === 0 && exams.length > 0) {
@@ -122,28 +112,10 @@ export default function ExamPage({ page }: Props) {
) )
saveSession(); saveSession();
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [ }, [assignment, exam, exams, moduleIndex, selectedModules, sessionId, userSolutions, user, exerciseIndex, partIndex, questionIndex]);
assignment,
exam,
exams,
moduleIndex,
selectedModules,
sessionId,
userSolutions,
user,
exerciseIndex,
partIndex,
questionIndex,
]);
useEffect(() => { useEffect(() => {
if ( if (timeSpent % 20 === 0 && timeSpent > 0 && moduleIndex < selectedModules.length && !showSolutions) saveSession();
timeSpent % 20 === 0 &&
timeSpent > 0 &&
moduleIndex < selectedModules.length &&
!showSolutions
)
saveSession();
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [timeSpent]); }, [timeSpent]);
@@ -177,20 +149,11 @@ export default function ExamPage({ page }: Props) {
useEffect(() => { useEffect(() => {
(async () => { (async () => {
if ( if (selectedModules.length > 0 && exams.length > 0 && moduleIndex < selectedModules.length) {
selectedModules.length > 0 &&
exams.length > 0 &&
moduleIndex < selectedModules.length
) {
const nextExam = exams[moduleIndex]; const nextExam = exams[moduleIndex];
if (partIndex === -1 && nextExam.module !== "listening") if (partIndex === -1 && nextExam.module !== "listening") setPartIndex(0);
setPartIndex(0); if (exerciseIndex === -1 && !["reading", "listening"].includes(nextExam?.module)) setExerciseIndex(0);
if (
exerciseIndex === -1 &&
!["reading", "listening"].includes(nextExam?.module)
)
setExerciseIndex(0);
setExam(nextExam ? updateExamWithUserSolutions(nextExam) : undefined); setExam(nextExam ? updateExamWithUserSolutions(nextExam) : undefined);
} }
})(); })();
@@ -205,9 +168,7 @@ export default function ExamPage({ page }: Props) {
module, module,
avoidRepeated, avoidRepeated,
variant, variant,
user?.type === "student" || user?.type === "developer" user?.type === "student" || user?.type === "developer" ? user.preferredGender : undefined,
? user.preferredGender
: undefined,
), ),
); );
Promise.all(examPromises).then((values) => { Promise.all(examPromises).then((values) => {
@@ -224,13 +185,7 @@ export default function ExamPage({ page }: Props) {
}, [selectedModules, setExams, exams]); }, [selectedModules, setExams, exams]);
useEffect(() => { useEffect(() => {
if ( if (selectedModules.length > 0 && exams.length !== 0 && moduleIndex >= selectedModules.length && !hasBeenUploaded && !showSolutions) {
selectedModules.length > 0 &&
exams.length !== 0 &&
moduleIndex >= selectedModules.length &&
!hasBeenUploaded &&
!showSolutions
) {
const newStats: Stat[] = userSolutions.map((solution) => ({ const newStats: Stat[] = userSolutions.map((solution) => ({
...solution, ...solution,
id: solution.id || uuidv4(), id: solution.id || uuidv4(),
@@ -241,11 +196,11 @@ export default function ExamPage({ page }: Props) {
user: user?.id || "", user: user?.id || "",
date: new Date().getTime(), date: new Date().getTime(),
isDisabled: solution.isDisabled, isDisabled: solution.isDisabled,
...(assignment ? { assignment: assignment.id } : {}), ...(assignment ? {assignment: assignment.id} : {}),
})); }));
axios axios
.post<{ ok: boolean }>("/api/stats", newStats) .post<{ok: boolean}>("/api/stats", newStats)
.then((response) => setHasBeenUploaded(response.data.ok)) .then((response) => setHasBeenUploaded(response.data.ok))
.catch(() => setHasBeenUploaded(false)); .catch(() => setHasBeenUploaded(false));
} }
@@ -266,17 +221,10 @@ export default function ExamPage({ page }: Props) {
const checkIfStatsHaveBeenEvaluated = (ids: string[]) => { const checkIfStatsHaveBeenEvaluated = (ids: string[]) => {
setTimeout(async () => { setTimeout(async () => {
try { try {
const awaitedStats = await Promise.all( const awaitedStats = await Promise.all(ids.map(async (id) => (await axios.get<Stat>(`/api/stats/${id}`)).data));
ids.map( const solutionsEvaluated = awaitedStats.every((stat) => stat.solutions.every((x) => x.evaluation !== null));
async (id) => (await axios.get<Stat>(`/api/stats/${id}`)).data,
),
);
const solutionsEvaluated = awaitedStats.every((stat) =>
stat.solutions.every((x) => x.evaluation !== null),
);
if (solutionsEvaluated) { if (solutionsEvaluated) {
const statsUserSolutions: UserSolution[] = awaitedStats.map( const statsUserSolutions: UserSolution[] = awaitedStats.map((stat) => ({
(stat) => ({
id: stat.id, id: stat.id,
exercise: stat.exercise, exercise: stat.exercise,
score: stat.score, score: stat.score,
@@ -284,20 +232,15 @@ export default function ExamPage({ page }: Props) {
type: stat.type, type: stat.type,
exam: stat.exam, exam: stat.exam,
module: stat.module, module: stat.module,
}), }));
);
const updatedUserSolutions = userSolutions.map((x) => { const updatedUserSolutions = userSolutions.map((x) => {
const respectiveSolution = statsUserSolutions.find( const respectiveSolution = statsUserSolutions.find((y) => y.exercise === x.exercise);
(y) => y.exercise === x.exercise,
);
return respectiveSolution ? respectiveSolution : x; return respectiveSolution ? respectiveSolution : x;
}); });
setUserSolutions(updatedUserSolutions); setUserSolutions(updatedUserSolutions);
return setStatsAwaitingEvaluation((prev) => return setStatsAwaitingEvaluation((prev) => prev.filter((x) => !ids.includes(x)));
prev.filter((x) => !ids.includes(x)),
);
} }
return checkIfStatsHaveBeenEvaluated(ids); return checkIfStatsHaveBeenEvaluated(ids);
@@ -313,22 +256,20 @@ export default function ExamPage({ page }: Props) {
Object.assign(p, { Object.assign(p, {
exercises: p.exercises.map((x) => exercises: p.exercises.map((x) =>
Object.assign(x, { Object.assign(x, {
userSolutions: userSolutions.find((y) => x.id === y.exercise) userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions,
?.solutions,
}), }),
), ),
}), }),
); );
return Object.assign(exam, { parts }); return Object.assign(exam, {parts});
} }
const exercises = exam.exercises.map((x) => const exercises = exam.exercises.map((x) =>
Object.assign(x, { Object.assign(x, {
userSolutions: userSolutions.find((y) => x.id === y.exercise) userSolutions: userSolutions.find((y) => x.id === y.exercise)?.solutions,
?.solutions,
}), }),
); );
return Object.assign(exam, { exercises }); return Object.assign(exam, {exercises});
}; };
const onFinish = async (solutions: UserSolution[]) => { const onFinish = async (solutions: UserSolution[]) => {
@@ -339,12 +280,7 @@ export default function ExamPage({ page }: Props) {
if (exam && !solutionExams.includes(exam.id)) return; if (exam && !solutionExams.includes(exam.id)) return;
if ( if (exam && (exam.module === "writing" || exam.module === "speaking") && solutions.length > 0 && !showSolutions) {
exam &&
(exam.module === "writing" || exam.module === "speaking") &&
solutions.length > 0 &&
!showSolutions
) {
setHasBeenUploaded(true); setHasBeenUploaded(true);
setIsEvaluationLoading(true); setIsEvaluationLoading(true);
@@ -353,45 +289,27 @@ export default function ExamPage({ page }: Props) {
exam.exercises.map(async (exercise, index) => { exam.exercises.map(async (exercise, index) => {
const evaluationID = uuidv4(); const evaluationID = uuidv4();
if (exercise.type === "writing") if (exercise.type === "writing")
return await evaluateWritingAnswer( return await evaluateWritingAnswer(exercise, index + 1, solutions.find((x) => x.exercise === exercise.id)!, evaluationID);
exercise,
index + 1,
solutions.find((x) => x.exercise === exercise.id)!,
evaluationID,
);
if ( if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking")
exercise.type === "interactiveSpeaking" ||
exercise.type === "speaking"
)
return await evaluateSpeakingAnswer( return await evaluateSpeakingAnswer(
exercise, exercise,
solutions.find((x) => x.exercise === exercise.id)!, solutions.find((x) => x.exercise === exercise.id)!,
evaluationID, evaluationID,
index === 0 ? 1 : 2,
); );
}), }),
) )
).filter((x) => !!x) as UserSolution[]; ).filter((x) => !!x) as UserSolution[];
newSolutions = [ newSolutions = [...newSolutions.filter((x) => !responses.map((y) => y.exercise).includes(x.exercise)), ...responses];
...newSolutions.filter( setStatsAwaitingEvaluation((prev) => [...prev, ...responses.filter((x) => !!x).map((r) => (r as any).id)]);
(x) => !responses.map((y) => y.exercise).includes(x.exercise),
),
...responses,
];
setStatsAwaitingEvaluation((prev) => [
...prev,
...responses.filter((x) => !!x).map((r) => (r as any).id),
]);
setHasBeenUploaded(false); setHasBeenUploaded(false);
} }
axios.get("/api/stats/update"); axios.get("/api/stats/update");
setUserSolutions([ setUserSolutions([...userSolutions.filter((x) => !solutionIds.includes(x.exercise)), ...newSolutions]);
...userSolutions.filter((x) => !solutionIds.includes(x.exercise)),
...newSolutions,
]);
setModuleIndex(moduleIndex + 1); setModuleIndex(moduleIndex + 1);
setPartIndex(-1); setPartIndex(-1);
@@ -406,7 +324,7 @@ export default function ExamPage({ page }: Props) {
correct: number; correct: number;
}[] => { }[] => {
const scores: { const scores: {
[key in Module]: { total: number; missing: number; correct: number }; [key in Module]: {total: number; missing: number; correct: number};
} = { } = {
reading: { reading: {
total: 0, total: 0,
@@ -437,12 +355,7 @@ export default function ExamPage({ page }: Props) {
userSolutions.forEach((x) => { userSolutions.forEach((x) => {
const examModule = const examModule =
x.module || x.module || (x.type === "writing" ? "writing" : x.type === "speaking" || x.type === "interactiveSpeaking" ? "speaking" : undefined);
(x.type === "writing"
? "writing"
: x.type === "speaking" || x.type === "interactiveSpeaking"
? "speaking"
: undefined);
scores[examModule!] = { scores[examModule!] = {
total: scores[examModule!].total + x.score.total, total: scores[examModule!].total + x.score.total,
@@ -453,7 +366,7 @@ export default function ExamPage({ page }: Props) {
return Object.keys(scores) return Object.keys(scores)
.filter((x) => scores[x as Module].total > 0) .filter((x) => scores[x as Module].total > 0)
.map((x) => ({ module: x as Module, ...scores[x as Module] })); .map((x) => ({module: x as Module, ...scores[x as Module]}));
}; };
const renderScreen = () => { const renderScreen = () => {
@@ -482,9 +395,7 @@ export default function ExamPage({ page }: Props) {
onViewResults={(index?: number) => { onViewResults={(index?: number) => {
setShowSolutions(true); setShowSolutions(true);
setModuleIndex(index || 0); setModuleIndex(index || 0);
setExerciseIndex( setExerciseIndex(["reading", "listening"].includes(exams[0].module) ? -1 : 0);
["reading", "listening"].includes(exams[0].module) ? -1 : 0,
);
setPartIndex(exams[0].module === "listening" ? -1 : 0); setPartIndex(exams[0].module === "listening" ? -1 : 0);
setExam(exams[0]); setExam(exams[0]);
}} }}
@@ -494,49 +405,23 @@ export default function ExamPage({ page }: Props) {
} }
if (exam && exam.module === "reading") { if (exam && exam.module === "reading") {
return ( return <Reading exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
<Reading
exam={exam}
onFinish={onFinish}
showSolutions={showSolutions}
/>
);
} }
if (exam && exam.module === "listening") { if (exam && exam.module === "listening") {
return ( return <Listening exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
<Listening
exam={exam}
onFinish={onFinish}
showSolutions={showSolutions}
/>
);
} }
if (exam && exam.module === "writing") { if (exam && exam.module === "writing") {
return ( return <Writing exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
<Writing
exam={exam}
onFinish={onFinish}
showSolutions={showSolutions}
/>
);
} }
if (exam && exam.module === "speaking") { if (exam && exam.module === "speaking") {
return ( return <Speaking exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
<Speaking
exam={exam}
onFinish={onFinish}
showSolutions={showSolutions}
/>
);
} }
if (exam && exam.module === "level") { if (exam && exam.module === "level") {
return ( return <Level exam={exam} onFinish={onFinish} showSolutions={showSolutions} />;
<Level exam={exam} onFinish={onFinish} showSolutions={showSolutions} />
);
} }
return <>Loading...</>; return <>Loading...</>;
@@ -549,13 +434,8 @@ export default function ExamPage({ page }: Props) {
<Layout <Layout
user={user} user={user}
className="justify-between" className="justify-between"
focusMode={ focusMode={selectedModules.length !== 0 && !showSolutions && moduleIndex < selectedModules.length}
selectedModules.length !== 0 && onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}>
!showSolutions &&
moduleIndex < selectedModules.length
}
onFocusLayerMouseEnter={() => setShowAbandonPopup(true)}
>
<> <>
{renderScreen()} {renderScreen()}
{!showSolutions && moduleIndex < selectedModules.length && ( {!showSolutions && moduleIndex < selectedModules.length && (

9
src/pages/api/evaluate/speaking.ts
View File

@@ -30,6 +30,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
const audioFile = files.audio; const audioFile = files.audio;
const audioFileRef = ref(storage, `speaking_recordings/${fields.id}.wav`); const audioFileRef = ref(storage, `speaking_recordings/${fields.id}.wav`);
const task = parseInt(fields.task.toString());
const binary = fs.readFileSync((audioFile as any).path).buffer; const binary = fs.readFileSync((audioFile as any).path).buffer;
const snapshot = await uploadBytes(audioFileRef, binary); const snapshot = await uploadBytes(audioFileRef, binary);
@@ -39,7 +40,7 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
res.status(200).json(null); res.status(200).json(null);
console.log("🌱 - Still processing"); console.log("🌱 - Still processing");
const backendRequest = await evaluate({answers: [{question: fields.question, answer: path}]}); const backendRequest = await evaluate({answer: path, question: fields.question}, task);
console.log("🌱 - Process complete"); console.log("🌱 - Process complete");
const correspondingStat = await getCorrespondingStat(fields.id, 1); const correspondingStat = await getCorrespondingStat(fields.id, 1);
@@ -76,14 +77,14 @@ async function getCorrespondingStat(id: string, index: number): Promise<Stat> {
return getCorrespondingStat(id, index + 1); return getCorrespondingStat(id, index + 1);
} }
async function evaluate(body: {answers: object[]}): Promise<AxiosResponse> { async function evaluate(body: {answer: string; question: string}, task: number): Promise<AxiosResponse> {
const backendRequest = await axios.post(`${process.env.BACKEND_URL}/speaking_task_3`, body, { const backendRequest = await axios.post(`${process.env.BACKEND_URL}/speaking_task_${task}`, body, {
headers: { headers: {
Authorization: `Bearer ${process.env.BACKEND_JWT}`, Authorization: `Bearer ${process.env.BACKEND_JWT}`,
}, },
}); });
if (typeof backendRequest.data === "string") return evaluate(body); if (typeof backendRequest.data === "string") return evaluate(body, task);
return backendRequest; return backendRequest;
} }

5
src/utils/evaluation.ts
View File

@@ -45,10 +45,11 @@ export const evaluateSpeakingAnswer = async (
exercise: SpeakingExercise | InteractiveSpeakingExercise, exercise: SpeakingExercise | InteractiveSpeakingExercise,
solution: UserSolution, solution: UserSolution,
id: string, id: string,
task: number,
): Promise<UserSolution | undefined> => { ): Promise<UserSolution | undefined> => {
switch (exercise?.type) { switch (exercise?.type) {
case "speaking": case "speaking":
return {...(await evaluateSpeakingExercise(exercise, exercise.id, solution, id)), id} as UserSolution; return {...(await evaluateSpeakingExercise(exercise, exercise.id, solution, id, task)), id} as UserSolution;
case "interactiveSpeaking": case "interactiveSpeaking":
return {...(await evaluateInteractiveSpeakingExercise(exercise.id, solution, id)), id} as UserSolution; return {...(await evaluateInteractiveSpeakingExercise(exercise.id, solution, id)), id} as UserSolution;
default: default:
@@ -66,6 +67,7 @@ const evaluateSpeakingExercise = async (
exerciseId: string, exerciseId: string,
solution: UserSolution, solution: UserSolution,
id: string, id: string,
task: number,
): Promise<UserSolution | undefined> => { ): Promise<UserSolution | undefined> => {
const formData = new FormData(); const formData = new FormData();
@@ -81,6 +83,7 @@ const evaluateSpeakingExercise = async (
`${exercise.text.replaceAll("\n", "")}` + (exercise.prompts.length > 0 ? `You should talk about: ${exercise.prompts.join(", ")}` : ""); `${exercise.text.replaceAll("\n", "")}` + (exercise.prompts.length > 0 ? `You should talk about: ${exercise.prompts.join(", ")}` : "");
formData.append("question", evaluationQuestion); formData.append("question", evaluationQuestion);
formData.append("id", id); formData.append("id", id);
formData.append("task", task.toString());
const config = { const config = {
headers: { headers: {