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
70813adc
Commit
70813adc
authored
Aug 12, 2020
by
baesangjune
Browse files
.
parent
df226e30
Changes
1
Hide whitespace changes
Inline
Side-by-side
src/Quiz.js
View file @
70813adc
...
...
@@ -9,7 +9,11 @@ const QnA = [
{
Q
:
"
3 - 1 = ?
"
,
Choose
:
[
1
,
2
,
3
,
4
],
N
:
3
}
]
let
Answers
=
[
0
,
0
,
0
]
let
localQnA
=
JSON
.
parse
(
localStorage
.
getItem
(
'
QnA
'
))
let
Answers
=
[
0
,
0
,
0
]
localStorage
.
setItem
(
'
Answers
'
,
JSON
.
stringify
(
Answers
))
let
Solutions
=
[
4
,
3
,
2
]
localStorage
.
setItem
(
'
Solutions
'
,
JSON
.
stringify
(
Solutions
))
...
...
@@ -22,8 +26,23 @@ function Quiz() {
const
[
timeout
,
settimeout
]
=
useState
(
false
)
let
Answer
=
[]
//빈 배열
console
.
log
(
localQnA
)
localQnA
.
map
((
x
)
=>
{
//A만 꺼내서 q에 추가
return
Answer
.
push
(
x
.
A
)
})
localStorage
.
setItem
(
"
localAnswer
"
,
JSON
.
stringify
(
Answer
))
//그걸 로컬에 저장
let
finalQnA
=
localQnA
.
map
((
x
,
index
)
=>
{
//delete x.A //A 삭제
return
{
...
x
,
N
:
index
+
1
}
//N 추가
})
function
handleQuestion
()
{
setQuestion
({
...
QnA
[
question
.
N
]})
setQuestion
({
...
QnA
[
question
.
N
]
})
setSelected
(
""
)
//페이지 넘어가면 selected 초기화
}
...
...
@@ -34,64 +53,65 @@ function Quiz() {
}
return
(
<>
<
div
className
=
"
container-fluid
"
>
<
div
className
=
"
text-center h2 font-weight-bold bg-warning py-2
"
>
미적분학
퀴즈
<
/div
>
<
div
className
=
"
row justify-content-md-center
"
>
<
div
className
=
"
col text-right
"
>
<
h1
>
<
img
src
=
{
logo
}
width
=
'
50
'
height
=
'
50
'
alt
=
'
question
'
/>
<
/h1
>
<
/div
>
<
div
className
=
"
col-md-auto
"
>
<
div
className
=
"
h2 mt-2
"
>
{
question
.
Q
}
<
div
className
=
"
container-fluid
"
>
<
div
className
=
"
text-center h2 font-weight-bold bg-warning py-2
"
>
미적분학
퀴즈
<
/div
>
<
div
className
=
"
row justify-content-md-center
"
>
<
div
className
=
"
col text-right
"
>
<
h1
>
<
img
src
=
{
logo
}
width
=
'
50
'
height
=
'
50
'
alt
=
'
question
'
/>
<
/h1
>
<
/div
>
<
div
className
=
"
mt-2
"
>
<
form
>
{
question
.
Choose
.
map
((
a
,
index
)
=>
<
div
>
<
input
type
=
"
radio
"
name
=
'
answer
'
id
=
{
index
}
value
=
{
a
}
onChange
=
{
handleChange
}
checked
=
{
selected
===
String
(
a
)}
/
>
<
label
className
=
"
font-weight-bold
"
htmlFor
=
{
a
}
>
{
a
}
<
/label
>
<
/div
>
)}
<
/form
>
<
span
className
=
"
h5 font-weight-bold
"
>
Your
Answer
:
<
/span
>
<
span
className
=
"
h2 font-weight-bold text-danger
"
>
{
selected
}
<
/span> {/
*
선택한
값
보여줌
*
/
}
<
div
className
=
"
text-center my-3
"
>
{(
question
.
N
-
1
===
QnA
.
length
-
1
)
?
<
Link
to
=
"
/end
"
>
<
button
className
=
"
btn btn-outline-success
"
onClick
=
{
localStorage
.
setItem
(
'
Solutions
'
,
JSON
.
stringify
(
Solutions
))}
>
제출
<
/button
>
<
/Link
>
:
<
button
type
=
"
button
"
className
=
"
btn btn-outline-dark
"
onClick
=
{
handleQuestion
}
>
다음
<
/button
>
}
<
div
className
=
"
col-md-auto
"
>
<
div
className
=
"
h2 mt-2
"
>
{
question
.
Q
}
{
localQnA
[
0
].
Q
}
<
/div
>
<
p
className
=
"
h3 text-center text-danger
"
>
<
Timer
initialTime
=
{
30010
}
direction
=
"
backward
"
checkpoints
=
{[
{
time
:
1
,
callback
:()
=>
alert
(
'
시간이 초과되었습니다.
'
),
},
{
time
:
0
,
callback
:
()
=>
settimeout
(
true
),
}
]}
>
{()
=>
(
<>
<
Timer
.
Minutes
/>
:
<
Timer
.
Seconds
><
/Timer.Seconds> /
30
:
00
<
/
>
<
div
className
=
"
mt-2
"
>
<
form
>
{
question
.
Choose
.
map
((
a
,
index
)
=>
<
div
>
<
input
type
=
"
radio
"
name
=
'
answer
'
id
=
{
index
}
value
=
{
a
}
onChange
=
{
handleChange
}
checked
=
{
selected
===
String
(
a
)}
/
>
<
label
className
=
"
font-weight-bold
"
htmlFor
=
{
a
}
>
{
a
}
<
/label
>
<
/div
>
)}
<
/Timer> {/
*
npm
i
react
-
compound
-
timer
*
/
}
<
/p
>
<
/form
>
<
span
className
=
"
h5 font-weight-bold
"
>
Your
Answer
:
<
/span
>
<
span
className
=
"
h2 font-weight-bold text-danger
"
>
{
selected
}
<
/span> {/
*
선택한
값
보여줌
*
/
}
<
div
className
=
"
text-center my-3
"
>
{(
question
.
N
-
1
===
QnA
.
length
-
1
)
?
<
Link
to
=
"
/end
"
>
<
button
className
=
"
btn btn-outline-success
"
onClick
=
{
localStorage
.
setItem
(
'
Solutions
'
,
JSON
.
stringify
(
Solutions
))}
>
제출
<
/button
>
<
/Link
>
:
<
button
type
=
"
button
"
className
=
"
btn btn-outline-dark
"
onClick
=
{
handleQuestion
}
>
다음
<
/button
>
}
<
/div
>
<
p
className
=
"
h3 text-center text-danger
"
>
<
Timer
initialTime
=
{
3001000
}
direction
=
"
backward
"
checkpoints
=
{[
{
time
:
1
,
callback
:
()
=>
alert
(
'
시간이 초과되었습니다.
'
),
},
{
time
:
0
,
callback
:
()
=>
settimeout
(
true
),
}
]}
>
{()
=>
(
<>
<
Timer
.
Minutes
/>
:
<
Timer
.
Seconds
><
/Timer.Seconds> /
30
:
00
<
/
>
)}
<
/Timer> {/
*
npm
i
react
-
compound
-
timer
*
/
}
<
/p
>
<
/div
>
<
/div
>
<
div
className
=
"
col
"
>
<
/div
>
<
/div
>
<
div
className
=
"
col
"
>
<
/div
>
<
/div
>
<
/div
>
{
timeout
?
<
Redirect
to
=
'
/end
'
/>
:
''
}
{
timeout
?
<
Redirect
to
=
'
/end
'
/>
:
''
}
<
/
>
)
...
...
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