Added the same functionality to the Assignments

- Made it so, if chosen, the user will only get speaking exams with their chosen gender;
- Added the ability for speaking exams to select a gender when generating;

src/components/High/TicketDisplay.tsx

@@ -137,7 +137,7 @@ export default function TicketDisplay({ user, ticket, onClose }: Props) {
           options={[
             { value: "me", label: "Assign to me" },
             ...users
-              .filter((x) => ["admin", "developer"].includes(x.type))
+              .filter((x) => ["admin", "developer", "agent"].includes(x.type))
               .map((u) => ({
                 value: u.id,
                 label: `${u.name} - ${u.email}`,

src/components/Low/Select.tsx

@@ -1,68 +1,61 @@
 import clsx from "clsx";
-import { ComponentProps } from "react";
+import {ComponentProps, useEffect, useState} from "react";
 import ReactSelect from "react-select";
 
 interface Option {
-  [key: string]: any;
-  value: string;
-  label: string;
+	[key: string]: any;
+	value: string;
+	label: string;
 }
 
 interface Props {
-  defaultValue?: Option;
-  value?: Option | null;
-  options: Option[];
-  disabled?: boolean;
-  placeholder?: string;
-  onChange: (value: Option | null) => void;
-  isClearable?: boolean;
+	defaultValue?: Option;
+	value?: Option | null;
+	options: Option[];
+	disabled?: boolean;
+	placeholder?: string;
+	onChange: (value: Option | null) => void;
+	isClearable?: boolean;
 }
 
-export default function Select({
-  value,
-  defaultValue,
-  options,
-  placeholder,
-  disabled,
-  onChange,
-  isClearable,
-}: Props) {
-  return (
-    <ReactSelect
-      className={clsx(
-        "placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
-        disabled &&
-          "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
-      )}
-      options={options}
-      value={value}
-      onChange={onChange}
-      placeholder={placeholder}
-      menuPortalTarget={document?.body}
-      defaultValue={defaultValue}
-      styles={{
-        menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-        control: (styles) => ({
-          ...styles,
-          paddingLeft: "4px",
-          border: "none",
-          outline: "none",
-          ":focus": {
-            outline: "none",
-          },
-        }),
-        option: (styles, state) => ({
-          ...styles,
-          backgroundColor: state.isFocused
-            ? "#D5D9F0"
-            : state.isSelected
-              ? "#7872BF"
-              : "white",
-          color: state.isFocused ? "black" : styles.color,
-        }),
-      }}
-      isDisabled={disabled}
-      isClearable={isClearable}
-    />
-  );
+export default function Select({value, defaultValue, options, placeholder, disabled, onChange, isClearable}: Props) {
+	const [target, setTarget] = useState<HTMLElement>();
+
+	useEffect(() => {
+		if (document) setTarget(document.body);
+	}, []);
+
+	return (
+		<ReactSelect
+			className={clsx(
+				"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
+				disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+			)}
+			options={options}
+			value={value}
+			onChange={onChange}
+			placeholder={placeholder}
+			menuPortalTarget={target}
+			defaultValue={defaultValue}
+			styles={{
+				menuPortal: (base) => ({...base, zIndex: 9999}),
+				control: (styles) => ({
+					...styles,
+					paddingLeft: "4px",
+					border: "none",
+					outline: "none",
+					":focus": {
+						outline: "none",
+					},
+				}),
+				option: (styles, state) => ({
+					...styles,
+					backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+					color: state.isFocused ? "black" : styles.color,
+				}),
+			}}
+			isDisabled={disabled}
+			isClearable={isClearable}
+		/>
+	);
 }

src/dashboards/AssignmentCreator.tsx

@@ -19,7 +19,8 @@ import {toast} from "react-toastify";
 import {uuidv4} from "@firebase/util";
 import {Assignment} from "@/interfaces/results";
 import Checkbox from "@/components/Low/Checkbox";
-import {Variant} from "@/interfaces/exam";
+import {InstructorGender, Variant} from "@/interfaces/exam";
+import Select from "@/components/Low/Select";
 
 interface Props {
 	isCreating: boolean;
@@ -40,6 +41,7 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 		assignment ? moment(assignment.endDate).toDate() : moment().hours(23).minutes(59).add(8, "day").toDate(),
 	);
 	const [variant, setVariant] = useState<Variant>("full");
+	const [instructorGender, setInstructorGender] = useState<InstructorGender>(assignment?.instructorGender || "varied");
 	// creates a new exam for each assignee or just one exam for all assignees
 	const [generateMultiple, setGenerateMultiple] = useState<boolean>(false);
 
@@ -63,6 +65,7 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 			selectedModules,
 			generateMultiple,
 			variant,
+			instructorGender,
 		})
 			.then(() => {
 				toast.success(`The assignment "${name}" has been ${assignment ? "updated" : "created"} successfully!`);
@@ -226,6 +229,20 @@ export default function AssignmentCreator({isCreating, assignment, assigner, gro
 					</div>
 				</div>
 
+				<div className="flex flex-col gap-3 w-full">
+					<label className="font-normal text-base text-mti-gray-dim">Speaking Instructor&apos;s Gender</label>
+					<Select
+						value={{value: instructorGender, label: capitalize(instructorGender)}}
+						onChange={(value) => (value ? setInstructorGender(value.value as InstructorGender) : null)}
+						disabled={!selectedModules.includes("speaking") || !!assignment}
+						options={[
+							{value: "male", label: "Male"},
+							{value: "female", label: "Female"},
+							{value: "varied", label: "Varied"},
+						]}
+					/>
+				</div>
+
 				<section className="w-full flex flex-col gap-3">
 					<span className="font-semibold">Assignees ({assignees.length} selected)</span>
 					<div className="flex gap-4 overflow-x-scroll scrollbar-hide">

src/interfaces/exam.ts

@@ -2,6 +2,7 @@ import {Module} from ".";
 
 export type Exam = ReadingExam | ListeningExam | WritingExam | SpeakingExam | LevelExam;
 export type Variant = "full" | "partial";
+export type InstructorGender = "male" | "female" | "varied";
 
 export interface ReadingExam {
 	parts: ReadingPart[];
@@ -82,6 +83,7 @@ export interface SpeakingExam {
 	minTimer: number;
 	isDiagnostic: boolean;
 	variant?: Variant;
+	instructorGender: InstructorGender;
 }
 
 export type Exercise =

src/interfaces/results.ts

@@ -1,4 +1,5 @@
 import {Module} from "@/interfaces";
+import {InstructorGender} from "./exam";
 import {Stat} from "./user";
 
 export type UserResults = {[key in Module]: ModuleResult};
@@ -19,7 +20,8 @@ export interface Assignment {
 		type: "academic" | "general";
 		stats: Stat[];
 	}[];
-	exams: {id: string; module: Module, assignee: string}[];
+	exams: {id: string; module: Module; assignee: string}[];
+	instructorGender?: InstructorGender;
 	startDate: Date;
 	endDate: Date;
 }

src/interfaces/user.ts

@@ -1,4 +1,5 @@
 import {Module} from ".";
+import {InstructorGender} from "./exam";
 
 export type User = StudentUser | TeacherUser | CorporateUser | AgentUser | AdminUser | DeveloperUser;
 
@@ -21,6 +22,7 @@ export interface BasicUser {
 
 export interface StudentUser extends BasicUser {
 	type: "student";
+	preferredGender?: InstructorGender;
 	demographicInformation?: DemographicInformation;
 }
 
@@ -48,6 +50,7 @@ export interface AdminUser extends BasicUser {
 
 export interface DeveloperUser extends BasicUser {
 	type: "developer";
+	preferredGender?: InstructorGender;
 	demographicInformation?: DemographicInformation;
 }
 

src/pages/(exam)/ExamPage.tsx

@@ -123,6 +123,7 @@ export default function ExamPage({page}: Props) {
 			setSessionId(shortUID.randomUUID(8));
 		}
 	}, [setSessionId, selectedModules, sessionId]);
+
 	useEffect(() => {
 		if (user?.type === "developer") console.log(exam);
 	}, [exam, user]);
@@ -160,7 +161,14 @@ export default function ExamPage({page}: Props) {
 	useEffect(() => {
 		(async () => {
 			if (selectedModules.length > 0 && exams.length === 0) {
-				const examPromises = selectedModules.map((module) => getExam(module, avoidRepeated, variant));
+				const examPromises = selectedModules.map((module) =>
+					getExam(
+						module,
+						avoidRepeated,
+						variant,
+						user?.type === "student" || user?.type === "developer" ? user.preferredGender : undefined,
+					),
+				);
 				Promise.all(examPromises).then((values) => {
 					if (values.every((x) => !!x)) {
 						setExams(values.map((x) => x!));

src/pages/(generation)/SpeakingGeneration.tsx

@@ -1,5 +1,7 @@
 import Input from "@/components/Low/Input";
+import Select from "@/components/Low/Select";
 import {Exercise, InteractiveSpeakingExercise, SpeakingExam, SpeakingExercise} from "@/interfaces/exam";
+import {AVATARS} from "@/resources/speakingAvatars";
 import useExamStore from "@/stores/examStore";
 import {getExamById} from "@/utils/exams";
 import {playSound} from "@/utils/sound";
@@ -7,6 +9,7 @@ import {convertCamelCaseToReadable} from "@/utils/string";
 import {Tab} from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
+import {capitalize, sample, uniq} from "lodash";
 import moment from "moment";
 import {useRouter} from "next/router";
 import {useEffect, useState} from "react";
@@ -15,6 +18,7 @@ import {toast} from "react-toastify";
 import {v4} from "uuid";
 
 const PartTab = ({part, index, setPart}: {part?: SpeakingPart; index: number; setPart: (part?: SpeakingPart) => void}) => {
+	const [gender, setGender] = useState<"male" | "female">("male");
 	const [isLoading, setIsLoading] = useState(false);
 
 	const generate = () => {
@@ -39,17 +43,19 @@ const PartTab = ({part, index, setPart}: {part?: SpeakingPart; index: number; se
 		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));
+
 		setIsLoading(true);
 		const initialTime = moment();
 
 		axios
-			.post(`/api/exam/speaking/generate/speaking/generate_${index === 3 ? "interactive" : "speaking"}_video`, part)
+			.post(`/api/exam/speaking/generate/speaking/generate_${index === 3 ? "interactive" : "speaking"}_video`, {...part, avatar: avatar?.id})
 			.then((result) => {
 				const isError = typeof result.data === "string" || moment().diff(initialTime, "seconds") < 60;
 
 				playSound(isError ? "error" : "check");
 				if (isError) return toast.error("Something went wrong, please try to generate the video again.");
-				setPart({...part, result: result.data});
+				setPart({...part, result: result.data, gender, avatar});
 			})
 			.catch((e) => {
 				toast.error("Something went wrong!");
@@ -60,6 +66,18 @@ const PartTab = ({part, index, setPart}: {part?: SpeakingPart; index: number; se
 
 	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>
+				<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)}
+					disabled={isLoading}
+				/>
+			</div>
 			<div className="flex gap-4 items-end">
 				<button
 					onClick={generate}
@@ -128,6 +146,11 @@ const PartTab = ({part, index, setPart}: {part?: SpeakingPart; index: number; se
 						</div>
 					)}
 					{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)}
+						</span>
+					)}
 				</div>
 			)}
 		</Tab.Panel>
@@ -140,6 +163,8 @@ interface SpeakingPart {
 	questions?: string[];
 	topic: string;
 	result?: SpeakingExercise | InteractiveSpeakingExercise;
+	gender?: "male" | "female";
+	avatar?: (typeof AVATARS)[number];
 }
 
 const SpeakingGeneration = () => {
@@ -165,6 +190,8 @@ const SpeakingGeneration = () => {
 
 		setIsLoading(true);
 
+		const genders = [part1?.gender, part2?.gender, part3?.gender].filter((x) => !!x);
+
 		const exam: SpeakingExam = {
 			id: v4(),
 			isDiagnostic: false,
@@ -172,6 +199,7 @@ const SpeakingGeneration = () => {
 			minTimer,
 			variant: minTimer >= 14 ? "full" : "partial",
 			module: "speaking",
+			instructorGender: genders.every((x) => x === "male") ? "male" : genders.every((x) => x === "female") ? "female" : "varied",
 		};
 
 		axios

src/pages/api/assignments/index.ts

@@ -1,198 +1,171 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from "next";
-import { app } from "@/firebase";
-import {
-  getFirestore,
-  collection,
-  getDocs,
-  query,
-  where,
-  setDoc,
-  doc,
-  getDoc,
-} from "firebase/firestore";
-import { withIronSessionApiRoute } from "iron-session/next";
-import { sessionOptions } from "@/lib/session";
-import { uuidv4 } from "@firebase/util";
-import { Module } from "@/interfaces";
-import { getExams } from "@/utils/exams.be";
-import { Exam, Variant } from "@/interfaces/exam";
-import { capitalize, flatten, uniqBy } from "lodash";
-import { User } from "@/interfaces/user";
+import type {NextApiRequest, NextApiResponse} from "next";
+import {app} from "@/firebase";
+import {getFirestore, collection, getDocs, query, where, setDoc, doc, getDoc} from "firebase/firestore";
+import {withIronSessionApiRoute} from "iron-session/next";
+import {sessionOptions} from "@/lib/session";
+import {uuidv4} from "@firebase/util";
+import {Module} from "@/interfaces";
+import {getExams} from "@/utils/exams.be";
+import {Exam, InstructorGender, Variant} from "@/interfaces/exam";
+import {capitalize, flatten, uniqBy} from "lodash";
+import {User} from "@/interfaces/user";
 import moment from "moment";
-import { sendEmail } from "@/email";
+import {sendEmail} from "@/email";
 
 const db = getFirestore(app);
 
 export default withIronSessionApiRoute(handler, sessionOptions);
 
 async function handler(req: NextApiRequest, res: NextApiResponse) {
-  if (!req.session.user) {
-    res.status(401).json({ ok: false });
-    return;
-  }
+	if (!req.session.user) {
+		res.status(401).json({ok: false});
+		return;
+	}
 
-  if (req.method === "GET") return GET(req, res);
-  if (req.method === "POST") return POST(req, res);
+	if (req.method === "GET") return GET(req, res);
+	if (req.method === "POST") return POST(req, res);
 
-  res.status(404).json({ ok: false });
+	res.status(404).json({ok: false});
 }
 
 async function GET(req: NextApiRequest, res: NextApiResponse) {
-  const q = query(collection(db, "assignments"));
-  const snapshot = await getDocs(q);
+	const q = query(collection(db, "assignments"));
+	const snapshot = await getDocs(q);
 
-  const docs = snapshot.docs.map((doc) => ({
-    id: doc.id,
-    ...doc.data(),
-  }));
+	const docs = snapshot.docs.map((doc) => ({
+		id: doc.id,
+		...doc.data(),
+	}));
 
-  res.status(200).json(docs);
+	res.status(200).json(docs);
 }
 
 interface ExamWithUser {
-  module: Module;
-  id: string;
-  assignee: string;
+	module: Module;
+	id: string;
+	assignee: string;
 }
 
 function getRandomIndex(arr: any[]): number {
-  const randomIndex = Math.floor(Math.random() * arr.length);
-  return randomIndex;
+	const randomIndex = Math.floor(Math.random() * arr.length);
+	return randomIndex;
 }
 
 const generateExams = async (
-  generateMultiple: Boolean,
-  selectedModules: Module[],
-  assignees: string[],
-  variant?: Variant,
+	generateMultiple: Boolean,
+	selectedModules: Module[],
+	assignees: string[],
+	variant?: Variant,
+	instructorGender?: InstructorGender,
 ): Promise<ExamWithUser[]> => {
-  if (generateMultiple) {
-    // for optimization purposes, it would be better to create a new endpoint that returned the answers for all users at once
-    const allExams = assignees.map(async (assignee) => {
-      const selectedModulePromises = selectedModules.map(
-        async (module: Module) => {
-          try {
-            const exams: Exam[] = await getExams(
-              db,
-              module,
-              "true",
-              assignee,
-              variant,
-            );
+	if (generateMultiple) {
+		// for optimization purposes, it would be better to create a new endpoint that returned the answers for all users at once
+		const allExams = assignees.map(async (assignee) => {
+			const selectedModulePromises = selectedModules.map(async (module: Module) => {
+				try {
+					const exams: Exam[] = await getExams(db, module, "true", assignee, variant, instructorGender);
 
-            const exam = exams[getRandomIndex(exams)];
-            if (exam) {
-              return { module: exam.module, id: exam.id, assignee };
-            }
-            return null;
-          } catch (e) {
-            console.error(e);
-            return null;
-          }
-        },
-        [],
-      );
-      const newModules = await Promise.all(selectedModulePromises);
+					const exam = exams[getRandomIndex(exams)];
+					if (exam) {
+						return {module: exam.module, id: exam.id, assignee};
+					}
+					return null;
+				} catch (e) {
+					console.error(e);
+					return null;
+				}
+			}, []);
+			const newModules = await Promise.all(selectedModulePromises);
 
-      return newModules;
-    }, []);
+			return newModules;
+		}, []);
 
-    const exams = flatten(await Promise.all(allExams)).filter(
-      (x) => x !== null,
-    ) as ExamWithUser[];
-    return exams;
-  }
+		const exams = flatten(await Promise.all(allExams)).filter((x) => x !== null) as ExamWithUser[];
+		return exams;
+	}
 
-  const selectedModulePromises = selectedModules.map(async (module: Module) => {
-    const exams: Exam[] = await getExams(db, module, "false", undefined);
-    const exam = exams[getRandomIndex(exams)];
+	const selectedModulePromises = selectedModules.map(async (module: Module) => {
+		const exams: Exam[] = await getExams(db, module, "false", undefined, variant, instructorGender);
+		const exam = exams[getRandomIndex(exams)];
 
-    if (exam) {
-      return { module: exam.module, id: exam.id };
-    }
-    return null;
-  });
+		if (exam) {
+			return {module: exam.module, id: exam.id};
+		}
+		return null;
+	});
 
-  const exams = await Promise.all(selectedModulePromises);
-  const examesFiltered = exams.filter((x) => x !== null) as ExamWithUser[];
-  return flatten(
-    assignees.map((assignee) =>
-      examesFiltered.map((exam) => ({ ...exam, assignee })),
-    ),
-  );
+	const exams = await Promise.all(selectedModulePromises);
+	const examesFiltered = exams.filter((x) => x !== null) as ExamWithUser[];
+	return flatten(assignees.map((assignee) => examesFiltered.map((exam) => ({...exam, assignee}))));
 };
 
 async function POST(req: NextApiRequest, res: NextApiResponse) {
-  const {
-    selectedModules,
-    assignees,
-    // Generate multiple true would generate an unique exam for each user
-    // false would generate the same exam for all users
-    generateMultiple = false,
-    variant,
-    ...body
-  } = req.body as {
-    selectedModules: Module[];
-    assignees: string[];
-    generateMultiple: Boolean;
-    name: string;
-    startDate: string;
-    endDate: string;
-    variant?: Variant;
-  };
+	const {
+		selectedModules,
+		assignees,
+		// Generate multiple true would generate an unique exam for each user
+		// false would generate the same exam for all users
+		generateMultiple = false,
+		variant,
+		instructorGender,
+		...body
+	} = req.body as {
+		selectedModules: Module[];
+		assignees: string[];
+		generateMultiple: Boolean;
+		name: string;
+		startDate: string;
+		endDate: string;
+		variant?: Variant;
+		instructorGender?: InstructorGender;
+	};
 
-  const exams: ExamWithUser[] = await generateExams(
-    generateMultiple,
-    selectedModules,
-    assignees,
-    variant,
-  );
+	const exams: ExamWithUser[] = await generateExams(generateMultiple, selectedModules, assignees, variant, instructorGender);
 
-  if (exams.length === 0) {
-    res
-      .status(400)
-      .json({ ok: false, error: "No exams found for the selected modules" });
-    return;
-  }
+	if (exams.length === 0) {
+		res.status(400).json({ok: false, error: "No exams found for the selected modules"});
+		return;
+	}
 
-  await setDoc(doc(db, "assignments", uuidv4()), {
-    assigner: req.session.user?.id,
-    assignees,
-    results: [],
-    exams,
-    ...body,
-  });
+	await setDoc(doc(db, "assignments", uuidv4()), {
+		assigner: req.session.user?.id,
+		assignees,
+		results: [],
+		exams,
+		instructorGender,
+		...body,
+	});
 
-  res.status(200).json({ ok: true });
+	res.status(200).json({ok: true});
 
-  for (const assigneeID of assignees) {
-    const assigneeSnapshot = await getDoc(doc(db, "users", assigneeID));
-    if (!assigneeSnapshot.exists()) continue;
+	for (const assigneeID of assignees) {
+		const assigneeSnapshot = await getDoc(doc(db, "users", assigneeID));
+		if (!assigneeSnapshot.exists()) continue;
 
-    const assignee = { id: assigneeID, ...assigneeSnapshot.data() } as User;
-    const name = body.name;
-    const teacher = req.session.user!;
-    const examModulesLabel = uniqBy(exams, (x) => x.module)
-      .map((x) => capitalize(x.module))
-      .join(", ");
-    const startDate = moment(body.startDate).format("DD/MM/YYYY - HH:mm");
-    const endDate = moment(body.endDate).format("DD/MM/YYYY - HH:mm");
+		const assignee = {id: assigneeID, ...assigneeSnapshot.data()} as User;
+		const name = body.name;
+		const teacher = req.session.user!;
+		const examModulesLabel = uniqBy(exams, (x) => x.module)
+			.map((x) => capitalize(x.module))
+			.join(", ");
+		const startDate = moment(body.startDate).format("DD/MM/YYYY - HH:mm");
+		const endDate = moment(body.endDate).format("DD/MM/YYYY - HH:mm");
 
-    await sendEmail(
-      "assignment",
-      {
-        user: { name: assignee.name },
-        assignment: {
-          name,
-          startDate,
-          endDate,
-          modules: examModulesLabel,
-          assigner: teacher.name,
-        },
-      },
-      [assignee.email],
-      "EnCoach - New Assignment!",
-    );
-  }
+		await sendEmail(
+			"assignment",
+			{
+				user: {name: assignee.name},
+				assignment: {
+					name,
+					startDate,
+					endDate,
+					modules: examModulesLabel,
+					assigner: teacher.name,
+				},
+			},
+			[assignee.email],
+			"EnCoach - New Assignment!",
+		);
+	}
 }

src/pages/api/exam/[module]/index.ts

@@ -4,7 +4,7 @@ import {app} from "@/firebase";
 import {getFirestore, setDoc, doc} from "firebase/firestore";
 import {withIronSessionApiRoute} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
-import {Exam, Variant} from "@/interfaces/exam";
+import {Exam, InstructorGender, Variant} from "@/interfaces/exam";
 import {getExams} from "@/utils/exams.be";
 const db = getFirestore(app);
 
@@ -23,9 +23,14 @@ async function GET(req: NextApiRequest, res: NextApiResponse) {
 		return;
 	}
 
-	const {module, avoidRepeated, variant} = req.query as {module: string; avoidRepeated: string; variant?: Variant};
+	const {module, avoidRepeated, variant, instructorGender} = req.query as {
+		module: string;
+		avoidRepeated: string;
+		variant?: Variant;
+		instructorGender?: InstructorGender;
+	};
 
-	const exams: Exam[] = await getExams(db, module, avoidRepeated, req.session.user.id, variant);
+	const exams: Exam[] = await getExams(db, module, avoidRepeated, req.session.user.id, variant, instructorGender);
 	res.status(200).json(exams);
 }
 

src/pages/profile.tsx

@@ -28,6 +28,9 @@ import TimezoneSelect from "@/components/Low/TImezoneSelect";
 import Modal from "@/components/Modal";
 import {Module} from "@/interfaces";
 import ModuleLevelSelector from "@/components/Medium/ModuleLevelSelector";
+import Select from "@/components/Low/Select";
+import {InstructorGender} from "@/interfaces/exam";
+import {capitalize} from "lodash";
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
 
@@ -83,6 +86,11 @@ function UserProfile({user, mutateUser}: Props) {
 		user.type === "corporate" ? undefined : user.demographicInformation?.employment,
 	);
 	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
+
+	const [preferredGender, setPreferredGender] = useState<InstructorGender | undefined>(
+		user.type === "student" || user.type === "developer" ? user.preferredGender || "varied" : undefined,
+	);
+
 	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
 	const [corporateInformation, setCorporateInformation] = useState(user.type === "corporate" ? user.corporateInformation : undefined);
 	const [companyName, setCompanyName] = useState<string | undefined>(user.type === "agent" ? user.agentInformation?.companyName : undefined);
@@ -90,6 +98,7 @@ function UserProfile({user, mutateUser}: Props) {
 		user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
 	);
 	const [timezone, setTimezone] = useState<string>(user.demographicInformation?.timezone || moment.tz.guess());
+
 	const {groups} = useGroups();
 	const {users} = useUsers();
 
@@ -146,6 +155,7 @@ function UserProfile({user, mutateUser}: Props) {
 			newPassword,
 			profilePicture,
 			desiredLevels,
+			preferredGender,
 			demographicInformation: {
 				phone,
 				country,
@@ -337,6 +347,24 @@ function UserProfile({user, mutateUser}: Props) {
 								</div>
 							)}
 
+							{preferredGender && ["developer", "student"].includes(user.type) && (
+								<>
+									<Divider />
+									<div className="flex flex-col gap-3 w-full">
+										<label className="font-normal text-base text-mti-gray-dim">Speaking Instructor&apos;s Gender</label>
+										<Select
+											value={{value: preferredGender, label: capitalize(preferredGender)}}
+											onChange={(value) => (value ? setPreferredGender(value.value as InstructorGender) : null)}
+											options={[
+												{value: "male", label: "Male"},
+												{value: "female", label: "Female"},
+												{value: "varied", label: "Varied"},
+											]}
+										/>
+									</div>
+								</>
+							)}
+
 							<Divider />
 
 							{user.type === "corporate" && (

src/resources/speakingAvatars.ts

@@ -0,0 +1,37 @@
+export const AVATARS = [
+	{
+		name: "Matthew Noah",
+		id: "5912afa7c77c47d3883af3d874047aaf",
+		gender: "male",
+	},
+	{
+		name: "Vera Cerise",
+		id: "9e58d96a383e4568a7f1e49df549e0e4",
+		gender: "female",
+	},
+	{
+		name: "Edward Tony",
+		id: "d2cdd9c0379a4d06ae2afb6e5039bd0c",
+		gender: "male",
+	},
+	{
+		name: "Tanya Molly",
+		id: "045cb5dcd00042b3a1e4f3bc1c12176b",
+		gender: "female",
+	},
+	{
+		name: "Kayla Abbi",
+		id: "1ae1e5396cc444bfad332155fdb7a934",
+		gender: "female",
+	},
+	{
+		name: "Jerome Ryan",
+		id: "0ee6aa7cc1084063a630ae514fccaa31",
+		gender: "male",
+	},
+	{
+		name: "Tyler Christopher",
+		id: "5772cff935844516ad7eeff21f839e43",
+		gender: "male",
+	},
+];

src/utils/exams.be.ts

@@ -1,6 +1,6 @@
 import {collection, getDocs, query, where, setDoc, doc, Firestore} from "firebase/firestore";
 import {shuffle} from "lodash";
-import {Exam, Variant} from "@/interfaces/exam";
+import {Exam, InstructorGender, Variant} from "@/interfaces/exam";
 import {Stat} from "@/interfaces/user";
 
 export const getExams = async (
@@ -12,22 +12,23 @@ export const getExams = async (
 	// by the teacher that performed the request
 	userId: string | undefined,
 	variant?: Variant,
+	instructorGender?: InstructorGender,
 ): Promise<Exam[]> => {
 	const moduleRef = collection(db, module);
 
 	const q = query(moduleRef, where("isDiagnostic", "==", false));
 	const snapshot = await getDocs(q);
 
-	const exams: Exam[] = filterByVariant(
-		shuffle(
-			snapshot.docs.map((doc) => ({
-				id: doc.id,
-				...doc.data(),
-				module,
-			})),
-		) as Exam[],
-		variant,
-	);
+	const allExams = shuffle(
+		snapshot.docs.map((doc) => ({
+			id: doc.id,
+			...doc.data(),
+			module,
+		})),
+	) as Exam[];
+
+	const variantExams: Exam[] = filterByVariant(allExams, variant);
+	const genderedExams: Exam[] = filterByInstructorGender(variantExams, instructorGender);
 
 	if (avoidRepeated === "true") {
 		const statsQ = query(collection(db, "stats"), where("user", "==", userId));
@@ -37,12 +38,18 @@ export const getExams = async (
 			id: doc.id,
 			...doc.data(),
 		})) as unknown as Stat[];
-		const filteredExams = exams.filter((x) => !stats.map((s) => s.exam).includes(x.id));
+		const filteredExams = genderedExams.filter((x) => !stats.map((s) => s.exam).includes(x.id));
 
-		return filteredExams.length > 0 ? filteredExams : exams;
+		return filteredExams.length > 0 ? filteredExams : genderedExams;
 	}
 
-	return exams;
+	return genderedExams;
+};
+
+const filterByInstructorGender = (exams: Exam[], instructorGender?: InstructorGender) => {
+	if (!instructorGender || instructorGender === "varied") return exams;
+
+	return exams.filter((e) => (e.module === "speaking" ? e.instructorGender === instructorGender : true));
 };
 
 const filterByVariant = (exams: Exam[], variant?: Variant) => {

src/utils/exams.ts

@@ -1,11 +1,29 @@
 import {Module} from "@/interfaces";
-import {Exam, ReadingExam, ListeningExam, WritingExam, SpeakingExam, Exercise, UserSolution, LevelExam, Variant} from "@/interfaces/exam";
+import {
+	Exam,
+	ReadingExam,
+	ListeningExam,
+	WritingExam,
+	SpeakingExam,
+	Exercise,
+	UserSolution,
+	LevelExam,
+	Variant,
+	InstructorGender,
+} from "@/interfaces/exam";
 import axios from "axios";
 
-export const getExam = async (module: Module, avoidRepeated: boolean, variant?: Variant): Promise<Exam | undefined> => {
+export const getExam = async (
+	module: Module,
+	avoidRepeated: boolean,
+	variant?: Variant,
+	instructorGender?: InstructorGender,
+): Promise<Exam | undefined> => {
 	const url = new URLSearchParams();
 	url.append("avoidRepeated", avoidRepeated.toString());
+
 	if (variant) url.append("variant", variant);
+	if (module === "speaking" && instructorGender) url.append("instructorGender", instructorGender);
 
 	const examRequest = await axios<Exam[]>(`/api/exam/${module}?${url.toString()}`);
 	if (examRequest.status !== 200) {