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

Added a timer that is shown in each module

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-04-06 12:20:34 +01:00
parent addef7c674
commit a82a168953
7 changed files with 61 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/exams/Listening.tsx
View File

@@ -1,5 +1,5 @@
import {ListeningExam} from "@/interfaces/exam";
import {useState} from "react";
import {useEffect, useState} from "react";
import Icon from "@mdi/react";
import {mdiArrowRight} from "@mdi/js";
import clsx from "clsx";
@@ -14,6 +14,16 @@ interface Props {
export default function Listening({exam, onFinish}: Props) {
const [exerciseIndex, setExerciseIndex] = useState(-1);
const [timesListened, setTimesListened] = useState(0);
const [timer, setTimer] = useState<number>();
useEffect(() => {
setTimer(exam.minTimer * 60);
const timerInterval = setInterval(() => setTimer((prev) => prev && prev - 1), 1000);
return () => {
clearInterval(timerInterval);
};
}, [exam.minTimer]);
const nextExercise = () => {
if (exerciseIndex + 1 < exam.exercises.length) {
@@ -55,6 +65,13 @@ export default function Listening({exam, onFinish}: Props) {
return (
<>
<div className="w-full h-full relative flex flex-col gap-8 items-center justify-center p-8 px-16 overflow-hidden">
{timer && (
<div className="absolute w-24 top-8 text-center right-8 font-semibold text-lg border-ielts-listening border-2 p-2 rounded-xl bg-ielts-listening-transparent text-white">
{Math.floor(timer / 60) < 10 ? "0" : ""}
{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
{timer % 60}
</div>
)}
{renderAudioPlayer()}
{exerciseIndex > -1 &&
exerciseIndex < exam.exercises.length &&

19
src/exams/Reading.tsx
View File

@@ -1,5 +1,5 @@
import {ReadingExam} from "@/interfaces/exam";
import {Fragment, useState} from "react";
import {Fragment, useEffect, useState} from "react";
import Icon from "@mdi/react";
import {mdiArrowRight, mdiNotebook} from "@mdi/js";
import clsx from "clsx";
@@ -72,6 +72,16 @@ function TextModal({isOpen, title, content, onClose}: {isOpen: boolean; title: s
export default function Reading({exam, onFinish}: Props) {
const [exerciseIndex, setExerciseIndex] = useState(-1);
const [showTextModal, setShowTextModal] = useState(false);
const [timer, setTimer] = useState<number>();
useEffect(() => {
setTimer(exam.minTimer * 60);
const timerInterval = setInterval(() => setTimer((prev) => prev && prev - 1), 1000);
return () => {
clearInterval(timerInterval);
};
}, [exam.minTimer]);
const nextExercise = () => {
if (exerciseIndex + 1 < exam.exercises.length) {
@@ -112,6 +122,13 @@ export default function Reading({exam, onFinish}: 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">
{timer && (
<div className="absolute w-24 top-8 text-center right-8 font-semibold text-lg border-ielts-reading border-2 p-2 rounded-xl bg-ielts-reading-transparent text-white">
{Math.floor(timer / 60) < 10 ? "0" : ""}
{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
{timer % 60}
</div>
)}
{exerciseIndex === -1 && renderText()}
{exerciseIndex > -1 &&
exerciseIndex < exam.exercises.length &&

19
src/exams/Writing.tsx
View File

@@ -11,6 +11,16 @@ interface Props {
export default function Writing({exam}: Props) {
const [inputText, setInputText] = useState("");
const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);
const [timer, setTimer] = useState<number>();
useEffect(() => {
setTimer(exam.minTimer * 60);
const timerInterval = setInterval(() => setTimer((prev) => prev && prev - 1), 1000);
return () => {
clearInterval(timerInterval);
};
}, [exam.minTimer]);
useEffect(() => {
const words = inputText.split(" ").filter((x) => x !== "");
@@ -27,7 +37,14 @@ export default function Writing({exam}: Props) {
}, [inputText, exam]);
return (
<div className="h-full w-full flex flex-col items-center justify-center gap-8">
<div className="h-full w-full flex flex-col items-center justify-center gap-8 relative">
{timer && (
<div className="absolute w-24 top-8 text-center right-8 font-semibold text-lg border-ielts-writing border-2 p-2 rounded-xl bg-ielts-writing-transparent text-white">
{Math.floor(timer / 60) < 10 ? "0" : ""}
{Math.floor(timer / 60)}:{timer % 60 < 10 ? "0" : ""}
{timer % 60}
</div>
)}
<div className="flex flex-col max-w-2xl gap-2">
<span>{exam.text.info}</span>
<span className="font-bold ml-8">