Update time and custom quantity in exam

FPT-NMTung · FPT-NMTung · commit cae49429100c · 2022-10-14T15:55:09.000+07:00
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quizlet-learn",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "private": true,
   "dependencies": {
     "@nextui-org/react": "^1.0.0-beta.9",
diff --git a/src/components/DetailCourse/DetailCourse.js b/src/components/DetailCourse/DetailCourse.js
@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useState } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import {
   Text,
@@ -51,9 +51,12 @@ const DetailCourse = () => {
   const [contentExport, setContentExport] = useState('');
   const [isConnecting, setIsConnecting] = useState(true);
   const [isFailedConnect, setIsFailedConnect] = useState(false);
+  const [showEnterQuantityQuestion, setShowEnterQuantityQuestion] =
+    useState(false);
 
   const { id } = useParams();
   const navigate = useNavigate();
+  const quantityRef = useRef();
 
   const handleSearchChange = (e) => {
     setSearch(e.target.value);
@@ -134,6 +137,32 @@ const DetailCourse = () => {
     setShowModalExport(true);
   };
 
+  const handleSubmitExam = () => {
+    const quantity = quantityRef.current.value;
+
+    // check valid quantity string from user input by regex
+    const regex = /^[0-9]*$/;
+    if (regex.test(quantity)) {
+      const number = Number.parseInt(quantity);
+      if (number > 0 && number <= 100) {
+        const temp1 = JSON.parse(localStorage.getItem(id));
+        if (temp1.name.includes('multiple')) {
+          navigate('/course/pmg/' + id + '/exam', {
+            state: {
+              quantity: number,
+            },
+          });
+        } else {
+          navigate('/course/' + id + '/exam', {
+            state: {
+              quantity: number,
+            },
+          });
+        }
+      }
+    }
+  };
+
   return (
     <div>
       <Card
@@ -155,6 +184,54 @@ const DetailCourse = () => {
         {!isConnecting && isFailedConnect && <FcCancel size="2rem" />}
         {!isConnecting && !isFailedConnect && <FcApproval size="2rem" />}
       </Card>
+      <Modal
+        closeButton
+        blur
+        aria-labelledby="modal-titlea"
+        open={showEnterQuantityQuestion}
+        onClose={() => {
+          setShowEnterQuantityQuestion(false);
+        }}
+        width={'300px'}
+      >
+        <Modal.Header>
+          <Text p b size={14}>
+            Enter quantity question
+          </Text>
+        </Modal.Header>
+        <Modal.Body>
+          <Text
+            p
+            i
+            size={12}
+            color={'red'}
+            css={{
+              margin: '0 auto',
+            }}
+          >
+            Only accept number from 1 to 100
+          </Text>
+          <Input
+            width={'auto'}
+            labelLeft={'Quantity'}
+            clearable
+            ref={quantityRef}
+          />
+          <Button
+            onPress={() => {
+              handleSubmitExam();
+            }}
+            auto="true"
+            css={{
+              width: '100px',
+              margin: '0 auto',
+            }}
+            color="success"
+          >
+            Start exam
+          </Button>
+        </Modal.Body>
+      </Modal>
       <Modal
         closeButton
         blur
@@ -218,12 +295,7 @@ const DetailCourse = () => {
                     handleButtonLearnPress();
                     break;
                   case 'Exam':
-                    const u = JSON.parse(localStorage.getItem(id));
-                    if (u.name.includes('multiple')) {
-                      navigate('/course/pmg/' + id + '/exam');
-                    } else {
-                      navigate('/course/' + id + '/exam');
-                    }
+                    setShowEnterQuantityQuestion(true);
                     break;
                   case 'Delete':
                     handleDelete();
diff --git a/src/components/Exam/Exam.js b/src/components/Exam/Exam.js
@@ -1,7 +1,7 @@
 import { Fragment, useEffect, useState } from 'react';
 import classes from './Exam.module.css';
 import flagExam from '../../images/flag-exam.png';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams, useLocation } from 'react-router-dom';
 import {
   Modal,
   Button,
@@ -28,29 +28,46 @@ const generateAnswer = (answer) => {
   return ['A', 'B', 'C', 'D', 'E', 'F'];
 };
 
-const getRamdom30 = (id) => {
+const getRamdom = (id, quantity) => {
   const arrayQuestion = JSON.parse(localStorage.getItem(id))
     .data.map((item) => {
       item.answer = item.answer.trim().toUpperCase();
       item.choose = undefined;
       return item;
     })
     .filter((item) => item.answer.length === 1);
-  return arrayQuestion.sort(() => Math.random() - 0.5).slice(0, 30);
+  return arrayQuestion
+    .sort(() => Math.random() - 0.5)
+    .slice(0, quantity ? quantity : 30);
 };
 
 const Exam = () => {
   const { id } = useParams();
   const navigate = useNavigate();
+  const location = useLocation();
 
-  const [listQuestion, setListQuestion] = useState(getRamdom30(id));
+  const [listQuestion, setListQuestion] = useState(
+    getRamdom(id, location.state.quantity)
+  );
   const [indexQuestion, setIndexQuestion] = useState(0);
   const [enableSubmit, setEnableSubmit] = useState(false);
   const [showWarning, setShowWarning] = useState(true);
   const [countDown, setCountDown] = useState(60);
+  const [time, setTime] = useState(60 * location.state.quantity);
 
   const [showModal, setShowModal] = useState(false);
 
+  useEffect(() => {
+    const a = setTimeout(() => {
+      if (time > 0) {
+        setTime(time - 1);
+      } else {
+        setShowModal(true);
+      }
+    }, 1000);
+    return () => clearTimeout(a);
+  }, [time]);
+
   useEffect(() => {
     const elem = document.documentElement;
     if (elem.requestFullscreen) {
@@ -122,33 +139,44 @@ const Exam = () => {
     }, 250);
   };
 
+  let munites = Math.floor(time / 60);
+  if (munites < 10) {
+    munites = '0' + munites;
+  }
+  let seconds = time % 60;
+  if (seconds < 10) {
+    seconds = '0' + seconds;
+  }
+
   return (
     <Fragment>
-      {showWarning && <div className={classes.popup}>
-        <Text p b css={{ color: '#ff5100' }}>
-          <TiWarning color="ff5100" />
-          Cảnh báo:
-        </Text>
-        <Spacer y={0.3} />
-        <Text p size={12}>
-          Đây là một trang web được thiết kế để tập trung vào việc học tập và
-          làm quen với giao diện phần mềm EOS của trường <b>"Đại học FPT"</b>.
-        </Text>
-        <Spacer y={0.3} />
-        <Text p size={12}>
-          Nếu sử dụng trang web sai mục đích, vi phạm quy định của nhà trường, tôi
-          sẽ không chịu trách nhiệm về bất kỳ hành vi nào của bạn.
-        </Text>
-        <Spacer y={0.3} />
-        <Text p size={12}>
-          Nếu bạn không đồng ý với điều khoản trên, vui lòng thoát khỏi trang web
-          ngay lập tức.
-        </Text>
-        <Spacer y={0.6} />
-        <Text p i size={12}>
-          Cảnh báo sẽ tự đóng sau <b>{countDown} giây</b>.
-        </Text>
-      </div>}
+      {showWarning && (
+        <div className={classes.popup}>
+          <Text p b css={{ color: '#ff5100' }}>
+            <TiWarning color="ff5100" />
+            Cảnh báo:
+          </Text>
+          <Spacer y={0.3} />
+          <Text p size={12}>
+            Đây là một trang web được thiết kế để tập trung vào việc học tập và
+            làm quen với giao diện phần mềm EOS của trường <b>"Đại học FPT"</b>.
+          </Text>
+          <Spacer y={0.3} />
+          <Text p size={12}>
+            Nếu sử dụng trang web sai mục đích, vi phạm quy định của nhà trường,
+            tôi sẽ không chịu trách nhiệm về bất kỳ hành vi nào của bạn.
+          </Text>
+          <Spacer y={0.3} />
+          <Text p size={12}>
+            Nếu bạn không đồng ý với điều khoản trên, vui lòng thoát khỏi trang
+            web ngay lập tức.
+          </Text>
+          <Spacer y={0.6} />
+          <Text p i size={12}>
+            Cảnh báo sẽ tự đóng sau <b>{countDown} giây</b>.
+          </Text>
+        </div>
+      )}
       <Modal
         closeButton
         aria-labelledby="modal-title"
@@ -287,7 +315,7 @@ const Exam = () => {
           </div>
           <div className={classes.headerTimeFlag}>
             <img width={160} src={flagExam} />
-            <div>30:00</div>
+            <div>{munites}:{seconds}</div>
           </div>
         </div>
         <div className={classes.tempBody}>
diff --git a/src/components/ExamPmg/ExamPmg.js b/src/components/ExamPmg/ExamPmg.js

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "quizlet-learn",`
`3`		`- "version": "1.0.8",`
	`3`	`+ "version": "1.0.9",`
`4`	`4`	`"private": true,`
`5`	`5`	`"dependencies": {`
`6`	`6`	`"@nextui-org/react": "^1.0.0-beta.9",`