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
50fae079
Commit
50fae079
authored
Aug 15, 2020
by
Jiwon Yoon
Browse files
ha..
parent
7e1104e5
Changes
8
Hide whitespace changes
Inline
Side-by-side
src/Admin.js
View file @
50fae079
...
@@ -16,7 +16,7 @@ function Admin() {
...
@@ -16,7 +16,7 @@ function Admin() {
}
}
function
handleClickQuiz
(
e
)
{
function
handleClickQuiz
(
e
)
{
setresult
(
<
AdminQuiz
QuizNum
=
{
e
.
target
.
id
}
/>
)
setresult
(
<
AdminQuiz
QuizNum
=
{
e
.
target
.
id
}
data
=
{
JSON
.
parse
(
localStorage
.
getItem
(
'
QnA
'
))}
/>
)
}
}
function
handleClickAddQuiz
()
{
function
handleClickAddQuiz
()
{
...
@@ -29,9 +29,9 @@ function Admin() {
...
@@ -29,9 +29,9 @@ function Admin() {
return
(
return
(
<>
<>
<
div
className
=
"
container-fluid
"
>
<
div
className
=
"
container-fluid
"
>
<
div
className
=
"
row justify-content-md-center mt-5
"
>
<
div
className
=
"
row justify-content-md-center mt-5
"
>
<
div
className
=
"
col-2 text-center border
"
>
<
div
className
=
"
col-2 text-center border
py-5
"
>
<
div
className
=
"
m
y
-5
"
>
<
div
className
=
"
m
b
-5
"
>
<
h4
>
관리자페이지
<
/h4
>
<
h4
>
관리자페이지
<
/h4
>
<
/div
>
<
/div
>
<
div
>
<
div
>
...
@@ -47,7 +47,7 @@ function Admin() {
...
@@ -47,7 +47,7 @@ function Admin() {
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
className
=
"
col-8
"
>
<
div
className
=
"
col-8
"
>
{
result
}
{
result
}
<
/div
>
<
/div
>
<
/div
>
<
/div
>
...
...
src/AdminQuiz.js
View file @
50fae079
...
@@ -16,13 +16,14 @@ function AdminQuiz(props) {
...
@@ -16,13 +16,14 @@ function AdminQuiz(props) {
const
[
choose
,
setChoose
]
=
useState
(
''
)
const
[
choose
,
setChoose
]
=
useState
(
''
)
const
[
answer
,
setAnswer
]
=
useState
(
''
)
const
[
answer
,
setAnswer
]
=
useState
(
''
)
const
[
selectOption
,
setselectOption
]
=
useState
(
1
)
const
[
selectOption
,
setselectOption
]
=
useState
(
1
)
const
[
v
,
setv
]
=
useState
(
''
)
const
handleChangeQuestion
=
(
event
)
=>
{
const
handleChangeQuestion
=
(
event
)
=>
{
QnAadmin
[
'
Q
'
]
=
event
.
target
.
value
QnAadmin
[
'
Q
'
]
=
event
.
target
.
value
setv
(
event
.
target
.
value
)
setQuestion
(
event
.
target
.
value
)
setQuestion
(
event
.
target
.
value
)
}
}
const
handleChangeChoose
=
(
event
)
=>
{
const
handleChangeChoose
=
(
event
)
=>
{
savechoose
[
event
.
target
.
id
]
=
event
.
target
.
value
savechoose
[
event
.
target
.
id
]
=
event
.
target
.
value
...
@@ -42,7 +43,7 @@ function AdminQuiz(props) {
...
@@ -42,7 +43,7 @@ function AdminQuiz(props) {
<
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
"
>
<
input
type
=
"
radio
"
name
=
"
answer
"
/>
<
input
type
=
"
radio
"
checked
=
{
false
}
name
=
"
answer
"
/>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
input
type
=
"
text
"
class
=
"
form-control
"
id
=
{
String
(
selectOption
+
1
)}
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangeChoose
}
/
>
<
input
type
=
"
text
"
class
=
"
form-control
"
id
=
{
String
(
selectOption
+
1
)}
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangeChoose
}
/
>
...
@@ -64,7 +65,7 @@ function AdminQuiz(props) {
...
@@ -64,7 +65,7 @@ function AdminQuiz(props) {
}
}
else
{
else
{
// console.log(QnAadmin)
// console.log(QnAadmin)
QnAadmin
[
'
Choose
'
]
=
Object
.
values
(
savechoose
)
QnAadmin
[
'
Choose
'
]
=
Object
.
values
(
savechoose
)
QnAadmin
[
'
N
'
]
=
String
(
props
.
QuizNum
)
QnAadmin
[
'
N
'
]
=
String
(
props
.
QuizNum
)
QnAadmins
.
push
(
QnAadmin
)
QnAadmins
.
push
(
QnAadmin
)
QnAadmin
=
{}
QnAadmin
=
{}
...
@@ -74,8 +75,10 @@ function AdminQuiz(props) {
...
@@ -74,8 +75,10 @@ function AdminQuiz(props) {
}
}
}
}
function
onFocusHandler
(){
// function handleChangeQuestion(){}
document
.
getElementById
(
"
inputQuiz
"
).
value
=
""
setv
(
""
)
}
return
(
return
(
...
@@ -84,7 +87,7 @@ function AdminQuiz(props) {
...
@@ -84,7 +87,7 @@ function AdminQuiz(props) {
<
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
"
className
=
"
form-control
"
onChange
=
{
handleChangeQuestion
}
placeholder
=
"
문제를 입력하세요
"
/>
<
input
type
=
"
text
"
id
=
"
inputQuiz
"
className
=
"
form-control
"
onFocus
=
{
onFocusHandler
}
value
=
{
props
.
QuizNum
<
4
?
props
.
data
[
props
.
QuizNum
-
1
].
Q
:
v
}
onChange
=
{
handleChangeQuestion
}
placeholder
=
"
문제를 입력하세요
"
/>
<
/div
>
<
/div
>
<
div
className
=
"
p-3
"
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
2
.
보기
입력하기
<
/span
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
2
.
보기
입력하기
<
/span
>
...
@@ -92,7 +95,7 @@ function AdminQuiz(props) {
...
@@ -92,7 +95,7 @@ function AdminQuiz(props) {
<
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
"
>
<
input
type
=
"
radio
"
id
=
{
selectOption
}
name
=
"
answer
"
/>
<
input
type
=
"
radio
"
checked
=
{
false
}
name
=
"
answer
"
/>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
input
type
=
"
text
"
className
=
"
form-control
"
id
=
'
1
'
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangeChoose
}
/
>
<
input
type
=
"
text
"
className
=
"
form-control
"
id
=
'
1
'
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangeChoose
}
/
>
...
...
src/App.js
View file @
50fae079
import
React
from
'
react
'
;
import
React
from
'
react
'
;
import
'
./App.css
'
;
//
import './App.css';
import
Home
from
'
./Home
'
import
Home
from
'
./Home
'
import
Quiz
from
'
./Quiz
'
import
Quiz
from
'
./Quiz
'
import
End
from
'
./End
'
import
End
from
'
./End
'
...
@@ -10,13 +10,12 @@ import { BrowserRouter as Router, Link, Switch, Route, Redirect } from 'react-ro
...
@@ -10,13 +10,12 @@ import { BrowserRouter as Router, Link, Switch, Route, Redirect } from 'react-ro
function
App
()
{
function
App
()
{
return
(
return
(
<
Router
>
<
Router
>
<
header
>
<
div
className
=
"
container-fluid vh-100 bg-light
"
>
<
Link
to
=
"
/
"
>
<
header
className
=
"
border-bottom
"
>
<
button
className
=
"
calcButton
"
>
Calculus
<
/button
>
<
Link
to
=
"
/
"
>
<
/Link
>
<
button
className
=
"
ml-3 btn btn-light btn-lg font-weight-bold text-dark
"
>
Home
<
/button
>
<
/header
>
<
/Link
>
<
hr
/>
<
/header
>
<
div
>
<
Switch
>
<
Switch
>
<
Route
exact
path
=
"
/
"
component
=
{
Home
}
/
>
<
Route
exact
path
=
"
/
"
component
=
{
Home
}
/
>
...
@@ -29,6 +28,8 @@ function App() {
...
@@ -29,6 +28,8 @@ function App() {
<
Redirect
path
=
"
/admin
"
to
=
"
/admin
"
/>
<
Redirect
path
=
"
/admin
"
to
=
"
/admin
"
/>
<
/Switch
>
<
/Switch
>
<
/div
>
<
/div
>
<
/Router
>
<
/Router
>
)
)
}
}
...
...
src/Home.css
deleted
100644 → 0
View file @
7e1104e5
src/Home.js
View file @
50fae079
...
@@ -47,16 +47,20 @@ function Home() {
...
@@ -47,16 +47,20 @@ function Home() {
return
(
return
(
<>
<
div
className
=
"
container-fluid bg-light p-5 h-100
"
>
{
admin
?
<
Redirect
to
=
'
/admin
'
/>
:
''
}
{
admin
?
<
Redirect
to
=
'
/admin
'
/>
:
''
}
{
done
?
<
Redirect
to
=
'
/quiz
'
/>
:
''
}
{
done
?
<
Redirect
to
=
'
/quiz
'
/>
:
''
}
<
h1
className
=
"
h-3 mb-5 mx-3 text-center bg-danger py-2
"
>
KOREA
UNIVERSITY
<
div
>
<
/h1
>
<
h3
className
=
"
text-center pb-5 font-weight-bold text-danger
"
style
=
{{
'
font-family
'
:
'
sans-serif
'
}}
>
Korea
University
<
/h3
>
<
div
className
=
"
d-flex justify-content-center
"
>
<
/div
>
<
form
>
<
div
style
=
{{
width
:
"
400px
"
}}
>
<
div
className
=
"
row justify-content-center
"
>
<
form
className
=
"
col-4 p-5 border bg-white
"
>
<
div
>
<
div
>
<
p
className
=
"
font-weight-bold h5 pb-3
"
>
로그인
<
/p
>
<
/div
>
<
div
className
=
"
form-group
"
>
<
div
className
=
"
form-group
"
>
<
label
for
=
"
inputName
"
>
이름입력
<
/label
>
<
label
for
=
"
inputName
"
>
이름입력
<
/label
>
<
input
className
=
"
form-control
"
onChange
=
{
handleChangename
}
placeholder
=
"
Name
"
/>
<
input
className
=
"
form-control
"
onChange
=
{
handleChangename
}
placeholder
=
"
Name
"
/>
...
@@ -73,7 +77,7 @@ function Home() {
...
@@ -73,7 +77,7 @@ function Home() {
<
/form
>
<
/form
>
<
/div
>
<
/div
>
<
/
>
<
/
div
>
)
)
}
}
...
...
src/Quiz.js
View file @
50fae079
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/img_question.png
'
import
logo
from
'
./img/img_question.png
'
const
QnA
=
[
let
localQnA
=
JSON
.
parse
(
localStorage
.
getItem
(
'
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
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
Solutions
=
[]
//빈 배열
console
.
log
(
localQnA
)
localQnA
.
map
((
x
)
=>
{
//A만 꺼내서 q에 추가
// Answers.push(0)
return
Solutions
.
push
(
x
.
A
)
})
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
)
=>
{
//delete x.A //A 삭제
return
{
...
x
,
N
:
index
+
1
}
//N 추가
})
function
handleQuestion
()
{
function
handleQuestion
()
{
setQuestion
({
...
QnA
[
question
.
N
]})
setQuestion
({
...
local
QnA
[
question
.
N
]
})
setSelected
(
""
)
//페이지 넘어가면 selected 초기화
setSelected
(
""
)
//페이지 넘어가면 selected 초기화
}
}
...
@@ -34,64 +50,65 @@ function Quiz() {
...
@@ -34,64 +50,65 @@ 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
)
=>
{
localQnA
[
0
].
Q
}
<
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
>
<
/div
>
<
p
className
=
"
h3 text-center text-danger
"
>
<
div
className
=
"
mt-2
"
>
<
Timer
<
form
>
initialTime
=
{
30010
}
{
question
.
Choose
.
map
((
a
,
index
)
=>
direction
=
"
backward
"
<
div
>
checkpoints
=
{[
<
input
type
=
"
radio
"
name
=
'
answer
'
id
=
{
index
}
value
=
{
a
}
onChange
=
{
handleChange
}
checked
=
{
selected
===
String
(
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> /
30
:
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
.
N
-
1
===
localQnA
.
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
=
{
30010
}
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
>
<
div
className
=
"
col
"
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
{
timeout
?
<
Redirect
to
=
'
/end
'
/>
:
''
}
{
timeout
?
<
Redirect
to
=
'
/end
'
/>
:
''
}
<
/
>
<
/
>
)
)
...
...
src/Quiz12.js
0 → 100644
View file @
50fae079
import
React
,
{
useState
,
useEffect
}
from
'
react
'
import
{
Link
,
Redirect
}
from
'
react-router-dom
'
;
import
Timer
from
'
react-compound-timer
'
;
// 타이머쓰기위해 import
import
logo
from
'
./img_question.png
'
let
localQnA
=
JSON
.
parse
(
localStorage
.
getItem
(
'
QnA
'
))
let
Answers
=
[]
function
Quiz
()
{
const
[
question
,
setQuestion
]
=
useState
({
...
localQnA
[
0
]
})
const
[
selected
,
setSelected
]
=
useState
(
""
)
//선택한 답을 보여줄 것
const
[
timeout
,
settimeout
]
=
useState
(
false
)
//for each 사용하기
let
Solutions
=
[]
//빈 배열
console
.
log
(
localQnA
)
localQnA
.
map
((
x
)
=>
{
//A만 꺼내서 q에 추가
// Answers.push(0)
return
Solutions
.
push
(
x
.
A
)
})
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
)
=>
{
//delete x.A //A 삭제
return
{
...
x
,
N
:
index
+
1
}
//N 추가
})
function
handleQuestion
()
{
setQuestion
({
...
localQnA
[
question
.
N
]
})
setSelected
(
""
)
//페이지 넘어가면 selected 초기화
}
let
handleChange
=
(
ev
)
=>
{
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
"
>
<
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
"
>
{
localQnA
[
0
].
Q
}
<
/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
===
localQnA
.
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
=
{
3000
}
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
>
{
timeout
?
<
Redirect
to
=
'
/end
'
/>
:
''
}
<
/
>
)
}
export
default
Quiz
;
src/index.js
View file @
50fae079
import
React
from
'
react
'
;
import
React
from
'
react
'
;
import
ReactDOM
from
'
react-dom
'
;
import
ReactDOM
from
'
react-dom
'
;
import
'
react-dom
'
import
'
react-dom
'
import
'
./index.css
'
;
//
import './index.css';
import
App
from
'
./App
'
;
import
App
from
'
./App
'
;
import
'
bootstrap/dist/css/bootstrap.css
'
;
import
*
as
serviceWorker
from
'
./serviceWorker
'
;
import
*
as
serviceWorker
from
'
./serviceWorker
'
;
import
'
bootstrap/dist/css/bootstrap.css
'
import
'
bootstrap/dist/css/bootstrap.css
'
import
'
bootstrap
'
import
'
bootstrap
'
...
...
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