Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
students
online-quiz-react
Commits
00bc95d3
Commit
00bc95d3
authored
Aug 12, 2020
by
baesangjune
Browse files
..
parent
0b337dae
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/Quiz.js
View file @
00bc95d3
import
React
,
{
useState
}
from
'
react
'
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
{
Link
,
Redirect
}
from
'
react-router-dom
'
;
import
{
Link
,
Redirect
}
from
'
react-router-dom
'
;
import
Timer
from
'
react-compound-timer
'
;
// 타이머쓰기위해 import
import
Timer
from
'
react-compound-timer
'
;
// 타이머쓰기위해 import
import
logo
from
'
./img_question.png
'
import
logo
from
'
./img_question.png
'
const
QnA
=
[
{
Q
:
"
6 X 4 = ?
"
,
Choose
:
[
6
,
12
,
18
,
24
],
N
:
1
},
{
Q
:
"
3 + 3 = ?
"
,
Choose
:
[
2
,
4
,
6
,
8
],
N
:
2
},
{
Q
:
"
3 - 1 = ?
"
,
Choose
:
[
1
,
2
,
3
,
4
],
N
:
3
}
]
let
localQnA
=
JSON
.
parse
(
localStorage
.
getItem
(
'
QnA
'
))
let
localQnA
=
JSON
.
parse
(
localStorage
.
getItem
(
'
QnA
'
))
let
Answers
=
[
0
,
0
,
0
]
let
Answers
=
[]
localStorage
.
setItem
(
'
Answers
'
,
JSON
.
stringify
(
Answers
))
let
Solutions
=
[
4
,
3
,
2
]
localStorage
.
setItem
(
'
Solutions
'
,
JSON
.
stringify
(
Solutions
))
function
Quiz
()
{
function
Quiz
()
{
const
[
question
,
setQuestion
]
=
useState
({
const
[
question
,
setQuestion
]
=
useState
({
...
QnA
[
0
]
...
local
QnA
[
0
]
})
})
const
[
selected
,
setSelected
]
=
useState
(
""
)
//선택한 답을 보여줄 것
const
[
selected
,
setSelected
]
=
useState
(
""
)
//선택한 답을 보여줄 것
const
[
timeout
,
settimeout
]
=
useState
(
false
)
const
[
timeout
,
settimeout
]
=
useState
(
false
)
//for each 사용하기
let
Answer
=
[]
//빈 배열
let
Solutions
=
[]
//빈 배열
console
.
log
(
localQnA
)
console
.
log
(
localQnA
)
localQnA
.
map
((
x
)
=>
{
//A만 꺼내서 q에 추가
localQnA
.
map
((
x
)
=>
{
//A만 꺼내서 q에 추가
// Answers.push(0)
return
Answer
.
push
(
x
.
A
)
return
Solutions
.
push
(
x
.
A
)
})
})
localStorage
.
setItem
(
"
localAnswer
"
,
JSON
.
stringify
(
Answer
))
//그걸 로컬에 저장
useEffect
(()
=>
{
for
(
let
i
=
1
;
i
<=
Solutions
.
length
;
i
++
){
Answers
.
push
(
0
)
localStorage
.
setItem
(
'
Answers
'
,
JSON
.
stringify
(
Answers
))
localStorage
.
setItem
(
"
Solutions
"
,
JSON
.
stringify
(
Solutions
))
}},[])
//그걸 로컬에 저장
//foreach 쓰기
let
finalQnA
=
localQnA
.
map
((
x
,
index
)
=>
{
let
finalQnA
=
localQnA
.
map
((
x
,
index
)
=>
{
//delete x.A //A 삭제
//delete x.A //A 삭제
return
{
...
x
,
N
:
index
+
1
}
//N 추가
return
{
...
x
,
N
:
index
+
1
}
//N 추가
...
@@ -42,7 +42,7 @@ function Quiz() {
...
@@ -42,7 +42,7 @@ function Quiz() {
function
handleQuestion
()
{
function
handleQuestion
()
{
setQuestion
({
...
QnA
[
question
.
N
]
})
setQuestion
({
...
local
QnA
[
question
.
N
]
})
setSelected
(
""
)
//페이지 넘어가면 selected 초기화
setSelected
(
""
)
//페이지 넘어가면 selected 초기화
}
}
...
@@ -63,7 +63,7 @@ function Quiz() {
...
@@ -63,7 +63,7 @@ function Quiz() {
<
/div
>
<
/div
>
<
div
className
=
"
col-md-auto
"
>
<
div
className
=
"
col-md-auto
"
>
<
div
className
=
"
h2 mt-2
"
>
<
div
className
=
"
h2 mt-2
"
>
{
question
.
Q
}
{
localQnA
[
0
].
Q
}
{
localQnA
[
0
].
Q
}
<
/div
>
<
/div
>
<
div
className
=
"
mt-2
"
>
<
div
className
=
"
mt-2
"
>
<
form
>
<
form
>
...
@@ -76,16 +76,16 @@ function Quiz() {
...
@@ -76,16 +76,16 @@ function Quiz() {
<
/form
>
<
/form
>
<
span
className
=
"
h5 font-weight-bold
"
>
Your
Answer
:
<
/span
>
<
span
className
=
"
h5 font-weight-bold
"
>
Your
Answer
:
<
/span
>
<
span
className
=
"
h2 font-weight-bold text-danger
"
>
{
selected
}
<
/span> {/
*
선택한
값
보여줌
*
/
}
<
span
className
=
"
h2 font-weight-bold text-danger
"
>
{
selected
}
<
/span> {/
*
선택한
값
보여줌
*
/
}
<
div
className
=
"
text-center my-3
"
>
{(
question
.
N
-
1
===
QnA
.
length
-
1
)
<
div
className
=
"
text-center my-3
"
>
{(
question
.
N
-
1
===
local
QnA
.
length
-
1
)
?
<
Link
to
=
"
/end
"
>
?
<
Link
to
=
"
/end
"
>
<
button
className
=
"
btn btn-outline-success
"
onClick
=
{
localStorage
.
setItem
(
'
Solutions
'
,
JSON
.
stringify
(
Solutions
))}
>
제출
<
/button
>
<
button
className
=
"
btn btn-outline-success
"
/*
onClick={localStorage.setItem('Solutions', JSON.stringify(Solutions))}
*/
>
제출
<
/button
>
<
/Link
>
<
/Link
>
:
<
button
type
=
"
button
"
className
=
"
btn btn-outline-dark
"
onClick
=
{
handleQuestion
}
>
다음
<
/button
>
:
<
button
type
=
"
button
"
className
=
"
btn btn-outline-dark
"
onClick
=
{
handleQuestion
}
>
다음
<
/button
>
}
}
<
/div
>
<
/div
>
<
p
className
=
"
h3 text-center text-danger
"
>
<
p
className
=
"
h3 text-center text-danger
"
>
<
Timer
<
Timer
initialTime
=
{
300
100
0
}
initialTime
=
{
3000
}
direction
=
"
backward
"
direction
=
"
backward
"
checkpoints
=
{[
checkpoints
=
{[
{
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment