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
d6a42aaa
Commit
d6a42aaa
authored
Aug 10, 2020
by
baesangjune
Browse files
admin
parent
4ab92855
Changes
3
Show whitespace changes
Inline
Side-by-side
src/Admin.js
View file @
d6a42aaa
...
...
@@ -10,21 +10,20 @@ function Admin() {
// let choose = []
// let N = []
const
[
number
,
setNumber
]
=
useState
(
''
)
const
[
question
,
setQuestion
]
=
useState
(
''
)
const
[
choose
,
setChoose
]
=
useState
(
''
)
const
[
answer
,
setAnswer
]
=
useState
(
''
)
const
[
password
,
setPassword
]
=
useState
(
''
)
const
[
adminpassword
,
setAdminPassword
]
=
useState
(
''
)
const
[
time
,
setTime
]
=
useState
(
''
)
const
[
addQuiz
,
setaddQuiz
]
=
useState
(
''
)
const
[
addQuiz
,
setaddQuiz
]
=
useState
(
''
)
const
[
selectOption
,
setselectOption
]
=
useState
(
''
)
const
[
done
,
setDone
]
=
useState
(
false
)
const
handleChangenumber
=
(
event
)
=>
{
setNumber
(
event
.
target
.
value
)
}
const
handleChangequestion
=
(
event
)
=>
{
const
handleChangeQuestion
=
(
event
)
=>
{
setQuestion
(
event
.
target
.
value
)
}
const
handleChangechoose
=
(
event
)
=>
{
...
...
@@ -47,7 +46,6 @@ function Admin() {
function
handleClick
()
{
alert
(
'
입력이 완료되었습니다
'
)
localStorage
.
setItem
(
'
N
'
,
number
)
localStorage
.
setItem
(
'
Q
'
,
question
)
localStorage
.
setItem
(
'
Choose
'
,
choose
)
localStorage
.
setItem
(
'
Answer
'
,
answer
)
...
...
@@ -58,10 +56,23 @@ function Admin() {
setDone
(
true
)
}
function
addSelectOption
()
{
let
list
=
function
()
{
return
<
div
className
=
"
input-group
"
>
<
div
className
=
"
input-group-prepend
"
>
<
div
className
=
"
input-group-text
"
>
<
input
type
=
"
radio
"
id
=
"
option
"
/>
<
/div
>
<
/div
>
<
input
type
=
"
text
"
class
=
"
form-control
"
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangechoose
}
/
>
<
/div
>
}
setselectOption
(
list
)
}
function
handleClickQuiz
()
{
let
addQuiz
=
function
(){
return
<
a
className
=
"
nav-link
"
id
=
"
v-pills-settings-tab
"
data
-
toggle
=
"
pill
"
href
=
"
#
v-pills-settings
"
role
=
"
tab
"
aria
-
controls
=
"
v-pills-settings
"
aria
-
selected
=
"
false
"
>
Quiz4
<
/a
>
let
addQuiz
=
function
()
{
return
<
a
className
=
"
nav-link
"
id
=
"
v-pills-settings-tab
"
data
-
toggle
=
"
pill
"
href
=
"
#
Quiz4
"
role
=
"
tab
"
aria
-
controls
=
"
v-pills-settings
"
aria
-
selected
=
"
false
"
>
Quiz4
<
/a
>
}
setaddQuiz
(
addQuiz
)
}
...
...
@@ -73,35 +84,30 @@ function Admin() {
<
div
className
=
"
col-3
"
>
<
div
className
=
"
container-fluid
"
>
<
div
className
=
"
navbar-header p-3
"
>
<
a
className
=
"
navbar-brand
"
href
=
"
/admin
"
>
관리자
페이지
<
/
a
>
<
p
className
=
"
navbar-brand
"
>
관리자
페이지
<
/
p
>
<
/div
>
<
div
className
=
"
nav flex-column nav-pills
"
id
=
"
v-pills-tab
"
role
=
"
tablist
"
aria
-
orientation
=
"
vertical
"
>
<
li
className
=
"
dropdown p-4 mb-3
"
>
<
a
className
=
"
dropdown-toggle
"
data
-
toggle
=
"
dropdown
"
href
=
"
-pills-profile-tab
"
>
관리자
설정
변경하기
<
span
className
=
"
caret
"
><
/span></
a
>
<
ul
className
=
"
dropdown-menu
"
>
<
a
className
=
"
nav-link active
"
id
=
"
v-pills-home-tab
"
data
-
toggle
=
"
pill
"
href
=
"
#v-pills-home
"
role
=
"
tab
"
aria
-
controls
=
"
v-pills-home
"
aria
-
selected
=
"
true
"
>
Setting
<
/a
>
<
/ul
>
<
/li
>
<
li
className
=
"
dropdown p-4
"
>
<
a
className
=
"
dropdown-toggle
"
data
-
toggle
=
"
dropdown
"
href
=
"
-pills-profile-tab
"
>
Quiz
입력하기
<
span
className
=
"
caret
"
><
/span></
a
>
<
ul
className
=
"
dropdown-menu
"
>
<
a
className
=
"
nav-link
"
id
=
"
v-pills-profile-tab
"
data
-
toggle
=
"
pill
"
href
=
"
#v-pills-profile
"
role
=
"
tab
"
aria
-
controls
=
"
v-pills-profile
"
aria
-
selected
=
"
false
"
>
Quiz1
<
/a
>
<
a
className
=
"
nav-link
"
id
=
"
v-pills-messages-tab
"
data
-
toggle
=
"
pill
"
href
=
"
#v-pills-messages
"
role
=
"
tab
"
aria
-
controls
=
"
v-pills-messages
"
aria
-
selected
=
"
false
"
>
Quiz2
<
/a
>
<
a
className
=
"
nav-link
"
id
=
"
v-pills-settings-tab
"
data
-
toggle
=
"
pill
"
href
=
"
#v-pills-settings
"
role
=
"
tab
"
aria
-
controls
=
"
v-pills-settings
"
aria
-
selected
=
"
false
"
>
Quiz3
<
/a
>
<
p
className
=
"
navbar-text
"
>
관리자
설정
변경하기
<
/p
>
<
a
className
=
"
nav-link
"
id
=
"
setting-tab
"
data
-
toggle
=
'
pill
'
href
=
"
#setting
"
role
=
"
tab
"
aria
-
controls
=
"
v-pills-home
"
aria
-
selected
=
"
false
"
>
Setting
<
/a
>
<
p
className
=
"
navbar-text
"
>
Quiz
입력하기
<
/p
>
<
a
className
=
"
nav-link
"
id
=
"
Quiz1-tab
"
data
-
toggle
=
"
pill
"
href
=
"
#Quiz1
"
role
=
"
tab
"
aria
-
controls
=
"
v-pills-profile
"
aria
-
selected
=
"
false
"
>
Quiz1
<
/a
>
<
a
className
=
"
nav-link
"
id
=
"
Quiz2-tab
"
data
-
toggle
=
"
pill
"
href
=
"
#Quiz2
"
role
=
"
tab
"
aria
-
controls
=
"
v-pills-messages
"
aria
-
selected
=
"
false
"
>
Quiz2
<
/a
>
<
a
className
=
"
nav-link
"
id
=
"
Quiz3-tab
"
data
-
toggle
=
"
pill
"
href
=
"
#Quiz3
"
role
=
"
tab
"
aria
-
controls
=
"
v-pills-settings
"
aria
-
selected
=
"
false
"
>
Quiz3
<
/a
>
{
addQuiz
}
<
button
class
=
"
btn btn-danger navbar-btn
"
onClick
=
{
handleClickQuiz
}
>
Quiz
추가
<
/button
>
<
/ul
>
<
/li
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
col-9
"
>
<
div
className
=
"
tab-content
"
id
=
"
v-pills-tabContent
"
>
<
div
className
=
"
tab-pane fade show active
"
id
=
"
v-pills-home
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
v-pills-home-tab
"
>
<
div
className
=
"
tab-pane fade show active
"
id
=
"
setting
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
v-pills-home-tab
"
>
<
div
>
<
div
className
=
"
container
"
>
<
div
className
=
"
row d-flex justify-content-center
"
>
...
...
@@ -136,32 +142,41 @@ function Admin() {
<
/div
>
<
/div
>
<
div
className
=
"
tab-pane fade
"
id
=
"
v-pills-profile
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
v-pills-profile-tab
"
>
<
div
className
=
"
tab-pane fade show active
"
id
=
"
Quiz1
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
v-pills-profile-tab
"
>
<
div
className
=
"
container
"
>
<
div
className
=
"
row d-flex justify-content-center
"
>
<
div
className
=
"
col-8
"
>
<
h1
className
=
"
p-3 border
"
>
문제제출
<
/h1
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
문제번호를
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangenumber
}
placeholder
=
"
Nunber
"
/>
<
h2
className
=
"
p-3 border text-center
"
>
문제만들기
<
/h2
>
<
div
className
=
"
p-3 borber
"
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
1
.
<
/span
>
{
/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */
}
<
input
type
=
"
text
"
onChange
=
{
handleChangeQuestion
}
placeholder
=
"
문제를 입력하세요
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
문제를
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangequestion
}
placeholder
=
"
Question
"
/>
<
div
className
=
"
p-3
"
>
<
div
className
=
"
input-group
"
>
<
div
className
=
"
input-group-prepend
"
>
<
div
className
=
"
input-group-text
"
>
<
input
type
=
"
radio
"
id
=
"
option
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
보기를
입력하세요
(
배열형태
)
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangechoose
}
placeholder
=
"
Choose
"
/>
<
/div
>
<
input
type
=
"
text
"
class
=
"
form-control
"
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangechoose
}
/
>
<
/div
>
{
selectOption
}
<
button
className
=
"
btn btn-outline-secondary btn-sm
"
onClick
=
{
addSelectOption
}
>+<
/button
>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
답을
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
Answer
"
/>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
정답
:
<
/span
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
정답을 입력하세요
"
/>
<
/div
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
...
...
@@ -173,32 +188,42 @@ function Admin() {
<
/div
>
<
/div
>
<
div
className
=
"
tab-pane fade
"
id
=
"
v-pills-messages
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
v-pills-messages-tab
"
>
<
/div
>
<
div
className
=
"
tab-pane fade
"
id
=
"
Quiz2
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
v-pills-messages-tab
"
>
<
div
className
=
"
container
"
>
<
div
className
=
"
row d-flex justify-content-center
"
>
<
div
className
=
"
col-8
"
>
<
h1
className
=
"
p-3 border
"
>
문제제출
<
/h1
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
문제번호를
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangenumber
}
placeholder
=
"
Nunber
"
/>
<
h2
className
=
"
p-3 border text-center
"
>
문제만들기
<
/h2
>
<
div
className
=
"
p-3 borber
"
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
1
.
<
/span
>
{
/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */
}
<
input
type
=
"
text
"
onChange
=
{
handleChangeQuestion
}
placeholder
=
"
문제를 입력하세요
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
문제를
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangequestion
}
placeholder
=
"
Question
"
/>
<
div
className
=
"
p-3
"
>
<
div
className
=
"
input-group
"
>
<
div
className
=
"
input-group-prepend
"
>
<
div
className
=
"
input-group-text
"
>
<
input
type
=
"
radio
"
id
=
"
option
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
보기를
입력하세요
(
배열형태
)
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangechoose
}
placeholder
=
"
Choose
"
/>
<
/div
>
<
input
type
=
"
text
"
class
=
"
form-control
"
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangechoose
}
/
>
<
/div
>
{
selectOption
}
<
button
className
=
"
btn btn-outline-secondary btn-sm
"
onClick
=
{
addSelectOption
}
>+<
/button
>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
답을
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
Answer
"
/>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
정답
:
<
/span
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
정답을 입력하세요
"
/>
<
/div
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
...
...
@@ -208,33 +233,41 @@ function Admin() {
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
tab-pane fade
"
id
=
"
v-pills-settings
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
v-pills-settings-tab
"
>
<
/div
>
<
div
className
=
"
tab-pane fade
"
id
=
"
Quiz3
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
v-pills-settings-tab
"
>
<
div
className
=
"
container
"
>
<
div
className
=
"
row d-flex justify-content-center
"
>
<
div
className
=
"
col-8
"
>
<
h1
className
=
"
p-3 border
"
>
문제제출
<
/h1
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
문제번호를
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangenumber
}
placeholder
=
"
Nunber
"
/>
<
h2
className
=
"
p-3 border text-center
"
>
문제만들기
<
/h2
>
<
div
className
=
"
p-3 borber
"
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
1
.
<
/span
>
{
/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */
}
<
input
type
=
"
text
"
onChange
=
{
handleChangeQuestion
}
placeholder
=
"
문제를 입력하세요
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
문제를
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangequestion
}
placeholder
=
"
Question
"
/>
<
div
className
=
"
p-3
"
>
<
div
className
=
"
input-group
"
>
<
div
className
=
"
input-group-prepend
"
>
<
div
className
=
"
input-group-text
"
>
<
input
type
=
"
radio
"
id
=
"
option
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
보기를
입력하세요
(
배열형태
)
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangechoose
}
placeholder
=
"
Choose
"
/>
<
/div
>
<
input
type
=
"
text
"
class
=
"
form-control
"
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangechoose
}
/
>
<
/div
>
{
selectOption
}
<
button
className
=
"
btn btn-outline-secondary btn-sm
"
onClick
=
{
addSelectOption
}
>+<
/button
>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
답을
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
Answer
"
/>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
정답
:
<
/span
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
정답을 입력하세요
"
/>
<
/div
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
...
...
@@ -248,6 +281,8 @@ function Admin() {
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/
>
)
}
...
...
src/compare.js
0 → 100644
View file @
d6a42aaa
import
React
,
{
useState
}
from
'
react
'
;
// import { Link } from 'react-router-dom';
function
Admin
()
{
const
[
question
,
setQuestion
]
=
useState
(
''
)
const
[
choose
,
setChoose
]
=
useState
(
''
)
const
[
answer
,
setAnswer
]
=
useState
(
''
)
const
[
selectOption
,
setselectOption
]
=
useState
(
''
)
// const [done, setDone] = useState(false)
const
handleChangeQuestion
=
(
event
)
=>
{
setQuestion
(
event
.
target
.
value
)
}
const
handleChangechoose
=
(
event
)
=>
{
setChoose
(
event
.
target
.
value
)
}
const
handleChangeanswer
=
(
event
)
=>
{
setAnswer
(
event
.
target
.
value
)
}
function
handleClick
()
{
// localStorage.setItem('N', number)
localStorage
.
setItem
(
'
Q
'
,
question
)
localStorage
.
setItem
(
'
Choose
'
,
choose
)
localStorage
.
setItem
(
'
Answer
'
,
answer
)
// setDone(true)
alert
(
'
입력이 완료되었습니다
'
)
}
function
addSelectOption
()
{
let
list
=
function
(){
return
<
div
className
=
"
input-group
"
>
<
div
className
=
"
input-group-prepend
"
>
<
div
className
=
"
input-group-text
"
>
<
input
type
=
"
radio
"
id
=
"
option
"
/>
<
/div
>
<
/div
>
<
input
type
=
"
text
"
class
=
"
form-control
"
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangechoose
}
/
>
<
/div
>
}
setselectOption
(
list
)
}
return
(
<>
{
/* {done ? alert('모두 입력되었습니다.') : ''} */
}
<
div
className
=
"
container-fluid
"
>
<
div
className
=
"
row d-flex justify-content-center
"
>
<
div
className
=
"
col-8
"
>
<
h2
className
=
"
p-3 border text-center
"
>
문제만들기
<
/h2
>
<
div
className
=
"
p-3 borber
"
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
1
.
<
/span
>
{
/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */
}
<
input
type
=
"
text
"
onChange
=
{
handleChangeQuestion
}
placeholder
=
"
문제를 입력하세요
"
/>
<
/div
>
<
div
className
=
"
p-3
"
>
<
div
className
=
"
input-group
"
>
<
div
className
=
"
input-group-prepend
"
>
<
div
className
=
"
input-group-text
"
>
<
input
type
=
"
radio
"
id
=
"
option
"
/>
<
/div
>
<
/div
>
<
input
type
=
"
text
"
class
=
"
form-control
"
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangechoose
}
/
>
<
/div
>
{
selectOption
}
<
button
className
=
"
btn btn-outline-secondary btn-sm
"
onClick
=
{
addSelectOption
}
>+<
/button
>
<
/div
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
정답
:
<
/span
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
정답을 입력하세요
"
/>
<
/div
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
<
button
className
=
"
mt-4 btn btn-dark
"
onClick
=
{
handleClick
}
>
작성완료
<
/button
>
<
/label
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/
>
)
}
export
default
Admin
\ No newline at end of file
src/preQuiz.js
deleted
100644 → 0
View file @
4ab92855
import
React
,
{
useState
}
from
'
react
'
import
{
Link
}
from
'
react-router-dom
'
;
import
Timer
from
'
react-compound-timer
'
;
// 타이머쓰기위해 import
import
logo
from
'
./img/img_question.png
'
import
'
./Quiz.css
'
const
QnA
=
[
{
Q
:
"
6 X 4 = ?
"
,
Choose
:
[
6
,
12
,
18
,
24
],
A
:
"
4
"
,
N
:
1
},
{
Q
:
"
3 + 3 = ?
"
,
Choose
:
[
2
,
4
,
6
,
8
],
A
:
"
3
"
,
N
:
2
},
{
Q
:
"
3 - 1 = ?
"
,
Choose
:
[
1
,
2
,
3
,
4
],
A
:
"
2
"
,
N
:
3
}
]
let
Answers
=
[]
let
Solutions
=
[
4
,
3
,
2
]
localStorage
.
setItem
(
'
Solutions
'
,
JSON
.
stringify
(
Solutions
))
function
Quiz
()
{
const
[
question
,
setQuestion
]
=
useState
({
...
QnA
[
0
],
i
:
0
,
page
:
0
,
})
const
[
selected
,
setSelected
]
=
useState
(
""
)
//선택한 답을 보여줄 것들
// const [checked, setChecked] = useState(false)
function
handleQuestion
()
{
setQuestion
({
...
QnA
[
question
.
i
+
1
],
i
:
question
.
i
+
1
,
page
:
question
.
page
+
1
})
// setChecked(false)
}
let
handleChange
=
(
ev
)
=>
{
// ev.preventDefault() //새로고침 안되도록
setSelected
(
ev
.
target
.
value
)
//selected값 변경
Answers
[
question
.
N
-
1
]
=
Number
(
ev
.
target
.
id
)
+
1
localStorage
.
setItem
(
'
Answers
'
,
JSON
.
stringify
(
Answers
))
}
return
(
<
div
className
=
"
container-fluid position-absolute
"
>
<
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
>
<
div
className
=
"
mt-2
"
>
<
form
>
{
question
.
Choose
.
map
((
a
,
index
)
=>
<
div
key
=
{
index
}
>
<
input
type
=
"
radio
"
name
=
'
answer
'
id
=
{
index
}
value
=
{
a
}
onClick
=
{
handleChange
}
/
>
<
label
className
=
"
font-weight-bold
"
htmlFor
=
{
a
}
>
{
a
}
<
/label
>
<
/div
>
)}
<
input
hidden
type
=
"
submit
"
value
=
"
확인
"
/>
{
/*버튼 숨김*/
}
<
/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
.
page
===
QnA
.
length
-
1
)
?
<
Link
to
=
"
/end
"
>
<
button
className
=
"
btn btn-outline-success
"
>
제출
<
/button
>
<
/Link
>
:
<
button
type
=
"
button
"
className
=
"
btn btn-outline-dark
"
onClick
=
{
handleQuestion
}
>
다음
<
/button
>
}
<
/div
>
<
p
className
=
"
h3 text-center text-danger
"
>
<
Timer
initialTime
=
{
3600000
}
direction
=
"
backward
"
checkpoints
=
{[
{
time
:
0
,
callback
:
<
Link
to
=
"
/end
"
>
제출
<
/Link
>
// history.go(1)
}
]}
>
{()
=>
(
<>
<
Timer
.
Minutes
/>
:
<
Timer
.
Seconds
><
/Timer.Seconds> /
60
:
00
<
/
>
)}
<
/Timer> {/
*
npm
i
react
-
compound
-
timer
*
/
}
<
/p
>
<
/div
>
<
/div
>
<
div
className
=
"
col
"
>
<
/div
>
<
/div
>
<
/div
>
)
}
export
default
Quiz
;
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