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

Merge branch 'develop' into master-corporate

Browse Source
This commit is contained in:
Joao Ramos
2024-07-24 09:50:53 +01:00
parent 916fa66446 10a3243756
commit daa27e41b3
10 changed files with 729 additions and 912 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Exercises/InteractiveSpeaking.tsx
View File

@@ -60,7 +60,6 @@ export default function InteractiveSpeaking({
setIsLoading(true); setIsLoading(true);
const answer = await saveAnswer(questionIndex); const answer = await saveAnswer(questionIndex);
console.log(questionIndex + 1 < prompts.length, questionIndex, prompts.length);
if (questionIndex + 1 < prompts.length) { if (questionIndex + 1 < prompts.length) {
setQuestionIndex(questionIndex + 1); setQuestionIndex(questionIndex + 1);
setIsLoading(false); setIsLoading(false);

4
src/components/Exercises/MatchSentences.tsx
View File

@@ -87,10 +87,6 @@ export default function MatchSentences({id, options, type, prompt, sentences, us
return {total, correct, missing}; return {total, correct, missing};
}; };
useEffect(() => {
console.log(answers);
}, [answers]);
useEffect(() => { useEffect(() => {
if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type}); if (hasExamEnded) onNext({exercise: id, solutions: answers, score: calculateScore(), type});
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps

1
src/components/PaymobPayment.tsx
View File

@@ -20,7 +20,6 @@ interface Props {
export default function PaymobPayment({user, price, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) { export default function PaymobPayment({user, price, setIsPaymentLoading, currency, duration, duration_unit, onSuccess}: Props) {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
console.log(user.id);
const router = useRouter(); const router = useRouter();

2
src/components/Solutions/Writing.tsx
View File

@@ -124,7 +124,7 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on
return ( return (
<div <div
className={clsx( className={clsx(
"bg-ielts-speaking text-ielts-speaking-light rounded-xl px-4 py-2", "bg-ielts-writing text-ielts-writing-light rounded-xl px-4 py-2",
typeof taskResponse !== "number" && "tooltip", typeof taskResponse !== "number" && "tooltip",
)} )}
data-tip={typeof taskResponse !== "number" ? taskResponse.comment : ""} data-tip={typeof taskResponse !== "number" ? taskResponse.comment : ""}

2
src/pages/(admin)/BatchCodeGenerator.tsx
View File

@@ -47,8 +47,6 @@ export default function BatchCodeGenerator({user}: {user: User}) {
readAs: "ArrayBuffer", readAs: "ArrayBuffer",
}); });
useEffect(() => console.log(expiryDate), [expiryDate]);
useEffect(() => { useEffect(() => {
if (!isExpiryDateEnabled) setExpiryDate(null); if (!isExpiryDateEnabled) setExpiryDate(null);
}, [isExpiryDateEnabled]); }, [isExpiryDateEnabled]);

21
src/pages/(admin)/Lists/UserList.tsx
View File

@@ -131,7 +131,6 @@ export default function UserList({
filteredUsers, filteredUsers,
sortFunction sortFunction
); );
console.log(sortedUsers);
setDisplayUsers([...sortedUsers]); setDisplayUsers([...sortedUsers]);
} }
@@ -234,7 +233,7 @@ export default function UserList({
const actionColumn = ({ row }: { row: { original: User } }) => { const actionColumn = ({ row }: { row: { original: User } }) => {
return ( return (
<div className="flex gap-4"> <div className="flex gap-4">
{PERMISSIONS.updateUser[row.original.type].includes(user.type) && ( {PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && (
<Popover className="relative"> <Popover className="relative">
<Popover.Button> <Popover.Button>
<div data-tip="Change Type" className="cursor-pointer tooltip"> <div data-tip="Change Type" className="cursor-pointer tooltip">
@@ -298,7 +297,7 @@ export default function UserList({
</Popover> </Popover>
)} )}
{!row.original.isVerified && {!row.original.isVerified &&
PERMISSIONS.updateUser[row.original.type].includes(user.type) && ( PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && (
<div <div
data-tip="Verify User" data-tip="Verify User"
className="cursor-pointer tooltip" className="cursor-pointer tooltip"
@@ -307,7 +306,7 @@ export default function UserList({
<BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" /> <BsCheck className="hover:text-mti-purple-light transition ease-in-out duration-300" />
</div> </div>
)} )}
{PERMISSIONS.updateUser[row.original.type].includes(user.type) && ( {PERMISSIONS.updateUser[row.original.type]?.includes(user.type) && (
<div <div
data-tip={ data-tip={
row.original.status === "disabled" row.original.status === "disabled"
@@ -324,7 +323,7 @@ export default function UserList({
)} )}
</div> </div>
)} )}
{PERMISSIONS.deleteUser[row.original.type].includes(user.type) && ( {PERMISSIONS.deleteUser[row.original.type]?.includes(user.type) && (
<div <div
data-tip="Delete" data-tip="Delete"
className="cursor-pointer tooltip" className="cursor-pointer tooltip"
@@ -351,13 +350,13 @@ export default function UserList({
cell: ({ row, getValue }) => ( cell: ({ row, getValue }) => (
<div <div
className={clsx( className={clsx(
PERMISSIONS.updateExpiryDate[row.original.type].includes( PERMISSIONS.updateExpiryDate[row.original.type]?.includes(
user.type user.type
) && ) &&
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer" "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
)} )}
onClick={() => onClick={() =>
PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type)
? setSelectedUser(row.original) ? setSelectedUser(row.original)
: null : null
} }
@@ -467,13 +466,13 @@ export default function UserList({
cell: ({ row, getValue }) => ( cell: ({ row, getValue }) => (
<div <div
className={clsx( className={clsx(
PERMISSIONS.updateExpiryDate[row.original.type].includes( PERMISSIONS.updateExpiryDate[row.original.type]?.includes(
user.type user.type
) && ) &&
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer" "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
)} )}
onClick={() => onClick={() =>
PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type)
? setSelectedUser(row.original) ? setSelectedUser(row.original)
: null : null
} }
@@ -498,13 +497,13 @@ export default function UserList({
cell: ({ row, getValue }) => ( cell: ({ row, getValue }) => (
<div <div
className={clsx( className={clsx(
PERMISSIONS.updateExpiryDate[row.original.type].includes( PERMISSIONS.updateExpiryDate[row.original.type]?.includes(
user.type user.type
) && ) &&
"underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer" "underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer"
)} )}
onClick={() => onClick={() =>
PERMISSIONS.updateExpiryDate[row.original.type].includes(user.type) PERMISSIONS.updateExpiryDate[row.original.type]?.includes(user.type)
? setSelectedUser(row.original) ? setSelectedUser(row.original)
: null : null
} }

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

@@ -357,7 +357,7 @@ export default function ExamPage({page}: Props) {
exercise, exercise,
solutions.find((x) => x.exercise === exercise.id)!, solutions.find((x) => x.exercise === exercise.id)!,
evaluationID, evaluationID,
index === 0 ? 1 : 2, index + 1,
); );
}), }),
) )

605
src/pages/(generation)/LevelGeneration.tsx
View File

@@ -1,375 +1,298 @@
import Select from "@/components/Low/Select"; import Select from "@/components/Low/Select";
import { import {Difficulty, LevelExam, MultipleChoiceExercise, MultipleChoiceQuestion, LevelPart} from "@/interfaces/exam";
Difficulty,
LevelExam,
MultipleChoiceExercise,
MultipleChoiceQuestion,
LevelPart,
} from "@/interfaces/exam";
import useExamStore from "@/stores/examStore"; import useExamStore from "@/stores/examStore";
import { getExamById } from "@/utils/exams"; import {getExamById} from "@/utils/exams";
import { playSound } from "@/utils/sound"; import {playSound} from "@/utils/sound";
import { Tab } from "@headlessui/react"; import {Tab} from "@headlessui/react";
import axios from "axios"; import axios from "axios";
import clsx from "clsx"; import clsx from "clsx";
import { capitalize, sample } from "lodash"; import {capitalize, sample} from "lodash";
import { useRouter } from "next/router"; import {useRouter} from "next/router";
import { useState } from "react"; import {useState} from "react";
import { BsArrowRepeat, BsCheck, BsPencilSquare, BsX } from "react-icons/bs"; import {BsArrowRepeat, BsCheck, BsPencilSquare, BsX} from "react-icons/bs";
import { toast } from "react-toastify"; import {toast} from "react-toastify";
import { v4 } from "uuid"; import {v4} from "uuid";
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"]; const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
const QuestionDisplay = ({ const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion; onUpdate: (question: MultipleChoiceQuestion) => void}) => {
question, const [isEditing, setIsEditing] = useState(false);
onUpdate, const [options, setOptions] = useState(question.options);
}: { const [answer, setAnswer] = useState(question.solution);
question: MultipleChoiceQuestion;
onUpdate: (question: MultipleChoiceQuestion) => void;
}) => {
const [isEditing, setIsEditing] = useState(false);
const [options, setOptions] = useState(question.options);
const [answer, setAnswer] = useState(question.solution);
return ( return (
<div key={question.id} className="flex flex-col gap-1"> <div key={question.id} className="flex flex-col gap-1">
<span className="font-semibold"> <span className="font-semibold">
{question.id}. {question.prompt}{" "} {question.id}. {question.prompt}{" "}
</span> </span>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
{question.options.map((option, index) => ( {question.options.map((option, index) => (
<span <span key={option.id} className={clsx(answer === option.id && "font-bold")}>
key={option.id} <span
className={clsx(answer === option.id && "font-bold")} className={clsx("font-semibold", answer === option.id ? "text-mti-green-light" : "text-ielts-level")}
> onClick={() => setAnswer(option.id)}>
<span ({option.id})
className={clsx( </span>{" "}
"font-semibold", {isEditing ? (
answer === option.id <input
? "text-mti-green-light" defaultValue={option.text}
: "text-ielts-level" className="w-60"
)} onChange={(e) => setOptions((prev) => prev.map((x, idx) => (idx === index ? {...x, text: e.target.value} : x)))}
onClick={() => setAnswer(option.id)} />
> ) : (
({option.id}) <span>{option.text}</span>
</span>{" "} )}
{isEditing ? ( </span>
<input ))}
defaultValue={option.text} </div>
className="w-60" <div className="flex gap-2 mt-2 w-full">
onChange={(e) => {!isEditing && (
setOptions((prev) => <button
prev.map((x, idx) => onClick={() => setIsEditing(true)}
idx === index ? { ...x, text: e.target.value } : x className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
) <BsPencilSquare />
) </button>
} )}
/> {isEditing && (
) : ( <>
<span>{option.text}</span> <button
)} onClick={() => {
</span> onUpdate({...question, options, solution: answer});
))} setIsEditing(false);
</div> }}
<div className="flex gap-2 mt-2 w-full"> className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
{!isEditing && ( <BsCheck />
<button </button>
onClick={() => setIsEditing(true)} <button
className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300" onClick={() => setIsEditing(false)}
> className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
<BsPencilSquare /> <BsX />
</button> </button>
)} </>
{isEditing && ( )}
<> </div>
<button </div>
onClick={() => { );
onUpdate({ ...question, options, solution: answer });
setIsEditing(false);
}}
className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300"
>
<BsCheck />
</button>
<button
onClick={() => setIsEditing(false)}
className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300"
>
<BsX />
</button>
</>
)}
</div>
</div>
);
}; };
const TaskTab = ({ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelPart; difficulty: Difficulty; setExam: (exam: LevelPart) => void}) => {
exam, const [isLoading, setIsLoading] = useState(false);
difficulty,
setExam,
}: {
exam?: LevelPart;
difficulty: Difficulty;
setExam: (exam: LevelPart) => void;
}) => {
const [isLoading, setIsLoading] = useState(false);
const generate = () => { const generate = () => {
const url = new URLSearchParams(); const url = new URLSearchParams();
url.append("difficulty", difficulty); url.append("difficulty", difficulty);
setIsLoading(true); setIsLoading(true);
axios axios
.get(`/api/exam/level/generate/level?${url.toString()}`) .get(`/api/exam/level/generate/level?${url.toString()}`)
.then((result) => { .then((result) => {
playSound(typeof result.data === "string" ? "error" : "check"); playSound(typeof result.data === "string" ? "error" : "check");
if (typeof result.data === "string") if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
return toast.error( setExam(result.data);
"Something went wrong, please try to generate again." })
); .catch((error) => {
setExam(result.data); console.log(error);
}) toast.error("Something went wrong!");
.catch((error) => { })
console.log(error); .finally(() => setIsLoading(false));
toast.error("Something went wrong!"); };
})
.finally(() => setIsLoading(false));
};
const onUpdate = (question: MultipleChoiceQuestion) => { const onUpdate = (question: MultipleChoiceQuestion) => {
if (!exam) return; if (!exam) return;
const updatedExam = { const updatedExam = {
...exam, ...exam,
exercises: exam.exercises.map((x) => ({ exercises: exam.exercises.map((x) => ({
...x, ...x,
questions: (x as MultipleChoiceExercise).questions.map((q) => questions: (x as MultipleChoiceExercise).questions.map((q) => (q.id === question.id ? question : q)),
q.id === question.id ? question : q })),
), };
}), console.log(updatedExam);
), setExam(updatedExam as any);
}; };
console.log(updatedExam);
setExam(updatedExam as any);
};
return ( return (
<Tab.Panel className="w-full bg-ielts-level/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4"> <Tab.Panel className="w-full bg-ielts-level/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
<div className="flex gap-4 items-end"> <div className="flex gap-4 items-end">
<button <button
onClick={generate} onClick={generate}
disabled={isLoading} disabled={isLoading}
className={clsx( className={clsx(
"bg-ielts-level/70 border border-ielts-level text-white w-full px-6 py-6 rounded-xl h-[70px]", "bg-ielts-level/70 border border-ielts-level text-white w-full px-6 py-6 rounded-xl h-[70px]",
"hover:bg-ielts-level disabled:bg-ielts-level/40 disabled:cursor-not-allowed", "hover:bg-ielts-level disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300" "transition ease-in-out duration-300",
)} )}>
> {isLoading ? (
{isLoading ? ( <div className="flex items-center justify-center">
<div className="flex items-center justify-center"> <BsArrowRepeat className="text-white animate-spin" size={25} />
<BsArrowRepeat className="text-white animate-spin" size={25} /> </div>
</div> ) : (
) : ( "Generate"
"Generate" )}
)} </button>
</button> </div>
</div> {isLoading && (
{isLoading && ( <div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center">
<div className="w-fit h-fit mt-12 self-center animate-pulse flex flex-col gap-8 items-center"> <span className={clsx("loading loading-infinity w-32 text-ielts-level")} />
<span <span className={clsx("font-bold text-2xl text-ielts-level")}>Generating...</span>
className={clsx("loading loading-infinity w-32 text-ielts-level")} </div>
/> )}
<span className={clsx("font-bold text-2xl text-ielts-level")}> {exam && (
Generating... <div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide h-full">
</span> {exam.exercises
</div> .filter((x) => x.type === "multipleChoice")
)} .map((ex) => {
{exam && ( const exercise = ex as MultipleChoiceExercise;
<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide h-full">
{exam.exercises
.filter((x) => x.type === "multipleChoice")
.map((ex) => {
const exercise = ex as MultipleChoiceExercise;
return ( return (
<div key={ex.id} className="w-full h-full flex flex-col gap-2"> <div key={ex.id} className="w-full h-full flex flex-col gap-2">
<div className="flex gap-2"> <div className="flex gap-2">
<span className="text-xl font-semibold"> <span className="text-xl font-semibold">Multiple Choice</span>
Multiple Choice <span className="rounded-xl bg-white border border-ielts-level p-1 px-4 w-fit">
</span> {exercise.questions.length} questions
<span className="rounded-xl bg-white border border-ielts-level p-1 px-4 w-fit"> </span>
{exercise.questions.length} questions </div>
</span> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
</div> {exercise.questions.map((question) => (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <QuestionDisplay question={question} onUpdate={onUpdate} key={question.id} />
{exercise.questions.map((question) => ( ))}
<QuestionDisplay </div>
question={question} </div>
onUpdate={onUpdate} );
key={question.id} })}
/> </div>
))} )}
</div> </Tab.Panel>
</div> );
);
})}
</div>
)}
</Tab.Panel>
);
}; };
const LevelGeneration = () => { const LevelGeneration = () => {
const [generatedExam, setGeneratedExam] = useState<LevelPart>(); const [generatedExam, setGeneratedExam] = useState<LevelPart>();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [resultingExam, setResultingExam] = useState<LevelExam>(); const [resultingExam, setResultingExam] = useState<LevelExam>();
const [difficulty, setDifficulty] = useState<Difficulty>( const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
sample(DIFFICULTIES)!
);
const router = useRouter(); const router = useRouter();
const setExams = useExamStore((state) => state.setExams); const setExams = useExamStore((state) => state.setExams);
const setSelectedModules = useExamStore((state) => state.setSelectedModules); const setSelectedModules = useExamStore((state) => state.setSelectedModules);
const loadExam = async (examId: string) => { const loadExam = async (examId: string) => {
const exam = await getExamById("level", examId.trim()); const exam = await getExamById("level", examId.trim());
if (!exam) { if (!exam) {
toast.error( toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
"Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", toastId: "invalid-exam-id",
{ });
toastId: "invalid-exam-id",
}
);
return; return;
} }
setExams([exam]); setExams([exam]);
setSelectedModules(["level"]); setSelectedModules(["level"]);
router.push("/exercises"); router.push("/exercises");
}; };
const submitExam = () => { const submitExam = () => {
if (!generatedExam) { if (!generatedExam) {
toast.error("Please generate all tasks before submitting"); toast.error("Please generate all tasks before submitting");
return; return;
} }
setIsLoading(true); setIsLoading(true);
const exam: LevelExam = { const exam: LevelExam = {
isDiagnostic: false, isDiagnostic: false,
minTimer: 25, minTimer: 25,
module: "level", module: "level",
id: v4(), id: v4(),
parts: [generatedExam], parts: [generatedExam],
}; };
axios axios
.post(`/api/exam/level`, exam) .post(`/api/exam/level`, exam)
.then((result) => { .then((result) => {
playSound("sent"); playSound("sent");
console.log(`Generated Exam ID: ${result.data.id}`); console.log(`Generated Exam ID: ${result.data.id}`);
toast.success( toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
"This new exam has been generated successfully! Check the ID in our browser's console." setResultingExam(result.data);
);
setResultingExam(result.data);
setGeneratedExam(undefined); setGeneratedExam(undefined);
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error);
toast.error( toast.error("Something went wrong while generating, please try again later.");
"Something went wrong while generating, please try again later." })
); .finally(() => setIsLoading(false));
}) };
.finally(() => setIsLoading(false));
};
return ( return (
<> <>
<div className="flex gap-4 w-1/2"> <div className="flex gap-4 w-1/2">
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim"> <label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
Difficulty <Select
</label> options={DIFFICULTIES.map((x) => ({
<Select value: x,
options={DIFFICULTIES.map((x) => ({ label: capitalize(x),
value: x, }))}
label: capitalize(x), onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
}))} value={{value: difficulty, label: capitalize(difficulty)}}
onChange={(value) => />
value ? setDifficulty(value.value as Difficulty) : null </div>
} </div>
value={{ value: difficulty, label: capitalize(difficulty) }} <Tab.Group>
/> <Tab.List className="flex space-x-1 rounded-xl bg-ielts-level/20 p-1">
</div> <Tab
</div> className={({selected}) =>
<Tab.Group> clsx(
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-level/20 p-1"> "w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-level/70",
<Tab "ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-level focus:outline-none focus:ring-2",
className={({ selected }) => "transition duration-300 ease-in-out",
clsx( selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-level",
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-level/70", )
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-level focus:outline-none focus:ring-2", }>
"transition duration-300 ease-in-out", Exam
selected </Tab>
? "bg-white shadow" </Tab.List>
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-level" <Tab.Panels>
) <TaskTab difficulty={difficulty} exam={generatedExam} setExam={setGeneratedExam} />
} </Tab.Panels>
> </Tab.Group>
Exam <div className="w-full flex justify-end gap-4">
</Tab> {resultingExam && (
</Tab.List> <button
<Tab.Panels> disabled={isLoading}
<TaskTab onClick={() => loadExam(resultingExam.id)}
difficulty={difficulty} className={clsx(
exam={generatedExam} "bg-white border border-ielts-level text-ielts-level w-full max-w-[200px] rounded-xl h-[70px] self-end",
setExam={setGeneratedExam} "hover:bg-ielts-level hover:text-white disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
/> "transition ease-in-out duration-300",
</Tab.Panels> )}>
</Tab.Group> Perform Exam
<div className="w-full flex justify-end gap-4"> </button>
{resultingExam && ( )}
<button <button
disabled={isLoading} disabled={!generatedExam || isLoading}
onClick={() => loadExam(resultingExam.id)} data-tip="Please generate all three passages"
className={clsx( onClick={submitExam}
"bg-white border border-ielts-level text-ielts-level w-full max-w-[200px] rounded-xl h-[70px] self-end", className={clsx(
"hover:bg-ielts-level hover:text-white disabled:bg-ielts-level/40 disabled:cursor-not-allowed", "bg-ielts-level/70 border border-ielts-level text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
"transition ease-in-out duration-300" "hover:bg-ielts-level disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
)} "transition ease-in-out duration-300",
> !generatedExam && "tooltip",
Perform Exam )}>
</button> {isLoading ? (
)} <div className="flex items-center justify-center">
<button <BsArrowRepeat className="text-white animate-spin" size={25} />
disabled={!generatedExam || isLoading} </div>
data-tip="Please generate all three passages" ) : (
onClick={submitExam} "Submit"
className={clsx( )}
"bg-ielts-level/70 border border-ielts-level text-white w-full max-w-[200px] rounded-xl h-[70px] self-end", </button>
"hover:bg-ielts-level disabled:bg-ielts-level/40 disabled:cursor-not-allowed", </div>
"transition ease-in-out duration-300", </>
!generatedExam && "tooltip" );
)}
>
{isLoading ? (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />
</div>
) : (
"Submit"
)}
</button>
</div>
</>
);
}; };
export default LevelGeneration; export default LevelGeneration;

1001
src/pages/record.tsx
View File

File diff suppressed because it is too large Load Diff

2
src/utils/evaluation.ts
View File

@@ -51,7 +51,7 @@ export const evaluateSpeakingAnswer = async (
case "speaking": case "speaking":
return {...(await evaluateSpeakingExercise(exercise, exercise.id, solution, id, task)), 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, exercise.variant)), id} as UserSolution; return {...(await evaluateInteractiveSpeakingExercise(exercise.id, solution, id, task === 3 ? "final" : "initial")), id} as UserSolution;
default: default:
return undefined; return undefined;
} }