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
fe8d40d8
Commit
fe8d40d8
authored
Aug 17, 2020
by
JeongYeonwoo
Browse files
adminsetting 적용
parent
909b2687
Changes
8
Show whitespace changes
Inline
Side-by-side
src/Admin.js
View file @
fe8d40d8
...
...
@@ -2,144 +2,34 @@ import React, { useState } from 'react';
import
AdminQuiz
from
'
./AdminQuiz
'
import
AdminSetting
from
'
./AdminSetting
'
// let QnAadmins = []
// let QnAadmin = {}
// let Setadmins = []
// let Setadmin = {}
let
QuizBtn
=
[]
let
QuizBtn
=
[]
function
Admin
()
{
const
[
result
,
setresult
]
=
useState
(
''
)
const
[
QuizBtnCount
,
setQuizBtnCount
]
=
useState
(
4
)
const
[
result
,
setresult
]
=
useState
(
''
)
const
[
QuizBtnCount
,
setQuizBtnCount
]
=
useState
(
4
)
function
handleClickSetting
(){
setresult
(
<
AdminSetting
/>
)
function
handleClickSetting
()
{
setresult
(
<
AdminSetting
/>
)
}
function
handleClickQuiz
(
)
{
setresult
(
<
AdminQuiz
/>
)
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'
))
}
/
>
)
}
function
handleClickAddQuiz
(){
function
handleClickAddQuiz
()
{
QuizBtn
.
push
(
<
button
type
=
'
button
'
className
=
'
btn btn-outline-primary
'
id
=
{
QuizBtnCount
}
onClick
=
{
handleClickQuiz
}
>
Quiz
{
QuizBtnCount
}
<
/button
>
)
setQuizBtnCount
(
QuizBtnCount
+
1
)
setQuizBtnCount
(
QuizBtnCount
+
1
)
}
// 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 [selectOption, setselectOption] = useState('')
// const handleChangeQuestion = (event) => {
// QnAadmin['Q'] = event.target.value
// setQuestion(event.target.value)
// }
// const handleChangechoose = (event) => {
// QnAadmin['Choose'] = event.target.value
// setChoose(event.target.value)
// }
// const handleChangeanswer = (event) => {
// QnAadmin['A'] = event.target.value
// setAnswer(event.target.value)
// }
// const handleChangePassword = (event) => {
// Setadmin['password'] = event.target.value
// setPassword(event.target.value)
// }
// const handleChangeAdminPassword = (event) => {
// Setadmin['AdminPassword'] = event.target.value
// setAdminPassword(event.target.value)
// }
// const handleChangeTime = (event) => {
// Setadmin['Time'] = event.target.value
// setTime(event.target.value)
// }
// function handleClickQnA() {
// if (!question) {
// alert('문제가 입력되지 않았습니다.')
// }
// else if (!choose) {
// alert('보기가 입력되지 않았습니다.')
// }
// else if (!answer) {
// alert('정답이 입력되지 않았습니다.')
// }
// else {
// console.log(QnAadmin)
// QnAadmins.push(QnAadmin)
// localStorage.setItem('QnA', JSON.stringify(QnAadmins))
// console.log(QnAadmins)
// alert('입력이 완료되었습니다.')
// }
// }
// function handleClicksetting() {
// 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)
// // setDoneset(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" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
// </div>
// }
// setselectOption(list)
// // }
// function handleClickQuiz() {
// let addQuiz = function () {
// return <a className="nav-link" id="Quiz4-tab" data-toggle="pill" href="#Quiz" role="tab" >Quiz4</a>
// }
// setaddQuiz(addQuiz)
// }
return
(
<>
<
div
className
=
"
container-fluid
"
>
<
div
className
=
"
row justify-content-md-center mt-5
"
>
<
div
className
=
"
col-2 text-center border
"
>
<
div
className
=
"
m
y
-5
"
>
<
div
className
=
"
row justify-content-md-center mt-5
"
>
<
div
className
=
"
col-2 text-center border
py-5
"
>
<
div
className
=
"
m
b
-5
"
>
<
h4
>
관리자페이지
<
/h4
>
<
/div
>
<
div
>
...
...
@@ -155,16 +45,8 @@ function Admin() {
<
/div
>
<
/div
>
<
div
className
=
"
col-8
"
>
<
div
className
=
"
tab-content
"
id
=
"
v-pills-tabContent
"
>
<
div
className
=
"
tab-pane fade show active
"
id
=
"
setting
"
role
=
"
tabpanel
"
>
<
div
className
=
"
row d-flex justify-content-center
"
>
<
/div
>
<
/div
>
<
div
className
=
"
col-8
"
>
{
result
}
<
/div
>
<
/div
>
<
/div
>
<
/div
>
...
...
src/AdminQuiz.js
View file @
fe8d40d8
import
React
,
{
useState
}
from
'
react
'
;
import
React
,
{
useState
}
from
'
react
'
;
let
list
=
[]
let
QnAadmins
=
[]
let
QnAadmin
=
{}
let
savechoose
=
{}
function
AdminQuiz
()
{
function
AdminQuiz
(
props
)
{
const
[
question
,
setQuestion
]
=
useState
(
''
)
const
[
choose
,
setChoose
]
=
useState
(
''
)
const
[
answer
,
setAnswer
]
=
useState
(
''
)
const
[
selectOption
,
setselectOption
]
=
useState
(
1
)
const
handleChangeQuestion
=
(
event
)
=>
{
QnAadmin
[
'
Q
'
]
=
event
.
target
.
value
setQuestion
(
event
.
target
.
value
)
}
const
handleChangeChoose
=
(
event
)
=>
{
QnAadmin
[
'
Choose
'
]
=
event
.
target
.
value
savechoose
[
event
.
target
.
id
]
=
event
.
target
.
value
setChoose
(
event
.
target
.
value
)
}
const
handleChangeanswer
=
(
event
)
=>
{
QnAadmin
[
'
A
'
]
=
event
.
target
.
value
setAnswer
(
event
.
target
.
value
)
}
function
addSelectOption
()
{
list
.
push
(
<
div
className
=
"
input-group
"
>
<
div
className
=
"
input-group-prepend
"
>
<
div
className
=
"
input-group-text
"
>
<
input
type
=
"
radio
"
id
=
{
selectOption
+
1
}
name
=
"
answer
"
/>
<
input
type
=
"
radio
"
checked
=
{
false
}
name
=
"
answer
"
/>
<
/div
>
<
/div
>
<
input
type
=
"
text
"
class
=
"
form-control
"
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangeChoose
}
/
>
<
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
}
/
>
<
/div
>
)
setselectOption
(
selectOption
+
1
)
...
...
@@ -61,11 +51,13 @@ function AdminQuiz() {
alert
(
'
정답이 입력되지 않았습니다.
'
)
}
else
{
console
.
log
(
QnAadmin
)
// console.log(QnAadmin)
QnAadmin
[
'
Choose
'
]
=
Object
.
values
(
savechoose
)
QnAadmin
[
'
N
'
]
=
String
(
props
.
QuizNum
)
QnAadmins
.
push
(
QnAadmin
)
QnAadmin
=
{}
QnAadmin
=
{}
localStorage
.
setItem
(
'
QnA
'
,
JSON
.
stringify
(
QnAadmins
))
console
.
log
(
QnAadmins
)
//
console.log(QnAadmins)
alert
(
'
입력이 완료되었습니다.
'
)
}
...
...
@@ -76,28 +68,31 @@ function AdminQuiz() {
return
(
<
div
className
=
""
id
=
"
Quiz1
"
>
<
h2
className
=
"
p-3 border text-center
"
>
문제만들기
<
/h2
>
<
h2
className
=
"
p-3 border text-center
"
>
{
String
(
props
.
QuizNum
)}
번
문제만들기
<
/h2
>
<
div
className
=
"
p-3 borber
"
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
1
.
<
/span
>
<
input
type
=
"
text
"
className
=
"
form-control
"
onChange
=
{
handleChangeQuestion
}
placeholder
=
"
문제를 입력하세요
"
/>
<
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
}
/
>
<
/div
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
2
.
보기
입력하기
<
/span
>
<
div
className
=
"
p-3
"
>
<
div
className
=
"
input-group
"
>
<
div
className
=
"
input-group-prepend
"
>
<
div
className
=
"
input-group-text
"
>
<
input
type
=
"
radio
"
id
=
{
selectOption
}
name
=
"
answer
"
/>
<
input
type
=
"
radio
"
checked
=
{
false
}
name
=
"
answer
"
/>
<
/div
>
<
/div
>
<
input
type
=
"
text
"
className
=
"
form-control
"
placeholder
=
"
보기를 입력하세요
"
onChange
=
{
handleChangeChoose
}
/
>
<
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
}
/
>
<
/div
>
{
list
.
map
((
element
)
=>
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
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
정답
을
입력하세요
"
/>
<
input
type
=
"
text
"
value
=
{
answer
}
onChange
=
{
handleChangeanswer
}
placeholder
=
{
props
.
data
[
props
.
QuizNum
-
1
].
A
===
'
x
'
?
'
정답
를
입력하세요
'
:
props
.
data
[
props
.
QuizNum
-
1
].
A
}
/
>
<
/div
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
...
...
src/AdminSetting.js
View file @
fe8d40d8
...
...
@@ -43,25 +43,25 @@ function AdminSetting() {
alert
(
'
저장이 완료되었습니다.
'
)
console
.
log
(
Setadmin
)
// setDoneset(true)
}
}
return
(
<
div
className
=
"
col-8
"
>
<
h1
className
=
"
p-3 border
"
>
관리자
설정
변경
창
<
/h1
>
<
h2
className
=
"
p-3 border text-center
"
>
관리자
설정
변경
창
<
/h2
>
<
div
className
=
"
p-3 border
"
>
<
h
2
>
변경할
비밀번호를
입력하세요
<
/h
2
>
<
h
4
>
변경할
비밀번호를
입력하세요
<
/h
4
>
<
input
type
=
"
text
"
onChange
=
{
handleChangePassword
}
placeholder
=
"
New Password
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h
2
>
변경할
관리자
비밀번호를
입력하세요
<
/h
2
>
<
h
4
>
변경할
관리자
비밀번호를
입력하세요
<
/h
4
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeAdminPassword
}
placeholder
=
"
New Admin Password
"
/>
<
/div
>
<
div
className
=
"
p-3 border
"
>
<
h
2
>
타이머를
설정하세요
(
초단위
)
<
/h
2
>
<
h
4
>
타이머를
설정하세요
(
초단위
)
<
/h
4
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeTime
}
placeholder
=
"
Set Time
"
/>
<
/div
>
...
...
src/App.js
View file @
fe8d40d8
import
React
from
'
react
'
;
import
'
./App.css
'
;
import
Home
from
'
./Home
'
import
Quiz
from
'
./Quiz
'
import
End
from
'
./End
'
...
...
@@ -10,13 +9,12 @@ import { BrowserRouter as Router, Link, Switch, Route, Redirect } from 'react-ro
function
App
()
{
return
(
<
Router
>
<
header
>
<
div
className
=
"
container-fluid vh-100 bg-light
"
>
<
header
className
=
"
border-bottom
"
>
<
Link
to
=
"
/
"
>
<
button
>
Calculus
<
/button
>
<
button
className
=
"
ml-3 btn btn-light btn-lg font-weight-bold text-dark
"
>
Home
<
/button
>
<
/Link
>
<
/header
>
<
hr
/>
<
div
>
<
Switch
>
<
Route
exact
path
=
"
/
"
component
=
{
Home
}
/
>
...
...
src/Home.js
View file @
fe8d40d8
// import bg from './img_study.jpg'
// import korea from './img_korea.jpg'
import
React
,
{
useState
}
from
'
react
'
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
"
}]
//수정.추가
}
else
{
info
=
JSON
.
parse
(
localStorage
.
getItem
(
"
Set
"
))
}
//수정. 추가
const
[
name
,
setName
]
=
useState
(
''
)
const
[
password
,
SetPassword
]
=
useState
(
''
)
const
[
done
,
setDone
]
=
useState
(
false
)
...
...
@@ -24,14 +33,14 @@ function Home() {
else
if
(
!
password
)
{
alert
(
'
비밀번호를 입력하세요
'
)
}
else
if
(
name
===
'
admin
'
&&
password
===
'
0001
'
)
{
else
if
(
name
===
'
admin
'
&&
password
===
info
[
0
].
AdminPassword
)
{
console
.
log
(
'
done
'
)
return
(
setAdmin
(
true
)
)
}
else
if
(
password
!==
'
0319
'
)
{
else
if
(
password
!==
info
[
0
].
password
)
{
alert
(
'
유효한 비밀번호를 입력하세요
'
)
}
else
{
...
...
@@ -47,38 +56,37 @@ function Home() {
return
(
<>
<
div
className
=
"
container-fluid bg-light p-5 h-100
"
>
{
admin
?
<
Redirect
to
=
'
/admin
'
/>
:
''
}
{
done
?
<
Redirect
to
=
'
/quiz
'
/>
:
''
}
<
h1
className
=
"
h-3 mb-5 mx-3 text-center bg-danger py-2
"
>
KOREA
UNIVERSITY
<
/h1
>
<
form
className
=
"
d-flex justify-content-center
"
>
<
div
className
=
"
table table-bordered
"
style
=
{{
width
:
"
400px
"
}}
>
<
div
>
<
h3
className
=
"
text-center pb-5 font-weight-bold text-danger
"
style
=
{{
'
font-family
'
:
'
sans-serif
'
}}
>
Korea
University
<
/h3
>
<
/div
>
<
label
for
=
"
inputId
"
className
=
"
d-flex justify-content-center
"
>
정보
입력
<
/label
>
<
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
"
>
<
label
for
=
"
inputName
"
>
이름입력
<
/label
>
<
input
className
=
"
form-control
"
onChange
=
{
handleChangename
}
placeholder
=
"
Name
"
/>
<
/div
>
<
div
className
=
"
form-group
"
>
<
label
for
=
"
inputPassword
"
>
비밀번호
<
/label
>
<
input
type
=
'
password
'
className
=
"
form-control
"
onChange
=
{
handleChangepassword
}
placeholder
=
"
Password
"
/>
<
/div
>
<
div
className
=
"
form-group text-center
"
>
<
label
for
=
"
inputName
"
>
이름입력
<
input
className
=
"
ml-3 inputBox
"
onChange
=
{
handleChangename
}
placeholder
=
"
Name
"
/>
<
/label
>
<
label
for
=
"
inputPassword
"
>
비밀번호
<
input
type
=
'
password
'
className
=
"
ml-3 inputBox
"
onChange
=
{
handleChangepassword
}
placeholder
=
"
Password
"
/>
<
/label
>
<
div
className
=
"
form-group for login
"
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
<
/label
>
<
button
className
=
"
mt-4 btn btn-dark
"
onClick
=
{
handleClick
}
>
Login
<
/button
>
<
/label
>
<
/div
>
<
/div
>
<
/div
>
<
/form
>
<
/
>
<
/div
>
<
/div
>
)
}
...
...
src/Quiz.js
View file @
fe8d40d8
import
React
,
{
useState
}
from
'
react
'
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
'
const
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
a
=
localStorage
.
getItem
(
'
QnA
'
)
let
b
=
JSON
.
parse
(
a
)
let
localQnA
=
JSON
.
parse
(
localStorage
.
getItem
(
'
QnA
'
))
// let q=[]
// let p =b.map((x)=>{
// q.push(x.A)
// })
// localStorage.setItem("userAnswer",JSON.stringify(q))
// let c = b.map((x,index) =>{
// delete x.A
// return {...x , N : index+1}
// })
// const [z, setz] = useState({
// ...c[0]
// })
let
Answers
=
[
0
,
0
,
0
]
localStorage
.
setItem
(
'
Answers
'
,
JSON
.
stringify
(
Answers
))
let
Solutions
=
[
4
,
3
,
2
]
localStorage
.
setItem
(
'
Solutions
'
,
JSON
.
stringify
(
Solutions
))
let
Answers
=
[]
function
Quiz
()
{
let
Time
=
0
if
(
JSON
.
parse
(
localStorage
.
getItem
(
"
Set
"
))
===
null
)
{
Time
=
30010
}
else
{
Time
=
Number
(
JSON
.
parse
(
localStorage
.
getItem
(
"
Set
"
))[
0
].
Time
)
}
//수정. 추가. 새로 설정한 시간으로 설정
const
[
question
,
setQuestion
]
=
useState
({
...
QnA
[
0
]
...
local
QnA
[
0
]
})
const
[
selected
,
setSelected
]
=
useState
(
""
)
//선택한 답을 보여줄 것
const
[
timeout
,
settimeout
]
=
useState
(
false
)
let
q
=
[]
//빈 배열
console
.
log
(
b
)
b
.
map
((
x
)
=>
{
//A만 꺼내서 q에 추가
q
.
push
(
x
.
A
)
})
console
.
log
(
q
,
b
)
localStorage
.
setItem
(
"
userAnswer
"
,
JSON
.
stringify
(
q
))
//그걸 로컬에 저장
let
c
=
b
.
map
((
x
,
index
)
=>
{
//delete x.A //A 삭제
return
{
...
x
,
N
:
index
+
1
}
//N 추가
})
console
.
log
(
c
)
//for each 사용하기
let
Solutions
=
[]
//빈 배열
console
.
log
(
localQnA
)
localQnA
.
forEach
((
element
)
=>
{
Solutions
.
push
(
Number
(
element
.
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
))
}
// eslint-disable-next-line
},
[])
function
handleQuestion
()
{
setQuestion
({
...
QnA
[
question
.
N
]
})
setQuestion
({
...
local
QnA
[
question
.
N
]
})
setSelected
(
""
)
//페이지 넘어가면 selected 초기화
}
...
...
@@ -84,7 +64,7 @@ function Quiz() {
<
/div
>
<
div
className
=
"
col-md-auto
"
>
<
div
className
=
"
h2 mt-2
"
>
{
question
.
Q
}
{
b
[
0
].
Q
}
{
question
.
Q
}
<
/div
>
<
div
className
=
"
mt-2
"
>
<
form
>
...
...
@@ -97,16 +77,17 @@ function Quiz() {
<
/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
)
<
div
className
=
"
text-center my-3
"
>
{(
question
.
N
-
1
===
local
QnA
.
length
-
1
)
?
<
Link
to
=
"
/end
"
>
<
button
className
=
"
btn btn-outline-success
"
onClick
=
{
localStorage
.
setItem
(
'
Solutions
'
,
JSON
.
stringify
(
Solutions
))}
>
제출
<
/button
>
<
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
=
{
3001000
}
initialTime
=
{
Time
}
// 수정. 추가. 새로설정한 시간으로 설정. 하지만 새로고침해야 적용됨
// initialTime={Number(JSON.parse(localStorage.getItem("Set"))[0].Time)}
direction
=
"
backward
"
checkpoints
=
{[
{
...
...
src/Quiz12.js
0 → 100644
View file @
fe8d40d8
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/compare.js
View file @
fe8d40d8
import
React
,
{
useState
}
from
'
react
'
;
// import { Link } from 'react-router-dom';
import
React
from
'
react
'
;
// import './App.css';
import
Home
from
'
./Home
'
import
Quiz
from
'
./Quiz
'
import
End
from
'
./End
'
import
Admin
from
'
./Admin
'
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
)
}
import
{
BrowserRouter
as
Router
,
Link
,
Switch
,
Route
,
Redirect
}
from
'
react-router-dom
'
;
function
App
()
{
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
>
<
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
}
/
>
<
/div
>
<
Route
path
=
"
/quiz
"
component
=
{
Quiz
}
/
>
<
div
className
=
"
p-3
"
>
<
span
className
=
"
font-weight-bold mr-2 h3
"
>
정답
:
<
/span
>
<
input
type
=
"
text
"
onChange
=
{
handleChangeanswer
}
placeholder
=
"
정답을 입력하세요
"
/>
<
/div
>
<
Route
path
=
"
/end
"
component
=
{
End
}
/
>
<
label
for
=
"
inputLogin
"
className
=
"
d-flex justify-content-center
"
>
<
button
className
=
"
mt-4 btn btn-dark
"
onClick
=
{
handleClick
}
>
작성완료
<
/button
>
<
/label
>
<
/div
>
<
Route
path
=
"
/admin
"
component
=
{
Admin
}
/
>
<
Redirect
path
=
"
/admin
"
to
=
"
/admin
"
/>
<
/Switch
>
<
/div
>
<
/div
>
<
/div
>
<
/
>
<
/Router
>
)
}
export
default
Admin
\ No newline at end of file
export
default
App
;
\ No newline at end of file
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