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

Updated the generation to allow for private exams

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-08-28 10:46:02 +01:00
parent dbf262598f
commit e518323d99
6 changed files with 78 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Low/Checkbox.tsx
View File

@@ -11,14 +11,16 @@ interface Props {
export default function Checkbox({isChecked, onChange, children, disabled}: Props) { export default function Checkbox({isChecked, onChange, children, disabled}: Props) {
return ( return (
<div className="flex gap-3 items-center text-mti-gray-dim text-sm cursor-pointer" onClick={() => { <div
if(disabled) return; className="flex gap-3 items-center text-mti-gray-dim text-sm cursor-pointer"
onClick={() => {
if (disabled) return;
onChange(!isChecked); onChange(!isChecked);
}}> }}>
<input type="checkbox" className="hidden" /> <input type="checkbox" className="hidden" />
<div <div
className={clsx( className={clsx(
"w-6 h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white", "w-6 h-6 min-w-6 min-h-6 rounded-md flex items-center justify-center border border-mti-purple-light bg-white",
"transition duration-300 ease-in-out", "transition duration-300 ease-in-out",
isChecked && "!bg-mti-purple-light ", isChecked && "!bg-mti-purple-light ",
)}> )}>

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

@@ -1,6 +1,7 @@
import FillBlanksEdit from "@/components/Generation/fill.blanks.edit"; import FillBlanksEdit from "@/components/Generation/fill.blanks.edit";
import MultipleChoiceEdit from "@/components/Generation/multiple.choice.edit"; import MultipleChoiceEdit from "@/components/Generation/multiple.choice.edit";
import WriteBlankEdits from "@/components/Generation/write.blanks.edit"; import WriteBlankEdits from "@/components/Generation/write.blanks.edit";
import Checkbox from "@/components/Low/Checkbox";
import Input from "@/components/Low/Input"; import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select"; import Select from "@/components/Low/Select";
import { import {
@@ -234,7 +235,7 @@ interface Props {
id: string; id: string;
} }
const LevelGeneration = ({ id } : Props) => { const LevelGeneration = ({id}: Props) => {
const [generatedExam, setGeneratedExam] = useState<LevelExam>(); const [generatedExam, setGeneratedExam] = useState<LevelExam>();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [resultingExam, setResultingExam] = useState<LevelExam>(); const [resultingExam, setResultingExam] = useState<LevelExam>();
@@ -242,6 +243,7 @@ const LevelGeneration = ({ id } : Props) => {
const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!); const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
const [numberOfParts, setNumberOfParts] = useState(1); const [numberOfParts, setNumberOfParts] = useState(1);
const [parts, setParts] = useState<LevelSection[]>([{quantity: 10, type: "multiple_choice_4"}]); const [parts, setParts] = useState<LevelSection[]>([{quantity: 10, type: "multiple_choice_4"}]);
const [isPrivate, setPrivate] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
setParts((prev) => Array.from(Array(numberOfParts)).map((_, i) => (!!prev.at(i) ? prev.at(i)! : {quantity: 10, type: "multiple_choice_4"}))); setParts((prev) => Array.from(Array(numberOfParts)).map((_, i) => (!!prev.at(i) ? prev.at(i)! : {quantity: 10, type: "multiple_choice_4"})));
@@ -301,6 +303,7 @@ const LevelGeneration = ({ id } : Props) => {
difficulty, difficulty,
variant: "full", variant: "full",
isDiagnostic: false, isDiagnostic: false,
private: isPrivate,
parts: parts parts: parts
.map((part, index) => { .map((part, index) => {
const currentExercise = result.data.exercises[`exercise_${index + 1}`] as any; const currentExercise = result.data.exercises[`exercise_${index + 1}`] as any;
@@ -424,7 +427,7 @@ const LevelGeneration = ({ id } : Props) => {
return; return;
} }
if(!id) { if (!id) {
toast.error("Please insert a title before submitting"); toast.error("Please insert a title before submitting");
return; return;
} }
@@ -456,8 +459,8 @@ const LevelGeneration = ({ id } : Props) => {
return ( return (
<> <>
<div className="flex gap-4 w-full"> <div className="flex gap-4 w-full items-center">
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-1/2">
<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 <Select
options={DIFFICULTIES.map((x) => ({ options={DIFFICULTIES.map((x) => ({
@@ -468,14 +471,20 @@ const LevelGeneration = ({ id } : Props) => {
value={{value: difficulty, label: capitalize(difficulty)}} value={{value: difficulty, label: capitalize(difficulty)}}
/> />
</div> </div>
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-1/3">
<label className="font-normal text-base text-mti-gray-dim">Number of Parts</label> <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} /> <Input type="number" name="Number of Parts" onChange={(v) => setNumberOfParts(parseInt(v))} value={numberOfParts} />
</div> </div>
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-1/3">
<label className="font-normal text-base text-mti-gray-dim">Timer (in minutes)</label> <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} /> <Input type="number" name="Timer (in minutes)" onChange={(v) => setTimer(parseInt(v))} value={timer} />
</div> </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>
<Tab.Group> <Tab.Group>
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-level/20 p-1"> <Tab.List className="flex space-x-1 rounded-xl bg-ielts-level/20 p-1">

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

@@ -16,6 +16,7 @@ import {BsArrowRepeat, BsCheck} from "react-icons/bs";
import {toast} from "react-toastify"; import {toast} from "react-toastify";
import WriteBlanksEdit from "@/components/Generation/write.blanks.edit"; import WriteBlanksEdit from "@/components/Generation/write.blanks.edit";
import {generate} from "random-words"; import {generate} from "random-words";
import Checkbox from "@/components/Low/Checkbox";
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"]; const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
@@ -232,7 +233,7 @@ interface Props {
id: string; id: string;
} }
const ListeningGeneration = ({ id } : Props) => { const ListeningGeneration = ({id}: Props) => {
const [part1, setPart1] = useState<ListeningPart>(); const [part1, setPart1] = useState<ListeningPart>();
const [part2, setPart2] = useState<ListeningPart>(); const [part2, setPart2] = useState<ListeningPart>();
const [part3, setPart3] = useState<ListeningPart>(); const [part3, setPart3] = useState<ListeningPart>();
@@ -241,6 +242,7 @@ const ListeningGeneration = ({ id } : Props) => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [resultingExam, setResultingExam] = useState<ListeningExam>(); const [resultingExam, setResultingExam] = useState<ListeningExam>();
const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!); const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
const [isPrivate, setPrivate] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
const part1Timer = part1 ? 5 : 0; const part1Timer = part1 ? 5 : 0;
@@ -262,7 +264,7 @@ const ListeningGeneration = ({ id } : Props) => {
console.log({parts}); 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!");
if(!id) { if (!id) {
toast.error("Please insert a title before submitting"); toast.error("Please insert a title before submitting");
return; return;
} }
@@ -275,6 +277,7 @@ const ListeningGeneration = ({ id } : Props) => {
parts, parts,
minTimer, minTimer,
difficulty, difficulty,
private: isPrivate,
}) })
.then((result) => { .then((result) => {
playSound("sent"); playSound("sent");
@@ -313,7 +316,7 @@ const ListeningGeneration = ({ id } : Props) => {
return ( return (
<> <>
<div className="flex gap-4 w-1/2"> <div className="flex gap-4 w-full items-center">
<div className="flex flex-col gap-3"> <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 <Input
@@ -324,7 +327,7 @@ const ListeningGeneration = ({ id } : Props) => {
className="max-w-[300px]" className="max-w-[300px]"
/> />
</div> </div>
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-1/2">
<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 <Select
options={DIFFICULTIES.map((x) => ({ options={DIFFICULTIES.map((x) => ({
@@ -336,6 +339,12 @@ const ListeningGeneration = ({ id } : Props) => {
disabled={!!part1 || !!part2 || !!part3 || !!part4} disabled={!!part1 || !!part2 || !!part3 || !!part4}
/> />
</div> </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>
<Tab.Group> <Tab.Group>
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-listening/20 p-1"> <Tab.List className="flex space-x-1 rounded-xl bg-ielts-listening/20 p-1">

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

@@ -20,6 +20,7 @@ import TrueFalseEdit from "@/components/Generation/true.false.edit";
import WriteBlanksEdit from "@/components/Generation/write.blanks.edit"; import WriteBlanksEdit from "@/components/Generation/write.blanks.edit";
import MatchSentencesEdit from "@/components/Generation/match.sentences.edit"; import MatchSentencesEdit from "@/components/Generation/match.sentences.edit";
import MultipleChoiceEdit from "@/components/Generation/multiple.choice.edit"; import MultipleChoiceEdit from "@/components/Generation/multiple.choice.edit";
import Checkbox from "@/components/Low/Checkbox";
const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"]; const DIFFICULTIES: Difficulty[] = ["easy", "medium", "hard"];
@@ -262,7 +263,7 @@ interface Props {
id: string; id: string;
} }
const ReadingGeneration = ({ id } : Props) => { const ReadingGeneration = ({id}: Props) => {
const [part1, setPart1] = useState<ReadingPart>(); const [part1, setPart1] = useState<ReadingPart>();
const [part2, setPart2] = useState<ReadingPart>(); const [part2, setPart2] = useState<ReadingPart>();
const [part3, setPart3] = useState<ReadingPart>(); const [part3, setPart3] = useState<ReadingPart>();
@@ -270,6 +271,7 @@ const ReadingGeneration = ({ id } : Props) => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [resultingExam, setResultingExam] = useState<ReadingExam>(); const [resultingExam, setResultingExam] = useState<ReadingExam>();
const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!); const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
const [isPrivate, setPrivate] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
const parts = [part1, part2, part3].filter((x) => !!x); const parts = [part1, part2, part3].filter((x) => !!x);
@@ -304,7 +306,7 @@ const ReadingGeneration = ({ id } : Props) => {
return; return;
} }
if(!id) { if (!id) {
toast.error("Please insert a title before submitting"); toast.error("Please insert a title before submitting");
return; return;
} }
@@ -319,6 +321,7 @@ const ReadingGeneration = ({ id } : Props) => {
type: "academic", type: "academic",
variant: parts.length === 3 ? "full" : "partial", variant: parts.length === 3 ? "full" : "partial",
difficulty, difficulty,
private: isPrivate,
}; };
axios axios
@@ -344,7 +347,7 @@ const ReadingGeneration = ({ id } : Props) => {
return ( return (
<> <>
<div className="flex gap-4 w-1/2"> <div className="flex gap-4 w-full items-center">
<div className="flex flex-col gap-3"> <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 <Input
@@ -355,7 +358,7 @@ const ReadingGeneration = ({ id } : Props) => {
className="max-w-[300px]" className="max-w-[300px]"
/> />
</div> </div>
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-1/2">
<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 <Select
options={DIFFICULTIES.map((x) => ({ options={DIFFICULTIES.map((x) => ({
@@ -367,6 +370,12 @@ const ReadingGeneration = ({ id } : Props) => {
disabled={!!part1 || !!part2 || !!part3} disabled={!!part1 || !!part2 || !!part3}
/> />
</div> </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>
<Tab.Group> <Tab.Group>
<Tab.List className="flex space-x-1 rounded-xl bg-ielts-reading/20 p-1"> <Tab.List className="flex space-x-1 rounded-xl bg-ielts-reading/20 p-1">

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

@@ -1,3 +1,4 @@
import Checkbox from "@/components/Low/Checkbox";
import Input from "@/components/Low/Input"; import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select"; import Select from "@/components/Low/Select";
import {Difficulty, Exercise, InteractiveSpeakingExercise, SpeakingExam, SpeakingExercise} from "@/interfaces/exam"; import {Difficulty, Exercise, InteractiveSpeakingExercise, SpeakingExam, SpeakingExercise} from "@/interfaces/exam";
@@ -225,7 +226,7 @@ interface Props {
id: string; id: string;
} }
const SpeakingGeneration = ({ id } : Props) => { const SpeakingGeneration = ({id}: Props) => {
const [part1, setPart1] = useState<SpeakingPart>(); const [part1, setPart1] = useState<SpeakingPart>();
const [part2, setPart2] = useState<SpeakingPart>(); const [part2, setPart2] = useState<SpeakingPart>();
const [part3, setPart3] = useState<SpeakingPart>(); const [part3, setPart3] = useState<SpeakingPart>();
@@ -233,6 +234,7 @@ const SpeakingGeneration = ({ id } : Props) => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [resultingExam, setResultingExam] = useState<SpeakingExam>(); const [resultingExam, setResultingExam] = useState<SpeakingExam>();
const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!); const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
const [isPrivate, setPrivate] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
const parts = [part1, part2, part3].filter((x) => !!x); const parts = [part1, part2, part3].filter((x) => !!x);
@@ -247,7 +249,7 @@ const SpeakingGeneration = ({ id } : Props) => {
const submitExam = () => { 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!");
if(!id) { if (!id) {
toast.error("Please insert a title before submitting"); toast.error("Please insert a title before submitting");
return; return;
} }
@@ -272,6 +274,7 @@ const SpeakingGeneration = ({ id } : Props) => {
variant: minTimer >= 14 ? "full" : "partial", variant: minTimer >= 14 ? "full" : "partial",
module: "speaking", 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",
private: isPrivate,
}; };
axios axios
@@ -313,7 +316,7 @@ const SpeakingGeneration = ({ id } : Props) => {
return ( return (
<> <>
<div className="flex gap-4 w-1/2"> <div className="flex gap-4 w-full items-center">
<div className="flex flex-col gap-3"> <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 <Input
@@ -324,7 +327,7 @@ const SpeakingGeneration = ({ id } : Props) => {
className="max-w-[300px]" className="max-w-[300px]"
/> />
</div> </div>
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-1/2">
<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 <Select
options={DIFFICULTIES.map((x) => ({ options={DIFFICULTIES.map((x) => ({
@@ -336,6 +339,13 @@ const SpeakingGeneration = ({ id } : Props) => {
disabled={!!part1 || !!part2 || !!part3} disabled={!!part1 || !!part2 || !!part3}
/> />
</div> </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>
<Tab.Group> <Tab.Group>

18
src/pages/(generation)/WritingGeneration.tsx
View File

@@ -1,3 +1,4 @@
import Checkbox from "@/components/Low/Checkbox";
import Input from "@/components/Low/Input"; import Input from "@/components/Low/Input";
import Select from "@/components/Low/Select"; import Select from "@/components/Low/Select";
import {Difficulty, WritingExam, WritingExercise} from "@/interfaces/exam"; import {Difficulty, WritingExam, WritingExercise} from "@/interfaces/exam";
@@ -79,13 +80,14 @@ interface Props {
id: string; id: string;
} }
const WritingGeneration = ({ id } : Props) => { const WritingGeneration = ({id}: Props) => {
const [task1, setTask1] = useState<string>(); const [task1, setTask1] = useState<string>();
const [task2, setTask2] = useState<string>(); const [task2, setTask2] = useState<string>();
const [minTimer, setMinTimer] = useState(60); const [minTimer, setMinTimer] = useState(60);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [resultingExam, setResultingExam] = useState<WritingExam>(); const [resultingExam, setResultingExam] = useState<WritingExam>();
const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!); const [difficulty, setDifficulty] = useState<Difficulty>(sample(DIFFICULTIES)!);
const [isPrivate, setPrivate] = useState<boolean>(false);
useEffect(() => { useEffect(() => {
const task1Timer = task1 ? 20 : 0; const task1Timer = task1 ? 20 : 0;
@@ -120,7 +122,7 @@ const WritingGeneration = ({ id } : Props) => {
return; return;
} }
if(!id) { if (!id) {
toast.error("Please insert a title before submitting"); toast.error("Please insert a title before submitting");
return; return;
} }
@@ -164,6 +166,7 @@ const WritingGeneration = ({ id } : Props) => {
id, id,
variant: exercise1 && exercise2 ? "full" : "partial", variant: exercise1 && exercise2 ? "full" : "partial",
difficulty, difficulty,
private: isPrivate,
}; };
axios axios
@@ -188,7 +191,7 @@ const WritingGeneration = ({ id } : Props) => {
return ( return (
<> <>
<div className="flex gap-4 w-1/2"> <div className="flex gap-4 w-full items-center">
<div className="flex flex-col gap-3"> <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 <Input
@@ -199,7 +202,7 @@ const WritingGeneration = ({ id } : Props) => {
className="max-w-[300px]" className="max-w-[300px]"
/> />
</div> </div>
<div className="flex flex-col gap-3 w-full"> <div className="flex flex-col gap-3 w-1/2">
<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 <Select
options={DIFFICULTIES.map((x) => ({value: x, label: capitalize(x)}))} options={DIFFICULTIES.map((x) => ({value: x, label: capitalize(x)}))}
@@ -208,6 +211,13 @@ const WritingGeneration = ({ id } : Props) => {
disabled={!!task1 || !!task2} disabled={!!task1 || !!task2}
/> />
</div> </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>
<Tab.Group> <Tab.Group>