import Navbar from "@/components/Navbar"; import {ReadingExam} from "@/interfaces/exam"; import Head from "next/head"; // TODO: Remove this import 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 {mdiArrowLeft, mdiArrowRight, mdiNotebook} from "@mdi/js"; import clsx from "clsx"; import {errorButtonStyle, infoButtonStyle} from "@/constants/buttonStyles"; import {Dialog, Transition} from "@headlessui/react"; import {renderExercise} from "@/components/Exercises"; interface Props { exam: ReadingExam; } export const getServerSideProps = () => { return { props: { exam: JSON_READING, }, }; }; function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: string; content: string; onClose: () => void}) { return (
{title}

{content.split("\n").map((line, index) => ( {line}
))}

); } export default function Reading({exam}: Props) { const [exerciseIndex, setExerciseIndex] = useState(-1); const [showTextModal, setShowTextModal] = useState(false); const nextExercise = () => { setExerciseIndex((prev) => prev + 1); }; const previousExercise = () => { setExerciseIndex((prev) => prev - 1); }; const renderText = () => ( <>
Please read the following excerpt attentively, you will then be asked questions about the text you've read. You will be allowed to read the text while doing the exercises
{exam.text.title} {exam.text.content.split("\n").map((line, index) => ( {line}
))}
); return ( <> Create Next App
setShowTextModal(false)} />
{exerciseIndex === -1 && renderText()} {exerciseIndex > -1 && exerciseIndex < exam.exercises.length && renderExercise(exam.exercises[exerciseIndex], nextExercise, previousExercise)}
-1 ? "w-full justify-between" : "self-end")}> {exerciseIndex > -1 && ( )} {exerciseIndex === -1 && ( )}
); }