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
1195959c
Commit
1195959c
authored
Aug 10, 2020
by
김민수
Browse files
0810
parent
04e75b30
Changes
5
Hide whitespace changes
Inline
Side-by-side
src/Admin.js
View file @
1195959c
import
React
,
{
useState
}
from
'
react
'
;
import
React
,
{
useState
}
from
'
react
'
;
import
{
Container
,
Nav
}
from
'
react-bootstrap
'
;
// import { Link } from 'react-router-dom';
// import { Link } from 'react-router-dom';
function
Admin
()
{
function
Admin
()
{
...
@@ -14,6 +14,11 @@ function Admin() {
...
@@ -14,6 +14,11 @@ function Admin() {
const
[
question
,
setQuestion
]
=
useState
(
''
)
const
[
question
,
setQuestion
]
=
useState
(
''
)
const
[
choose
,
setChoose
]
=
useState
(
''
)
const
[
choose
,
setChoose
]
=
useState
(
''
)
const
[
answer
,
setAnswer
]
=
useState
(
''
)
const
[
answer
,
setAnswer
]
=
useState
(
''
)
const
[
password
,
setPassword
]
=
useState
(
''
)
const
[
adminpassword
,
setAdminPassword
]
=
useState
(
''
)
const
[
time
,
setTime
]
=
useState
(
''
)
const
[
addQuiz
,
setaddQuiz
]
=
useState
(
''
)
const
[
done
,
setDone
]
=
useState
(
false
)
const
[
done
,
setDone
]
=
useState
(
false
)
const
handleChangenumber
=
(
event
)
=>
{
const
handleChangenumber
=
(
event
)
=>
{
...
@@ -28,6 +33,16 @@ function Admin() {
...
@@ -28,6 +33,16 @@ function Admin() {
const
handleChangeanswer
=
(
event
)
=>
{
const
handleChangeanswer
=
(
event
)
=>
{
setAnswer
(
event
.
target
.
value
)
setAnswer
(
event
.
target
.
value
)
}
}
const
handleChangePassword
=
(
event
)
=>
{
setPassword
(
event
.
target
.
value
)
}
const
handleChangeAdminPassword
=
(
event
)
=>
{
setAdminPassword
(
event
.
target
.
value
)
}
const
handleChangeTime
=
(
event
)
=>
{
setTime
(
event
.
target
.
value
)
}
function
handleClick
()
{
function
handleClick
()
{
...
@@ -36,68 +51,202 @@ function Admin() {
...
@@ -36,68 +51,202 @@ function Admin() {
localStorage
.
setItem
(
'
Q
'
,
question
)
localStorage
.
setItem
(
'
Q
'
,
question
)
localStorage
.
setItem
(
'
Choose
'
,
choose
)
localStorage
.
setItem
(
'
Choose
'
,
choose
)
localStorage
.
setItem
(
'
Answer
'
,
answer
)
localStorage
.
setItem
(
'
Answer
'
,
answer
)
localStorage
.
setItem
(
'
P
'
,
password
)
localStorage
.
setItem
(
'
AP
'
,
adminpassword
)
localStorage
.
setItem
(
'
T
'
,
time
*
1000
)
setDone
(
true
)
setDone
(
true
)
}
}
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
>
}
setaddQuiz
(
addQuiz
)
}
return
(
return
(
<>
<>
{
done
?
alert
(
'
모두 입력되었습니다.
'
)
:
''
}
{
done
?
alert
(
'
모두 입력되었습니다.
'
)
:
''
}
<
div
className
=
"
row
"
>
<
div
className
=
"
col-3
"
>
<
div
className
=
"
container-fluid
"
>
<
div
className
=
"
navbar-header p-3
"
>
<
a
className
=
"
navbar-brand
"
href
=
"
/admin
"
>
관리자
페이지
<
/a
>
<
/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
>
{
addQuiz
}
<
button
class
=
"
btn btn-danger navbar-btn
"
onClick
=
{
handleClickQuiz
}
>
Quiz
추가
<
/button
>
<
/ul
>
<
/li
>
<
Nav
<
/div
>
activeKey
=
"
/home
"
<
/div
>
>
<
/div
>
<
Nav
.
Item
>
<
div
className
=
"
col-9
"
>
<
Nav
.
Link
href
=
"
/AdminSetting
"
>
Setting
<
/Nav.Link
>
<
div
className
=
"
tab-content
"
id
=
"
v-pills-tabContent
"
>
<
/Nav.Item
>
<
div
className
=
"
tab-pane fade show active
"
id
=
"
v-pills-home
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
v-pills-home-tab
"
>
<
Nav
.
Item
>
<
div
>
<
Nav
.
Link
eventKey
=
"
link-1
"
>
Link
<
/Nav.Link
>
<
div
className
=
"
container
"
>
<
/Nav.Item
>
<
div
className
=
"
row d-flex justify-content-center
"
>
<
Nav
.
Item
>
<
div
className
=
"
col-8
"
>
<
Nav
.
Link
eventKey
=
"
link-2
"
>
Link
<
/Nav.Link
>
<
/Nav.Item
>
<
/Nav
>
<
div
>
<
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
=
"
Number
"
/>
<
/div
>
<
h1
className
=
"
p-3 border
"
>
관리자
설정
변경
창
<
/h1
>
<
div
className
=
"
p-3 border
"
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
문제
를
입력하세요
<
/h2
>
<
h2
>
변경할
비밀번호
를
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChange
question
}
placeholder
=
"
Question
"
/>
<
input
type
=
"
text
"
onChange
=
{
handleChange
Password
}
placeholder
=
"
New Password
"
/>
<
/div
>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
보기를
입력하세요
(
배열형태
)
<
/h2
>
<
h2
>
변경할
관리자
비밀번호를
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangechoose
}
placeholder
=
"
Choose
"
/>
<
input
type
=
"
text
"
onChange
=
{
handleChangeAdminPassword
}
placeholder
=
"
New Admin Password
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
타이머를
설정하세요
(
초단위
)
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeTime
}
placeholder
=
"
Set Time
"
/>
<
/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
>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
답을
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
Answer
"
/>
<
/div
>
<
div
className
=
"
tab-pane fade
"
id
=
"
v-pills-profile
"
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
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
문제를
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangequestion
}
placeholder
=
"
Question
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
보기를
입력하세요
(
배열형태
)
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangechoose
}
placeholder
=
"
Choose
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
답을
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
Answer
"
/>
<
/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
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
<
/div
>
<
button
className
=
"
mt-4 btn btn-dark
"
onClick
=
{
handleClick
}
>
작성완료
<
/button
>
<
div
className
=
"
tab-pane fade
"
id
=
"
v-pills-messages
"
role
=
"
tabpanel
"
aria
-
labelledby
=
"
v-pills-messages-tab
"
>
<
/label
>
<
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
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
문제를
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangequestion
}
placeholder
=
"
Question
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
보기를
입력하세요
(
배열형태
)
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangechoose
}
placeholder
=
"
Choose
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
답을
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
Answer
"
/>
<
/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
>
<
/div
>
<
div
className
=
"
tab-pane fade
"
id
=
"
v-pills-settings
"
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
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
문제를
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangequestion
}
placeholder
=
"
Question
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
보기를
입력하세요
(
배열형태
)
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangechoose
}
placeholder
=
"
Choose
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h2
>
답을
입력하세요
<
/h2
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
Answer
"
/>
<
/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
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
{
/* <div className="p-3 border">
<h2>패스워드를 입력하세요</h2>
<input type="text" onChange={handleChangeanswer} placeholder="Answer" />
</div> */
}
<
/div
>
<
/div
>
<
/
>
<
/
>
)
)
...
...
src/App.js
View file @
1195959c
...
@@ -4,7 +4,6 @@ import Home from './Home'
...
@@ -4,7 +4,6 @@ import Home from './Home'
import
Quiz
from
'
./Quiz
'
import
Quiz
from
'
./Quiz
'
import
End
from
'
./End
'
import
End
from
'
./End
'
import
Admin
from
'
./Admin
'
import
Admin
from
'
./Admin
'
import
AdminSetting
from
'
./AdminSetting
'
import
{
BrowserRouter
as
Router
,
Link
,
Switch
,
Route
,
Redirect
}
from
'
react-router-dom
'
;
import
{
BrowserRouter
as
Router
,
Link
,
Switch
,
Route
,
Redirect
}
from
'
react-router-dom
'
;
...
@@ -27,8 +26,6 @@ function App() {
...
@@ -27,8 +26,6 @@ function App() {
<
Route
path
=
"
/admin
"
component
=
{
Admin
}
/
>
<
Route
path
=
"
/admin
"
component
=
{
Admin
}
/
>
<
Route
path
=
"
/adminSetting
"
component
=
{
AdminSetting
}
/
>
<
Redirect
path
=
"
/admin
"
to
=
"
/admin
"
/>
<
Redirect
path
=
"
/admin
"
to
=
"
/admin
"
/>
<
/Switch
>
<
/Switch
>
<
/div
>
<
/div
>
...
...
src/End.js
View file @
1195959c
...
@@ -5,6 +5,7 @@ import React from 'react'
...
@@ -5,6 +5,7 @@ import React from 'react'
// import { Link } from 'react-router-dom';
// import { Link } from 'react-router-dom';
function
End
()
{
function
End
()
{
let
result
=
''
let
scores
=
[]
let
scores
=
[]
let
score
=
0
let
score
=
0
const
answers
=
JSON
.
parse
(
localStorage
.
getItem
(
'
Answers
'
))
const
answers
=
JSON
.
parse
(
localStorage
.
getItem
(
'
Answers
'
))
...
@@ -16,11 +17,17 @@ function End() {
...
@@ -16,11 +17,17 @@ function End() {
scores
[
i
]
=
1
scores
[
i
]
=
1
}
}
else
if
(
answers
[
i
]
===
0
)
{
scores
[
i
]
=
-
1
}
else
{
else
{
scores
[
i
]
=
0
scores
[
i
]
=
0
}
}
score
+=
scores
[
i
]
score
+=
scores
[
i
]
if
(
score
<
0
){
score
=
0
}
}
}
return
(
return
(
...
@@ -36,8 +43,18 @@ function End() {
...
@@ -36,8 +43,18 @@ function End() {
<
/thead
>
<
/thead
>
<
tbody
>
<
tbody
>
{
scores
.
map
((
score
,
index
)
=>
{
{
scores
.
map
((
score
,
index
)
=>
{
if
(
score
===
-
1
)
{
result
=
<
tr
><
td
>
Quiz
{
index
+
1
}
<
/td> <td> 정답이 입력되지 않았습니다. </
td
><
/tr
>
}
else
if
(
score
===
1
)
{
result
=
<
tr
><
td
>
Quiz
{
index
+
1
}
<
/td> <td> O </
td
><
/tr
>
}
else
{
result
=
<
tr
><
td
>
Quiz
{
index
+
1
}
<
/td> <td> X</
td
><
/tr
>
}
return
(
score
===
1
)
?
<
tr
><
td
>
Quiz
{
index
+
1
}
<
/td> <td> O </
td
><
/tr> : <tr><td>Quiz {index + 1}</
td
>
<
td
>
X
<
/td></
tr
>
return
result
})}
})}
<
tr
>
<
tr
>
<
td
>
총점
<
/td
>
<
td
>
총점
<
/td
>
...
@@ -48,7 +65,7 @@ function End() {
...
@@ -48,7 +65,7 @@ function End() {
<
/div
>
<
/div
>
<
/
>
<
/
>
...
...
src/Quiz.js
View file @
1195959c
...
@@ -6,9 +6,9 @@ import logo from './img_question.png'
...
@@ -6,9 +6,9 @@ import logo from './img_question.png'
const
QnA
=
[
const
QnA
=
[
{
Q
:
"
6 X 4 = ?
"
,
Choose
:
[
6
,
12
,
18
,
24
],
A
:
"
4
"
,
N
:
1
},
{
Q
:
"
6 X 4 = ?
"
,
Choose
:
[
6
,
12
,
18
,
24
],
N
:
1
},
{
Q
:
"
3 + 3 = ?
"
,
Choose
:
[
2
,
4
,
6
,
8
],
A
:
"
3
"
,
N
:
2
},
{
Q
:
"
3 + 3 = ?
"
,
Choose
:
[
2
,
4
,
6
,
8
],
N
:
2
},
{
Q
:
"
3 - 1 = ?
"
,
Choose
:
[
1
,
2
,
3
,
4
],
A
:
"
2
"
,
N
:
3
}
{
Q
:
"
3 - 1 = ?
"
,
Choose
:
[
1
,
2
,
3
,
4
],
N
:
3
}
]
]
let
Answers
=
[
0
,
0
,
0
]
let
Answers
=
[
0
,
0
,
0
]
...
...
src/index.js
View file @
1195959c
...
@@ -6,6 +6,7 @@ import App from './App';
...
@@ -6,6 +6,7 @@ import App from './App';
// import Quiz from './Quiz';
// import Quiz from './Quiz';
import
*
as
serviceWorker
from
'
./serviceWorker
'
;
import
*
as
serviceWorker
from
'
./serviceWorker
'
;
import
'
bootstrap/dist/css/bootstrap.css
'
import
'
bootstrap/dist/css/bootstrap.css
'
import
'
bootstrap
'
ReactDOM
.
render
(
ReactDOM
.
render
(
<
React
.
StrictMode
>
<
React
.
StrictMode
>
...
...
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