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
148da01a
Commit
148da01a
authored
Aug 19, 2020
by
JeongYeonwoo
Browse files
LAST
parent
1bf18ff4
Changes
7
Show whitespace changes
Inline
Side-by-side
src/Admin.js
View file @
148da01a
import
React
,
{
useState
}
from
'
react
'
;
import
React
,
{
useState
,
useEffect
,
useRef
}
from
'
react
'
;
import
AdminQuiz
from
'
./AdminQuiz
'
import
AdminSetting
from
'
./AdminSetting
'
let
QuizBtn
=
[]
function
Admin
()
{
const
[
result
,
setresult
]
=
useState
(
''
)
const
[
QuizBtnCount
,
setQuizBtnCount
]
=
useState
(
4
)
const
indexRef
=
useRef
(
0
)
const
dbRef
=
useRef
([])
useEffect
(()
=>
{
if
(
JSON
.
parse
(
localStorage
.
getItem
(
'
QnA
'
)))
{
dbRef
.
current
=
JSON
.
parse
(
localStorage
.
getItem
(
'
QnA
'
))
}
},
[])
function
handleClickSetting
()
{
setresult
(
<
AdminSetting
/>
)
}
function
handleClickQuiz
(
e
)
{
(
JSON
.
parse
(
localStorage
.
getItem
(
'
QnA
'
))
===
null
)
?
setresult
(
<
AdminQuiz
QuizNum
=
{
e
.
target
.
id
}
data
=
{[{
Q
:
'
x
'
,
Choose
:
'
x
'
,
A
:
'
x
'
,
N
:
1
},{
Q
:
'
x
'
,
Choose
:
'
x
'
,
A
:
'
x
'
,
N
:
2
},{
Q
:
'
x
'
,
Choose
:
'
x
'
,
A
:
'
x
'
,
N
:
3
}]}
/>
)
: setresult
(
<AdminQuiz QuizNum={e.target.id} data={JSON.parse
(
localStorage.getItem
(
'QnA'
))
} /
>
)
indexRef
.
current
=
Number
(
e
.
target
.
id
)
-
1
// console.log(dbRef.current, indexRef.current)
if
(
dbRef
.
current
[
e
.
target
.
id
-
1
]){
setresult
(
<
AdminQuiz
quizNum
=
{
e
.
target
.
id
}
fn
=
{
handleClickSave
}
data
=
{
dbRef
.
current
[
e
.
target
.
id
-
1
]}
/>
)
/
/
설명
부탇드립니다
.
}
else
{
dbRef
.
current
[
e
.
target
.
id
-
1
]
=
{
'
Q
'
:
'
문제를 입력하세요
'
,
'
Choose
'
:[
'
0
'
,
'
0
'
,
'
0
'
,
'
0
'
],
'
A
'
:
'
정답을 입력하세요
'
}
setresult
(
<
AdminQuiz
quizNum
=
{
e
.
target
.
id
}
fn
=
{
handleClickSave
}
data
=
{
dbRef
.
current
[
e
.
target
.
id
-
1
]}
/>
)
}
}
function
handleClickAddQuiz
()
{
...
...
@@ -22,23 +37,28 @@ function Admin() {
<
button
type
=
'
button
'
className
=
'
btn btn-outline-primary
'
id
=
{
QuizBtnCount
}
onClick
=
{
handleClickQuiz
}
>
Quiz
{
QuizBtnCount
}
<
/button
>
)
setQuizBtnCount
(
QuizBtnCount
+
1
)
}
}
//퀴즈 추가버튼
function
handleClickSave
(
QnAadmin
)
{
dbRef
.
current
[
indexRef
.
current
]
=
QnAadmin
localStorage
.
setItem
(
'
QnA
'
,
JSON
.
stringify
(
dbRef
.
current
))
}
//설명 부탁드립니다.
return
(
<>
<
div
className
=
"
container-fluid
"
>
<
div
className
=
"
container-fluid
bg-light
"
>
<
div
className
=
"
row justify-content-md-center mt-5
"
>
<
div
className
=
"
col-2 text-center border py-5
"
>
<
div
className
=
"
mb-5
"
>
<
h
4
>
관리자페이지
<
/h
4
>
<
div
className
=
"
col-2 text-center border py-5
bg-white
"
>
<
div
className
=
"
py-3 border-top border-bottom
"
>
<
h
5
className
=
"
font-weight-bold
"
>
설정
<
/h
5
>
<
/div
>
<
div
>
<
button
type
=
"
button
"
className
=
"
btn btn-
outline-info mb-5
"
onClick
=
{
handleClickSetting
}
>
Setting
<
/button
>
<
div
className
=
"
border-bottom py-4
"
>
<
button
type
=
"
button
"
className
=
"
btn btn-
info
"
onClick
=
{
handleClickSetting
}
>
Setting
<
/button
>
<
/div
>
<
div
class
=
"
btn-group-vertical
"
>
<
button
type
=
"
button
"
className
=
"
btn btn-outline-primary
"
id
=
"
1
"
onClick
=
{
handleClickQuiz
}
>
Quiz
1
<
/button
>
<
button
type
=
"
button
"
className
=
"
btn btn-outline-primary
"
id
=
"
2
"
onClick
=
{
handleClickQuiz
}
>
Quiz
2
<
/button
>
<
button
type
=
"
button
"
className
=
"
btn btn-outline-primary
"
id
=
"
3
"
onClick
=
{
handleClickQuiz
}
>
Quiz
3
<
/button
>
<
div
class
Name
=
"
btn-group-vertical
py-4
"
>
<
button
type
=
"
button
"
className
=
"
btn btn-outline-primary
"
id
=
{
1
}
onClick
=
{
handleClickQuiz
}
>
Quiz
1
<
/button
>
<
button
type
=
"
button
"
className
=
"
btn btn-outline-primary
"
id
=
{
2
}
onClick
=
{
handleClickQuiz
}
>
Quiz
2
<
/button
>
<
button
type
=
"
button
"
className
=
"
btn btn-outline-primary
"
id
=
{
3
}
onClick
=
{
handleClickQuiz
}
>
Quiz
3
<
/button
>
{
QuizBtn
.
map
((
element
)
=>
element
)}
<
button
type
=
"
button
"
className
=
"
btn btn-outline-primary
"
onClick
=
{
handleClickAddQuiz
}
>+<
/button
>
...
...
src/AdminQuiz.js
View file @
148da01a
import
React
,
{
useState
}
from
'
react
'
;
import
React
,
{
useState
,
useEffect
}
from
'
react
'
;
let
list
=
[]
let
QnAadmins
=
[]
let
QnAadmin
=
{}
let
savechoose
=
{}
function
AdminQuiz
(
props
)
{
const
[
question
,
setQuestion
]
=
useState
(
''
)
const
[
question
,
setQuestion
]
=
useState
(
props
.
data
.
Q
)
// const [choose, setChoose] = useState(props.data.Choose)
const
[
choose
,
setChoose
]
=
useState
(
''
)
const
[
answer
,
setAnswer
]
=
useState
(
''
)
const
[
answer
,
setAnswer
]
=
useState
(
props
.
data
.
A
)
const
[
selectOption
,
setselectOption
]
=
useState
(
1
)
// const [c, setC] = useState(props.data.Choose)
console
.
log
(
props
.
data
.
Choose
)
console
.
log
(
choose
)
// console.log
// props.quizNum가 바뀔때마다 즉, Admin.js에서 퀴즈버튼을 바꿔누를때마다 useEffect가 발생하여 값을 업데이트 시켜줍니다.
useEffect
(()
=>
{
setQuestion
(
props
.
data
.
Q
)
// setC(props.data.Choose)
setAnswer
(
props
.
data
.
A
)
console
.
log
(
props
.
data
.
Choose
)
console
.
log
(
choose
)
// document.getElementById('3').value = c[2]
// document.getElementById('4').value = c[3]
// setcn(props.data.Choose)
// eslint-disable-next-line
},
[
props
.
quizNum
])
const
handleChangeQuestion
=
(
event
)
=>
{
QnAadmin
[
'
Q
'
]
=
event
.
target
.
value
setQuestion
(
event
.
target
.
value
)
}
const
handleChangeChoose
=
(
event
)
=>
{
savechoose
[
event
.
target
.
id
]
=
event
.
target
.
value
setChoose
(
event
.
target
.
value
)
// console.log(event.target.value)
}
const
handleChangeanswer
=
(
event
)
=>
{
QnAadmin
[
'
A
'
]
=
event
.
target
.
value
setAnswer
(
event
.
target
.
value
)
...
...
@@ -33,7 +53,7 @@ function AdminQuiz(props) {
<
input
type
=
"
radio
"
checked
=
{
false
}
name
=
"
answer
"
/>
<
/div
>
<
/div
>
<
input
type
=
"
text
"
class
=
"
form-control
"
id
=
{
String
(
selectOption
+
1
)}
placeholder
=
{
props
.
data
[
props
.
QuizNum
-
1
].
Choose
===
null
?
(
selectOption
+
1
)
+
'
번 보기를 입력하세요
'
:
props
.
data
[
props
.
QuizNum
-
1
].
Choose
[
selectOption
]
}
onChange
=
{
handleChangeChoose
}
/
>
<
input
type
=
"
text
"
class
=
"
form-control
"
id
=
{
String
(
selectOption
+
1
)}
placeholder
=
{(
selectOption
+
1
)
+
'
번 보기를 입력하세요
'
}
onChange
=
{
handleChangeChoose
}
/
>
<
/div
>
)
setselectOption
(
selectOption
+
1
)
...
...
@@ -51,28 +71,22 @@ function AdminQuiz(props) {
alert
(
'
정답이 입력되지 않았습니다.
'
)
}
else
{
// console.log(QnAadmin)
QnAadmin
[
'
Choose
'
]
=
Object
.
values
(
savechoose
)
QnAadmin
[
'
N
'
]
=
String
(
props
.
Q
uizNum
)
QnAadmins
.
push
(
QnAadmin
)
QnAadmin
[
'
N
'
]
=
String
(
props
.
q
uizNum
)
props
.
fn
(
QnAadmin
)
QnAadmin
=
{}
localStorage
.
setItem
(
'
QnA
'
,
JSON
.
stringify
(
QnAadmins
))
// console.log(QnAadmins)
alert
(
'
입력이 완료되었습니다.
'
)
}
}
// function handleChangeQuestion(){}
return
(
<
div
className
=
""
id
=
"
Quiz1
"
>
<
h2
className
=
"
p-3 border text-center
"
>
{
String
(
props
.
Q
uizNum
)}
번
문제만들기
<
/h2
>
<
h2
className
=
"
p-3 border text-center
bg-white
"
>
{
String
(
props
.
q
uizNum
)}
번
문제만들기
<
/h2
>
<
div
className
=
"
p-3 borber
"
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
1
.
문제
입력하기
<
/span
>
<
input
type
=
"
text
"
id
=
"
inputQuiz
"
className
=
"
form-control
"
onChange
=
{
handleChangeQuestion
}
placeholder
=
{
props
.
data
[
props
.
QuizNum
-
1
].
Q
===
'
x
'
?
'
문제를 입력하세요
'
:
props
.
data
[
props
.
QuizNum
-
1
].
Q
}
/
>
<
input
type
=
"
text
"
id
=
"
inputQuiz
"
className
=
"
form-control
"
value
=
{
question
}
onChange
=
{
handleChangeQuestion
}
placeholder
=
"
문제를 입력하세요
"
/>
<
/div
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
2
.
보기
입력하기
<
/span
>
...
...
@@ -83,16 +97,16 @@ function AdminQuiz(props) {
<
input
type
=
"
radio
"
checked
=
{
false
}
name
=
"
answer
"
/>
<
/div
>
<
/div
>
<
input
type
=
"
text
"
className
=
"
form-control
"
id
=
'
1
'
placeholder
=
{
props
.
data
[
props
.
QuizNum
-
1
].
Choose
===
'
x
'
?
'
1번 보기를 입력하세요
'
:
props
.
data
[
props
.
QuizNum
-
1
].
Choose
[
0
]}
onChange
=
{
handleChangeChoose
}
/
>
<
input
type
=
"
text
"
className
=
"
form-control
"
id
=
'
1
'
placeholder
=
"
1번 보기를 입력하세요
"
onChange
=
{
handleChangeChoose
}
/
>
<
/div
>
{
list
.
map
((
element
)
=>
element
)}
{
list
.
map
((
element
,
index
)
=>
element
)}
<
button
className
=
"
btn btn-outline-secondary btn-sm
"
onClick
=
{
addSelectOption
}
>+<
/button
>
<
/div
>
<
/div
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
정답
:
<
/span
>
<
input
type
=
"
text
"
value
=
{
answer
}
onChange
=
{
handleChangeanswer
}
placeholder
=
{
props
.
data
[
props
.
QuizNum
-
1
].
A
===
'
x
'
?
'
정답
를
입력하세요
'
:
props
.
data
[
props
.
QuizNum
-
1
].
A
}
/
>
<
input
type
=
"
text
"
value
=
{
answer
}
onChange
=
{
handleChangeanswer
}
placeholder
=
"
정답
을
입력하세요
"
/>
<
/div
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
...
...
src/AdminSetting.js
View file @
148da01a
...
...
@@ -47,20 +47,19 @@ function AdminSetting() {
}
return
(
<
div
className
=
"
col-8
"
>
<
h2
className
=
"
p-3 border text-center
"
>
관리자
설정
변경
창
<
/h2
>
<
div
className
=
"
p-3 border
"
>
<
div
className
=
""
>
<
h2
className
=
"
p-3 border text-center bg-white
"
>
관리자
설정
변경
창
<
/h2
>
<
div
className
=
"
p-3 border bg-white
"
>
<
h4
>
변경할
비밀번호를
입력하세요
<
/h4
>
<
input
type
=
"
text
"
onChange
=
{
handleChangePassword
}
placeholder
=
"
New Password
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
div
className
=
"
p-3 border
bg-white
"
>
<
h4
>
변경할
관리자
비밀번호를
입력하세요
<
/h4
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeAdminPassword
}
placeholder
=
"
New Admin Password
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
div
className
=
"
p-3 border
bg-white
"
>
<
h4
>
타이머를
설정하세요
(
초단위
)
<
/h4
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeTime
}
placeholder
=
"
Set Time
"
/>
...
...
src/Home.js
View file @
148da01a
...
...
@@ -4,12 +4,11 @@ import React, { useState } from 'react'
import
{
Redirect
}
from
'
react-router-dom
'
;
function
Home
()
{
let
info
=
[]
if
(
JSON
.
parse
(
localStorage
.
getItem
(
"
Set
"
))
===
null
){
info
=
[{
password
:
"
0319
"
,
AdminPassword
:
"
0001
"
,
Time
:
"
30010
"
}]
//수정.추가
let
info
=
[]
if
(
JSON
.
parse
(
localStorage
.
getItem
(
"
Set
"
))
===
null
)
{
info
=
[{
password
:
"
0319
"
,
AdminPassword
:
"
0001
"
,
Time
:
"
30010
"
}]
}
else
{
else
{
info
=
JSON
.
parse
(
localStorage
.
getItem
(
"
Set
"
))
}
//수정. 추가
...
...
@@ -61,7 +60,7 @@ function Home() {
{
done
?
<
Redirect
to
=
'
/quiz
'
/>
:
''
}
<
div
>
<
h3
className
=
"
text-center pb-5 font-weight-bold text-danger
"
style
=
{{
'
font-family
'
:
'
sans-serif
'
}}
>
Korea
University
<
/h3
>
<
h3
className
=
"
text-center pb-5 font-weight-bold text-danger
"
style
=
{{
'
font-family
'
:
'
sans-serif
'
}}
>
Korea
University
<
/h3
>
<
/div
>
<
div
className
=
"
row justify-content-center
"
>
...
...
src/Quiz.js
View file @
148da01a
...
...
@@ -6,18 +6,19 @@ import logo from './img_question.png'
let
localQnA
=
JSON
.
parse
(
localStorage
.
getItem
(
'
QnA
'
))
let
Answers
=
[]
function
Quiz
()
{
let
Time
=
0
if
(
JSON
.
parse
(
localStorage
.
getItem
(
"
Set
"
))
===
null
)
{
Time
=
30010
let
Time
=
0
if
(
JSON
.
parse
(
localStorage
.
getItem
(
"
Set
"
))
===
null
){
Time
=
30010
}
else
{
Time
=
Number
(
JSON
.
parse
(
localStorage
.
getItem
(
"
Set
"
))[
0
].
Time
)
}
//수정. 추가. 새로 설정한 시간으로 설정
else
{
Time
=
Number
(
JSON
.
parse
(
localStorage
.
getItem
(
"
Set
"
))[
0
].
Time
)
}
const
[
question
,
setQuestion
]
=
useState
({
...
localQnA
[
0
]
})
...
...
@@ -86,8 +87,7 @@ function Quiz() {
<
/div
>
<
p
className
=
"
h3 text-center text-danger
"
>
<
Timer
initialTime
=
{
Time
}
// 수정. 추가. 새로설정한 시간으로 설정. 하지만 새로고침해야 적용됨
// initialTime={Number(JSON.parse(localStorage.getItem("Set"))[0].Time)}
initialTime
=
{
Time
}
direction
=
"
backward
"
checkpoints
=
{[
{
...
...
src/compare.js
View file @
148da01a
import
React
from
'
react
'
;
// import './App.css';
import
Home
from
'
./Home
'
import
Quiz
from
'
./Quiz
'
import
End
from
'
./End
'
import
Admin
from
'
./Admin
'
import
React
,{
useState
}
from
'
react
'
import
{
BrowserRouter
as
Router
,
Link
,
Switch
,
Route
,
Redirect
}
from
'
react-router-dom
'
;
function
App
()
{
return
(
<
Router
>
<
div
className
=
"
container-fluid vh-100 bg-light
"
>
<
header
className
=
"
border-bottom
"
>
<
Link
to
=
"
/
"
>
<
button
className
=
"
ml-3 btn btn-light btn-lg font-weight-bold text-dark
"
>
Home
<
/button
>
<
/Link
>
<
/header
>
<
Switch
>
<
Route
exact
path
=
"
/
"
component
=
{
Home
}
/
>
let
Setadmins
=
[]
let
Setadmin
=
{}
function
AdminSetting
()
{
const
[
password
,
setPassword
]
=
useState
(
''
)
const
[
adminpassword
,
setAdminPassword
]
=
useState
(
''
)
const
[
time
,
setTime
]
=
useState
(
''
)
<
Route
path
=
"
/quiz
"
component
=
{
Quiz
}
/
>
const
handleChangePassword
=
(
event
)
=>
{
Setadmin
[
'
password
'
]
=
event
.
target
.
value
setPassword
(
event
.
target
.
value
)
<
Route
path
=
"
/end
"
component
=
{
End
}
/
>
}
const
handleChangeAdminPassword
=
(
event
)
=>
{
Setadmin
[
'
AdminPassword
'
]
=
event
.
target
.
value
setAdminPassword
(
event
.
target
.
value
)
}
const
handleChangeTime
=
(
event
)
=>
{
Setadmin
[
'
Time
'
]
=
event
.
target
.
value
setTime
(
event
.
target
.
value
)
}
<
Route
path
=
"
/admin
"
component
=
{
Admin
}
/
>
<
Redirect
path
=
"
/admin
"
to
=
"
/admin
"
/>
<
/Switch
>
function
handleClick
()
{
if
(
!
password
)
{
alert
(
'
비밀번호가 입력되지 않았습니다.
'
)
}
else
if
(
!
adminpassword
)
{
alert
(
'
관리자 비밀번호가 입력되지 않았습니다.
'
)
}
else
if
(
!
time
)
{
alert
(
'
제한시간이 입력되지 않았습니다.
'
)
//타임은 조건은 빼도 될 듯
}
else
{
Setadmins
.
push
(
Setadmin
)
localStorage
.
setItem
(
'
Set
'
,
JSON
.
stringify
(
Setadmins
))
console
.
log
(
Setadmins
)
alert
(
'
저장이 완료되었습니다.
'
)
console
.
log
(
Setadmin
)
}
}
return
(
<
div
className
=
""
>
<
h2
className
=
"
p-3 border text-center bg-white
"
>
관리자
설정
변경
창
<
/h2
>
<
div
className
=
"
p-3 border bg-white
"
>
<
h4
>
변경할
비밀번호를
입력하세요
<
/h4
>
<
input
type
=
"
text
"
onChange
=
{
handleChangePassword
}
placeholder
=
"
New Password
"
/>
<
/div
>
<
div
className
=
"
p-3 border bg-white
"
>
<
h4
>
변경할
관리자
비밀번호를
입력하세요
<
/h4
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeAdminPassword
}
placeholder
=
"
New Admin Password
"
/>
<
/div
>
<
div
className
=
"
p-3 border bg-white
"
>
<
h4
>
타이머를
설정하세요
(
초단위
)
<
/h4
>
<
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
>
<
/Router
>
)
}
export
default
App
;
\ No newline at end of file
export
default
AdminSetting
\ No newline at end of file
src/index.js
View file @
148da01a
import
React
from
'
react
'
;
import
ReactDOM
from
'
react-dom
'
;
import
'
react-dom
'
import
'
./index.css
'
;
import
App
from
'
./App
'
;
// import Quiz from './Quiz';
import
*
as
serviceWorker
from
'
./serviceWorker
'
;
...
...
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