diff --git a/src/components/Generation/fill.blanks.edit.tsx b/src/components/Generation/fill.blanks.edit.tsx
new file mode 100644
index 00000000..c2210093
--- /dev/null
+++ b/src/components/Generation/fill.blanks.edit.tsx
@@ -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 (
+ <>
+
+ updateExercise({
+ prompt: value,
+ })
+ }
+ />
+
+ updateExercise({
+ text: value,
+ })
+ }
+ />
+ Solutions
+
+ {exercise.solutions.map((solution, index) => (
+
+
+ updateExercise({
+ solutions: exercise.solutions.map((sol) =>
+ sol.id === solution.id ? { ...sol, solution: value } : sol
+ ),
+ })
+ }
+ />
+
+ ))}
+
Words
+
+ {exercise.words.map((word, index) => (
+
+
+ updateExercise({
+ words: exercise.words.map((sol, idx) =>
+ index === idx ? value : sol
+ ),
+ })
+ }
+ />
+
+ ))}
+
Solutions
+
+ {exercise.sentences.map((sentence, index) => (
+
+
+
+ updateExercise({
+ sentences: exercise.sentences.map((iSol) =>
+ iSol.id === sentence.id
+ ? {
+ ...iSol,
+ sentence: value,
+ }
+ : iSol
+ ),
+ })
+ }
+ className="px-2"
+ />
+
+
+
+
+ ))}
+
Options
+
+ {exercise.options.map((option, index) => (
+
+
+
+ updateExercise({
+ options: exercise.options.map((iSol) =>
+ iSol.id === option.id
+ ? {
+ ...iSol,
+ sentence: value,
+ }
+ : iSol
+ ),
+ })
+ }
+ className="px-2"
+ />
+
+
+
+
+ ))}
+
+
Questions
+
+ {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 (
+
+
Question ID: {question.id}
+
+
+ updateExercise({
+ questions: exercise.questions.map((sol) =>
+ sol.id === question.id ? { ...sol, prompt: value } : sol
+ ),
+ })
+ }
+ />
+
+
+
+
+
+
+
+ {question.options.map((option) => (
+
+
+ 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
+ ),
+ })
+ }
+ />
+
+ ))}
+
+
+ );
+ })}
+
Questions
+
+ {exercise.questions.map((question, index) => (
+
+
+ updateExercise({
+ questions: exercise.questions.map((sol) =>
+ sol.id === question.id ? { ...sol, prompt: value } : sol
+ ),
+ })
+ }
+ />
+
+
+
+ ))}
+
Solutions
+
+ {exercise.solutions.map((solution) => (
+
+
Solution ID: {solution.id}
+ {/* TODO: Consider adding an add and delete button */}
+
+ {solution.solution.map((sol, solIndex) => (
+
+ 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"
+ />
+ ))}
+
+
+ ))}
+
-
- {question.id}. {question.prompt}{" "}
-
-
- {question.options.map((option, index) => (
-
-
- ({option.id})
- {" "}
- {isEditing ? (
- setOptions((prev) => prev.map((x, idx) => (idx === index ? {...x, text: e.target.value} : x)))}
- />
- ) : (
- {option.text}
- )}
-
- ))}
-
-
- {!isEditing && (
-
- )}
- {isEditing && (
- <>
-
-
-
- )}
-
-
+
+ {question.id}. {question.prompt}{" "}
+
+
+ {question.options.map((option, index) => (
+
+ setAnswer(option.id)}
+ >
+ ({option.id})
+ {" "}
+ {isEditing ? (
+
+ setOptions((prev) =>
+ prev.map((x, idx) =>
+ idx === index ? { ...x, text: e.target.value } : x
+ )
+ )
+ }
+ />
+ ) : (
+ {option.text}
+ )}
+
+ ))}
+
+
+ {!isEditing && (
+
+ )}
+ {isEditing && (
+ <>
+
+
+
+ )}
+
+
-
-
-
- Generating...
-
- )}
- {exam && (
-
- {exam.parts
- .flatMap((x) => x.exercises)
- .filter((x) => x.type === "multipleChoice")
- .map((ex) => {
- const exercise = ex as MultipleChoiceExercise;
+ return (
+
+
+
+
+
+
+ Generating...
+
+
+ )}
+ {exam && (
+
+ {exam.exercises
+ .filter((x) => x.type === "multipleChoice")
+ .map((ex) => {
+ const exercise = ex as MultipleChoiceExercise;
- return (
-
-
- Multiple Choice
-
- {exercise.questions.length} questions
-
-
-
- {exercise.questions.map((question) => (
-
- ))}
-
-
- );
- })}
-
- );
+ return (
+
+
+
+ Multiple Choice
+
+
+ {exercise.questions.length} questions
+
+
+
+ {exercise.questions.map((question) => (
+
+ ))}
+
+
+ );
+ })}
+
-
-
-
-
- {resultingExam && (
-
- )}
-
-
+
+
+
+
+ {resultingExam && (
+
+ )}
+
+
-
-
-
-
- Generating...
-
- )}
- {part && (
-
-
- {part.exercises.map((x) => (
-
- {x.type && convertCamelCaseToReadable(x.type)}
-
- ))}
-
- {typeof part.text === "string" &&
{part.text.replaceAll("\n\n", " ")}}
- {typeof part.text !== "string" && (
-
- {part.text.conversation.map((x, index) => (
-
- {x.name}:
- {x.text.replaceAll("\n\n", " ")}
-
- ))}
-
- )}
-
Exercise: Multiple Choice
+
+ 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 (
+ <>
+ Exercise: Write Blanks
+ {
+ 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 (
+
+
+
+
+ {availableTypes.map((x) => (
+ 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}
+
+ ))}
+
+
+
+
+
+
+
+ Generating...
+
+
+ )}
+ {part && (
+ <>
+
+
+ {part.exercises.map((x) => (
+
+ {x.type && convertCamelCaseToReadable(x.type)}
+
+ ))}
+
+ {typeof part.text === "string" && (
+
+ {part.text.replaceAll("\n\n", " ")}
+
+ )}
+ {typeof part.text !== "string" && (
+
+ {part.text.conversation.map((x, index) => (
+
+ {x.name}:
+ {x.text.replaceAll("\n\n", " ")}
+
+ ))}
+
+ )}
+
-
-
- setMinTimer(parseInt(e) < 15 ? 15 : parseInt(e))}
- value={minTimer}
- className="max-w-[300px]"
- />
-
-
-
-
-
-
-
- {availableTypes.map((x) => (
- 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}
-
- ))}
-
-
- {resultingExam && (
-
- )}
-
-
+
+
+ setMinTimer(parseInt(e) < 15 ? 15 : parseInt(e))}
+ value={minTimer}
+ className="max-w-[300px]"
+ />
+
+
+
+
+
+ {resultingExam && (
+
+ )}
+
+
-
-
-
-
- Generating...
-
- )}
- {part && (
-
-
- {part.exercises.map((x) => (
-
- {x.type && convertCamelCaseToReadable(x.type)}
-
- ))}
-
-
{part.text.title}
-
{part.text.content}
-
Exercise: Fill Blanks
+
+ 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 (
+ <>
+ Exercise: True or False
+ {
+ 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 (
+ <>
+ Exercise: Write Blanks
+ {
+ 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 (
+ <>
+ Exercise: Match Sentences
+ {
+ 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 (
+
+
+
+
+ {availableTypes.map((x) => (
+ 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}
+
+ ))}
+
+
+
+
+
+
+
+ Generating...
+
+
+ )}
+ {part && (
+ <>
+
+
+ {part.exercises.map((x) => (
+
+ {x.type && convertCamelCaseToReadable(x.type)}
+
+ ))}
+
+
{part.text.title}
+
{part.text.content}
+
-
-
- setMinTimer(parseInt(e) < 15 ? 15 : parseInt(e))}
- value={minTimer}
- className="max-w-[300px]"
- />
-
-
-
-
-
-
-
- {availableTypes.map((x) => (
- 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}
-
- ))}
-
-
- {resultingExam && (
-
- )}
-
-
+
+
+ setMinTimer(parseInt(e) < 15 ? 15 : parseInt(e))}
+ value={minTimer}
+ className="max-w-[300px]"
+ />
+
+
+
+
+
+ {resultingExam && (
+
+ )}
+
+
-
-
-
-
-
-
-
- Generating...
-
- )}
- {part && !isLoading && (
-
-
- {!!part.first_topic && !!part.second_topic ? `${part.first_topic} & ${part.second_topic}` : part.topic}
-
- {part.question &&
{part.question}}
- {part.questions && (
-
- {part.questions.map((question, index) => (
-
- - {question}
-
- ))}
-
- )}
- {part.prompts && (
-
- You should talk about the following things:
- {part.prompts.map((prompt, index) => (
-
- - {prompt}
-
- ))}
-
- )}
- {part.result &&
Video Generated: ✅}
- {part.avatar && part.gender && (
-
- Instructor: {part.avatar.name} - {capitalize(part.avatar.gender)}
-
- )}
-
+
+
+
+
+
+
+
+
+ Generating...
+
+
+ )}
+ {part && !isLoading && (
+
+
+ {!!part.first_topic && !!part.second_topic
+ ? `${part.first_topic} & ${part.second_topic}`
+ : part.topic}
+
+ {part.question &&
{part.question}}
+ {part.questions && (
+
+ {part.questions.map((question, index) => (
+
+ - {question}
+
+ ))}
+
+ )}
+ {part.prompts && (
+
+
+ You should talk about the following things:
+
+ {part.prompts.map((prompt, index) => (
+
+ - {prompt}
+
+ ))}
+
+ )}
+ {part.result && (
+
Video Generated: ✅
+ )}
+ {part.avatar && part.gender && (
+
+ Instructor: {part.avatar.name} -{" "}
+ {capitalize(part.avatar.gender)}
+
+ )}
+ {part.questions?.map((question, index) => (
+
+ updatePart((part?: SpeakingPart) => {
+ if (part) {
+ return {
+ ...part,
+ questions: part.questions?.map((x, xIndex) =>
+ xIndex === index ? value : x
+ ),
+ } as SpeakingPart;
+ }
+
+ return part;
+ })
+ }
+ />
+ ))}
+
-
-
- setMinTimer(parseInt(e) < 5 ? 5 : parseInt(e))}
- value={minTimer}
- className="max-w-[300px]"
- />
-
-
-
-
-
+
+
+ setMinTimer(parseInt(e) < 5 ? 5 : parseInt(e))}
+ value={minTimer}
+ className="max-w-[300px]"
+ />
+
+
+
+
+
- {resultingExam && (
-
- )}
-
-
+ {resultingExam && (
+
+ )}
+
+