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

Created the first exercise of the listening demo

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-03-24 18:09:05 +00:00
parent 3d74bf9bf1
commit 2b38f9df9b
8 changed files with 473 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
src/pages/exam/listening/[id].tsx Normal file
View File

@@ -0,0 +1,90 @@
import Navbar from "@/components/Navbar";
import {ListeningExam} from "@/interfaces/exam";
import Head from "next/head";
// TODO: Remove this import
import JSON_LISTENING from "@/demo/listening.json";
import JSON_USER from "@/demo/user.json";
import {useState} from "react";
import Icon from "@mdi/react";
import {mdiArrowRight} from "@mdi/js";
import clsx from "clsx";
import {infoButtonStyle} from "@/constants/buttonStyles";
import {renderExercise} from "@/components/Exercises";
interface Props {
exam: ListeningExam;
}
export const getServerSideProps = () => {
return {
props: {
exam: JSON_LISTENING,
},
};
};
export default function Listening({exam}: Props) {
const [exerciseIndex, setExerciseIndex] = useState(-1);
const [timesListened, setTimesListened] = useState(0);
const nextExercise = () => {
setExerciseIndex((prev) => prev + 1);
};
const previousExercise = () => {
setExerciseIndex((prev) => prev - 1);
};
const renderAudioPlayer = () => (
<>
{exerciseIndex === -1 && (
<div className="flex flex-col">
<span className="text-lg font-semibold">Please listen to the following audio attentively.</span>
{exam.audio.repeatableTimes > 0 ? (
<span className="self-center text-sm">
You will only be allowed to listen to the audio {exam.audio.repeatableTimes} time(s).
</span>
) : (
<span className="self-center text-sm">You may listen to the audio as many times as you would like.</span>
)}
</div>
)}
<div className="bg-gray-300 rounded-xl p-4 flex flex-col gap-4 items-center w-full overflow-auto">
<span className="text-xl font-semibold">{exam.audio.title}</span>
{exam.audio.repeatableTimes > 0 && (
<>{exam.audio.repeatableTimes <= timesListened && <span>You are no longer allowed to listen to the audio again.</span>}</>
)}
<span>AUDIO WILL GO HERE</span>
</div>
</>
);
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="w-full h-screen flex flex-col items-center bg-neutral-100 text-black">
<Navbar profilePicture={JSON_USER.profilePicture} />
<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
{renderAudioPlayer()}
{exerciseIndex > -1 &&
exerciseIndex < exam.exercises.length &&
renderExercise(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
{exerciseIndex === -1 && (
<button className={clsx("btn btn-wide gap-4 relative text-white self-end", infoButtonStyle)} onClick={nextExercise}>
Next
<div className="absolute right-4">
<Icon path={mdiArrowRight} color="white" size={1} />
</div>
</button>
)}
</div>
</main>
</>
);
}

35
src/pages/exam/reading/[id].tsx
View File

@@ -1,5 +1,5 @@
import Navbar from "@/components/Navbar";
import {FillBlanksExercise, MatchSentencesExercise, ReadingExam} from "@/interfaces/exam";
import {ReadingExam} from "@/interfaces/exam";
import Head from "next/head";
// TODO: Remove this import
@@ -10,11 +10,8 @@ import Icon from "@mdi/react";
import {mdiArrowLeft, mdiArrowRight, mdiNotebook} from "@mdi/js";
import clsx from "clsx";
import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles";
import FillBlanks from "@/components/Exercises/FillBlanks";
import {Dialog, Transition} from "@headlessui/react";
import dynamic from "next/dynamic";
const MatchSentences = dynamic(() => import("@/components/Exercises/MatchSentences"), {ssr: false});
import {renderExercise} from "@/components/Exercises";
interface Props {
exam: ReadingExam;
@@ -119,16 +116,6 @@ export default function Reading({exam}: Props) {
</>
);
const renderQuestion = () => {
const exercise = exam.exercises[exerciseIndex];
switch (exercise.type) {
case "fillBlanks":
return <FillBlanks {...(exercise as FillBlanksExercise)} />;
case "matchSentences":
return <MatchSentences {...(exercise as MatchSentencesExercise)} />;
}
};
return (
<>
<Head>
@@ -142,7 +129,9 @@ export default function Reading({exam}: Props) {
<TextModal {...exam.text} isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
{exerciseIndex === -1 && renderText()}
{exerciseIndex > -1 && exerciseIndex < exam.exercises.length && renderQuestion()}
{exerciseIndex > -1 &&
exerciseIndex < exam.exercises.length &&
renderExercise(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
<div className={clsx("flex gap-8", exerciseIndex > -1 ? "w-full justify-between" : "self-end")}>
{exerciseIndex > -1 && (
<button
@@ -157,22 +146,14 @@ export default function Reading({exam}: Props) {
</div>
</button>
)}
<div className="self-end flex gap-8">
{exerciseIndex > -1 && (
<button className={clsx("btn btn-wide gap-4 relative text-white", errorButtonStyle)} onClick={previousExercise}>
<div className="absolute left-4">
<Icon path={mdiArrowLeft} color="white" size={1} />
</div>
Back
</button>
)}
<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={nextExercise}>
{exerciseIndex === -1 && (
<button className={clsx("btn btn-wide gap-4 relative text-white self-end", infoButtonStyle)} onClick={nextExercise}>
Next
<div className="absolute right-4">
<Icon path={mdiArrowRight} color="white" size={1} />
</div>
</button>
</div>
)}
</div>
</div>
</main>