diff --git a/src/pages/Quiz/Options.module.scss b/src/pages/Quiz/Options.module.scss index b1505f4..885e1e7 100644 --- a/src/pages/Quiz/Options.module.scss +++ b/src/pages/Quiz/Options.module.scss @@ -7,7 +7,7 @@ justify-content: space-around; height: 40vh; - .options { + ion-item { width: 99%; margin: 0 auto; --background: white; diff --git a/src/pages/Quiz/Options.tsx b/src/pages/Quiz/Options.tsx index 681aedf..81b4ac3 100644 --- a/src/pages/Quiz/Options.tsx +++ b/src/pages/Quiz/Options.tsx @@ -15,7 +15,7 @@ const Options: React.FC = (props) => { const options = props.options.map((option, key) => { return ( - + {option} diff --git a/src/pages/Quiz/Question.tsx b/src/pages/Quiz/Question.tsx index ba82d32..bc2e008 100644 --- a/src/pages/Quiz/Question.tsx +++ b/src/pages/Quiz/Question.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { createRef, useEffect, useRef, useState } from "react"; import styles from "./Question.module.scss"; @@ -8,8 +8,31 @@ interface OwnProp { timeLimit: number; } + +let timeout: NodeJS.Timeout; + const Question: React.FC = (props) => { + const COUNTDOWN_AMOUNT_TOTAL = props.timeLimit * 60; + + const [seconds, setSeconds] = useState(COUNTDOWN_AMOUNT_TOTAL); + + const displaySeconds = seconds % 60; + const displayMinutes = Math.floor(seconds / 60); + + useEffect(() => { + + if (seconds > 0) { + timeout = setTimeout(() => { + setSeconds((state) => state - 1); + }, 1000); + } else { + clearTimeout(timeout); + } + + return () => clearTimeout(timeout);; + }, [seconds]); + return (
@@ -22,7 +45,9 @@ const Question: React.FC = (props) => {
-
01:00
+
+ {`${displayMinutes < 10 ? "0" : ""}${displayMinutes}:${displaySeconds < 10 ? "0" : ""}${displaySeconds}`} +
diff --git a/src/pages/Quiz/Quiz.module.scss b/src/pages/Quiz/Quiz.module.scss index 3524df2..b480ba7 100644 --- a/src/pages/Quiz/Quiz.module.scss +++ b/src/pages/Quiz/Quiz.module.scss @@ -34,6 +34,11 @@ align-self: flex-end; } + a { + text-decoration: none; + align-self: flex-end; + } + ion-icon { color: white; margin-right: 3rem; @@ -43,44 +48,6 @@ } } - - // .questionHolder { - // display: flex; - // flex-direction: column; - // align-items: center; - // justify-content: space-between; - // text-align: center; - // color: white; - // width: 90%; - // margin: 0 auto; - // height: 27vh; - // background-image: url("../../assets/icons/desktop-particles.svg"); - // background-position: center; - // background-repeat: no-repeat; - // background-size: 150% 150%; - - // .questionNumber { - // font-size: 1.3rem; - // font-weight: 600; - // } - // .question { - // font-size: 1.8rem; - // font-weight: 300; - // } - - // .quizTimer { - // .border { - // width: 6rem; - // height: 6rem; - // border-radius: 50%; - // border: 0.2rem solid #6BD534; - // .time { - // margin-top: 1.8rem; - // font-size: 1.4rem; - // } - // } - // } - // } } .quizOptions { diff --git a/src/pages/Quiz/Quiz.tsx b/src/pages/Quiz/Quiz.tsx index 4fe96ac..b2f36e7 100644 --- a/src/pages/Quiz/Quiz.tsx +++ b/src/pages/Quiz/Quiz.tsx @@ -31,7 +31,9 @@ const Quiz: React.FC = () => {

Quiz

- + + +
{ return ( @@ -38,7 +39,9 @@ const PreliminaryRound: React.FC = () => {
- Start quiz + + Start quiz +
All the best!