diff --git a/src/components/Solutions/Writing.tsx b/src/components/Solutions/Writing.tsx index 038cb19e..593d4daf 100644 --- a/src/components/Solutions/Writing.tsx +++ b/src/components/Solutions/Writing.tsx @@ -124,7 +124,7 @@ export default function Writing({id, type, prompt, attachment, userSolutions, on return (
void; -}) => { - const [isEditing, setIsEditing] = useState(false); - const [options, setOptions] = useState(question.options); - const [answer, setAnswer] = useState(question.solution); +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 ( -
- - {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 && ( - <> - - - - )} -
-
- ); + return ( +
+ + {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 && ( + <> + + + + )} +
+
+ ); }; -const TaskTab = ({ - exam, - difficulty, - setExam, -}: { - exam?: LevelPart; - difficulty: Difficulty; - setExam: (exam: LevelPart) => void; -}) => { - const [isLoading, setIsLoading] = useState(false); +const TaskTab = ({exam, difficulty, setExam}: {exam?: LevelPart; difficulty: Difficulty; setExam: (exam: LevelPart) => void}) => { + const [isLoading, setIsLoading] = useState(false); - const generate = () => { - const url = new URLSearchParams(); - url.append("difficulty", difficulty); + const generate = () => { + const url = new URLSearchParams(); + url.append("difficulty", difficulty); - setIsLoading(true); - axios - .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." - ); - setExam(result.data); - }) - .catch((error) => { - console.log(error); - toast.error("Something went wrong!"); - }) - .finally(() => setIsLoading(false)); - }; + setIsLoading(true); + axios + .get(`/api/exam/level/generate/level?${url.toString()}`) + .then((result) => { + console.log({data: 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."); + setExam(result.data); + }) + .catch((error) => { + console.log(error); + toast.error("Something went wrong!"); + }) + .finally(() => setIsLoading(false)); + }; - const onUpdate = (question: MultipleChoiceQuestion) => { - if (!exam) return; + const onUpdate = (question: MultipleChoiceQuestion) => { + if (!exam) return; - const updatedExam = { - ...exam, - exercises: exam.exercises.map((x) => ({ - ...x, - questions: (x as MultipleChoiceExercise).questions.map((q) => - q.id === question.id ? question : q - ), - }), - ), - }; - console.log(updatedExam); - setExam(updatedExam as any); - }; + const updatedExam = { + ...exam, + exercises: exam.exercises.map((x) => ({ + ...x, + questions: (x as MultipleChoiceExercise).questions.map((q) => (q.id === question.id ? question : q)), + })), + }; + console.log(updatedExam); + setExam(updatedExam as any); + }; - return ( - -
- -
- {isLoading && ( -
- - - Generating... - -
- )} - {exam && ( -
- {exam.exercises - .filter((x) => x.type === "multipleChoice") - .map((ex) => { - const exercise = ex as MultipleChoiceExercise; + return ( + +
+ +
+ {isLoading && ( +
+ + 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) => ( + + ))} +
+
+ ); + })} +
+ )} + + ); }; const LevelGeneration = () => { - const [generatedExam, setGeneratedExam] = useState(); - const [isLoading, setIsLoading] = useState(false); - const [resultingExam, setResultingExam] = useState(); - const [difficulty, setDifficulty] = useState( - sample(DIFFICULTIES)! - ); + const [generatedExam, setGeneratedExam] = useState(); + const [isLoading, setIsLoading] = useState(false); + const [resultingExam, setResultingExam] = useState(); + const [difficulty, setDifficulty] = useState(sample(DIFFICULTIES)!); - const router = useRouter(); + const router = useRouter(); - const setExams = useExamStore((state) => state.setExams); - const setSelectedModules = useExamStore((state) => state.setSelectedModules); + 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", - } - ); + 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; - } + return; + } - setExams([exam]); - setSelectedModules(["level"]); + setExams([exam]); + setSelectedModules(["level"]); - router.push("/exercises"); - }; + router.push("/exercises"); + }; - const submitExam = () => { - if (!generatedExam) { - toast.error("Please generate all tasks before submitting"); - return; - } + const submitExam = () => { + if (!generatedExam) { + toast.error("Please generate all tasks before submitting"); + return; + } - setIsLoading(true); + setIsLoading(true); - const exam: LevelExam = { - isDiagnostic: false, - minTimer: 25, - module: "level", - id: v4(), - parts: [generatedExam], - }; + const exam: LevelExam = { + isDiagnostic: false, + minTimer: 25, + module: "level", + id: v4(), + parts: [generatedExam], + }; - 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); + 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)); - }; + setGeneratedExam(undefined); + }) + .catch((error) => { + console.log(error); + toast.error("Something went wrong while generating, please try again later."); + }) + .finally(() => setIsLoading(false)); + }; - return ( - <> -
-
- - ({ + value: x, + label: capitalize(x), + }))} + onChange={(value) => (value ? setDifficulty(value.value as Difficulty) : null)} + value={{value: difficulty, label: capitalize(difficulty)}} + /> +
+
+ + + + 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", + ) + }> + Exam + + + + + + +
+ {resultingExam && ( + + )} + +
+ + ); }; export default LevelGeneration;