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

Merged in ENCOA-57_EditExamsGenerate (pull request #53)

Browse Source 
ENCOA-57 EditExamsGenerate

Approved-by: Tiago Ribeiro
This commit is contained in:
João Ramos
2024-07-18 09:32:05 +00:00
committed by Tiago Ribeiro
parent 5cfd6d56a6 13fd7e1ee5
commit a1b67c017d
12 changed files with 2290 additions and 1183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/Generation/fill.blanks.edit.tsx Normal file
View File

@@ -0,0 +1,84 @@
import { FillBlanksExercise } from "@/interfaces/exam";
import React from "react";
import Input from "@/components/Low/Input";
interface Props {
exercise: FillBlanksExercise;
updateExercise: (data: any) => void;
}
const FillBlanksEdit = (props: Props) => {
const { exercise, updateExercise } = props;
return (
<>
<Input
type="text"
label="Prompt"
name="prompt"
required
value={exercise.prompt}
onChange={(value) =>
updateExercise({
prompt: value,
})
}
/>
<Input
type="text"
label="Text"
name="text"
required
value={exercise.text}
onChange={(value) =>
updateExercise({
text: value,
})
}
/>
<h1>Solutions</h1>
<div className="w-full flex flex-wrap -mx-2">
{exercise.solutions.map((solution, index) => (
<div key={solution.id} className="flex sm:w-1/2 lg:w-1/4 px-2">
<Input
type="text"
label={`Solution ${index + 1}`}
name="solution"
required
value={solution.solution}
onChange={(value) =>
updateExercise({
solutions: exercise.solutions.map((sol) =>
sol.id === solution.id ? { ...sol, solution: value } : sol
),
})
}
/>
</div>
))}
</div>
<h1>Words</h1>
<div className="w-full flex flex-wrap -mx-2">
{exercise.words.map((word, index) => (
<div key={index} className="flex sm:w-1/2 lg:w-1/4 px-2">
<Input
type="text"
label={`Word ${index + 1}`}
name="word"
required
value={word}
onChange={(value) =>
updateExercise({
words: exercise.words.map((sol, idx) =>
index === idx ? value : sol
),
})
}
/>
</div>
))}
</div>
</>
);
};
export default FillBlanksEdit;

7
src/components/Generation/interactive.speaking.edit.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from "react";
const InteractiveSpeakingEdit = () => {
return null;
};
export default InteractiveSpeakingEdit;

130
src/components/Generation/match.sentences.edit.tsx Normal file
View File

@@ -0,0 +1,130 @@
import React from "react";
import { MatchSentencesExercise } from "@/interfaces/exam";
import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select";
interface Props {
exercise: MatchSentencesExercise;
updateExercise: (data: any) => void;
}
const MatchSentencesEdit = (props: Props) => {
const { exercise, updateExercise } = props;
const selectOptions = exercise.options.map((option) => ({
value: option.id,
label: option.id,
}));
return (
<>
<Input
type="text"
label="Prompt"
name="prompt"
required
value={exercise.prompt}
onChange={(value) =>
updateExercise({
prompt: value,
})
}
/>
<h1>Solutions</h1>
<div className="w-full flex flex-wrap -mx-2">
{exercise.sentences.map((sentence, index) => (
<div key={sentence.id} className="flex flex-col w-full px-2">
<div className="flex w-full">
<Input
type="text"
label={`Sentence ${index + 1}`}
name="sentence"
required
value={sentence.sentence}
onChange={(value) =>
updateExercise({
sentences: exercise.sentences.map((iSol) =>
iSol.id === sentence.id
? {
...iSol,
sentence: value,
}
: iSol
),
})
}
className="px-2"
/>
<div className="w-48 flex items-end px-2">
<Select
value={selectOptions.find(
(o) => o.value === sentence.solution
)}
options={selectOptions}
onChange={(value) => {
updateExercise({
sentences: exercise.sentences.map((iSol) =>
iSol.id === sentence.id
? {
...iSol,
solution: value?.value,
}
: iSol
),
});
}}
/>
</div>
</div>
</div>
))}
<h1>Options</h1>
<div className="w-full flex flex-wrap -mx-2">
{exercise.options.map((option, index) => (
<div key={option.id} className="flex flex-col w-full px-2">
<div className="flex w-full">
<Input
type="text"
label={`Option ${index + 1}`}
name="option"
required
value={option.sentence}
onChange={(value) =>
updateExercise({
options: exercise.options.map((iSol) =>
iSol.id === option.id
? {
...iSol,
sentence: value,
}
: iSol
),
})
}
className="px-2"
/>
<div className="w-48 flex items-end px-2">
<Select
value={{
value: option.id,
label: option.id,
}}
options={[
{
value: option.id,
label: option.id,
},
]}
disabled
onChange={() => {}}
/>
</div>
</div>
</div>
))}
</div>
</div>
</>
);
};
export default MatchSentencesEdit;

137
src/components/Generation/multiple.choice.edit.tsx Normal file
View File

@@ -0,0 +1,137 @@
import React from "react";
import Input from "@/components/Low/Input";
import {
MultipleChoiceExercise,
MultipleChoiceQuestion,
} from "@/interfaces/exam";
import Select from "@/components/Low/Select";
interface Props {
exercise: MultipleChoiceExercise;
updateExercise: (data: any) => void;
}
const variantOptions = [
{ value: "text", label: "Text", key: "text" },
{ value: "image", label: "Image", key: "src" },
];
const MultipleChoiceEdit = (props: Props) => {
const { exercise, updateExercise } = props;
return (
<>
<h1>Questions</h1>
<div className="w-full flex-no-wrap -mx-2">
{exercise.questions.map((question: MultipleChoiceQuestion, index) => {
const variantValue = variantOptions.find(
(o) => o.value === question.variant
);
const solutionsOptions = question.options.map((option) => ({
value: option.id,
label: option.id,
}));
const solutionValue = solutionsOptions.find(
(o) => o.value === question.solution
);
return (
<div key={question.id} className="flex w-full px-2 flex-col">
<span>Question ID: {question.id}</span>
<Input
type="text"
label="Prompt"
name="prompt"
required
value={question.prompt}
onChange={(value) =>
updateExercise({
questions: exercise.questions.map((sol) =>
sol.id === question.id ? { ...sol, prompt: value } : sol
),
})
}
/>
<div className="flex w-full">
<div className="w-48 flex items-end px-2">
<Select
value={solutionValue}
options={solutionsOptions}
onChange={(value) => {
updateExercise({
questions: exercise.questions.map((sol) =>
sol.id === question.id
? { ...sol, solution: value?.value }
: sol
),
});
}}
/>
</div>
<div className="w-48 flex items-end px-2">
<Select
value={variantValue}
options={variantOptions}
onChange={(value) => {
updateExercise({
questions: exercise.questions.map((sol) =>
sol.id === question.id
? { ...sol, variant: value?.value }
: sol
),
});
}}
/>
</div>
</div>
<div className="flex w-full flex-wrap -mx-2">
{question.options.map((option) => (
<div
key={option.id}
className="flex sm:w-1/2 lg:w-1/4 px-2 px-2"
>
<Input
type="text"
label={`Option ${option.id}`}
name="option"
required
value={option.text}
onChange={(value) =>
updateExercise({
questions: exercise.questions.map((sol) =>
sol.id === question.id
? {
...sol,
options: sol.options.map((opt) => {
if (
opt.id === option.id &&
variantValue?.key
) {
return {
...opt,
[variantValue.key]: value,
};
}
return opt;
}),
}
: sol
),
})
}
/>
</div>
))}
</div>
</div>
);
})}
</div>
</>
);
};
export default MultipleChoiceEdit;

7
src/components/Generation/speaking.edit.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react';
const SpeakingEdit = () => {
return null;
}
export default SpeakingEdit;

71
src/components/Generation/true.false.edit.tsx Normal file
View File

@@ -0,0 +1,71 @@
import React from "react";
import { TrueFalseExercise } from "@/interfaces/exam";
import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select";
interface Props {
exercise: TrueFalseExercise;
updateExercise: (data: any) => void;
}
const options = [
{ value: "true", label: "True" },
{ value: "false", label: "False" },
{ value: "not_given", label: "Not Given" },
];
const TrueFalseEdit = (props: Props) => {
const { exercise, updateExercise } = props;
return (
<>
<Input
type="text"
label="Prompt"
name="prompt"
required
value={exercise.prompt}
onChange={(value) =>
updateExercise({
prompt: value,
})
}
/>
<h1>Questions</h1>
<div className="w-full flex-no-wrap -mx-2">
{exercise.questions.map((question, index) => (
<div key={question.id} className="flex w-full px-2">
<Input
type="text"
label={`Question ${index + 1}`}
name="question"
required
value={question.prompt}
onChange={(value) =>
updateExercise({
questions: exercise.questions.map((sol) =>
sol.id === question.id ? { ...sol, prompt: value } : sol
),
})
}
/>
<div className="w-48 flex items-end px-2">
<Select
value={options.find((o) => o.value === question.solution)}
options={options}
onChange={(value) => {
updateExercise({
questions: exercise.questions.map((sol) =>
sol.id === question.id ? { ...sol, solution: value?.value } : sol
),
});
}}
className="h-18"
/>
</div>
</div>
))}
</div>
</>
);
};
export default TrueFalseEdit;

94
src/components/Generation/write.blanks.edit.tsx Normal file
View File

@@ -0,0 +1,94 @@
import React from "react";
import Input from "@/components/Low/Input";
import { WriteBlanksExercise } from "@/interfaces/exam";
interface Props {
exercise: WriteBlanksExercise;
updateExercise: (data: any) => void;
}
const WriteBlankEdits = (props: Props) => {
const { exercise, updateExercise } = props;
return (
<>
<Input
type="text"
label="Prompt"
name="prompt"
required
value={exercise.prompt}
onChange={(value) =>
updateExercise({
prompt: value,
})
}
/>
<Input
type="text"
label="Text"
name="text"
required
value={exercise.text}
onChange={(value) =>
updateExercise({
text: value,
})
}
/>
<Input
type="text"
label="Max Words"
name="number"
required
value={exercise.maxWords}
onChange={(value) =>
updateExercise({
maxWords: Number(value),
})
}
/>
<h1>Solutions</h1>
<div className="w-full flex flex-wrap -mx-2">
{exercise.solutions.map((solution) => (
<div key={solution.id} className="flex flex-col w-full px-2">
<span>Solution ID: {solution.id}</span>
{/* TODO: Consider adding an add and delete button */}
<div className="flex flex-wrap">
{solution.solution.map((sol, solIndex) => (
<Input
key={`${sol}-${solIndex}`}
type="text"
label={`Solution ${solIndex + 1}`}
name="solution"
required
value={sol}
onChange={(value) =>
updateExercise({
solutions: exercise.solutions.map((iSol) =>
iSol.id === solution.id
? {
...iSol,
solution: iSol.solution.map((iiSol, iiIndex) => {
if (iiIndex === solIndex) {
return value;
}
return iiSol;
}),
}
: iSol
),
})
}
className="sm:w-1/2 lg:w-1/4 px-2"
/>
))}
</div>
</div>
))}
</div>
</>
);
};
export default WriteBlankEdits;

7
src/components/Generation/writing.edit.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react';
const WritingEdit = () => {
return null;
}
export default WritingEdit;

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

@@ -1,5 +1,11 @@
import Select from "@/components/Low/Select";
import {Difficulty, LevelExam, MultipleChoiceExercise, MultipleChoiceQuestion} from "@/interfaces/exam";
import {
Difficulty,
LevelExam,
MultipleChoiceExercise,
MultipleChoiceQuestion,
LevelPart,
} from "@/interfaces/exam";
import useExamStore from "@/stores/examStore";
import { getExamById } from "@/utils/exams";
import { playSound } from "@/utils/sound";
@@ -15,9 +21,16 @@ import {v4} from "uuid";
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion; onUpdate: (question: MultipleChoiceQuestion) => void}) => {
const QuestionDisplay = ({
question,
onUpdate,
}: {
question: MultipleChoiceQuestion;
onUpdate: (question: MultipleChoiceQuestion) => void;
}) => {
const [isEditing, setIsEditing] = useState(false);
const [options, setOptions] = useState(question.options);
const [answer, setAnswer] = useState(question.solution);
return (
<div key={question.id} className="flex flex-col gap-1">
@@ -26,15 +39,32 @@ const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion
</span>
<div className="flex flex-col gap-1">
{question.options.map((option, index) => (
<span key={option.id} className={clsx(question.solution === option.id && "font-bold")}>
<span className={clsx("font-semibold", question.solution === option.id ? "text-mti-green-light" : "text-ielts-level")}>
<span
key={option.id}
className={clsx(answer === option.id && "font-bold")}
>
<span
className={clsx(
"font-semibold",
answer === option.id
? "text-mti-green-light"
: "text-ielts-level"
)}
onClick={() => setAnswer(option.id)}
>
({option.id})
</span>{" "}
{isEditing ? (
<input
defaultValue={option.text}
className="w-60"
onChange={(e) => setOptions((prev) => prev.map((x, idx) => (idx === index ? {...x, text: e.target.value} : x)))}
onChange={(e) =>
setOptions((prev) =>
prev.map((x, idx) =>
idx === index ? { ...x, text: e.target.value } : x
)
)
}
/>
) : (
<span>{option.text}</span>
@@ -46,7 +76,8 @@ const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion
{!isEditing && (
<button
onClick={() => setIsEditing(true)}
className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300">
className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300"
>
<BsPencilSquare />
</button>
)}
@@ -54,15 +85,17 @@ const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion
<>
<button
onClick={() => {
onUpdate({...question, options});
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">
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">
className="p-2 border border-neutral-300 bg-white rounded-xl hover:drop-shadow transition ease-in-out duration-300"
>
<BsX />
</button>
</>
@@ -72,7 +105,15 @@ const QuestionDisplay = ({question, onUpdate}: {question: MultipleChoiceQuestion
);
};
const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Difficulty; setExam: (exam: LevelExam) => void}) => {
const TaskTab = ({
exam,
difficulty,
setExam,
}: {
exam?: LevelPart;
difficulty: Difficulty;
setExam: (exam: LevelPart) => void;
}) => {
const [isLoading, setIsLoading] = useState(false);
const generate = () => {
@@ -84,7 +125,10 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
.get(`/api/exam/level/generate/level?${url.toString()}`)
.then((result) => {
playSound(typeof result.data === "string" ? "error" : "check");
if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
if (typeof result.data === "string")
return toast.error(
"Something went wrong, please try to generate again."
);
setExam(result.data);
})
.catch((error) => {
@@ -99,11 +143,12 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
const updatedExam = {
...exam,
parts: exam.parts.map((p) =>
p.exercises.map((x) => ({
exercises: exam.exercises.map((x) => ({
...x,
questions: (x as MultipleChoiceExercise).questions.map((q) => (q.id === question.id ? question : q)),
})),
questions: (x as MultipleChoiceExercise).questions.map((q) =>
q.id === question.id ? question : q
),
}),
),
};
console.log(updatedExam);
@@ -119,8 +164,9 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
className={clsx(
"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",
"transition ease-in-out duration-300",
)}>
"transition ease-in-out duration-300"
)}
>
{isLoading ? (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />
@@ -132,14 +178,17 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
</div>
{isLoading && (
<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 className={clsx("font-bold text-2xl text-ielts-level")}>Generating...</span>
<span
className={clsx("loading loading-infinity w-32 text-ielts-level")}
/>
<span className={clsx("font-bold text-2xl text-ielts-level")}>
Generating...
</span>
</div>
)}
{exam && (
<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide h-full">
{exam.parts
.flatMap((x) => x.exercises)
{exam.exercises
.filter((x) => x.type === "multipleChoice")
.map((ex) => {
const exercise = ex as MultipleChoiceExercise;
@@ -147,14 +196,20 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
return (
<div key={ex.id} className="w-full h-full flex flex-col gap-2">
<div className="flex gap-2">
<span className="text-xl font-semibold">Multiple Choice</span>
<span className="text-xl font-semibold">
Multiple Choice
</span>
<span className="rounded-xl bg-white border border-ielts-level p-1 px-4 w-fit">
{exercise.questions.length} questions
</span>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{exercise.questions.map((question) => (
<QuestionDisplay question={question} onUpdate={onUpdate} key={question.id} />
<QuestionDisplay
question={question}
onUpdate={onUpdate}
key={question.id}
/>
))}
</div>
</div>
@@ -167,10 +222,12 @@ const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelExam; difficulty: Dif
};
const LevelGeneration = () => {
const [generatedExam, setGeneratedExam] = useState<LevelExam>();
const [generatedExam, setGeneratedExam] = useState<LevelPart>();
const [isLoading, setIsLoading] = useState(false);
const [resultingExam, setResultingExam] = useState<LevelExam>();
const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
const [difficulty, setDifficulty] = useState<Difficulty>(
sample(DIFFICULTIES)!
);
const router = useRouter();
@@ -180,9 +237,12 @@ const LevelGeneration = () => {
const loadExam = async (examId: string) => {
const exam = await getExamById("level", examId.trim());
if (!exam) {
toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
toast.error(
"Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
{
toastId: "invalid-exam-id",
});
}
);
return;
}
@@ -200,12 +260,13 @@ const LevelGeneration = () => {
}
setIsLoading(true);
const exam: LevelExam = {
...generatedExam,
isDiagnostic: false,
minTimer: 25,
module: "level",
id: v4(),
parts: [generatedExam],
};
axios
@@ -213,14 +274,18 @@ const LevelGeneration = () => {
.then((result) => {
playSound("sent");
console.log(`Generated Exam ID: ${result.data.id}`);
toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
toast.success(
"This new exam has been generated successfully! Check the ID in our browser's console."
);
setResultingExam(result.data);
setGeneratedExam(undefined);
})
.catch((error) => {
console.log(error);
toast.error("Something went wrong while generating, please try again later.");
toast.error(
"Something went wrong while generating, please try again later."
);
})
.finally(() => setIsLoading(false));
};
@@ -229,10 +294,17 @@ const LevelGeneration = () => {
<>
<div className="flex gap-4 w-1/2">
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
<label className="font-normal text-base text-mti-gray-dim">
Difficulty
</label>
<Select
options={DIFFICULTIES.map((x) => ({value: x, label: capitalize(x)}))}
onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
options={DIFFICULTIES.map((x) => ({
value: x,
label: capitalize(x),
}))}
onChange={(value) =>
value ? setDifficulty(value.value as Difficulty) : null
}
value={{ value: difficulty, label: capitalize(difficulty) }}
/>
</div>
@@ -245,14 +317,21 @@ const LevelGeneration = () => {
"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",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-level",
selected
? "bg-white shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-level"
)
}>
}
>
Exam
</Tab>
</Tab.List>
<Tab.Panels>
<TaskTab difficulty={difficulty} exam={generatedExam} setExam={setGeneratedExam} />
<TaskTab
difficulty={difficulty}
exam={generatedExam}
setExam={setGeneratedExam}
/>
</Tab.Panels>
</Tab.Group>
<div className="w-full flex justify-end gap-4">
@@ -263,8 +342,9 @@ const LevelGeneration = () => {
className={clsx(
"bg-white border border-ielts-level text-ielts-level w-full max-w-[200px] rounded-xl h-[70px] self-end",
"hover:bg-ielts-level hover:text-white disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300",
)}>
"transition ease-in-out duration-300"
)}
>
Perform Exam
</button>
)}
@@ -276,8 +356,9 @@ const LevelGeneration = () => {
"bg-ielts-level/70 border border-ielts-level text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
"hover:bg-ielts-level disabled:bg-ielts-level/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300",
!generatedExam && "tooltip",
)}>
!generatedExam && "tooltip"
)}
>
{isLoading ? (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />

325
src/pages/(generation)/ListeningGeneration.tsx
View File

@@ -1,3 +1,4 @@
import MultipleChoiceEdit from "@/components/Generation/multiple.choice.edit";
import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select";
import { Difficulty, Exercise, ListeningExam } from "@/interfaces/exam";
@@ -10,27 +11,49 @@ import axios from "axios";
import clsx from "clsx";
import { capitalize, sample } from "lodash";
import { useRouter } from "next/router";
import {useEffect, useState} from "react";
import { useEffect, useState, Dispatch, SetStateAction } from "react";
import { BsArrowRepeat, BsCheck } from "react-icons/bs";
import { toast } from "react-toastify";
import WriteBlanksEdit from "@/components/Generation/write.blanks.edit";
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
const MULTIPLE_CHOICE = { type: "multipleChoice", label: "Multiple Choice" };
const WRITE_BLANKS_QUESTIONS = {
type: "writeBlanksQuestions",
label: "Write the Blanks: Questions",
};
const WRITE_BLANKS_FILL = {
type: "writeBlanksFill",
label: "Write the Blanks: Fill",
};
const WRITE_BLANKS_FORM = {
type: "writeBlanksForm",
label: "Write the Blanks: Form",
};
const MULTIPLE_CHOICE_3 = {
type: "multipleChoice3Options",
label: "Multiple Choice",
};
const PartTab = ({
part,
types,
difficulty,
availableTypes,
index,
setPart,
updatePart,
}: {
part?: ListeningPart;
difficulty: Difficulty;
types: string[];
availableTypes: { type: string; label: string }[];
index: number;
setPart: (part?: ListeningPart) => void;
updatePart: Dispatch<SetStateAction<ListeningPart | undefined>>;
}) => {
const [topic, setTopic] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [types, setTypes] = useState<string[]>([]);
const generate = () => {
const url = new URLSearchParams();
@@ -42,10 +65,17 @@ const PartTab = ({
setPart(undefined);
setIsLoading(true);
axios
.get(`/api/exam/listening/generate/listening_section_${index}${topic || types ? `?${url.toString()}` : ""}`)
.get(
`/api/exam/listening/generate/listening_section_${index}${
topic || types ? `?${url.toString()}` : ""
}`
)
.then((result) => {
playSound(typeof result.data === "string" ? "error" : "check");
if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
if (typeof result.data === "string")
return toast.error(
"Something went wrong, please try to generate again."
);
setPart(result.data);
})
.catch((error) => {
@@ -55,10 +85,107 @@ const PartTab = ({
.finally(() => setIsLoading(false));
};
const renderExercises = () => {
return part?.exercises.map((exercise) => {
switch (exercise.type) {
case "multipleChoice":
return (
<>
<h1>Exercise: Multiple Choice</h1>
<MultipleChoiceEdit
exercise={exercise}
key={exercise.id}
updateExercise={(data: any) =>
updatePart((part?: ListeningPart) => {
if (part) {
const exercises = part.exercises.map((x) =>
x.id === exercise.id ? { ...x, ...data } : x
) as Exercise[];
const updatedPart = {
...part,
exercises,
} as ListeningPart;
return updatedPart;
}
return part;
})
}
/>
</>
);
// TODO: This might be broken as they all returns the same
case "writeBlanks":
return (
<>
<h1>Exercise: Write Blanks</h1>
<WriteBlanksEdit
exercise={exercise}
key={exercise.id}
updateExercise={(data: any) => {
updatePart((part?: ListeningPart) => {
if (part) {
return {
...part,
exercises: part.exercises.map((x) =>
x.id === exercise.id ? { ...x, ...data } : x
),
} as ListeningPart;
}
return part;
});
}}
/>
</>
);
default:
return null;
}
});
};
const toggleType = (type: string) =>
setTypes((prev) =>
prev.includes(type)
? [...prev.filter((x) => x !== type)]
: [...prev, type]
);
return (
<Tab.Panel className="w-full bg-ielts-listening/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
<div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim">
Exercises
</label>
<div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
{availableTypes.map((x) => (
<span
onClick={() => toggleType(x.type)}
key={x.type}
className={clsx(
"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
!types.includes(x.type)
? "bg-white border-mti-gray-platinum"
: "bg-ielts-listening/70 border-ielts-listening text-white"
)}
>
{x.label}
</span>
))}
</div>
</div>
<div className="flex gap-4 items-end">
<Input type="text" placeholder="Grand Canyon..." name="topic" label="Topic" onChange={setTopic} roundness="xl" defaultValue={topic} />
<Input
type="text"
placeholder="Grand Canyon..."
name="topic"
label="Topic"
onChange={setTopic}
roundness="xl"
defaultValue={topic}
/>
<button
onClick={generate}
disabled={isLoading || types.length === 0}
@@ -67,8 +194,9 @@ const PartTab = ({
"bg-ielts-listening/70 border border-ielts-listening text-white w-full max-w-[200px] rounded-xl h-[70px]",
"hover:bg-ielts-listening disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300",
isLoading && "tooltip",
)}>
isLoading && "tooltip"
)}
>
{isLoading ? (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />
@@ -80,20 +208,34 @@ const PartTab = ({
</div>
{isLoading && (
<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-listening")} />
<span className={clsx("font-bold text-2xl text-ielts-listening")}>Generating...</span>
<span
className={clsx(
"loading loading-infinity w-32 text-ielts-listening"
)}
/>
<span className={clsx("font-bold text-2xl text-ielts-listening")}>
Generating...
</span>
</div>
)}
{part && (
<>
<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide">
<div className="flex gap-4">
{part.exercises.map((x) => (
<span className="rounded-xl bg-white border border-ielts-listening p-1 px-4" key={x.id}>
<span
className="rounded-xl bg-white border border-ielts-listening p-1 px-4"
key={x.id}
>
{x.type && convertCamelCaseToReadable(x.type)}
</span>
))}
</div>
{typeof part.text === "string" && <span className="w-full h-96">{part.text.replaceAll("\n\n", " ")}</span>}
{typeof part.text === "string" && (
<span className="w-full h-96">
{part.text.replaceAll("\n\n", " ")}
</span>
)}
{typeof part.text !== "string" && (
<div className="w-full h-96 flex flex-col gap-2">
{part.text.conversation.map((x, index) => (
@@ -105,6 +247,8 @@ const PartTab = ({
</div>
)}
</div>
{renderExercises()}
</>
)}
</Tab.Panel>
);
@@ -132,8 +276,9 @@ const ListeningGeneration = () => {
const [minTimer, setMinTimer] = useState(30);
const [isLoading, setIsLoading] = useState(false);
const [resultingExam, setResultingExam] = useState<ListeningExam>();
const [types, setTypes] = useState<string[]>([]);
const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
const [difficulty, setDifficulty] = useState<Difficulty>(
sample(DIFFICULTIES)!
);
useEffect(() => {
const part1Timer = part1 ? 5 : 0;
@@ -145,33 +290,31 @@ const ListeningGeneration = () => {
setMinTimer(sum > 0 ? sum : 5);
}, [part1, part2, part3, part4]);
const availableTypes = [
{type: "multipleChoice", label: "Multiple Choice"},
{type: "writeBlanksQuestions", label: "Write the Blanks: Questions"},
{type: "writeBlanksFill", label: "Write the Blanks: Fill"},
{type: "writeBlanksForm", label: "Write the Blanks: Form"},
];
const router = useRouter();
const setExams = useExamStore((state) => state.setExams);
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
const toggleType = (type: string) => setTypes((prev) => (prev.includes(type) ? [...prev.filter((x) => x !== type)] : [...prev, type]));
const submitExam = () => {
const parts = [part1, part2, part3, part4].filter((x) => !!x);
console.log({ parts });
if (parts.length === 0) return toast.error("Please generate at least one section!");
if (parts.length === 0)
return toast.error("Please generate at least one section!");
setIsLoading(true);
axios
.post(`/api/exam/listening/generate/listening`, {parts, minTimer, difficulty})
.post(`/api/exam/listening/generate/listening`, {
parts,
minTimer,
difficulty,
})
.then((result) => {
playSound("sent");
console.log(`Generated Exam ID: ${result.data.id}`);
toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
toast.success(
"This new exam has been generated successfully! Check the ID in our browser's console."
);
setResultingExam(result.data);
setPart1(undefined);
@@ -179,7 +322,6 @@ const ListeningGeneration = () => {
setPart3(undefined);
setPart4(undefined);
setDifficulty(sample(DIFFICULTIES)!);
setTypes([]);
})
.catch((error) => {
console.log(error);
@@ -191,9 +333,12 @@ const ListeningGeneration = () => {
const loadExam = async (examId: string) => {
const exam = await getExamById("listening", examId.trim());
if (!exam) {
toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
toast.error(
"Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
{
toastId: "invalid-exam-id",
});
}
);
return;
}
@@ -208,7 +353,9 @@ const ListeningGeneration = () => {
<>
<div className="flex gap-4 w-1/2">
<div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim">Timer</label>
<label className="font-normal text-base text-mti-gray-dim">
Timer
</label>
<Input
type="number"
name="minTimer"
@@ -218,36 +365,22 @@ const ListeningGeneration = () => {
/>
</div>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
<label className="font-normal text-base text-mti-gray-dim">
Difficulty
</label>
<Select
options={DIFFICULTIES.map((x) => ({value: x, label: capitalize(x)}))}
onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
options={DIFFICULTIES.map((x) => ({
value: x,
label: capitalize(x),
}))}
onChange={(value) =>
value ? setDifficulty(value.value as Difficulty) : null
}
value={{ value: difficulty, label: capitalize(difficulty) }}
disabled={!!part1 || !!part2 || !!part3 || !!part4}
/>
</div>
</div>
<div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim">Exercises</label>
<div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
{availableTypes.map((x) => (
<span
onClick={() => toggleType(x.type)}
key={x.type}
className={clsx(
"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
!types.includes(x.type)
? "bg-white border-mti-gray-platinum"
: "bg-ielts-listening/70 border-ielts-listening text-white",
)}>
{x.label}
</span>
))}
</div>
</div>
<Tab.Group>
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-listening/20 p-1">
<Tab
@@ -256,9 +389,12 @@ const ListeningGeneration = () => {
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
selected
? "bg-white shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening"
)
}>
}
>
Section 1 {part1 && <BsCheck />}
</Tab>
<Tab
@@ -267,9 +403,12 @@ const ListeningGeneration = () => {
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
selected
? "bg-white shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening"
)
}>
}
>
Section 2 {part2 && <BsCheck />}
</Tab>
<Tab
@@ -278,9 +417,12 @@ const ListeningGeneration = () => {
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
selected
? "bg-white shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening"
)
}>
}
>
Section 3 {part3 && <BsCheck />}
</Tab>
<Tab
@@ -289,20 +431,57 @@ const ListeningGeneration = () => {
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-listening/70 flex gap-2 items-center justify-center",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-listening focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening",
selected
? "bg-white shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-listening"
)
}>
}
>
Section 4 {part4 && <BsCheck />}
</Tab>
</Tab.List>
<Tab.Panels>
{[
{part: part1, setPart: setPart1},
{part: part2, setPart: setPart2},
{part: part3, setPart: setPart3},
{part: part4, setPart: setPart4},
].map(({part, setPart}, index) => (
<PartTab part={part} difficulty={difficulty} types={types} index={index + 1} key={index} setPart={setPart} />
{
part: part1,
setPart: setPart1,
types: [
MULTIPLE_CHOICE,
WRITE_BLANKS_QUESTIONS,
WRITE_BLANKS_FILL,
WRITE_BLANKS_FORM,
],
},
{
part: part2,
setPart: setPart2,
types: [MULTIPLE_CHOICE, WRITE_BLANKS_QUESTIONS],
},
{
part: part3,
setPart: setPart3,
types: [MULTIPLE_CHOICE_3, WRITE_BLANKS_QUESTIONS],
},
{
part: part4,
setPart: setPart4,
types: [
MULTIPLE_CHOICE,
WRITE_BLANKS_QUESTIONS,
WRITE_BLANKS_FILL,
WRITE_BLANKS_FORM,
],
},
].map(({ part, setPart, types }, index) => (
<PartTab
part={part}
difficulty={difficulty}
availableTypes={types}
index={index + 1}
key={index}
setPart={setPart}
updatePart={setPart}
/>
))}
</Tab.Panels>
</Tab.Group>
@@ -314,8 +493,9 @@ const ListeningGeneration = () => {
className={clsx(
"bg-white border border-ielts-listening text-ielts-listening w-full max-w-[200px] rounded-xl h-[70px] self-end",
"hover:bg-ielts-listening hover:text-white disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300",
)}>
"transition ease-in-out duration-300"
)}
>
Perform Exam
</button>
)}
@@ -327,8 +507,9 @@ const ListeningGeneration = () => {
"bg-ielts-listening/70 border border-ielts-listening text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
"hover:bg-ielts-listening disabled:bg-ielts-listening/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300",
!part1 && !part2 && !part3 && !part4 && "tooltip",
)}>
!part1 && !part2 && !part3 && !part4 && "tooltip"
)}
>
{isLoading ? (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />

307
src/pages/(generation)/ReadingGeneration.tsx
View File

@@ -1,6 +1,11 @@
import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select";
import {Difficulty, ReadingExam, ReadingPart} from "@/interfaces/exam";
import {
Difficulty,
Exercise,
ReadingExam,
ReadingPart,
} from "@/interfaces/exam";
import useExamStore from "@/stores/examStore";
import { getExamById } from "@/utils/exams";
import { playSound } from "@/utils/sound";
@@ -10,28 +15,48 @@ import axios from "axios";
import clsx from "clsx";
import { capitalize, sample } from "lodash";
import { useRouter } from "next/router";
import {useEffect, useState} from "react";
import { useEffect, useState, Dispatch, SetStateAction } from "react";
import { BsArrowRepeat, BsCheck } from "react-icons/bs";
import { toast } from "react-toastify";
import { v4 } from "uuid";
import FillBlanksEdit from "@/components/Generation/fill.blanks.edit";
import TrueFalseEdit from "@/components/Generation/true.false.edit";
import WriteBlanksEdit from "@/components/Generation/write.blanks.edit";
import MatchSentencesEdit from "@/components/Generation/match.sentences.edit";
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
const availableTypes = [
{ type: "fillBlanks", label: "Fill the Blanks" },
{ type: "trueFalse", label: "True or False" },
{ type: "writeBlanks", label: "Write the Blanks" },
{ type: "paragraphMatch", label: "Match Sentences" },
];
const PartTab = ({
part,
types,
difficulty,
index,
setPart,
updatePart,
}: {
part?: ReadingPart;
types: string[];
index: number;
difficulty: Difficulty;
setPart: (part?: ReadingPart) => void;
updatePart: Dispatch<SetStateAction<ReadingPart | undefined>>;
// updatePart: (updater: (part: ReadingPart) => ReadingPart) => void;
}) => {
const [topic, setTopic] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [types, setTypes] = useState<string[]>([]);
const toggleType = (type: string) =>
setTypes((prev) =>
prev.includes(type)
? [...prev.filter((x) => x !== type)]
: [...prev, type]
);
const generate = () => {
const url = new URLSearchParams();
@@ -43,10 +68,17 @@ const PartTab = ({
setPart(undefined);
setIsLoading(true);
axios
.get(`/api/exam/reading/generate/reading_passage_${index}${topic || types ? `?${url.toString()}` : ""}`)
.get(
`/api/exam/reading/generate/reading_passage_${index}${
topic || types ? `?${url.toString()}` : ""
}`
)
.then((result) => {
playSound(typeof result.data === "string" ? "error" : "check");
if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
if (typeof result.data === "string")
return toast.error(
"Something went wrong, please try to generate again."
);
setPart(result.data);
})
.catch((error) => {
@@ -56,10 +88,144 @@ const PartTab = ({
.finally(() => setIsLoading(false));
};
const renderExercises = () => {
return part?.exercises.map((exercise) => {
switch (exercise.type) {
case "fillBlanks":
return (
<>
<h1>Exercise: Fill Blanks</h1>
<FillBlanksEdit
exercise={exercise}
key={exercise.id}
updateExercise={(data: any) =>
updatePart((part?: ReadingPart) => {
if (part) {
const exercises = part.exercises.map((x) =>
x.id === exercise.id ? { ...x, ...data } : x
) as Exercise[];
const updatedPart = { ...part, exercises } as ReadingPart;
return updatedPart;
}
return part;
})
}
/>
</>
);
case "trueFalse":
return (
<>
<h1>Exercise: True or False</h1>
<TrueFalseEdit
exercise={exercise}
key={exercise.id}
updateExercise={(data: any) => {
updatePart((part?: ReadingPart) => {
if (part) {
return {
...part,
exercises: part.exercises.map((x) =>
x.id === exercise.id ? { ...x, ...data } : x
),
} as ReadingPart;
}
return part;
});
}}
/>
</>
);
case "writeBlanks":
return (
<>
<h1>Exercise: Write Blanks</h1>
<WriteBlanksEdit
exercise={exercise}
key={exercise.id}
updateExercise={(data: any) => {
updatePart((part?: ReadingPart) => {
if (part) {
return {
...part,
exercises: part.exercises.map((x) =>
x.id === exercise.id ? { ...x, ...data } : x
),
} as ReadingPart;
}
return part;
});
}}
/>
</>
);
case "matchSentences":
return (
<>
<h1>Exercise: Match Sentences</h1>
<MatchSentencesEdit
exercise={exercise}
key={exercise.id}
updateExercise={(data: any) => {
updatePart((part?: ReadingPart) => {
if (part) {
return {
...part,
exercises: part.exercises.map((x) =>
x.id === exercise.id ? { ...x, ...data } : x
),
} as ReadingPart;
}
return part;
});
}}
/>
</>
);
default:
return null;
}
});
};
return (
<Tab.Panel className="w-full bg-ielts-reading/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
<div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim">
Exercises
</label>
<div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
{availableTypes.map((x) => (
<span
onClick={() => toggleType(x.type)}
key={x.type}
className={clsx(
"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
!types.includes(x.type)
? "bg-white border-mti-gray-platinum"
: "bg-ielts-reading/70 border-ielts-reading text-white"
)}
>
{x.label}
</span>
))}
</div>
</div>
<div className="flex gap-4 items-end">
<Input type="text" placeholder="Grand Canyon..." name="topic" label="Topic" onChange={setTopic} roundness="xl" defaultValue={topic} />
<Input
type="text"
placeholder="Grand Canyon..."
name="topic"
label="Topic"
onChange={setTopic}
roundness="xl"
defaultValue={topic}
/>
<button
onClick={generate}
disabled={isLoading || types.length === 0}
@@ -68,8 +234,9 @@ const PartTab = ({
"bg-ielts-reading/70 border border-ielts-reading text-white w-full max-w-[200px] rounded-xl h-[70px]",
"hover:bg-ielts-reading disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300",
isLoading && "tooltip",
)}>
isLoading && "tooltip"
)}
>
{isLoading ? (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />
@@ -81,15 +248,23 @@ const PartTab = ({
</div>
{isLoading && (
<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-reading")} />
<span className={clsx("font-bold text-2xl text-ielts-reading")}>Generating...</span>
<span
className={clsx("loading loading-infinity w-32 text-ielts-reading")}
/>
<span className={clsx("font-bold text-2xl text-ielts-reading")}>
Generating...
</span>
</div>
)}
{part && (
<>
<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide">
<div className="flex gap-4">
{part.exercises.map((x) => (
<span className="rounded-xl bg-white border border-ielts-reading p-1 px-4" key={x.id}>
<span
className="rounded-xl bg-white border border-ielts-reading p-1 px-4"
key={x.id}
>
{x.type && convertCamelCaseToReadable(x.type)}
</span>
))}
@@ -97,6 +272,8 @@ const PartTab = ({
<h3 className="text-xl font-semibold">{part.text.title}</h3>
<span className="w-full h-96">{part.text.content}</span>
</div>
{renderExercises()}
</>
)}
</Tab.Panel>
);
@@ -107,10 +284,11 @@ const ReadingGeneration = () => {
const [part2, setPart2] = useState<ReadingPart>();
const [part3, setPart3] = useState<ReadingPart>();
const [minTimer, setMinTimer] = useState(60);
const [types, setTypes] = useState<string[]>([]);
const [isLoading, setIsLoading] = useState(false);
const [resultingExam, setResultingExam] = useState<ReadingExam>();
const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
const [difficulty, setDifficulty] = useState<Difficulty>(
sample(DIFFICULTIES)!
);
useEffect(() => {
const parts = [part1, part2, part3].filter((x) => !!x);
@@ -122,21 +300,15 @@ const ReadingGeneration = () => {
const setExams = useExamStore((state) => state.setExams);
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
const availableTypes = [
{type: "fillBlanks", label: "Fill the Blanks"},
{type: "trueFalse", label: "True or False"},
{type: "writeBlanks", label: "Write the Blanks"},
{type: "matchSentences", label: "Match Sentences"},
];
const toggleType = (type: string) => setTypes((prev) => (prev.includes(type) ? [...prev.filter((x) => x !== type)] : [...prev, type]));
const loadExam = async (examId: string) => {
const exam = await getExamById("reading", examId.trim());
if (!exam) {
toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
toast.error(
"Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
{
toastId: "invalid-exam-id",
});
}
);
return;
}
@@ -171,7 +343,9 @@ const ReadingGeneration = () => {
.then((result) => {
playSound("sent");
console.log(`Generated Exam ID: ${result.data.id}`);
toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
toast.success(
"This new exam has been generated successfully! Check the ID in our browser's console."
);
setResultingExam(result.data);
setPart1(undefined);
@@ -179,11 +353,12 @@ const ReadingGeneration = () => {
setPart3(undefined);
setDifficulty(sample(DIFFICULTIES)!);
setMinTimer(60);
setTypes([]);
})
.catch((error) => {
console.log(error);
toast.error("Something went wrong while generating, please try again later.");
toast.error(
"Something went wrong while generating, please try again later."
);
})
.finally(() => setIsLoading(false));
};
@@ -192,7 +367,9 @@ const ReadingGeneration = () => {
<>
<div className="flex gap-4 w-1/2">
<div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim">Timer</label>
<label className="font-normal text-base text-mti-gray-dim">
Timer
</label>
<Input
type="number"
name="minTimer"
@@ -202,34 +379,22 @@ const ReadingGeneration = () => {
/>
</div>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
<label className="font-normal text-base text-mti-gray-dim">
Difficulty
</label>
<Select
options={DIFFICULTIES.map((x) => ({value: x, label: capitalize(x)}))}
onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
options={DIFFICULTIES.map((x) => ({
value: x,
label: capitalize(x),
}))}
onChange={(value) =>
value ? setDifficulty(value.value as Difficulty) : null
}
value={{ value: difficulty, label: capitalize(difficulty) }}
disabled={!!part1 || !!part2 || !!part3}
/>
</div>
</div>
<div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim">Exercises</label>
<div className="flex flex-row -2xl:flex-wrap w-full gap-4 -md:justify-center justify-between">
{availableTypes.map((x) => (
<span
onClick={() => toggleType(x.type)}
key={x.type}
className={clsx(
"px-6 py-4 w-64 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
"transition duration-300 ease-in-out",
!types.includes(x.type) ? "bg-white border-mti-gray-platinum" : "bg-ielts-reading/70 border-ielts-reading text-white",
)}>
{x.label}
</span>
))}
</div>
</div>
<Tab.Group>
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-reading/20 p-1">
<Tab
@@ -238,9 +403,12 @@ const ReadingGeneration = () => {
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-reading/70 flex gap-2 items-center justify-center",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-reading focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading",
selected
? "bg-white shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading"
)
}>
}
>
Passage 1 {part1 && <BsCheck />}
</Tab>
<Tab
@@ -249,9 +417,12 @@ const ReadingGeneration = () => {
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-reading/70 flex gap-2 items-center justify-center",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-reading focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading",
selected
? "bg-white shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading"
)
}>
}
>
Passage 2 {part2 && <BsCheck />}
</Tab>
<Tab
@@ -260,9 +431,12 @@ const ReadingGeneration = () => {
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-reading/70 flex gap-2 items-center justify-center",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-reading focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading",
selected
? "bg-white shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-reading"
)
}>
}
>
Passage 3 {part3 && <BsCheck />}
</Tab>
</Tab.List>
@@ -272,7 +446,14 @@ const ReadingGeneration = () => {
{ part: part2, setPart: setPart2 },
{ part: part3, setPart: setPart3 },
].map(({ part, setPart }, index) => (
<PartTab part={part} types={types} difficulty={difficulty} index={index + 1} key={index} setPart={setPart} />
<PartTab
part={part}
difficulty={difficulty}
index={index + 1}
key={index}
setPart={setPart}
updatePart={setPart}
/>
))}
</Tab.Panels>
</Tab.Group>
@@ -284,8 +465,9 @@ const ReadingGeneration = () => {
className={clsx(
"bg-white border border-ielts-reading text-ielts-reading w-full max-w-[200px] rounded-xl h-[70px] self-end",
"hover:bg-ielts-reading hover:text-white disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300",
)}>
"transition ease-in-out duration-300"
)}
>
Perform Exam
</button>
)}
@@ -297,8 +479,9 @@ const ReadingGeneration = () => {
"bg-ielts-reading/70 border border-ielts-reading text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
"hover:bg-ielts-reading disabled:bg-ielts-reading/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300",
!part1 && !part2 && !part3 && "tooltip",
)}>
!part1 && !part2 && !part3 && "tooltip"
)}
>
{isLoading ? (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />

223
src/pages/(generation)/SpeakingGeneration.tsx
View File

@@ -1,6 +1,12 @@
import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select";
import {Difficulty, Exercise, InteractiveSpeakingExercise, SpeakingExam, SpeakingExercise} from "@/interfaces/exam";
import {
Difficulty,
Exercise,
InteractiveSpeakingExercise,
SpeakingExam,
SpeakingExercise,
} from "@/interfaces/exam";
import { AVATARS } from "@/resources/speakingAvatars";
import useExamStore from "@/stores/examStore";
import { getExamById } from "@/utils/exams";
@@ -12,7 +18,7 @@ import clsx from "clsx";
import { capitalize, sample, uniq } from "lodash";
import moment from "moment";
import { useRouter } from "next/router";
import {useEffect, useState} from "react";
import { useEffect, useState, Dispatch, SetStateAction } from "react";
import { BsArrowRepeat, BsCheck } from "react-icons/bs";
import { toast } from "react-toastify";
import { v4 } from "uuid";
@@ -24,11 +30,13 @@ const PartTab = ({
index,
difficulty,
setPart,
updatePart,
}: {
part?: SpeakingPart;
difficulty: Difficulty;
index: number;
setPart: (part?: SpeakingPart) => void;
updatePart: Dispatch<SetStateAction<SpeakingPart | undefined>>;
}) => {
const [gender, setGender] = useState<"male" | "female">("male");
const [isLoading, setIsLoading] = useState(false);
@@ -41,10 +49,15 @@ const PartTab = ({
url.append("difficulty", difficulty);
axios
.get(`/api/exam/speaking/generate/speaking_task_${index}?${url.toString()}`)
.get(
`/api/exam/speaking/generate/speaking_task_${index}?${url.toString()}`
)
.then((result) => {
playSound(typeof result.data === "string" ? "error" : "check");
if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
if (typeof result.data === "string")
return toast.error(
"Something went wrong, please try to generate again."
);
console.log(result.data);
setPart(result.data);
})
@@ -56,8 +69,13 @@ const PartTab = ({
};
const generateVideo = async () => {
if (!part) return toast.error("Please generate the first part before generating the video!");
toast.info("This will take quite a while, please do not leave this page or close the tab/window.");
if (!part)
return toast.error(
"Please generate the first part before generating the video!"
);
toast.info(
"This will take quite a while, please do not leave this page or close the tab/window."
);
const avatar = sample(AVATARS.filter((x) => x.gender === gender));
@@ -65,14 +83,27 @@ const PartTab = ({
const initialTime = moment();
axios
.post(`/api/exam/speaking/generate/speaking/generate_video_${index}`, {...part, avatar: avatar?.id})
.post(`/api/exam/speaking/generate/speaking/generate_video_${index}`, {
...part,
avatar: avatar?.id,
})
.then((result) => {
const isError = typeof result.data === "string" || moment().diff(initialTime, "seconds") < 60;
const isError =
typeof result.data === "string" ||
moment().diff(initialTime, "seconds") < 60;
playSound(isError ? "error" : "check");
console.log(result.data);
if (isError) return toast.error("Something went wrong, please try to generate the video again.");
setPart({...part, result: {...result.data, topic: part?.topic}, gender, avatar});
if (isError)
return toast.error(
"Something went wrong, please try to generate the video again."
);
setPart({
...part,
result: { ...result.data, topic: part?.topic },
gender,
avatar,
});
})
.catch((e) => {
toast.error("Something went wrong!");
@@ -84,14 +115,18 @@ const PartTab = ({
return (
<Tab.Panel className="w-full bg-ielts-speaking/20 min-h-[600px] h-full rounded-xl p-6 flex flex-col gap-4">
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Gender</label>
<label className="font-normal text-base text-mti-gray-dim">
Gender
</label>
<Select
options={[
{ value: "male", label: "Male" },
{ value: "female", label: "Female" },
]}
value={{ value: gender, label: capitalize(gender) }}
onChange={(value) => (value ? setGender(value.value as typeof gender) : null)}
onChange={(value) =>
value ? setGender(value.value as typeof gender) : null
}
disabled={isLoading}
/>
</div>
@@ -104,8 +139,9 @@ const PartTab = ({
"bg-ielts-speaking/70 border border-ielts-speaking text-white w-full rounded-xl h-[70px]",
"hover:bg-ielts-speaking disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300",
isLoading && "tooltip",
)}>
isLoading && "tooltip"
)}
>
{isLoading ? (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />
@@ -122,8 +158,9 @@ const PartTab = ({
"bg-ielts-speaking/70 border border-ielts-speaking text-white w-full rounded-xl h-[70px]",
"hover:bg-ielts-speaking disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300",
isLoading && "tooltip",
)}>
isLoading && "tooltip"
)}
>
{isLoading ? (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />
@@ -135,14 +172,22 @@ const PartTab = ({
</div>
{isLoading && (
<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-speaking")} />
<span className={clsx("font-bold text-2xl text-ielts-speaking")}>Generating...</span>
<span
className={clsx(
"loading loading-infinity w-32 text-ielts-speaking"
)}
/>
<span className={clsx("font-bold text-2xl text-ielts-speaking")}>
Generating...
</span>
</div>
)}
{part && !isLoading && (
<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide h-96">
<h3 className="text-xl font-semibold">
{!!part.first_topic && !!part.second_topic ? `${part.first_topic} & ${part.second_topic}` : part.topic}
{!!part.first_topic && !!part.second_topic
? `${part.first_topic} & ${part.second_topic}`
: part.topic}
</h3>
{part.question && <span className="w-full">{part.question}</span>}
{part.questions && (
@@ -156,7 +201,9 @@ const PartTab = ({
)}
{part.prompts && (
<div className="flex flex-col gap-1">
<span className="font-medium">You should talk about the following things:</span>
<span className="font-medium">
You should talk about the following things:
</span>
{part.prompts.map((prompt, index) => (
<span className="w-full" key={index}>
- {prompt}
@@ -164,12 +211,40 @@ const PartTab = ({
))}
</div>
)}
{part.result && <span className="font-bold mt-4">Video Generated: ✅</span>}
{part.result && (
<span className="font-bold mt-4">Video Generated: ✅</span>
)}
{part.avatar && part.gender && (
<span>
<b>Instructor:</b> {part.avatar.name} - {capitalize(part.avatar.gender)}
<b>Instructor:</b> {part.avatar.name} -{" "}
{capitalize(part.avatar.gender)}
</span>
)}
{part.questions?.map((question, index) => (
<Input
key={index}
type="text"
label="Question"
name="question"
required
value={question}
onChange={
(value) =>
updatePart((part?: SpeakingPart) => {
if (part) {
return {
...part,
questions: part.questions?.map((x, xIndex) =>
xIndex === index ? value : x
),
} as SpeakingPart;
}
return part;
})
}
/>
))}
</div>
)}
</Tab.Panel>
@@ -195,7 +270,9 @@ const SpeakingGeneration = () => {
const [minTimer, setMinTimer] = useState(14);
const [isLoading, setIsLoading] = useState(false);
const [resultingExam, setResultingExam] = useState<SpeakingExam>();
const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
const [difficulty, setDifficulty] = useState<Difficulty>(
sample(DIFFICULTIES)!
);
useEffect(() => {
const parts = [part1, part2, part3].filter((x) => !!x);
@@ -208,28 +285,40 @@ const SpeakingGeneration = () => {
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
const submitExam = () => {
if (!part1?.result && !part2?.result && !part3?.result) return toast.error("Please generate at least one task!");
if (!part1?.result && !part2?.result && !part3?.result)
return toast.error("Please generate at least one task!");
setIsLoading(true);
const genders = [part1?.gender, part2?.gender, part3?.gender].filter((x) => !!x);
const genders = [part1?.gender, part2?.gender, part3?.gender].filter(
(x) => !!x
);
const exercises = [part1?.result, part2?.result, part3?.result]
.filter((x) => !!x)
.map((x) => ({
...x,
first_title: x?.type === "interactiveSpeaking" ? x.first_topic : undefined,
second_title: x?.type === "interactiveSpeaking" ? x.second_topic : undefined,
first_title:
x?.type === "interactiveSpeaking" ? x.first_topic : undefined,
second_title:
x?.type === "interactiveSpeaking" ? x.second_topic : undefined,
}));
const exam: SpeakingExam = {
id: v4(),
isDiagnostic: false,
exercises: exercises as (SpeakingExercise | InteractiveSpeakingExercise)[],
exercises: exercises as (
| SpeakingExercise
| InteractiveSpeakingExercise
)[],
minTimer,
variant: minTimer >= 14 ? "full" : "partial",
module: "speaking",
instructorGender: genders.every((x) => x === "male") ? "male" : genders.every((x) => x === "female") ? "female" : "varied",
instructorGender: genders.every((x) => x === "male")
? "male"
: genders.every((x) => x === "female")
? "female"
: "varied",
};
axios
@@ -237,7 +326,9 @@ const SpeakingGeneration = () => {
.then((result) => {
playSound("sent");
console.log(`Generated Exam ID: ${result.data.id}`);
toast.success("This new exam has been generated successfully! Check the ID in our browser's console.");
toast.success(
"This new exam has been generated successfully! Check the ID in our browser's console."
);
setResultingExam(result.data);
setPart1(undefined);
@@ -248,7 +339,9 @@ const SpeakingGeneration = () => {
})
.catch((error) => {
console.log(error);
toast.error("Something went wrong while generating, please try again later.");
toast.error(
"Something went wrong while generating, please try again later."
);
})
.finally(() => setIsLoading(false));
};
@@ -256,9 +349,12 @@ const SpeakingGeneration = () => {
const loadExam = async (examId: string) => {
const exam = await getExamById("speaking", examId.trim());
if (!exam) {
toast.error("Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID", {
toast.error(
"Unknown Exam ID! Please make sure you selected the right module and entered the right exam ID",
{
toastId: "invalid-exam-id",
});
}
);
return;
}
@@ -273,7 +369,9 @@ const SpeakingGeneration = () => {
<>
<div className="flex gap-4 w-1/2">
<div className="flex flex-col gap-3">
<label className="font-normal text-base text-mti-gray-dim">Timer</label>
<label className="font-normal text-base text-mti-gray-dim">
Timer
</label>
<Input
type="number"
name="minTimer"
@@ -283,10 +381,17 @@ const SpeakingGeneration = () => {
/>
</div>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Difficulty</label>
<label className="font-normal text-base text-mti-gray-dim">
Difficulty
</label>
<Select
options={DIFFICULTIES.map((x) => ({value: x, label: capitalize(x)}))}
onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)}
options={DIFFICULTIES.map((x) => ({
value: x,
label: capitalize(x),
}))}
onChange={(value) =>
value ? setDifficulty(value.value as Difficulty) : null
}
value={{ value: difficulty, label: capitalize(difficulty) }}
disabled={!!part1 || !!part2 || !!part3}
/>
@@ -301,9 +406,12 @@ const SpeakingGeneration = () => {
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
selected
? "bg-white shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking"
)
}>
}
>
Exercise 1 {part1 && part1.result && <BsCheck />}
</Tab>
<Tab
@@ -312,9 +420,12 @@ const SpeakingGeneration = () => {
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
selected
? "bg-white shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking"
)
}>
}
>
Exercise 2 {part2 && part2.result && <BsCheck />}
</Tab>
<Tab
@@ -323,9 +434,12 @@ const SpeakingGeneration = () => {
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-ielts-speaking/70 flex gap-2 items-center justify-center",
"ring-white ring-opacity-60 ring-offset-2 ring-offset-ielts-speaking focus:outline-none focus:ring-2",
"transition duration-300 ease-in-out",
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking",
selected
? "bg-white shadow"
: "text-blue-100 hover:bg-white/[0.12] hover:text-ielts-speaking"
)
}>
}
>
Interactive {part3 && part3.result && <BsCheck />}
</Tab>
</Tab.List>
@@ -335,7 +449,14 @@ const SpeakingGeneration = () => {
{ part: part2, setPart: setPart2 },
{ part: part3, setPart: setPart3 },
].map(({ part, setPart }, index) => (
<PartTab difficulty={difficulty} part={part} index={index + 1} key={index} setPart={setPart} />
<PartTab
difficulty={difficulty}
part={part}
index={index + 1}
key={index}
setPart={setPart}
updatePart={setPart}
/>
))}
</Tab.Panels>
</Tab.Group>
@@ -347,21 +468,25 @@ const SpeakingGeneration = () => {
className={clsx(
"bg-white border border-ielts-speaking text-ielts-speaking w-full max-w-[200px] rounded-xl h-[70px] self-end",
"hover:bg-ielts-speaking hover:text-white disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300",
)}>
"transition ease-in-out duration-300"
)}
>
Perform Exam
</button>
)}
<button
disabled={(!part1?.result && !part2?.result && !part3?.result) || isLoading}
disabled={
(!part1?.result && !part2?.result && !part3?.result) || isLoading
}
data-tip="Please generate all three passages"
onClick={submitExam}
className={clsx(
"bg-ielts-speaking/70 border border-ielts-speaking text-white w-full max-w-[200px] rounded-xl h-[70px] self-end",
"hover:bg-ielts-speaking disabled:bg-ielts-speaking/40 disabled:cursor-not-allowed",
"transition ease-in-out duration-300",
!part1 && !part2 && !part3 && "tooltip",
)}>
!part1 && !part2 && !part3 && "tooltip"
)}
>
{isLoading ? (
<div className="flex items-center justify-center">
<BsArrowRepeat className="text-white animate-spin" size={25} />