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

Implemented a simple "match the sentence" exercise

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-03-23 16:22:48 +00:00
parent 740346f696
commit 3d74bf9bf1
7 changed files with 327 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import Navbar from "@/components/Navbar";
import {ReadingExam} from "@/interfaces/exam";
import {FillBlanksExercise, MatchSentencesExercise, ReadingExam} from "@/interfaces/exam";
import Head from "next/head";
// TODO: Remove this import
@@ -7,11 +7,14 @@ import JSON_READING from "@/demo/reading.json";
import JSON_USER from "@/demo/user.json";
import {Fragment, useState} from "react";
import Icon from "@mdi/react";
import {mdiArrowRight, mdiNotebook} from "@mdi/js";
import {mdiArrowLeft, mdiArrowRight, mdiNotebook} from "@mdi/js";
import clsx from "clsx";
import {infoButtonStyle} from "@/constants/buttonStyles";
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});
interface Props {
exam: ReadingExam;
@@ -25,7 +28,7 @@ export const getServerSideProps = () => {
};
};
function TextModal({isOpen, onClose}: {isOpen: boolean; onClose: () => void}) {
function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: string; content: string; onClose: () => void}) {
return (
<Transition appear show={isOpen} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={onClose}>
@@ -50,13 +53,18 @@ function TextModal({isOpen, onClose}: {isOpen: boolean; onClose: () => void}) {
leave="ease-in duration-200"
leaveFrom="opacity-100 scale-100"
leaveTo="opacity-0 scale-95">
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Panel className="w-full max-w-4xl transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
<Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
Payment successful
{title}
</Dialog.Title>
<div className="mt-2">
<div className="mt-2 overflow-auto">
<p className="text-sm text-gray-500">
Your payment has been successfully submitted. We’ve sent you an email with all of the details of your order.
{content.split("\n").map((line, index) => (
<Fragment key={index}>
{line}
<br />
</Fragment>
))}
</p>
</div>
@@ -85,6 +93,10 @@ export default function Reading({exam}: Props) {
setExerciseIndex((prev) => prev + 1);
};
const previousExercise = () => {
setExerciseIndex((prev) => prev - 1);
};
const renderText = () => (
<>
<div className="flex flex-col">
@@ -96,11 +108,11 @@ export default function Reading({exam}: Props) {
<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.text.title}</span>
<span>
{exam.text.content.split("\n").map((line) => (
<>
{exam.text.content.split("\n").map((line, index) => (
<Fragment key={index}>
<span>{line}</span>
<br />
</>
</Fragment>
))}
</span>
</div>
@@ -111,7 +123,9 @@ export default function Reading({exam}: Props) {
const exercise = exam.exercises[exerciseIndex];
switch (exercise.type) {
case "fillBlanks":
return <FillBlanks {...exercise} />;
return <FillBlanks {...(exercise as FillBlanksExercise)} />;
case "matchSentences":
return <MatchSentences {...(exercise as MatchSentencesExercise)} />;
}
};
@@ -125,11 +139,11 @@ export default function Reading({exam}: Props) {
</Head>
<main className="w-full h-screen flex flex-col items-center bg-neutral-100 text-black">
<Navbar profilePicture={JSON_USER.profilePicture} />
<TextModal isOpen={showTextModal} onClose={() => setShowTextModal(false)} />
<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()}
<div className="flex gap-8 self-end">
<div className={clsx("flex gap-8", exerciseIndex > -1 ? "w-full justify-between" : "self-end")}>
{exerciseIndex > -1 && (
<button
className={clsx(
@@ -143,12 +157,22 @@ export default function Reading({exam}: Props) {
</div>
</button>
)}
<button className={clsx("btn btn-wide gap-4 relative text-white", infoButtonStyle)} onClick={nextExercise}>
Next
<div className="absolute right-4">
<Icon path={mdiArrowRight} color="white" size={1} />
</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}>
Next
<div className="absolute right-4">
<Icon path={mdiArrowRight} color="white" size={1} />
</div>
</button>
</div>
</div>
</div>
</main>