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
69aa33d0
Commit
69aa33d0
authored
Aug 10, 2020
by
김민수
Browse files
No commit message
No commit message
parent
47820769
Changes
5
Show whitespace changes
Inline
Side-by-side
src/End.js
View file @
69aa33d0
import
React
from
'
react
'
// import tr from './End-Image01.jpg';
// import './End.css'
import
'
bootstrap
'
import
'
bootstrap/dist/css/bootstrap.css
'
;
// import { Link } from 'react-router-dom';
import
tr
from
'
./img_end.jpg
'
;
function
End
()
{
let
a
=
[]
for
(
let
i
=
0
;
i
<
3
;
i
++
)
{
if
(
localStorage
.
getItem
(
'
답
'
+
(
i
+
1
))
===
localStorage
.
getItem
(
'
정답
'
+
(
i
+
1
)))
{
// import { Link } from 'react-router-dom';
a
[
i
]
=
1
function
End
()
{
let
scores
=
[]
let
score
=
0
const
answers
=
JSON
.
parse
(
localStorage
.
getItem
(
'
Answers
'
))
const
solutions
=
JSON
.
parse
(
localStorage
.
getItem
(
'
Solutions
'
))
for
(
let
i
=
0
;
i
<
answers
.
length
;
i
++
)
{
if
(
answers
[
i
]
===
solutions
[
i
])
{
localStorage
.
setItem
(
'
채점
'
+
(
i
+
1
),
'
O
'
)
scores
[
i
]
=
1
}
else
{
a
[
i
]
=
0
localStorage
.
setItem
(
'
채점
'
+
(
i
+
1
),
'
X
'
)
scores
[
i
]
=
0
}
score
+=
scores
[
i
]
}
return
(
<>
<
div
className
=
"
container
"
>
<
h2
style
=
{{
fontSize
:
'
40px
'
,
textAlign
:
'
center
'
}}
>
채점표
<
/h2
>
<
h2
>
채점표
<
/h2
>
<
table
className
=
"
table table-bordered
"
>
<
thead
>
<
tr
>
<
th
>
이름
<
/th
>
<
th
>
응시자
<
/th
>
<
th
>
{
localStorage
.
getItem
(
'
name
'
)}
<
/th
>
<
/tr
>
<
/thead
>
<
tbody
>
<
tr
>
<
td
>
1
번
<
/td
>
<
td
>
{
localStorage
.
getItem
(
'
채점1
'
)}
<
/td
>
{
scores
.
map
((
score
,
index
)
=>
{
<
/tr
>
<
tr
>
<
td
>
2
번
<
/td
>
<
td
>
{
localStorage
.
getItem
(
'
채점2
'
)}
<
/td
>
<
/tr
>
<
tr
>
<
td
>
3
번
<
/td
>
<
td
>
{
localStorage
.
getItem
(
'
채점3
'
)}
<
/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
>
})}
<
tr
>
<
td
>
총점
<
/td
>
<
td
>
{
a
[
0
]
+
a
[
1
]
+
a
[
2
]}
<
/td
>
<
td
>
{
score
}
점
<
/td
>
<
/tr
>
<
/tbody
>
<
/table
>
<
/div
>
{
/* <div className="card" >
<div className='card-body'>
<h1 className='card-title'>-채점표-</h1>
<h3 className='card-subtitle'>이름 : {localStorage.getItem('name')}</h3>
<p className='card-text'>Quiz 1 : {localStorage.getItem('채점1')}</p>
<p className='card-text'>Quiz 2 : {localStorage.getItem('채점2')}</p>
<p className='card-text'>Quiz 3 : {localStorage.getItem('채점3')}</p>
<p className='card-text'>Total Score : {a[0] + a[1] + a[2]}</p>
</div>
<div className="card2">
<div className='card-body2'>
<h3 className='card-title2'>결과</h3>
<p className='card-text2'>합격인지 아닌지 써주자</p>
</div>
</div> */
}
{
/* <div >
<img src={tr} alt="수고" class="card" className="Box-text-center" />
</div> */
}
<
/
>
)
}
export
default
End
;
src/Home.js
View file @
69aa33d0
...
...
@@ -46,8 +46,28 @@ function Home() {
KOREA
UNIVERSITY
<
/div
>
<
div
className
=
"
d-flex justify-content-center
"
>
<
table
className
=
"
table table-bordered dark-table
"
style
=
{{
width
:
"
400px
"
}}
>
<
thead
className
=
"
text-center
"
>
<
tr
style
=
{{
height
:
"
0 px
"
}}
>
정보
입력
<
/tr
>
<
/thead
>
<
tbody
className
=
"
text-center
"
>
<
tr
>
<
td
>
이름
입력
<
input
className
=
"
ml-2 inputBox
"
onChange
=
{
handleChangename
}
/></
td
>
<
/tr
>
<
tr
>
<
td
>
비밀번호
<
input
type
=
'
password
'
className
=
"
ml-2 inputBox
"
onChange
=
{
handleChangepassword
}
/></
td
>
<
/tr
>
<
tr
>
<
td
><
button
className
=
"
mt-4 btn btn-dark
"
onClick
=
{
checking
}
>
Login
<
/button></
td
>
<
/tr
>
<
/tbody
>
<
/table
>
<
/div
>
{
/* <div className="Box" style={{ border: 'solid', position: 'absolute', top: "300px", left: "68%"}} > */
}
<
div
className
=
"
Name
"
style
=
{{
boxShadow
:
'
5px 5px 5px 5px gray
'
,
border
:
'
solid
'
,
fontSize
:
'
30px
'
,
position
:
"
absolute
"
,
top
:
"
300px
"
,
left
:
"
68%
"
}}
>
{
/*
<div className="Name" style={{boxShadow: '5px 5px 5px 5px gray', border: 'solid', fontSize: '30px', position: "absolute", top: "300px", left: "68%" }}>
이름(Name)
<input style={{ padding: '5px', border: 'solid', borderRight: 'none', borderBottom: 'none', borderTop: 'none', marginLeft: '105px', inlineSize: '160px', blockSize: '40px', fontSize: '40px' }} onChange={handleChangename} />
</div>
...
...
@@ -57,7 +77,7 @@ function Home() {
</div>
<div className='Box2'>
<button style={{boxShadow: '5px 5px 5px 5px gray', marginLeft: '82%', marginTop: '10%', blockSize: '50px', inlineSize: '175px', fontSize: '35px' }} className="QuizStart" onClick={checking}>Start !</button>
<
/div
>
</div>
*/
}
{
/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */
}
{
/* </div> */
}
...
...
src/Quiz.js
View file @
69aa33d0
...
...
@@ -2,7 +2,8 @@ import React, { useState } from 'react'
import
{
Link
}
from
'
react-router-dom
'
;
import
Timer
from
'
react-compound-timer
'
;
// 타이머쓰기위해 import
import
logo
from
'
./img_question.png
'
import
fight
from
'
./img_quiz.png
'
const
QnA
=
[
{
Q
:
"
6 X 4 = ?
"
,
Choose
:
[
6
,
12
,
18
,
24
],
A
:
"
4
"
,
N
:
1
},
...
...
@@ -15,67 +16,59 @@ let Solutions = [4, 3, 2]
localStorage
.
setItem
(
'
Solutions
'
,
JSON
.
stringify
(
Solutions
))
function
Quiz
()
{
le
t
[
question
,
setQuestion
]
=
useState
({
cons
t
[
question
,
setQuestion
]
=
useState
({
...
QnA
[
0
],
i
:
0
,
page
:
0
,
})
let
[
selected
,
setSelected
]
=
useState
(
""
)
//선택한 답을 보여줄 것들
const
[
selected
,
setSelected
]
=
useState
(
""
)
//선택한 답을 보여줄 것들
// const [checked, setChecked] = useState(false)
function
handleQuestion
()
{
setQuestion
({
...
QnA
[
question
.
i
+
1
],
i
:
question
.
i
+
1
,
page
:
question
.
page
+
1
})
// setChecked(false)
}
let
handleChange
=
(
ev
)
=>
{
ev
.
preventDefault
()
//새로고침 안되도록
//
ev.preventDefault() //새로고침 안되도록
setSelected
(
ev
.
target
.
value
)
//selected값 변경
Answers
[
question
.
N
-
1
]
=
Number
(
ev
.
target
.
id
)
+
1
localStorage
.
setItem
(
'
Answers
'
,
JSON
.
stringify
(
Answers
))
}
return
(
<>
<
div
style
=
{{
fontSize
:
'
80px
'
,
marginBottom
:
'
100px
'
,
textAlign
:
"
center
"
,
backgroundColor
:
'
red
'
}}
>
미적분학
퀴즈
<
/div
>
<
img
src
=
{
fight
}
style
=
{{
position
:
"
absolute
"
,
left
:
"
1050px
"
,
top
:
'
200px
'
}}
alt
=
"
lion
"
/>
<
div
className
=
"
Quiz
"
>
<
h1
><
img
src
=
{
logo
}
style
=
{{
marginLeft
:
"
450px
"
}}
width
=
'
75
'
height
=
'
75
'
alt
=
'
question
'
/>
<
span
style
=
{{
fontSize
:
"
75px
"
,
marginLeft
:
"
30px
"
}}
>
{
question
.
Q
}
<
/span></
h1
>
{
/* <div style={{ marginTop: "30px", marginBottom: "30px", marginLeft:'450px', fontSize:'40px' }}>정답을 선택하세요</div> */
}
<
div
>
<
div
className
=
"
container-fluid position-absolute
"
>
<
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
"
>
{
question
.
Q
}
<
/div
>
<
div
className
=
"
mt-2
"
>
<
form
>
{
question
.
Choose
.
map
((
a
,
index
)
=>
<
div
key
=
{
index
}
>
<
input
type
=
"
radio
"
name
=
'
answer
'
id
=
{
index
}
value
=
{
a
}
onClick
=
{
handleChange
}
style
=
{{
marginLeft
:
"
475px
"
,
width
:
"
25px
"
,
height
:
"
25px
"
}}
/
>
<
label
htmlFor
=
{
a
}
style
=
{{
fontSize
:
"
40px
"
,
marginLeft
:
"
22px
"
}
}
>
{
a
}
<
/label
>
<
input
type
=
"
radio
"
name
=
'
answer
'
id
=
{
index
}
value
=
{
a
}
onClick
=
{
handleChange
}
/
>
<
label
className
=
"
font-weight-bold
"
htmlFor
=
{
a
}
>
{
a
}
<
/label
>
<
/div
>
)}
<
input
hidden
type
=
"
submit
"
value
=
"
확인
"
/>
{
/*버튼 숨김*/
}
<
/form
>
<
p
style
=
{{
fontSize
:
"
40px
"
,
marginLeft
:
"
480px
"
}}
>
Answer
:
<
span
style
=
{{
color
:
"
green
"
,
fontWeight
:
"
bold
"
,
fontSize
:
"
90px
"
,
marginLeft
:
"
30px
"
}}
>
{
selected
}
<
/span> {/
*
선택한
값
보여줌
*
/}<span style={{ marginLeft: "50px" }}
>
{(
question
.
page
===
QnA
.
length
-
1
)
?
<
Link
to
=
"
/end
"
>
제출
<
/Link
>
:
<
button
type
=
"
button
"
onClick
=
{
handleQuestion
}
style
=
{{
width
:
"
85px
"
,
height
:
"
40px
"
}}
>
다음
<
/button
>
}
<
/span
>
<
/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
"
>
제출
<
/button
>
<
/Link
>
:
<
button
type
=
"
button
"
className
=
"
btn btn-outline-dark
"
onClick
=
{
handleQuestion
}
>
다음
<
/button
>
}
<
/div
>
{
/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.handleQuestion발생 */
}
{
/* {(question.page === QnA.length - 1)
? <Link to="/end">제출</Link>
: <button type="button" onClick={handleQuestion} >다음</button>
} */
}
{
/* <input onKeyPress="this.enterkey()"/> */
}
<
p
style
=
{{
textAlign
:
"
center
"
,
fontSize
:
"
30px
"
,
color
:
"
crimson
"
}}
>
<
p
className
=
"
h3 text-center text-danger
"
>
<
Timer
initialTime
=
{
3600000
}
direction
=
"
backward
"
...
...
@@ -93,9 +86,12 @@ function Quiz() {
)}
<
/Timer> {/
*
npm
i
react
-
compound
-
timer
*
/
}
<
/p
>
<
/div
>
<
/
>
<
/div
>
<
div
className
=
"
col
"
>
<
/div
>
<
/div
>
<
/div
>
)
...
...
src/index.js
View file @
69aa33d0
...
...
@@ -4,6 +4,7 @@ import './index.css';
import
App
from
'
./App
'
;
// import Quiz from './Quiz';
import
*
as
serviceWorker
from
'
./serviceWorker
'
;
import
'
bootstrap/dist/css/bootstrap.css
'
ReactDOM
.
render
(
<
React
.
StrictMode
>
...
...
src/preQuiz.js
View file @
69aa33d0
import
React
from
'
react
'
;
// import logo from './logo.svg';
import
'
./Quiz.css
'
;
import
React
,
{
useState
}
from
'
react
'
import
{
Link
}
from
'
react-router-dom
'
;
import
Timer
from
'
react-compound-timer
'
;
// 타이머쓰기위해 import
import
logo
from
'
./img/img_question.png
'
import
'
./Quiz.css
'
const
question
=
[
{
Q
:
"
6 X 4 ?
"
,
Choose
:
[
6
,
12
,
18
,
24
],
A
:
"
"
},
{
Q
:
"
3 + 3 ?
"
,
Choose
:
[
2
,
4
,
6
,
8
],
A
:
"
"
},
{
Q
:
"
3 - 1 ?
"
,
Choose
:
[
1
,
2
,
3
,
4
],
A
:
"
"
}
const
QnA
=
[
{
Q
:
"
6 X 4
=
?
"
,
Choose
:
[
6
,
12
,
18
,
24
],
A
:
"
4
"
,
N
:
1
},
{
Q
:
"
3 + 3
=
?
"
,
Choose
:
[
2
,
4
,
6
,
8
],
A
:
"
3
"
,
N
:
2
},
{
Q
:
"
3 - 1
=
?
"
,
Choose
:
[
1
,
2
,
3
,
4
],
A
:
"
2
"
,
N
:
3
}
]
class
Quiz
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
)
// this.setAnswer = this.setAnswer.bind(this)
this
.
setQuestion
=
this
.
setQuestion
.
bind
(
this
)
this
.
ShowQuiz
=
this
.
ShowQuiz
.
bind
(
this
)
this
.
answerbox
=
this
.
answerbox
.
bind
(
this
)
this
.
state
=
{
...
question
[
0
],
let
Answers
=
[]
let
Solutions
=
[
4
,
3
,
2
]
localStorage
.
setItem
(
'
Solutions
'
,
JSON
.
stringify
(
Solutions
))
function
Quiz
()
{
const
[
question
,
setQuestion
]
=
useState
({
...
QnA
[
0
],
i
:
0
,
page
:
0
,
}
// this.textInput = React.createRef()
})
const
[
selected
,
setSelected
]
=
useState
(
""
)
//선택한 답을 보여줄 것들
// const [checked, setChecked] = useState(false)
function
handleQuestion
()
{
setQuestion
({
...
QnA
[
question
.
i
+
1
],
i
:
question
.
i
+
1
,
page
:
question
.
page
+
1
})
// setChecked(false)
}
ShowQuiz
()
{
this
.
setState
({
page
:
1
})
}
setQuestion
()
{
//값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj-
this
.
setState
({
...
question
[
this
.
state
.
i
+
1
],
i
:
this
.
state
.
i
+
1
})
}
//answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장
answerbox
()
{
let
answers
=
document
.
getElementsByName
(
'
answer
'
);
let
count
=
answers
.
length
// var checked_index = -1;
var
checked_value
=
''
;
let
handleChange
=
(
ev
)
=>
{
// ev.preventDefault() //새로고침 안되도록
setSelected
(
ev
.
target
.
value
)
//selected값 변경
Answers
[
question
.
N
-
1
]
=
Number
(
ev
.
target
.
id
)
+
1
for
(
var
i
=
0
;
i
<
count
;
i
++
)
{
if
(
answers
[
i
].
checked
)
{
// checked_index = i;
checked_value
=
answers
[
i
].
value
;
localStorage
.
setItem
(
'
answer-
'
+
i
,
checked_value
)
localStorage
.
setItem
(
'
Answers
'
,
JSON
.
stringify
(
Answers
))
}
}
// alert('선택된 항목 인덱스: ' + checked_index + '\n선택된 항목 값: ' + checked_value);
// if (document.getElementsByName("answer")[i].checked === true) {
// alert(document.getElementsByName("answer")[i].value);
// }
}
// setAnswer(e) {
// question[this.state.i]["A"] = e.target.value
// this.setState({ v: e.target.value })
// console.log(this.state)
// console.log(question)
// }
render
()
{
if
(
this
.
state
.
page
===
1
)
{
this
.
answerbox
()
if
(
this
.
state
.
i
===
question
.
length
)
{
return
(
<
div
>
<
h2
>
수고하셨습니다
!<
/h2
>
<
div
className
=
"
container-fluid position-absolute
"
>
<
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
>
)
}
else
{
return
(
<
div
className
=
"
Quiz
"
>
<
h2
>
Q
:{
this
.
state
.
Q
}
<
/h2
>
{
this
.
state
.
Choose
.
map
((
a
)
=>
<
div
>
<
input
type
=
"
radio
"
name
=
'
answer
'
id
=
{
a
}
value
=
{
a
}
/*ref={this.textInput}*/
/>
<
label
for
=
{
a
}
>
{
a
}
<
/label
>
<
/div>
)
}
<
div
className
=
"
App
"
>
정답을
입력하세요
<
div
className
=
"
col-md-auto
"
>
<
div
className
=
"
h2 mt-2
"
>
{
question
.
Q
}
<
/div
>
{
/* <div>
<input type="text" value={this.state.v} name="A" onChange={this.setAnswer} />
</div> */
}
<
button
type
=
"
button
"
onClick
=
{
setTimeout
(
this
.
setQuestion
,
2000
)}
>
다음
<
/button
>
<
div
className
=
"
mt-2
"
>
<
form
>
{
question
.
Choose
.
map
((
a
,
index
)
=>
<
div
key
=
{
index
}
>
<
input
type
=
"
radio
"
name
=
'
answer
'
id
=
{
index
}
value
=
{
a
}
onClick
=
{
handleChange
}
/
>
<
label
className
=
"
font-weight-bold
"
htmlFor
=
{
a
}
>
{
a
}
<
/label
>
<
/div
>
)
)}
<
input
hidden
type
=
"
submit
"
value
=
"
확인
"
/>
{
/*버튼 숨김*/
}
<
/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
"
>
제출
<
/button
>
<
/Link
>
:
<
button
type
=
"
button
"
className
=
"
btn btn-outline-dark
"
onClick
=
{
handleQuestion
}
>
다음
<
/button
>
}
<
/div
>
<
p
className
=
"
h3 text-center text-danger
"
>
<
Timer
initialTime
=
{
3600000
}
direction
=
"
backward
"
checkpoints
=
{[
{
time
:
0
,
callback
:
<
Link
to
=
"
/end
"
>
제출
<
/Link
>
// history.go(1)
}
else
{
return
(
<
div
className
=
"
Box
"
>
<
div
className
=
"
Main
"
>
<
h1
>
Calculus
<
/h1
>
]}
>
{()
=>
(
<>
<
Timer
.
Minutes
/>
:
<
Timer
.
Seconds
><
/Timer.Seconds> /
60
:
00
<
/
>
)}
<
/Timer> {/
*
npm
i
react
-
compound
-
timer
*
/
}
<
/p
>
<
/div
>
<
/div
>
<
div
className
=
"
col
"
>
<
/div
>
<
div
className
=
"
Name
"
>
이름을
입력하세요
<
input
onChange
=
{(
event
)
=>
{
console
.
log
(
event
.
target
.
value
)
}}
/
>
<
/div
>
<
button
className
=
"
QuizStart
"
onClick
=
{
this
.
ShowQuiz
}
>
Quiz
Start
!<
/button
>
<
/div
>
)
}
}
}
export
default
Quiz
;
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