761 lines
26 KiB
TypeScript
761 lines
26 KiB
TypeScript
import FillBlanksEdit from "@/components/Generation/fill.blanks.edit";
|
|
import MultipleChoiceEdit from "@/components/Generation/multiple.choice.edit";
|
|
import WriteBlankEdits from "@/components/Generation/write.blanks.edit";
|
|
import Checkbox from "@/components/Low/Checkbox";
|
|
import Input from "@/components/Low/Input";
|
|
import Select from "@/components/Low/Select";
|
|
import {
|
|
Difficulty,
|
|
LevelExam,
|
|
MultipleChoiceExercise,
|
|
MultipleChoiceQuestion,
|
|
LevelPart,
|
|
FillBlanksExercise,
|
|
WriteBlanksExercise,
|
|
Exercise,
|
|
} from "@/interfaces/exam";
|
|
import useExamStore from "@/stores/examStore";
|
|
import { getExamById } from "@/utils/exams";
|
|
import { playSound } from "@/utils/sound";
|
|
import { Tab } from "@headlessui/react";
|
|
import axios from "axios";
|
|
import clsx from "clsx";
|
|
import { capitalize, sample } from "lodash";
|
|
import { useRouter } from "next/router";
|
|
import { useEffect, useState } from "react";
|
|
import { BsArrowRepeat, BsCheck, BsPencilSquare, BsX } from "react-icons/bs";
|
|
import reactStringReplace from "react-string-replace";
|
|
import { toast } from "react-toastify";
|
|
import { v4 } from "uuid";
|
|
|
|
interface Option {
|
|
[key: string]: any;
|
|
value: string | null;
|
|
label: string;
|
|
}
|
|
|
|
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
|
|
const TYPES: { [key: string]: string } = {
|
|
multiple_choice_4: "Multiple Choice",
|
|
multiple_choice_blank_space: "Multiple Choice - Blank Space",
|
|
multiple_choice_underlined: "Multiple Choice - Underlined",
|
|
blank_space_text: "Blank Space",
|
|
reading_passage_utas: "Reading Passage",
|
|
fill_blanks_mc: "Multiple Choice - Fill Blanks",
|
|
};
|
|
|
|
type LevelSection = { type: string; quantity: number; topic?: string; part?: LevelPart };
|
|
|
|
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);
|
|
|
|
const renderPrompt = (prompt: string) => {
|
|
return reactStringReplace(prompt, /((<u>)[\w\s']+(<\/u>))/g, (match) => {
|
|
const word = match.replaceAll("<u>", "").replaceAll("</u>", "");
|
|
return word.length > 0 ? <u>{word}</u> : null;
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div key={question.id} className="flex flex-col gap-1">
|
|
<span className="font-semibold">
|
|
<>
|
|
{question.id}. <span>{renderPrompt(question.prompt).filter((x) => x?.toString() !== "<u>")} </span>
|
|
</>
|
|
</span>
|
|
<div className="flex flex-col gap-1">
|
|
{question.options.map((option, index) => (
|
|
<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)))}
|
|
/>
|
|
) : (
|
|
<span>{option.text}</span>
|
|
)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<div className="flex gap-2 mt-2 w-full">
|
|
{!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">
|
|
<BsPencilSquare />
|
|
</button>
|
|
)}
|
|
{isEditing && (
|
|
<>
|
|
<button
|
|
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 = ({ section, label, index, setSection }: { section: LevelSection; label: string, index: number, setSection: (section: LevelSection) => void }) => {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const [category, setCategory] = useState<string>("");
|
|
const [description, setDescription] = useState<string>("");
|
|
const [customDescription, setCustomDescription] = useState<string>("");
|
|
const [previousOption, setPreviousOption] = useState<Option>({ value: "None", label: "None" });
|
|
const [descriptionOption, setDescriptionOption] = useState<Option>({ value: "None", label: "None" });
|
|
const [updateIntro, setUpdateIntro] = useState<boolean>(false);
|
|
|
|
const onUpdate = (question: MultipleChoiceQuestion) => {
|
|
if (!section) return;
|
|
|
|
const updatedExam = {
|
|
...section,
|
|
exercises: section.part?.exercises.map((x) => ({
|
|
...x,
|
|
questions: (x as MultipleChoiceExercise).questions.map((q) => (q.id === question.id ? question : q)),
|
|
})),
|
|
};
|
|
setSection(updatedExam as any);
|
|
};
|
|
|
|
const defaultPresets: any = {
|
|
multiple_choice_4: "Welcome to {part} of the {label}. In this section, you'll be asked to select the correct word or group of words that best completes each sentence.\n\nFor each question, carefully read the sentence and click on the option (A, B, C, or D) that you believe is correct. After making your selection, you can proceed to the next question by clicking \"Next\". If you need to review or change your previous answers, you can go back at any time by clicking \"Back\".",
|
|
multiple_choice_blank_space: undefined,
|
|
multiple_choice_underlined: "Welcome to {part} of the {label}. In this section, you'll be asked to identify the underlined word or group of words that is not correct in each sentence.\n\nFor each question, carefully review the sentence and click on the option (A, B, C, or D) that you believe contains the incorrect word or group of words. After making your selection, you can proceed to the next question by clicking \"Next\". If needed, you can go back to previous questions by clicking \"Back\".",
|
|
blank_space_text: undefined,
|
|
reading_passage_utas: "Welcome to {part} of the {label}. In this section, you will read a text and answer the questions that follow.\n\nCarefully read the provided text, then select the correct answer (A, B, C, or D) for each question. After making your selection, you can proceed to the next question by clicking \"Next\". If you need to review or change your answers, you can go back at any time by clicking \"Back\".",
|
|
fill_blanks_mc: "Welcome to {part} of the {label}. In this section, you will read a text and choose the correct word to fill in each blank space.\n\nFor each question, carefully read the text and click on the option that you believe best fits the context."
|
|
};
|
|
|
|
const getDefaultPreset = () => {
|
|
return defaultPresets[section.type] ? defaultPresets[section.type].replace('{part}', `Part ${index + 1}`).replace('{label}', label) :
|
|
"No default preset is yet available for this type of exercise."
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (descriptionOption.value === "Default" && section?.type) {
|
|
setDescription(getDefaultPreset())
|
|
}
|
|
if (descriptionOption.value === "Custom" && customDescription !== "") {
|
|
setDescription(customDescription);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [descriptionOption, section?.type, label])
|
|
|
|
useEffect(() => {
|
|
if (section?.type) {
|
|
const defaultPreset = getDefaultPreset();
|
|
if (descriptionOption.value === "Default" && previousOption.value === "Default" && description !== defaultPreset) {
|
|
setDescriptionOption({ value: "Custom", label: "Custom" });
|
|
}
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [descriptionOption, description, label])
|
|
|
|
useEffect(() => {
|
|
setPreviousOption(descriptionOption);
|
|
}, [descriptionOption])
|
|
|
|
useEffect(() => {
|
|
if (section?.part && ((descriptionOption.value === "Custom" || descriptionOption.value === "Default") && !section.part.intro)) {
|
|
setUpdateIntro(true);
|
|
}
|
|
}, [section?.part, descriptionOption, category])
|
|
|
|
|
|
useEffect(() => {
|
|
if (updateIntro && section.part) {
|
|
setSection({
|
|
...section,
|
|
part: {
|
|
...section.part!,
|
|
intro: descriptionOption.value === "Default" ? getDefaultPreset() : (descriptionOption.value === "Custom" ? customDescription : undefined),
|
|
category: category === "" ? undefined : category
|
|
}
|
|
})
|
|
setUpdateIntro(false);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [updateIntro, section?.part])
|
|
|
|
const renderExercise = (exercise: Exercise) => {
|
|
if (exercise.type === "multipleChoice")
|
|
return (
|
|
<div key={exercise.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="rounded-xl bg-white border border-ielts-level p-1 px-4 w-fit">{exercise.questions.length} questions</span>
|
|
</div>
|
|
<MultipleChoiceEdit
|
|
exercise={exercise}
|
|
key={exercise.id}
|
|
updateExercise={(data: any) =>
|
|
setSection({
|
|
...section,
|
|
part: {
|
|
...section.part!,
|
|
exercises: section.part!.exercises.map((x) => (x.id === exercise.id ? { ...x, ...data } : x)),
|
|
intro: descriptionOption.value === "Default" ? getDefaultPreset() : (descriptionOption.value === "Custom" ? customDescription : undefined),
|
|
category: category === "" ? undefined : category
|
|
}
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
if (exercise.type === "fillBlanks")
|
|
return (
|
|
<div key={exercise.id} className="w-full h-full flex flex-col gap-2">
|
|
<div className="flex gap-2">
|
|
<span className="text-xl font-semibold">Fill Blanks</span>
|
|
</div>
|
|
<span>{exercise.prompt}</span>
|
|
<FillBlanksEdit
|
|
exercise={exercise}
|
|
key={exercise.id}
|
|
updateExercise={(data: any) =>
|
|
setSection({
|
|
...section,
|
|
part: {
|
|
...section.part!,
|
|
exercises: section.part!.exercises.map((x) => (x.id === exercise.id ? { ...x, ...data } : x)),
|
|
intro: descriptionOption.value === "Default" ? getDefaultPreset() : (descriptionOption.value === "Custom" ? customDescription : undefined),
|
|
category: category === "" ? undefined : category
|
|
}
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
if (exercise.type === "writeBlanks")
|
|
return (
|
|
<div key={exercise.id} className="w-full h-full flex flex-col gap-2">
|
|
<div className="flex gap-2">
|
|
<span className="text-xl font-semibold">Write Blanks</span>
|
|
</div>
|
|
<span>{exercise.prompt}</span>
|
|
<WriteBlankEdits
|
|
exercise={exercise}
|
|
key={exercise.id}
|
|
updateExercise={(data: any) =>
|
|
setSection({
|
|
...section,
|
|
part: {
|
|
...section.part!,
|
|
exercises: section.part!.exercises.map((x) => (x.id === exercise.id ? { ...x, ...data } : x)),
|
|
intro: descriptionOption.value === "Default" ? getDefaultPreset() : (descriptionOption.value === "Custom" ? customDescription : undefined),
|
|
category: category === "" ? undefined : category
|
|
},
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<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 flex-col gap-8">
|
|
<div className="flex flex-row w-full gap-4">
|
|
<div className="flex flex-col gap-3 w-1/2">
|
|
<label className="font-normal text-base text-mti-gray-dim">Description</label>
|
|
<Select
|
|
options={["None", "Default", "Custom"].map((descriptionOption) => ({ value: descriptionOption, label: descriptionOption }))}
|
|
onChange={(o) => setDescriptionOption({ value: o!.value, label: o!.label })}
|
|
value={descriptionOption}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-3 w-1/2">
|
|
<label className="font-normal text-base text-mti-gray-dim">Category</label>
|
|
<Input
|
|
type="text"
|
|
placeholder="Category"
|
|
name="category"
|
|
onChange={(e) => setCategory(e)}
|
|
roundness="full"
|
|
defaultValue={category}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{descriptionOption.value !== "None" && (
|
|
<Input
|
|
type="textarea"
|
|
placeholder="Part Description"
|
|
name="category"
|
|
onChange={(e) => { setDescription(e); setCustomDescription(e); }}
|
|
roundness="full"
|
|
value={descriptionOption.value === "Default" ? description : customDescription}
|
|
/>
|
|
)}
|
|
<div className="flex gap-4 w-full">
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<label className="font-normal text-base text-mti-gray-dim">Exercise Type</label>
|
|
<Select
|
|
options={Object.keys(TYPES).map((key) => ({ value: key, label: TYPES[key] }))}
|
|
onChange={(e) => setSection({ ...section, type: e!.value! })}
|
|
value={{ value: section?.type || "multiple_choice_4", label: TYPES[section?.type || "multiple_choice_4"] }}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<label className="font-normal text-base text-mti-gray-dim">{section?.type && section.type === "fill_blanks_mc" ? "Number of Words" : "Number of Questions"}</label>
|
|
<Input
|
|
type="number"
|
|
name="Number of Questions"
|
|
onChange={(v) => setSection({ ...section, quantity: parseInt(v) })}
|
|
value={section?.quantity || 10}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{section?.type === "reading_passage_utas" || section?.type === "fill_blanks_mc" && (
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<label className="font-normal text-base text-mti-gray-dim">Topic</label>
|
|
<Input type="text" name="Topic" onChange={(v) => setSection({ ...section, topic: v })} value={section?.topic} />
|
|
</div>
|
|
)}
|
|
</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>
|
|
</div>
|
|
)}
|
|
{section?.part && (
|
|
<div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar-hide h-full">
|
|
{section.part.context && <div>{section.part.context}</div>}
|
|
{section.part.exercises.map(renderExercise)}
|
|
</div>
|
|
)}
|
|
</Tab.Panel>
|
|
);
|
|
};
|
|
|
|
interface Props {
|
|
id: string;
|
|
}
|
|
|
|
const LevelGeneration = ({ id }: Props) => {
|
|
const [generatedExam, setGeneratedExam] = useState<LevelExam>();
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [resultingExam, setResultingExam] = useState<LevelExam>();
|
|
const [timer, setTimer] = useState(10);
|
|
const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
|
|
const [numberOfParts, setNumberOfParts] = useState(1);
|
|
const [parts, setParts] = useState<LevelSection[]>([{ quantity: 10, type: "multiple_choice_4" }]);
|
|
const [isPrivate, setPrivate] = useState<boolean>(false);
|
|
const [label, setLabel] = useState<string>("Placement Test");
|
|
|
|
useEffect(() => {
|
|
setParts((prev) => Array.from(Array(numberOfParts)).map((_, i) => (!!prev.at(i) ? prev.at(i)! : { quantity: 10, type: "multiple_choice_4" })));
|
|
}, [numberOfParts]);
|
|
|
|
const router = useRouter();
|
|
|
|
const setExams = useExamStore((state) => state.setExams);
|
|
const setSelectedModules = useExamStore((state) => state.setSelectedModules);
|
|
|
|
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", {
|
|
toastId: "invalid-exam-id",
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
setExams([exam]);
|
|
setSelectedModules(["level"]);
|
|
|
|
router.push("/exercises");
|
|
};
|
|
|
|
const generateExam = () => {
|
|
if (parts.length === 0) return;
|
|
setIsLoading(true);
|
|
|
|
let body: any = {};
|
|
parts.forEach((part, index) => {
|
|
body[`exercise_${index + 1}_type`] = part.type;
|
|
body[`exercise_${index + 1}_qty`] = part.quantity;
|
|
|
|
if (part.topic) body[`exercise_${index + 1}_topic`] = part.topic;
|
|
if (part.type === "reading_passage_utas") {
|
|
body[`exercise_${index + 1}_sa_qty`] = Math.floor(part.quantity / 2);
|
|
body[`exercise_${index + 1}_mc_qty`] = Math.ceil(part.quantity / 2);
|
|
}
|
|
});
|
|
|
|
let newParts = [...parts];
|
|
|
|
axios
|
|
.post<{ exercises: { [key: string]: any } }>("/api/exam/level/generate/level", { nr_exercises: numberOfParts, ...body })
|
|
.then((result) => {
|
|
console.log(result.data);
|
|
|
|
playSound(typeof result.data === "string" ? "error" : "check");
|
|
if (typeof result.data === "string") return toast.error("Something went wrong, please try to generate again.");
|
|
|
|
const exam: LevelExam = {
|
|
id: v4(),
|
|
minTimer: timer,
|
|
module: "level",
|
|
difficulty,
|
|
variant: "full",
|
|
isDiagnostic: false,
|
|
private: isPrivate,
|
|
label: label,
|
|
parts: parts
|
|
.map((part, index) => {
|
|
const currentExercise = result.data.exercises[`exercise_${index + 1}`] as any;
|
|
|
|
if (
|
|
part.type === "multiple_choice_4" ||
|
|
part.type === "multiple_choice_blank_space" ||
|
|
part.type === "multiple_choice_underlined"
|
|
) {
|
|
const exercise: MultipleChoiceExercise = {
|
|
id: v4(),
|
|
prompt:
|
|
part.type === "multiple_choice_underlined"
|
|
? "Choose the underlined word or group of words that is not correct.\nFor each question, select your choice (A, B, C or D)."
|
|
: "Choose the correct word or group of words that completes the sentences below.\nFor each question, select the correct letter (A, B, C or D).",
|
|
questions: currentExercise.questions.map((x: any) => ({ ...x, variant: "text" })),
|
|
type: "multipleChoice",
|
|
userSolutions: [],
|
|
};
|
|
|
|
const item = {
|
|
exercises: [exercise],
|
|
intro: parts[index].part?.intro,
|
|
category: parts[index].part?.category
|
|
};
|
|
|
|
newParts = newParts.map((p, i) =>
|
|
i === index
|
|
? {
|
|
...p,
|
|
part: item,
|
|
}
|
|
: p,
|
|
);
|
|
|
|
return item;
|
|
}
|
|
|
|
if (part.type === "fill_blanks_mc") {
|
|
const exercise: FillBlanksExercise = {
|
|
id: v4(),
|
|
prompt: "Read the text below and choose the correct word for each space.\nFor each question, select your choice (A, B, C or D). ",
|
|
text: currentExercise.text,
|
|
words: currentExercise.words,
|
|
solutions: currentExercise.solutions,
|
|
type: "fillBlanks",
|
|
variant: "mc",
|
|
userSolutions: [],
|
|
};
|
|
|
|
const item = {
|
|
exercises: [exercise],
|
|
intro: parts[index].part?.intro,
|
|
category: parts[index].part?.category
|
|
};
|
|
|
|
newParts = newParts.map((p, i) =>
|
|
i === index
|
|
? {
|
|
...p,
|
|
part: item,
|
|
}
|
|
: p,
|
|
);
|
|
|
|
return item;
|
|
}
|
|
|
|
if (part.type === "blank_space_text") {
|
|
const exercise: WriteBlanksExercise = {
|
|
id: v4(),
|
|
prompt: "Complete the text below.",
|
|
text: currentExercise.text,
|
|
maxWords: 3,
|
|
solutions: currentExercise.words.map((x: any) => ({ id: x.id, solution: [x.text] })),
|
|
type: "writeBlanks",
|
|
userSolutions: [],
|
|
};
|
|
|
|
const item = {
|
|
exercises: [exercise],
|
|
intro: parts[index].part?.intro,
|
|
category: parts[index].part?.category
|
|
};
|
|
|
|
newParts = newParts.map((p, i) =>
|
|
i === index
|
|
? {
|
|
...p,
|
|
part: item,
|
|
}
|
|
: p,
|
|
);
|
|
|
|
return item;
|
|
}
|
|
|
|
const mcExercise: MultipleChoiceExercise = {
|
|
id: v4(),
|
|
prompt: "Select the appropriate option.",
|
|
questions: currentExercise.exercises.multipleChoice.questions.map((x: any) => ({ ...x, variant: "text" })),
|
|
type: "multipleChoice",
|
|
userSolutions: [],
|
|
};
|
|
|
|
const wbExercise: WriteBlanksExercise = {
|
|
id: v4(),
|
|
prompt: "Complete the notes below.",
|
|
maxWords: 3,
|
|
text: currentExercise.exercises.shortAnswer.map((x: any) => `${x.question} {{${x.id}}}`).join("\n"),
|
|
solutions: currentExercise.exercises.shortAnswer.map((x: any) => ({
|
|
id: x.id,
|
|
solution: x.possible_answers,
|
|
})),
|
|
type: "writeBlanks",
|
|
userSolutions: [],
|
|
};
|
|
|
|
const item = {
|
|
context: currentExercise.text.content,
|
|
exercises: [mcExercise, wbExercise],
|
|
intro: parts[index].part?.intro,
|
|
category: parts[index].part?.category
|
|
};
|
|
|
|
newParts = newParts.map((p, i) =>
|
|
i === index
|
|
? {
|
|
...p,
|
|
part: item,
|
|
}
|
|
: p,
|
|
);
|
|
|
|
return item;
|
|
})
|
|
.filter((x) => !!x) as LevelPart[],
|
|
};
|
|
|
|
setParts(newParts);
|
|
setGeneratedExam(exam);
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
playSound("error");
|
|
|
|
toast.error("Something went wrong, please try again later!");
|
|
})
|
|
.finally(() => setIsLoading(false));
|
|
};
|
|
|
|
const submitExam = () => {
|
|
if (!generatedExam) {
|
|
toast.error("Please generate all tasks before submitting");
|
|
return;
|
|
}
|
|
|
|
if (!id) {
|
|
toast.error("Please insert a title before submitting");
|
|
return;
|
|
}
|
|
|
|
setIsLoading(true);
|
|
|
|
parts.forEach((part) => {
|
|
part.part!.exercises.forEach((exercise, i) => {
|
|
switch(exercise.type) {
|
|
case 'fillBlanks':
|
|
exercise.prompt.replaceAll('\n', '\\n')
|
|
break;
|
|
case 'multipleChoice':
|
|
exercise.prompt.replaceAll('\n', '\\n')
|
|
break;
|
|
case 'writeBlanks':
|
|
exercise.prompt.replaceAll('\n', '\\n')
|
|
break;
|
|
}
|
|
});
|
|
})
|
|
|
|
const exam = {
|
|
...generatedExam,
|
|
id,
|
|
label: label,
|
|
parts: generatedExam.parts.map((p, i) => ({ ...p, exercises: parts[i].part!.exercises, category: parts[i].part?.category, intro: parts[i].part?.intro?.replaceAll('\n', '\\n') })),
|
|
};
|
|
|
|
axios
|
|
.post(`/api/exam/level`, exam)
|
|
.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.");
|
|
setResultingExam(result.data);
|
|
|
|
setGeneratedExam(undefined);
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
toast.error("Something went wrong while generating, please try again later.");
|
|
})
|
|
.finally(() => setIsLoading(false));
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="flex gap-4 w-full items-center">
|
|
<div className="flex flex-col gap-3 w-1/2">
|
|
<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)}
|
|
value={{ value: difficulty, label: capitalize(difficulty) }}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-3 w-1/3">
|
|
<label className="font-normal text-base text-mti-gray-dim">Number of Parts</label>
|
|
<Input type="number" name="Number of Parts" onChange={(v) => setNumberOfParts(parseInt(v))} value={numberOfParts} />
|
|
</div>
|
|
<div className="flex flex-col gap-3 w-1/3">
|
|
<label className="font-normal text-base text-mti-gray-dim">Timer (in minutes)</label>
|
|
<Input type="number" name="Timer (in minutes)" onChange={(v) => setTimer(parseInt(v))} value={timer} />
|
|
</div>
|
|
<div className="flex flex-col gap-3 w-fit h-fit">
|
|
<div className="h-6" />
|
|
<Checkbox isChecked={isPrivate} onChange={setPrivate}>
|
|
Privacy (Only available for Assignments)
|
|
</Checkbox>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<label className="font-normal text-base text-mti-gray-dim">Exam Label *</label>
|
|
<Input
|
|
type="text"
|
|
placeholder="Label"
|
|
name="label"
|
|
onChange={(e) => setLabel(e)}
|
|
roundness="xl"
|
|
defaultValue={label}
|
|
required
|
|
/>
|
|
</div>
|
|
<Tab.Group>
|
|
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-level/20 p-1">
|
|
{Array.from(Array(numberOfParts), (_, index) => index).map((index) => (
|
|
<Tab
|
|
key={index}
|
|
className={({ selected }) =>
|
|
clsx(
|
|
"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",
|
|
)
|
|
}>
|
|
Part {index + 1}
|
|
</Tab>
|
|
))}
|
|
</Tab.List>
|
|
<Tab.Panels>
|
|
{Array.from(Array(numberOfParts), (_, index) => index).map((index) => (
|
|
<TaskTab
|
|
key={index}
|
|
label={label}
|
|
index={index}
|
|
section={parts[index]}
|
|
setSection={(part) => {
|
|
console.log(part);
|
|
setParts((prev) => prev.map((x, i) => (i === index ? part : x)));
|
|
}}
|
|
/>
|
|
))}
|
|
</Tab.Panels>
|
|
</Tab.Group>
|
|
<div className="w-full flex justify-end gap-4">
|
|
{resultingExam && (
|
|
<button
|
|
disabled={isLoading}
|
|
onClick={() => loadExam(resultingExam.id)}
|
|
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",
|
|
)}>
|
|
Perform Exam
|
|
</button>
|
|
)}
|
|
<button
|
|
disabled={parts.length === 0 || isLoading}
|
|
data-tip="Please generate all three passages"
|
|
onClick={generateExam}
|
|
className={clsx(
|
|
"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",
|
|
parts.length === 0 && "tooltip",
|
|
)}>
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center">
|
|
<BsArrowRepeat className="text-white animate-spin" size={25} />
|
|
</div>
|
|
) : (
|
|
"Generate"
|
|
)}
|
|
</button>
|
|
<button
|
|
disabled={!generatedExam || isLoading}
|
|
data-tip="Please generate all three passages"
|
|
onClick={submitExam}
|
|
className={clsx(
|
|
"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",
|
|
)}>
|
|
{isLoading ? (
|
|
<div className="flex items-center justify-center">
|
|
<BsArrowRepeat className="text-white animate-spin" size={25} />
|
|
</div>
|
|
) : (
|
|
"Submit"
|
|
)}
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default LevelGeneration;
|