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
5d4ee11f
Commit
5d4ee11f
authored
Aug 10, 2020
by
baesangjune
Browse files
.
parent
c836a803
Changes
2
Hide whitespace changes
Inline
Side-by-side
src/Admin.js
View file @
5d4ee11f
...
@@ -90,14 +90,14 @@ function Admin() {
...
@@ -90,14 +90,14 @@ function Admin() {
<
p
className
=
"
navbar-text border-bottom
"
>
관리자
설정
변경하기
<
/p
>
<
p
className
=
"
navbar-text border-bottom
"
>
관리자
설정
변경하기
<
/p
>
<
a
className
=
"
nav-link
"
id
=
"
setting-tab
"
data
-
toggle
=
'
pill
'
href
=
"
#setting
"
role
=
"
tab
"
>
Setting
<
/a
>
<
a
className
=
"
nav-link
"
id
=
"
setting-tab
"
data
-
toggle
=
'
pill
'
href
=
"
#setting
"
>
Setting
<
/a
>
<
p
className
=
"
navbar-text border-bottom
"
>
Quiz
입력하기
<
/p
>
<
p
className
=
"
navbar-text border-bottom
"
>
Quiz
입력하기
<
/p
>
<
a
className
=
"
nav-link
"
id
=
"
Quiz1-tab
"
data
-
toggle
=
"
pill
"
href
=
"
#Quiz1
"
role
=
"
tab
"
>
Quiz1
<
/a
>
<
a
className
=
"
nav-link
"
id
=
"
Quiz1-tab
"
data
-
toggle
=
"
pill
"
href
=
"
#Quiz1
"
>
Quiz1
<
/a
>
<
a
className
=
"
nav-link
"
id
=
"
Quiz2-tab
"
data
-
toggle
=
"
pill
"
href
=
"
#Quiz2
"
role
=
"
tab
"
>
Quiz2
<
/a
>
<
a
className
=
"
nav-link
"
id
=
"
Quiz2-tab
"
data
-
toggle
=
"
pill
"
href
=
"
#Quiz2
"
>
Quiz2
<
/a
>
<
a
className
=
"
nav-link
"
id
=
"
Quiz3-tab
"
data
-
toggle
=
"
pill
"
href
=
"
#Quiz3
"
role
=
"
tab
"
>
Quiz3
<
/a
>
<
a
className
=
"
nav-link
"
id
=
"
Quiz3-tab
"
data
-
toggle
=
"
pill
"
href
=
"
#Quiz3
"
>
Quiz3
<
/a
>
{
addQuiz
}
{
addQuiz
}
<
button
className
=
"
btn btn-danger navbar-btn
"
onClick
=
{
handleClickQuiz
}
>
Quiz
추가
<
/button
>
<
button
className
=
"
btn btn-danger navbar-btn
"
onClick
=
{
handleClickQuiz
}
>
Quiz
추가
<
/button
>
...
@@ -113,20 +113,20 @@ function Admin() {
...
@@ -113,20 +113,20 @@ function Admin() {
<
div
className
=
"
row d-flex justify-content-center
"
>
<
div
className
=
"
row d-flex justify-content-center
"
>
<
div
className
=
"
col-8
"
>
<
div
className
=
"
col-8
"
>
<
h
1
className
=
"
p-3 border
"
>
관리자
설정
변경
창
<
/h
1
>
<
h
2
className
=
"
p-3 border
text-center bg-danger
"
>
관리자
설정변경
<
/h
2
>
<
div
className
=
"
p-3 border
"
>
<
div
className
=
"
p-3 border
"
>
<
h
2
>
변경할
비밀번호를
입력하세요
<
/h
2
>
<
h
3
>
변경할
비밀번호를
입력하세요
<
/h
3
>
<
input
type
=
"
text
"
onChange
=
{
handleChangePassword
}
placeholder
=
"
New Password
"
/>
<
input
className
=
'
p-2
'
type
=
"
text
"
onChange
=
{
handleChangePassword
}
placeholder
=
"
New Password
"
/>
<
/div
>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
div
className
=
"
p-3 border
"
>
<
h
2
>
변경할
관리자
비밀번호를
입력하세요
<
/h
2
>
<
h
3
>
변경할
관리자
비밀번호를
입력하세요
<
/h
3
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeAdminPassword
}
placeholder
=
"
New Admin Password
"
/>
<
input
className
=
'
p-2
'
type
=
"
text
"
onChange
=
{
handleChangeAdminPassword
}
placeholder
=
"
New Admin Password
"
/>
<
/div
>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
div
className
=
"
p-3 border
"
>
<
h
2
>
타이머를
설정하세요
(
초단위
)
<
/h
2
>
<
h
3
>
타이머를
설정하세요
(
초단위
)
<
/h
3
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeTime
}
placeholder
=
"
Set Time
"
/>
<
input
className
=
'
p-2
'
type
=
"
text
"
onChange
=
{
handleChangeTime
}
placeholder
=
"
Set Time
"
/>
<
/div
>
<
/div
>
...
@@ -149,24 +149,24 @@ function Admin() {
...
@@ -149,24 +149,24 @@ function Admin() {
<
div
className
=
"
row d-flex justify-content-center
"
>
<
div
className
=
"
row d-flex justify-content-center
"
>
<
div
className
=
"
col-8
"
>
<
div
className
=
"
col-8
"
>
<
h2
className
=
"
p-3 border text-center
"
>
문제만들기
<
/h2
>
<
h2
className
=
"
p-3 border text-center
bg-danger
"
>
문제만들기
<
/h2
>
<
div
className
=
"
p-3 borber
"
>
<
div
className
=
"
p-3 borber
"
>
<
div
className
=
"
p-3
"
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
1
.
<
/span
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
1
.
<
/span
>
{
/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */
}
{
/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */
}
<
input
type
=
"
text
"
onChange
=
{
handleChangeQuestion
}
placeholder
=
"
문제를 입력하세요
"
/>
<
input
className
=
'
p-2
'
type
=
"
text
"
onChange
=
{
handleChangeQuestion
}
placeholder
=
"
문제를 입력하세요
"
/>
<
/div
>
<
/div
>
<
div
className
=
"
p-3
"
>
<
div
className
=
"
p-3
"
>
<
div
className
=
"
input-group
"
>
<
div
className
=
"
input-group
"
>
<
div
className
=
"
input-group-prepend
"
>
<
div
className
=
"
input-group-prepend
"
>
<
div
className
=
"
input-group-text
"
>
<
div
className
=
"
input-group-text
p-3
"
>
<
input
type
=
"
radio
"
id
=
"
option
"
/>
<
input
type
=
"
radio
"
id
=
"
option
"
/>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
input
type
=
"
text
"
className
=
"
form-control
"
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangechoose
}
/
>
<
input
type
=
"
text
"
className
=
"
form-control
p-4
"
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangechoose
}
/
>
<
/div
>
<
/div
>
{
selectOption
}
{
selectOption
}
...
@@ -176,7 +176,7 @@ function Admin() {
...
@@ -176,7 +176,7 @@ function Admin() {
<
div
className
=
"
p-3
"
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
정답
:
<
/span
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
정답
:
<
/span
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
정답을 입력하세요
"
/>
<
input
className
=
'
p-2
'
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
정답을 입력하세요
"
/>
<
/div
>
<
/div
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
...
@@ -196,24 +196,24 @@ function Admin() {
...
@@ -196,24 +196,24 @@ function Admin() {
<
div
className
=
"
row d-flex justify-content-center
"
>
<
div
className
=
"
row d-flex justify-content-center
"
>
<
div
className
=
"
col-8
"
>
<
div
className
=
"
col-8
"
>
<
h2
className
=
"
p-3 border text-center
"
>
문제만들기
<
/h2
>
<
h2
className
=
"
p-3 border text-center
bg-danger
"
>
문제만들기
<
/h2
>
<
div
className
=
"
p-3 borber
"
>
<
div
className
=
"
p-3 borber
"
>
<
div
className
=
"
p-3
"
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
1
.
<
/span
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
1
.
<
/span
>
{
/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */
}
{
/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */
}
<
input
type
=
"
text
"
onChange
=
{
handleChangeQuestion
}
placeholder
=
"
문제를 입력하세요
"
/>
<
input
className
=
'
p-2
'
type
=
"
text
"
onChange
=
{
handleChangeQuestion
}
placeholder
=
"
문제를 입력하세요
"
/>
<
/div
>
<
/div
>
<
div
className
=
"
p-3
"
>
<
div
className
=
"
p-3
"
>
<
div
className
=
"
input-group
"
>
<
div
className
=
"
input-group
"
>
<
div
className
=
"
input-group-prepend
"
>
<
div
className
=
"
input-group-prepend
"
>
<
div
className
=
"
input-group-text
"
>
<
div
className
=
"
input-group-text
p-3
"
>
<
input
type
=
"
radio
"
id
=
"
option
"
/>
<
input
type
=
"
radio
"
id
=
"
option
"
/>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
input
type
=
"
text
"
className
=
"
form-control
"
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangechoose
}
/
>
<
input
type
=
"
text
"
className
=
"
form-control
p-4
"
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangechoose
}
/
>
<
/div
>
<
/div
>
{
selectOption
}
{
selectOption
}
...
@@ -223,7 +223,7 @@ function Admin() {
...
@@ -223,7 +223,7 @@ function Admin() {
<
div
className
=
"
p-3
"
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
정답
:
<
/span
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
정답
:
<
/span
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
정답을 입력하세요
"
/>
<
input
className
=
'
p-2
'
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
정답을 입력하세요
"
/>
<
/div
>
<
/div
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
...
@@ -240,24 +240,24 @@ function Admin() {
...
@@ -240,24 +240,24 @@ function Admin() {
<
div
className
=
"
row d-flex justify-content-center
"
>
<
div
className
=
"
row d-flex justify-content-center
"
>
<
div
className
=
"
col-8
"
>
<
div
className
=
"
col-8
"
>
<
h2
className
=
"
p-3 border text-center
"
>
문제만들기
<
/h2
>
<
h2
className
=
"
p-3 border text-center
bg-danger
"
>
문제만들기
<
/h2
>
<
div
className
=
"
p-3 borber
"
>
<
div
className
=
"
p-3 borber
"
>
<
div
className
=
"
p-3
"
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
1
.
<
/span
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
1
.
<
/span
>
{
/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */
}
{
/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */
}
<
input
type
=
"
text
"
onChange
=
{
handleChangeQuestion
}
placeholder
=
"
문제를 입력하세요
"
/>
<
input
className
=
'
p-2
'
type
=
"
text
"
onChange
=
{
handleChangeQuestion
}
placeholder
=
"
문제를 입력하세요
"
/>
<
/div
>
<
/div
>
<
div
className
=
"
p-3
"
>
<
div
className
=
"
p-3
"
>
<
div
className
=
"
input-group
"
>
<
div
className
=
"
input-group
"
>
<
div
className
=
"
input-group-prepend
"
>
<
div
className
=
"
input-group-prepend
"
>
<
div
className
=
"
input-group-text
"
>
<
div
className
=
"
input-group-text
p-3
"
>
<
input
type
=
"
radio
"
id
=
"
option
"
/>
<
input
type
=
"
radio
"
id
=
"
option
"
/>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
input
type
=
"
text
"
className
=
"
form-control
"
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangechoose
}
/
>
<
input
type
=
"
text
"
className
=
"
form-control
p-4
"
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangechoose
}
/
>
<
/div
>
<
/div
>
{
selectOption
}
{
selectOption
}
...
@@ -267,7 +267,7 @@ function Admin() {
...
@@ -267,7 +267,7 @@ function Admin() {
<
div
className
=
"
p-3
"
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
정답
:
<
/span
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
정답
:
<
/span
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
정답을 입력하세요
"
/>
<
input
className
=
'
p-2
'
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
정답을 입력하세요
"
/>
<
/div
>
<
/div
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
...
...
src/Quiz.js
View file @
5d4ee11f
...
@@ -11,7 +11,7 @@ const QnA = [
...
@@ -11,7 +11,7 @@ const QnA = [
{
Q
:
"
3 - 1 = ?
"
,
Choose
:
[
1
,
2
,
3
,
4
],
N
:
3
}
{
Q
:
"
3 - 1 = ?
"
,
Choose
:
[
1
,
2
,
3
,
4
],
N
:
3
}
]
]
let
Answers
=
[
0
,
0
,
0
]
let
Answers
=
[
0
,
0
,
0
]
localStorage
.
setItem
(
'
Answers
'
,
JSON
.
stringify
(
Answers
))
localStorage
.
setItem
(
'
Answers
'
,
JSON
.
stringify
(
Answers
))
let
Solutions
=
[
4
,
3
,
2
]
let
Solutions
=
[
4
,
3
,
2
]
localStorage
.
setItem
(
'
Solutions
'
,
JSON
.
stringify
(
Solutions
))
localStorage
.
setItem
(
'
Solutions
'
,
JSON
.
stringify
(
Solutions
))
...
@@ -41,64 +41,66 @@ function Quiz() {
...
@@ -41,64 +41,66 @@ function Quiz() {
}
}
return
(
return
(
<>
<>
<
div
className
=
"
container-fluid
"
>
<
div
className
=
"
container-fluid
"
>
<
div
className
=
"
text-center h2 font-weight-bold bg-warning py-2
"
>
미적분학
퀴즈
<
/div
>
<
div
className
=
"
text-center h2 font-weight-bold bg-warning py-2
"
>
미적분학
퀴즈
<
/div
>
<
div
className
=
"
row justify-content-md-center
"
>
<
div
className
=
"
row justify-content-md-center
"
>
<
div
className
=
"
col text-right
"
>
<
div
className
=
"
col text-right
"
>
<
h1
>
<
h1
>
<
img
src
=
{
logo
}
width
=
'
50
'
height
=
'
50
'
alt
=
'
question
'
/>
<
img
src
=
{
logo
}
width
=
'
50
'
height
=
'
50
'
alt
=
'
question
'
/>
<
/h1
>
<
/h1
>
<
/div
>
<
div
className
=
"
col-md-auto
"
>
<
div
className
=
"
h2 mt-2
"
>
{
question
.
Q
}
<
/div
>
<
/div
>
<
div
className
=
"
mt-2
"
>
<
div
className
=
"
col-md-auto
"
>
<
form
>
<
div
className
=
"
h2 mt-2
"
>
{
question
.
Choose
.
map
((
a
,
index
)
=>
{
question
.
Q
}
<
div
key
=
{
index
}
>
<
input
type
=
"
radio
"
name
=
'
answer
'
id
=
{
index
}
value
=
{
a
}
onChange
=
{
handleChange
}
checked
=
{
parseInt
(
selected
)
===
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
.
page
===
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
>
<
/div
>
<
p
className
=
"
h3 text-center text-danger
"
>
<
div
className
=
"
mt-2
"
>
<
Timer
<
form
>
initialTime
=
{
36000
}
{
question
.
Choose
.
map
((
a
,
index
)
=>
direction
=
"
backward
"
<
div
key
=
{
index
}
>
checkpoints
=
{[
<
input
type
=
"
radio
"
name
=
'
answer
'
id
=
{
index
}
value
=
{
a
}
onChange
=
{
handleChange
}
checked
=
{
parseInt
(
selected
)
===
a
}
/
>
{
time
:
1
,
<
label
className
=
"
font-weight-bold
"
htmlFor
=
{
a
}
>
{
a
}
<
/label
>
callback
:()
=>
alert
(
'
시간이 초과되었습니다.
'
),
<
/div
>
},
{
time
:
0
,
callback
:
()
=>
settimeout
(
true
),
}
]}
>
{()
=>
(
<>
<
Timer
.
Minutes
/>
:
<
Timer
.
Seconds
><
/Timer.Seconds> /
60
:
00
<
/
>
)}
)}
<
/Timer> {/
*
npm
i
react
-
compound
-
timer
*
/
}
<
/form
>
<
/p
>
<
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
"
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
=
{
36000
}
direction
=
"
backward
"
checkpoints
=
{[
{
time
:
1
,
callback
:
()
=>
alert
(
'
시간이 초과되었습니다.
'
),
},
{
time
:
0
,
callback
:
()
=>
settimeout
(
true
),
}
]}
>
{()
=>
(
<>
<
Timer
.
Minutes
/>
:
<
Timer
.
Seconds
/>
/ 30 : 0
0
<
/
>
)}
<
/Timer> {/
*
npm
i
react
-
compound
-
timer
*
/
}
<
/p
>
<
/div
>
<
/div
>
<
div
className
=
"
col
"
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
col
"
>
<
/div
>
<
/div
>
<
/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