Skip to content
This repository was archived by the owner on Dec 25, 2022. It is now read-only.

Commit 7bf01b0

Browse files
committed
Fix bug navigate to exam page and add warning
1 parent 38b21e2 commit 7bf01b0

File tree

6 files changed

+133
-3
lines changed

6 files changed

+133
-3
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"web-vitals": "^2.1.4"
1818
},
1919
"scripts": {
20-
"start": "react-scripts start",
20+
"start": "set PORT=3333 && react-scripts start",
2121
"build": "CI= react-scripts build",
2222
"test": "react-scripts test",
2323
"eject": "react-scripts eject"

src/components/DetailCourse/DetailCourse.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ const DetailCourse = () => {
182182
break;
183183
case 'Exam':
184184
const u = JSON.parse(localStorage.getItem(id));
185-
if (u.name.includes('pmg')) {
185+
if (u.name.includes('multiple')) {
186186
navigate('/course/pmg/' + id + '/exam');
187187
} else {
188188
navigate('/course/' + id + '/exam');

src/components/Exam/Exam.js

Lines changed: 51 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ import {
99
Tooltip,
1010
Progress,
1111
Table,
12+
Spacer,
1213
} from '@nextui-org/react';
14+
import { TiWarning } from 'react-icons/ti';
1315

1416
const dummyTable = [
1517
['Machine', 'DESKTOP-......'],
@@ -44,6 +46,8 @@ const Exam = () => {
4446
const [listQuestion, setListQuestion] = useState(getRamdom30(id));
4547
const [indexQuestion, setIndexQuestion] = useState(0);
4648
const [enableSubmit, setEnableSubmit] = useState(false);
49+
const [showWarning, setShowWarning] = useState(true);
50+
const [countDown, setCountDown] = useState(60);
4751

4852
const [showModal, setShowModal] = useState(false);
4953

@@ -74,6 +78,19 @@ const Exam = () => {
7478
};
7579
}, []);
7680

81+
useEffect(() => {
82+
if (countDown === 0) {
83+
setShowWarning(false);
84+
return;
85+
}
86+
87+
const timer = setTimeout(() => {
88+
setCountDown(countDown - 1);
89+
setShowWarning(true);
90+
}, 1000);
91+
return () => clearTimeout(timer);
92+
}, [countDown]);
93+
7794
const handleAnswer = (e) => {
7895
if (listQuestion[indexQuestion].choose === e) {
7996
listQuestion[indexQuestion].choose = undefined;
@@ -107,6 +124,31 @@ const Exam = () => {
107124

108125
return (
109126
<Fragment>
127+
{showWarning && <div className={classes.popup}>
128+
<Text p b css={{ color: '#ff5100' }}>
129+
<TiWarning color="ff5100" />
130+
Cảnh báo:
131+
</Text>
132+
<Spacer y={0.3} />
133+
<Text p size={12}>
134+
Đây là một trang web được thiết kế để tập trung vào việc học tập và
135+
làm quen với giao diện phần mềm EOS của trường <b>"Đại học FPT"</b>.
136+
</Text>
137+
<Spacer y={0.3} />
138+
<Text p size={12}>
139+
Nếu sử dụng trang web sai mục đích, vi phạm quy định của nhà trường, tôi
140+
sẽ không chịu trách nhiệm về bất kỳ hành vi nào của bạn.
141+
</Text>
142+
<Spacer y={0.3} />
143+
<Text p size={12}>
144+
Nếu bạn không đồng ý với điều khoản trên, vui lòng thoát khỏi trang web
145+
ngay lập tức.
146+
</Text>
147+
<Spacer y={0.6} />
148+
<Text p i size={12}>
149+
Cảnh báo sẽ tự đóng sau <b>{countDown} giây</b>.
150+
</Text>
151+
</div>}
110152
<Modal
111153
closeButton
112154
aria-labelledby="modal-title"
@@ -156,7 +198,15 @@ const Exam = () => {
156198
{item.choose === undefined ? ' - ' : item.choose}
157199
</Table.Cell>
158200
<Table.Cell>
159-
<div className={`${item.answer === item.choose ? classes.correct : classes.incorrect}`}>{item.answer === item.choose ? 'Correct' : 'Incorrect'}</div>
201+
<div
202+
className={`${
203+
item.answer === item.choose
204+
? classes.correct
205+
: classes.incorrect
206+
}`}
207+
>
208+
{item.answer === item.choose ? 'Correct' : 'Incorrect'}
209+
</div>
160210
</Table.Cell>
161211
</Table.Row>
162212
))}

src/components/Exam/Exam.module.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,4 +236,23 @@
236236
color : #aa0202;
237237
padding : 2px 0;
238238
font-weight : bolder;
239+
}
240+
241+
.popup {
242+
position: fixed;
243+
top : 10px;
244+
right : 10px;
245+
width : 100%;
246+
height : 100%;
247+
z-index : 9999;
248+
249+
width : 500px;
250+
height: fit-content;
251+
252+
background-color: #ffceb78f;
253+
254+
padding: 20px;
255+
256+
border-radius: 10px;
257+
border : 1px solid #ff0000;
239258
}

src/components/ExamPmg/ExamPmg.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ import {
99
Tooltip,
1010
Progress,
1111
Table,
12+
Spacer,
1213
} from '@nextui-org/react';
14+
import { TiWarning } from 'react-icons/ti';
1315

1416
const dummyTable = [
1517
['Machine', 'DESKTOP-......'],
@@ -44,6 +46,8 @@ const ExamPmg = () => {
4446
const [listQuestion, setListQuestion] = useState(getRamdom30(id));
4547
const [indexQuestion, setIndexQuestion] = useState(0);
4648
const [enableSubmit, setEnableSubmit] = useState(false);
49+
const [showWarning, setShowWarning] = useState(true);
50+
const [countDown, setCountDown] = useState(60);
4751

4852
const [showModal, setShowModal] = useState(false);
4953

@@ -74,6 +78,19 @@ const ExamPmg = () => {
7478
};
7579
}, []);
7680

81+
useEffect(() => {
82+
if (countDown === 0) {
83+
setShowWarning(false);
84+
return;
85+
}
86+
87+
const timer = setTimeout(() => {
88+
setCountDown(countDown - 1);
89+
setShowWarning(true);
90+
}, 1000);
91+
return () => clearTimeout(timer);
92+
}, [countDown]);
93+
7794
const handleAnswer = (value) => {
7895
let cloneArray = [...listQuestion[indexQuestion].choose];
7996
if (cloneArray.includes(value)) {
@@ -111,6 +128,31 @@ const ExamPmg = () => {
111128

112129
return (
113130
<Fragment>
131+
{showWarning && <div className={classes.popup}>
132+
<Text p b css={{ color: '#ff5100' }}>
133+
<TiWarning color="ff5100" />
134+
Cảnh báo:
135+
</Text>
136+
<Spacer y={0.3} />
137+
<Text p size={12}>
138+
Đây là một trang web được thiết kế để tập trung vào việc học tập và
139+
làm quen với giao diện phần mềm EOS của trường <b>"Đại học FPT"</b>.
140+
</Text>
141+
<Spacer y={0.3} />
142+
<Text p size={12}>
143+
Nếu sử dụng trang web sai mục đích, vi phạm quy định của nhà trường, tôi
144+
sẽ không chịu trách nhiệm về bất kỳ hành vi nào của bạn.
145+
</Text>
146+
<Spacer y={0.3} />
147+
<Text p size={12}>
148+
Nếu bạn không đồng ý với điều khoản trên, vui lòng thoát khỏi trang web
149+
ngay lập tức.
150+
</Text>
151+
<Spacer y={0.6} />
152+
<Text p i size={12}>
153+
Cảnh báo sẽ tự đóng sau <b>{countDown} giây</b>.
154+
</Text>
155+
</div>}
114156
<Modal
115157
closeButton
116158
aria-labelledby="modal-title"

src/components/ExamPmg/ExamPmg.module.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,4 +240,23 @@
240240
color : #aa0202;
241241
padding : 2px 0;
242242
font-weight : bolder;
243+
}
244+
245+
.popup {
246+
position: fixed;
247+
top : 10px;
248+
right : 10px;
249+
width : 100%;
250+
height : 100%;
251+
z-index : 9999;
252+
253+
width : 500px;
254+
height: fit-content;
255+
256+
background-color: #ffceb78f;
257+
258+
padding: 20px;
259+
260+
border-radius: 10px;
261+
border : 1px solid #ff0000;
243262
}

0 commit comments

Comments
 (0)