devops/encoach_ui_odoo19
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

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>