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

Added an "instructions" panel to the Listening before it actually starts

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-02-05 14:52:35 +00:00
parent e6017854fd
commit f6166ca9e1
2 changed files with 268 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/exams/Finish.tsx
View File

@@ -1,26 +1,17 @@
import Button from "@/components/Low/Button";
import ModuleTitle from "@/components/Medium/ModuleTitle";
import { moduleResultText } from "@/constants/ielts";
import { Module } from "@/interfaces";
import { User } from "@/interfaces/user";
import {moduleResultText} from "@/constants/ielts";
import {Module} from "@/interfaces";
import {User} from "@/interfaces/user";
import useExamStore from "@/stores/examStore";
import { calculateBandScore } from "@/utils/score";
import {calculateBandScore} from "@/utils/score";
import clsx from "clsx";
import Link from "next/link";
import { useRouter } from "next/router";
import { Fragment, useEffect, useState } from "react";
import {
BsArrowCounterclockwise,
BsBook,
BsClipboard,
BsEyeFill,
BsHeadphones,
BsMegaphone,
BsPen,
BsShareFill,
} from "react-icons/bs";
import { LevelScore } from "@/constants/ielts";
import { getLevelScore } from "@/utils/score";
import {useRouter} from "next/router";
import {Fragment, useEffect, useState} from "react";
import {BsArrowCounterclockwise, BsBook, BsClipboard, BsEyeFill, BsHeadphones, BsMegaphone, BsPen, BsShareFill} from "react-icons/bs";
import {LevelScore} from "@/constants/ielts";
import {getLevelScore} from "@/utils/score";
interface Score {
module: Module;
@@ -37,28 +28,15 @@ interface Props {
onViewResults: () => void;
}
export default function Finish({
user,
scores,
modules,
isLoading,
onViewResults,
}: Props) {
export default function Finish({user, scores, modules, isLoading, onViewResults}: Props) {
const [selectedModule, setSelectedModule] = useState(modules[0]);
const [selectedScore, setSelectedScore] = useState<Score>(
scores.find((x) => x.module === modules[0])!,
);
const [selectedScore, setSelectedScore] = useState<Score>(scores.find((x) => x.module === modules[0])!);
const exams = useExamStore((state) => state.exams);
useEffect(
() => setSelectedScore(scores.find((x) => x.module === selectedModule)!),
[scores, selectedModule],
);
useEffect(() => console.log(scores), [scores]);
useEffect(() => setSelectedScore(scores.find((x) => x.module === selectedModule)!), [scores, selectedModule]);
const moduleColors: { [key in Module]: { progress: string; inner: string } } =
{
const moduleColors: {[key in Module]: {progress: string; inner: string}} = {
reading: {
progress: "text-ielts-reading",
inner: "bg-ielts-reading-light",
@@ -90,12 +68,7 @@ export default function Finish({
return exam.exercises.length;
};
const bandScore: number = calculateBandScore(
selectedScore.correct,
selectedScore.total,
selectedModule,
user.focus,
);
const bandScore: number = calculateBandScore(selectedScore.correct, selectedScore.total, selectedModule, user.focus);
const showLevel = (level: number) => {
if (selectedModule === "level") {
@@ -126,11 +99,8 @@ export default function Finish({
onClick={() => setSelectedModule("reading")}
className={clsx(
"hover:bg-ielts-reading flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
selectedModule === "reading"
? "bg-ielts-reading text-white"
: "bg-mti-gray-smoke text-ielts-reading",
)}
>
selectedModule === "reading" ? "bg-ielts-reading text-white" : "bg-mti-gray-smoke text-ielts-reading",
)}>
<BsBook className="h-6 w-6" />
<span className="font-semibold">Reading</span>
</div>
@@ -140,11 +110,8 @@ export default function Finish({
onClick={() => setSelectedModule("listening")}
className={clsx(
"hover:bg-ielts-listening flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
selectedModule === "listening"
? "bg-ielts-listening text-white"
: "bg-mti-gray-smoke text-ielts-listening",
)}
>
selectedModule === "listening" ? "bg-ielts-listening text-white" : "bg-mti-gray-smoke text-ielts-listening",
)}>
<BsHeadphones className="h-6 w-6" />
<span className="font-semibold">Listening</span>
</div>
@@ -154,11 +121,8 @@ export default function Finish({
onClick={() => setSelectedModule("writing")}
className={clsx(
"hover:bg-ielts-writing flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
selectedModule === "writing"
? "bg-ielts-writing text-white"
: "bg-mti-gray-smoke text-ielts-writing",
)}
>
selectedModule === "writing" ? "bg-ielts-writing text-white" : "bg-mti-gray-smoke text-ielts-writing",
)}>
<BsPen className="h-6 w-6" />
<span className="font-semibold">Writing</span>
</div>
@@ -168,11 +132,8 @@ export default function Finish({
onClick={() => setSelectedModule("speaking")}
className={clsx(
"hover:bg-ielts-speaking flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
selectedModule === "speaking"
? "bg-ielts-speaking text-white"
: "bg-mti-gray-smoke text-ielts-speaking",
)}
>
selectedModule === "speaking" ? "bg-ielts-speaking text-white" : "bg-mti-gray-smoke text-ielts-speaking",
)}>
<BsMegaphone className="h-6 w-6" />
<span className="font-semibold">Speaking</span>
</div>
@@ -182,11 +143,8 @@ export default function Finish({
onClick={() => setSelectedModule("level")}
className={clsx(
"hover:bg-ielts-level flex cursor-pointer items-center gap-2 rounded-xl p-4 transition duration-300 ease-in-out hover:text-white hover:shadow-lg",
selectedModule === "level"
? "bg-ielts-level text-white"
: "bg-mti-gray-smoke text-ielts-level",
)}
>
selectedModule === "level" ? "bg-ielts-level text-white" : "bg-mti-gray-smoke text-ielts-level",
)}>
<BsClipboard className="h-6 w-6" />
<span className="font-semibold">Level</span>
</div>
@@ -194,18 +152,8 @@ export default function Finish({
</div>
{isLoading && (
<div className="absolute left-1/2 top-1/2 flex h-fit w-fit -translate-x-1/2 -translate-y-1/2 animate-pulse flex-col items-center gap-12">
<span
className={clsx(
"loading loading-infinity w-32",
moduleColors[selectedModule].progress,
)}
/>
<span
className={clsx(
"text-center text-2xl font-bold",
moduleColors[selectedModule].progress,
)}
>
<span className={clsx("loading loading-infinity w-32", moduleColors[selectedModule].progress)} />
<span className={clsx("text-center text-2xl font-bold", moduleColors[selectedModule].progress)}>
Evaluating your answers, please be patient...
<br />
You can also check it later on your records page!
@@ -214,30 +162,22 @@ export default function Finish({
)}
{!isLoading && (
<div className="mb-20 mt-32 flex w-full items-center justify-between gap-9">
<span className="max-w-3xl">
{moduleResultText(selectedModule, bandScore)}
</span>
<span className="max-w-3xl">{moduleResultText(selectedModule, bandScore)}</span>
<div className="flex gap-9 px-16">
<div
className={clsx(
"radial-progress overflow-hidden",
moduleColors[selectedModule].progress,
)}
className={clsx("radial-progress overflow-hidden", moduleColors[selectedModule].progress)}
style={
{
"--value":
(selectedScore.correct / selectedScore.total) * 100,
"--value": (selectedScore.correct / selectedScore.total) * 100,
"--thickness": "12px",
"--size": "13rem",
} as any
}
>
}>
<div
className={clsx(
"flex h-48 w-48 flex-col items-center justify-center rounded-full",
moduleColors[selectedModule].inner,
)}
>
)}>
<span className="text-xl">Level</span>
{showLevel(bandScore)}
</div>
@@ -247,12 +187,7 @@ export default function Finish({
<div className="bg-mti-red-light mt-1 h-3 w-3 rounded-full" />
<div className="flex flex-col">
<span className="text-mti-red-light">
{(
((selectedScore.total - selectedScore.missing) /
selectedScore.total) *
100
).toFixed(0)}
%
{(((selectedScore.total - selectedScore.missing) / selectedScore.total) * 100).toFixed(0)}%
</span>
<span className="text-lg">Completion</span>
</div>
@@ -260,9 +195,7 @@ export default function Finish({
<div className="flex gap-2">
<div className="bg-mti-purple-light mt-1 h-3 w-3 rounded-full" />
<div className="flex flex-col">
<span className="text-mti-purple-light">
{selectedScore.correct.toString().padStart(2, "0")}
</span>
<span className="text-mti-purple-light">{selectedScore.correct.toString().padStart(2, "0")}</span>
<span className="text-lg">Correct</span>
</div>
</div>
@@ -270,9 +203,7 @@ export default function Finish({
<div className="bg-mti-rose-light mt-1 h-3 w-3 rounded-full" />
<div className="flex flex-col">
<span className="text-mti-rose-light">
{(selectedScore.total - selectedScore.correct)
.toString()
.padStart(2, "0")}
{(selectedScore.total - selectedScore.correct).toString().padStart(2, "0")}
</span>
<span className="text-lg">Wrong</span>
</div>
@@ -289,8 +220,7 @@ export default function Finish({
<div className="flex w-fit cursor-pointer flex-col items-center gap-1">
<button
onClick={() => window.location.reload()}
className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out"
>
className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out">
<BsArrowCounterclockwise className="h-7 w-7 text-white" />
</button>
<span>Play Again</span>
@@ -298,8 +228,7 @@ export default function Finish({
<div className="flex w-fit cursor-pointer flex-col items-center gap-1">
<button
onClick={onViewResults}
className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out"
>
className="bg-mti-purple-light hover:bg-mti-purple flex h-11 w-11 items-center justify-center rounded-full transition duration-300 ease-in-out">
<BsEyeFill className="h-7 w-7 text-white" />
</button>
<span>Review Answers</span>

43
src/exams/Listening.tsx
View File

@@ -16,11 +16,14 @@ interface Props {
onFinish: (userSolutions: UserSolution[]) => void;
}
const INSTRUCTIONS_AUDIO_SRC =
"https://firebasestorage.googleapis.com/v0/b/storied-phalanx-349916.appspot.com/o/listening_recordings%2Fgeneric_intro.mp3?alt=media&token=9b9cfdb8-e90d-40d1-854b-51c4378a5c4b";
export default function Listening({exam, showSolutions = false, onFinish}: Props) {
const [questionIndex, setQuestionIndex] = useState(0);
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
const [exerciseIndex, setExerciseIndex] = useState(showSolutions ? 0 : -1);
const [partIndex, setPartIndex] = useState(0);
const [partIndex, setPartIndex] = useState(exam.variant === "partial" ? 0 : -1);
const [timesListened, setTimesListened] = useState(0);
const [userSolutions, setUserSolutions] = useState<UserSolution[]>(
exam.parts.flatMap((x) => x.exercises).map((x) => defaultUserSolutions(x, exam)),
@@ -104,6 +107,17 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
};
};
const renderAudioInstructionsPlayer = () => (
<div className="flex flex-col gap-8 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16">
<div className="flex flex-col w-full gap-2">
<h4 className="text-xl font-semibold">Please listen to the instructions audio attentively.</h4>
</div>
<div className="rounded-xl flex flex-col gap-4 items-center w-full h-fit">
<AudioPlayer key={partIndex} src={INSTRUCTIONS_AUDIO_SRC} color="listening" />
</div>
</div>
);
const renderAudioPlayer = () => (
<div className="flex flex-col gap-8 w-full bg-mti-gray-seasalt rounded-xl py-8 px-16">
<div className="flex flex-col w-full gap-2">
@@ -133,7 +147,9 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
<div className="flex flex-col h-full w-full gap-8 justify-between">
<ModuleTitle
exerciseIndex={
(exam.parts
partIndex === -1
? 0
: (exam.parts
.flatMap((x) => x.exercises)
.findIndex(
(x) => x.id === exam.parts[partIndex].exercises[exerciseIndex === -1 ? exerciseIndex + 1 : exerciseIndex]?.id,
@@ -147,22 +163,33 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
totalExercises={countExercises(exam.parts.flatMap((x) => x.exercises))}
disableTimer={showSolutions}
/>
{renderAudioPlayer()}
{/* Audio Player for the Instructions */}
{partIndex === -1 && renderAudioInstructionsPlayer()}
{/* Part's audio player */}
{partIndex > -1 && renderAudioPlayer()}
{/* Exercise renderer */}
{exerciseIndex > -1 &&
exerciseIndex < exam.parts[partIndex].exercises.length &&
!showSolutions &&
renderExercise(getExercise(), nextExercise, previousExercise, setCurrentQuestionIndex)}
{/* Solution renderer */}
{exerciseIndex > -1 &&
exerciseIndex < exam.parts[partIndex].exercises.length &&
showSolutions &&
renderSolution(exam.parts[partIndex].exercises[exerciseIndex], nextExercise, previousExercise, setCurrentQuestionIndex)}
</div>
{exerciseIndex === -1 && partIndex > 0 && (
{exerciseIndex === -1 && partIndex > -1 && exam.variant !== "partial" && (
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Button
color="purple"
variant="outline"
onClick={() => {
if (partIndex === 0) return setPartIndex(-1);
setExerciseIndex(exam.parts[partIndex - 1].exercises.length - 1);
setPartIndex((prev) => prev - 1);
}}
@@ -175,7 +202,13 @@ export default function Listening({exam, showSolutions = false, onFinish}: Props
</Button>
</div>
)}
{exerciseIndex === -1 && partIndex === 0 && (
{exerciseIndex === -1 && partIndex === -1 && exam.variant !== "partial" && (
<Button color="purple" onClick={() => setPartIndex(0)} className="max-w-[200px] self-end w-full justify-self-end">
Start now
</Button>
)}
{exerciseIndex === -1 && partIndex === 0 && exam.variant === "partial" && (
<Button color="purple" onClick={() => nextExercise()} className="max-w-[200px] self-end w-full justify-self-end">
Start now
</Button>