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

Commit 6accdc8

Browse files
FPT-NMTungFPT-NMTung
committed
Update progress in learn screen
1 parent da81ada commit 6accdc8

File tree

6 files changed

+132
-35
lines changed

6 files changed

+132
-35
lines changed

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "quizlet-learn",
3-
"version": "1.0.13",
3+
"version": "1.0.14",
44
"private": true,
55
"dependencies": {
66
"@nextui-org/react": "^1.0.0-beta.9",

‎src/components/Learn/Learn.js

Lines changed: 52 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -27,38 +27,6 @@ const styleCardIncorrect = {
2727
backgroundColor: '#fbf2f2',
2828
};
2929

30-
// const extractQuestion = (text) => {
31-
// const result = text
32-
// .split('\n')
33-
// .filter((item) => {
34-
// return !item.match(/^[AaBbCcDdEeFf]{1}[ ]{0,}[\.]{0,1}/g);
35-
// })
36-
// .join('\n');
37-
// return result;
38-
// };
39-
40-
// const extractAnswer = (text) => {
41-
// const result = text
42-
// .split('\n')
43-
// .filter((item) => {
44-
// return item.slice(0, 5).match(/^[AaBbCcDdEeFf]{1}[ ]{0,}[\.]{0,1}/g);
45-
// })
46-
// .map((item) => {
47-
// let a;
48-
// if (item.slice(0, 5).match(/[Aa]{1}[ ]{0,}[\.]{0,1}/g)) a = 'A';
49-
// if (item.slice(0, 5).match(/[Bb]{1}[ ]{0,}[\.]{0,1}/g)) a = 'B';
50-
// if (item.slice(0, 5).match(/[Cc]{1}[ ]{0,}[\.]{0,1}/g)) a = 'C';
51-
// if (item.slice(0, 5).match(/[Dd]{1}[ ]{0,}[\.]{0,1}/g)) a = 'D';
52-
// if (item.slice(0, 5).match(/[Ee]{1}[ ]{0,}[\.]{0,1}/g)) a = 'E';
53-
// if (item.slice(0, 5).match(/[Ff]{1}[ ]{0,}[\.]{0,1}/g)) a = 'F';
54-
// return {
55-
// key: a,
56-
// value: item.replace(/^[AaBbCcDdEeFf]{1}[ ]{0,}[\.]{0,1}/g, '').trim(),
57-
// };
58-
// });
59-
// return result;
60-
// };
61-
6230
const getSevenFromList = (list) => {
6331
const length = list.length < 7 ? list.length : 7;
6432
const result = [];
@@ -88,6 +56,7 @@ const Learn = () => {
8856
const [isNotCorrect, setIsNotCorrect] = useState(false);
8957
const [showResult, setShowResult] = useState(false);
9058
const [numberLearning, setNumberLearning] = useState(0);
59+
const [totalAnswer, setTotalAnswer] = useState(0);
9160

9261
// get 7 question random from list in first time
9362
useEffect(() => {
@@ -99,6 +68,9 @@ const Learn = () => {
9968
if (listSeven.length === 0) {
10069
navigate('/course/' + id);
10170
}
71+
setTotalAnswer(
72+
listAllQuestion.filter((item) => item.learned === true).length
73+
);
10274
setListLearning(listSeven);
10375
setCloneListLearning(listSeven);
10476
setIndexSelectQuestion(0);
@@ -173,6 +145,11 @@ const Learn = () => {
173145
temp.data = listAllQuestion;
174146
localStorage.setItem(id, JSON.stringify(temp));
175147
setShowResult(true);
148+
setTotalAnswer(
149+
JSON.parse(localStorage.getItem(id)).data.filter(
150+
(item) => item.learned === true
151+
).length
152+
);
176153
};
177154

178155
const handleCardAnswerPress = (key) => {
@@ -238,8 +215,51 @@ const Learn = () => {
238215
setIndexSelectQuestion(0);
239216
};
240217

218+
const progress = ((totalAnswer / listAllQuestion.length) * 100).toFixed(2);
219+
241220
return (
242221
<div className={classes.main}>
222+
<div className={classes.progress}>
223+
<Card>
224+
<Card.Body>
225+
<Text
226+
p
227+
b
228+
size={12}
229+
css={{
230+
width: '100%',
231+
textAlign: 'center',
232+
}}
233+
>
234+
Analyzing your progress
235+
</Text>
236+
<Spacer y={1} />
237+
<div
238+
style={{
239+
display: 'flex',
240+
justifyContent: 'space-between',
241+
}}
242+
>
243+
<Text p b size={12}>
244+
Total: {totalAnswer}/{listAllQuestion.length}
245+
</Text>
246+
<Text p b size={12}>
247+
{progress} %
248+
</Text>
249+
</div>
250+
<Progress
251+
squared="true"
252+
size="xs"
253+
value={progress}
254+
shadow
255+
color={
256+
progress >= 90 ? 'success' : progress > 0 ? 'warning' : 'error'
257+
}
258+
status="primary"
259+
/>
260+
</Card.Body>
261+
</Card>
262+
</div>
243263
<Progress
244264
css={{
245265
position: 'fixed',

‎src/components/Learn/Learn.module.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,16 @@
4848
align-items: center;
4949
padding : 4px 20px;
5050
column-gap : 20px;
51+
}
52+
53+
.progress {
54+
position: fixed;
55+
top : 20px;
56+
right : 20px;
57+
58+
width : 250px;
59+
60+
z-index: 999999999999;
61+
62+
transition: all 0.5s ease-in-out;
5163
}

‎src/components/LearnPmg/LearnPmg.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,8 @@ const Learn = () => {
9494
const [numberLearning, setNumberLearning] = useState(0);
9595
const [listChoise, setListChoise] = useState([]);
9696
const [isAnswerChoise, setIsAnswerChoise] = useState(false);
97+
98+
const [totalAnswer, setTotalAnswer] = useState(0);
9799

98100
// get 7 question random from list in first time
99101
useEffect(() => {
@@ -105,6 +107,9 @@ const Learn = () => {
105107
if (listSeven.length === 0) {
106108
navigate('/course/' + id);
107109
}
110+
setTotalAnswer(
111+
listAllQuestion.filter((item) => item.learned === true).length
112+
);
108113
setListLearning(listSeven);
109114
setCloneListLearning(listSeven);
110115
setIndexSelectQuestion(0);
@@ -181,6 +186,11 @@ const Learn = () => {
181186
temp.data = listAllQuestion;
182187
localStorage.setItem(id, JSON.stringify(temp));
183188
setShowResult(true);
189+
setTotalAnswer(
190+
JSON.parse(localStorage.getItem(id)).data.filter(
191+
(item) => item.learned === true
192+
).length
193+
);
184194
};
185195

186196
const handleCardAnswerPress = (key) => {
@@ -290,8 +300,51 @@ const Learn = () => {
290300
}
291301
};
292302

303+
const progress = ((totalAnswer / listAllQuestion.length) * 100).toFixed(2);
304+
293305
return (
294306
<div className={classes.main}>
307+
<div className={classes.progress}>
308+
<Card>
309+
<Card.Body>
310+
<Text
311+
p
312+
b
313+
size={12}
314+
css={{
315+
width: '100%',
316+
textAlign: 'center',
317+
}}
318+
>
319+
Analyzing your progress
320+
</Text>
321+
<Spacer y={1} />
322+
<div
323+
style={{
324+
display: 'flex',
325+
justifyContent: 'space-between',
326+
}}
327+
>
328+
<Text p b size={12}>
329+
Total: {totalAnswer}/{listAllQuestion.length}
330+
</Text>
331+
<Text p b size={12}>
332+
{progress} %
333+
</Text>
334+
</div>
335+
<Progress
336+
squared="true"
337+
size="xs"
338+
value={progress}
339+
shadow
340+
color={
341+
progress >= 90 ? 'success' : progress > 0 ? 'warning' : 'error'
342+
}
343+
status="primary"
344+
/>
345+
</Card.Body>
346+
</Card>
347+
</div>
295348
<Progress
296349
css={{
297350
position: 'fixed',

‎src/components/LearnPmg/LearnPmg.module.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,4 +48,16 @@
4848
align-items: center;
4949
padding : 4px 20px;
5050
column-gap : 20px;
51+
}
52+
53+
.progress {
54+
position: fixed;
55+
top : 20px;
56+
right : 20px;
57+
58+
width : 250px;
59+
60+
z-index: 999999999999;
61+
62+
transition: all 0.5s ease-in-out;
5163
}

0 commit comments

Comments
 (0)