Fix bug navigate to exam page and add warning

AdonisGM · Oct 12, 2022 · 7bf01b0 · 7bf01b0
1 parent 38b21e2
commit 7bf01b0
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "set PORT=3333 && react-scripts start",
     "build": "CI= react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

diff --git a/src/components/DetailCourse/DetailCourse.js b/src/components/DetailCourse/DetailCourse.js
@@ -182,7 +182,7 @@ const DetailCourse = () => {
                     break;
                   case 'Exam':
                     const u = JSON.parse(localStorage.getItem(id));
-                    if (u.name.includes('pmg')) {
+                    if (u.name.includes('multiple')) {
                       navigate('/course/pmg/' + id + '/exam');
                     } else {
                       navigate('/course/' + id + '/exam');

diff --git a/src/components/Exam/Exam.js b/src/components/Exam/Exam.js
@@ -9,7 +9,9 @@ import {
   Tooltip,
   Progress,
   Table,
+  Spacer,
 } from '@nextui-org/react';
+import { TiWarning } from 'react-icons/ti';
 
 const dummyTable = [
   ['Machine', 'DESKTOP-......'],
@@ -44,6 +46,8 @@ const Exam = () => {
   const [listQuestion, setListQuestion] = useState(getRamdom30(id));
   const [indexQuestion, setIndexQuestion] = useState(0);
   const [enableSubmit, setEnableSubmit] = useState(false);
+  const [showWarning, setShowWarning] = useState(true);
+  const [countDown, setCountDown] = useState(60);
 
   const [showModal, setShowModal] = useState(false);
 
@@ -74,6 +78,19 @@ const Exam = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (countDown === 0) {
+      setShowWarning(false);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setCountDown(countDown - 1);
+      setShowWarning(true);
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [countDown]);
+
   const handleAnswer = (e) => {
     if (listQuestion[indexQuestion].choose === e) {
       listQuestion[indexQuestion].choose = undefined;
@@ -107,6 +124,31 @@ const Exam = () => {
 
   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>}
       <Modal
         closeButton
         aria-labelledby="modal-title"
@@ -156,7 +198,15 @@ const Exam = () => {
                       {item.choose === undefined ? ' - ' : item.choose}
                     </Table.Cell>
                     <Table.Cell>
-                      <div className={`${item.answer === item.choose ? classes.correct : classes.incorrect}`}>{item.answer === item.choose ? 'Correct' : 'Incorrect'}</div>
+                      <div
+                        className={`${
+                          item.answer === item.choose
+                            ? classes.correct
+                            : classes.incorrect
+                        }`}
+                      >
+                        {item.answer === item.choose ? 'Correct' : 'Incorrect'}
+                      </div>
                     </Table.Cell>
                   </Table.Row>
                 ))}

diff --git a/src/components/Exam/Exam.module.css b/src/components/Exam/Exam.module.css
@@ -236,4 +236,23 @@
   color           : #aa0202;
   padding         : 2px 0;
   font-weight     : bolder;
+}
+
+.popup {
+  position: fixed;
+  top     : 10px;
+  right   : 10px;
+  width   : 100%;
+  height  : 100%;
+  z-index : 9999;
+
+  width : 500px;
+  height: fit-content;
+
+  background-color: #ffceb78f;
+
+  padding: 20px;
+
+  border-radius: 10px;
+  border       : 1px solid #ff0000;
 }
diff --git a/src/components/ExamPmg/ExamPmg.js b/src/components/ExamPmg/ExamPmg.js
@@ -9,7 +9,9 @@ import {
   Tooltip,
   Progress,
   Table,
+  Spacer,
 } from '@nextui-org/react';
+import { TiWarning } from 'react-icons/ti';
 
 const dummyTable = [
   ['Machine', 'DESKTOP-......'],
@@ -44,6 +46,8 @@ const ExamPmg = () => {
   const [listQuestion, setListQuestion] = useState(getRamdom30(id));
   const [indexQuestion, setIndexQuestion] = useState(0);
   const [enableSubmit, setEnableSubmit] = useState(false);
+  const [showWarning, setShowWarning] = useState(true);
+  const [countDown, setCountDown] = useState(60);
 
   const [showModal, setShowModal] = useState(false);
 
@@ -74,6 +78,19 @@ const ExamPmg = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (countDown === 0) {
+      setShowWarning(false);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setCountDown(countDown - 1);
+      setShowWarning(true);
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [countDown]);
+
   const handleAnswer = (value) => {
     let cloneArray = [...listQuestion[indexQuestion].choose];
     if (cloneArray.includes(value)) {
@@ -111,6 +128,31 @@ const ExamPmg = () => {
 
   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>}
       <Modal
         closeButton
         aria-labelledby="modal-title"

diff --git a/src/components/ExamPmg/ExamPmg.module.css b/src/components/ExamPmg/ExamPmg.module.css
@@ -240,4 +240,23 @@
   color           : #aa0202;
   padding         : 2px 0;
   font-weight     : bolder;
+}
+
+.popup {
+  position: fixed;
+  top     : 10px;
+  right   : 10px;
+  width   : 100%;
+  height  : 100%;
+  z-index : 9999;
+
+  width : 500px;
+  height: fit-content;
+
+  background-color: #ffceb78f;
+
+  padding: 20px;
+
+  border-radius: 10px;
+  border       : 1px solid #ff0000;
 }