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
9bb2e131
Commit
9bb2e131
authored
Aug 03, 2020
by
김민수
Browse files
No commit message
No commit message
parent
32a6d94b
Changes
7
Hide whitespace changes
Inline
Side-by-side
src/App.js
View file @
9bb2e131
import
React
from
'
react
'
;
import
'
./App.css
'
;
import
'
./Quiz.css
'
;
import
Home
from
'
./Home
'
import
Quiz
from
'
./Quiz
'
import
End
from
'
./End
'
...
...
src/End.js
View file @
9bb2e131
import
React
from
'
react
'
// import { Link } from 'react-router-dom';
import
tr
from
'
./img_end.jpg
'
;
function
End
()
{
function
End
(
{
history
}
)
{
return
(
<
div
className
=
"
Box
"
>
<
h2
>
수고하셨습니다
!<
/h2
>
<
/div
>
<>
<
div
>
{
/* <button onClick={() => history.push('/')}>홈 버튼!</button> */
}
<
/div
>
<
div
className
=
"
Box
"
>
<
img
src
=
{
tr
}
alt
=
"
수고
"
/>
<
h2
>
수고하셨습니다
!<
/h2
>
<
/div
>
<
/
>
)
}
...
...
src/Home.js
View file @
9bb2e131
import
React
from
'
react
'
import
{
Link
}
from
'
react-router-dom
'
;
import
bg
from
'
./img_background2.jpg
'
function
Home
()
{
return
(
<
div
className
=
"
Box
"
>
<
div
className
=
"
Name
"
>
이름을
입력하세요
<
input
onChange
=
{(
event
)
=>
localStorage
.
setItem
(
'
사용자이름
'
,
event
)
}
/
>
<>
<
div
style
=
{{
backgroundImage
:
'
url(
'
+
bg
+
'
)
'
,
backgroundColor
:
"
grey
"
,
backgroundSize
:
"
100%
"
}}
>
<
div
className
=
"
Main
"
><
/div
>
<
div
className
=
"
Box
"
>
<
div
className
=
"
Name
"
style
=
{{
color
:
"
white
"
,
fontSize
:
'
30px
'
}}
>
이름을
입력하세요
<
input
style
=
{{
blockSize
:
'
40px
'
,
marginLeft
:
'
30px
'
}}
onChange
=
{(
event
)
=>
sessionStorage
.
setItem
(
'
name
'
,
event
.
target
.
value
)}
/
>
<
/div
>
{
/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */
}
<
/div
>
<
div
className
=
'
Box2
'
>
<
Link
to
=
"
/quiz
"
>
<
button
className
=
"
QuizStart
"
onClick
=
{
checking
}
>
Quiz
Start
!<
/button
>
<
/Link
>
<
/div
>
<
/div
>
<
Link
to
=
"
/quiz
"
>
<
button
className
=
"
QuizStart
"
>
Quiz
Start
!<
/button
>
<
/Link
>
<
/div
>
<
/
>
)
}
function
checking
(
event
)
{
if
(
sessionStorage
.
getItem
(
'
name
'
)
===
null
||
sessionStorage
.
getItem
(
'
name
'
).
length
===
0
)
{
alert
(
'
이름을 입력하세요
'
)
}
else
{
alert
(
'
입력하신 이름은
'
+
sessionStorage
.
getItem
(
'
name
'
)
+
'
입니다.
'
)
}
}
export
default
Home
;
\ No newline at end of file
export
default
Home
;
src/Prequiz1.js
0 → 100644
View file @
9bb2e131
import
React
from
'
react
'
;
// import logo from './logo.svg';
import
'
./Quiz.css
'
;
import
'
bootstrap/dist/css/bootstrap.css
'
;
const
question
=
[
{
Q
:
"
6 X 4 ?
"
,
Choose
:
[
6
,
12
,
18
,
24
]},
{
Q
:
"
3 + 3 ?
"
,
Choose
:
[
2
,
4
,
6
,
8
]},
{
Q
:
"
3 - 1 ?
"
,
Choose
:
[
1
,
2
,
3
,
4
]}
]
class
Quiz
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
)
// this.setAnswer = this.setAnswer.bind(this)
this
.
checking
=
this
.
checking
.
bind
(
this
)
this
.
setQuestion
=
this
.
setQuestion
.
bind
(
this
)
this
.
ShowQuiz
=
this
.
ShowQuiz
.
bind
(
this
)
this
.
state
=
{
...
question
[
0
],
i
:
0
,
page
:
0
}
}
ShowQuiz
()
{
this
.
setState
({
page
:
1
})
}
setQuestion
()
{
this
.
setState
({
...
question
[
this
.
state
.
i
+
1
],
i
:
this
.
state
.
i
+
1
})
}
// setAnswer(e) {
// question[this.state.i]["A"] = e.target.value
// this.setState({ v: e.target.value })
// console.log(this.state)
// console.log(question)
// }
checking
(
e
){
this
.
setState
({
userAnswer
:
e
.
target
.
value
})
console
.
log
(
this
.
state
)
console
.
log
(
question
)
}
render
()
{
if
(
this
.
state
.
page
===
1
)
{
if
(
this
.
state
.
i
===
question
.
length
)
{
return
(
<
div
>
<
h2
>
수고하셨습니다
!<
/h2
>
<
/div
>
)
}
else
{
return
(
<
div
className
=
"
Quiz
"
>
<
h2
>
Q
:{
this
.
state
.
Q
}
<
/h2
>
{
this
.
state
.
Choose
.
map
((
a
)
=>
<
div
>
<
input
type
=
"
radio
"
name
=
"
a
"
id
=
{
a
}
value
=
{
a
}
onClick
=
{
this
.
checking
}
/
>
<
label
htmlFor
=
{
a
}
>
{
a
}
<
/label
>
<
/div>
)
}
<
div
className
=
"
App
"
>
정답을
입력하세요
<
/div
>
{
/* <div>
<input type="text" value={this.state.v} name="A" onChange={this.setAnswer} />
</div> */
}
<
button
type
=
"
button
"
onClick
=
{
this
.
setQuestion
}
>
다음
<
/button
>
<
/div
>
)
}
}
else
{
return
(
<
div
className
=
"
Box
"
>
<
div
className
=
"
Main
"
>
<
h1
>
Calculus
<
/h1
>
<
/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
;
\ No newline at end of file
src/Quiz.css
View file @
9bb2e131
.Main
{
background
:
orange
;
background
:
gray
;
background-image
:
url('img_calculus.jpg')
;
display
:
inline-block
;
border
:
3px
solid
black
;
width
:
200px
;
width
:
750px
;
height
:
180px
;
text-align
:
center
;
margin-left
:
410px
;
margin-top
:
10px
;
font-size
:
120px
;
font-family
:
cursive
;
color
:
greenyellow
;
text-shadow
:
-3px
-3px
0
#000
,
/* 왼쪽 위 그림자 */
3px
-3px
0
#000
,
/* 오른쪽 위 그림자 */
-3px
3px
0
#000
,
/* 왼쪽 아래 그림자 */
3px
3px
0
#000
;
/* 오른쪽 아래 그림자 */
}
/* .Name {} */
...
...
@@ -11,12 +24,17 @@
.Box
{
text-align
:
center
;
margin
:
0
auto
;
margin-top
:
75px
;
}
.QuizStart
{
margin
:
30px
;
margin-left
:
500px
;
width
:
150px
;
height
:
30px
;
margin-left
:
650px
;
margin-top
:
150px
;
margin-bottom
:
200px
;
width
:
220px
;
height
:
50px
;
font-family
:
Impact
,
Haettenschweiler
,
'Arial Narrow Bold'
,
sans-serif
;
font-size
:
20px
;
letter-spacing
:
3px
;
}
\ No newline at end of file
src/Quiz.js
View file @
9bb2e131
import
React
from
'
react
'
import
React
,
{
useState
}
from
'
react
'
import
{
Link
}
from
'
react-router-dom
'
;
import
Timer
from
'
react-compound-timer
'
;
// Timer 를 쓰기위한 import --> npm i react-compound-timer로 설치 먼저
import
Timer
from
'
react-compound-timer
'
;
// 타이머쓰기위해 import
import
logo
from
'
./img_question.png
'
import
fight
from
'
./img_quiz.png
'
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
:
""
,
N
:
1
},
{
Q
:
"
3 + 3
=
?
"
,
Choose
:
[
2
,
4
,
6
,
8
],
A
:
""
,
N
:
2
},
{
Q
:
"
3 - 1
=
?
"
,
Choose
:
[
1
,
2
,
3
,
4
],
A
:
""
,
N
:
3
}
]
class
Quiz
extends
React
.
Component
{
constructor
(
props
)
{
super
(
props
)
this
.
setQuestion
=
this
.
setQuestion
.
bind
(
this
)
this
.
answerbox
=
this
.
answerbox
.
bind
(
this
)
this
.
state
=
{
...
question
[
0
],
i
:
0
,
page
:
0
,
}
}
setQuestion
()
{
//값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj-
this
.
setState
({
...
question
[
this
.
state
.
i
+
1
],
i
:
this
.
state
.
i
+
1
,
page
:
this
.
state
.
page
+
1
})
function
Quiz
()
{
let
[
question
,
setQuestionss
]
=
useState
({
...
QnA
[
0
],
i
:
0
,
page
:
0
,
})
let
[
selected
,
setSelected
]
=
useState
(
""
)
//선택한 답을 보여줄 것들
function
setQuestion
()
{
setQuestionss
({
...
QnA
[
question
.
i
+
1
],
i
:
question
.
i
+
1
,
page
:
question
.
page
+
1
})
}
//answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장
answerbox
()
{
let
answers
=
document
.
getElementsByName
(
'
answer
'
);
let
count
=
answers
.
length
let
handleChange
=
(
ev
)
=>
{
ev
.
preventDefault
()
//새로고침 안되도록
setSelected
(
ev
.
target
.
value
)
//selected값 변경
let
slt
=
ev
.
target
.
value
//slt에 선택한값 받아옴
let
count
=
question
.
Choose
.
length
//이거 정확히 뭘로할지 모르겠어요 ㅜㅜ
// let checked_index = -1;
let
checked_value
=
''
;
checked_value
=
slt
;
//localStorage.setItem('번문제 답' + checked_value, checked_value)
for
(
let
i
=
0
;
i
<
count
;
i
++
)
{
if
(
answers
[
i
]
.
checked
)
{
if
(
ev
.
target
.
checked
)
{
//이거 맞는지도 잘..
// checked_index = i;
checked_value
=
answers
[
i
].
value
;
localStorage
.
setItem
(
'
answer-
'
+
i
,
checked_value
)
checked_value
=
slt
;
localStorage
.
setItem
(
question
.
i
+
1
+
'
번문제 답
'
,
checked_value
)
}
}
}
render
()
{
return
(
return
(
<>
<
img
src
=
{
fight
}
style
=
{{
position
:
"
absolute
"
,
top
:
"
65px
"
,
left
:
"
1050px
"
}}
alt
=
"
lion
"
/>
<
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
>
<
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
=
{{
textAlign
:
"
center
"
,
marginTop
:
"
30px
"
,
marginBottom
:
"
30px
"
}}
>
정답을
선택하세요
<
/div
>
<
div
>
<
form
>
{
question
.
Choose
.
map
((
a
,
index
)
=>
<
div
key
=
{
index
}
>
<
input
type
=
"
radio
"
name
=
'
answer
'
id
=
{
'
anwer
'
+
a
}
value
=
{
a
}
onClick
=
{
handleChange
}
style
=
{{
marginLeft
:
"
475px
"
,
width
:
"
25px
"
,
height
:
"
25px
"
}}
/
>
<
label
htmlFor
=
{
a
}
style
=
{{
fontSize
:
"
40px
"
,
marginLeft
:
"
22px
"
}}
>
{
a
}
<
/label
>
<
/div
>
)}
<
input
hidden
type
=
"
submit
"
value
=
"
확인
"
/>
{
/*버튼 숨김*/
}
<
/form
>
<
p
style
=
{{
fontSize
:
"
20px
"
,
marginLeft
:
"
600px
"
}}
>
선택한
답
:
<
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
=
{
setQuestion
}
style
=
{{
width
:
"
85px
"
,
height
:
"
40px
"
}}
>
다음
<
/button
>
}
<
/span
>
<
/p
>
<
/div
>
{
/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */
}
{(
this
.
state
.
page
===
question
.
length
-
1
)
?
<
Link
to
=
"
/end
"
>
제출
<
/Link
>
:
<
button
type
=
"
button
"
onClick
=
{
this
.
setQuestion
}
>
다음
<
/button
>
}
<
br
/>
<
Timer
initialTime
=
{
5000
}
direction
=
"
backward
"
checkpoints
=
{[
{
time
:
0
,
callback
:
()
=>
this
.
setQuestion
// callback 다음에 뭐라고 써야할까요....??
}
]}
>
{()
=>
(
<>
<
Timer
.
Seconds
/>
seconds
{
/* {(question.page === QnA.length - 1)
? <Link to="/end">제출</Link>
: <button type="button" onClick={setQuestion} >다음</button>
} */
}
{
/* <input onKeyPress="this.enterkey()"/> */
}
<
p
style
=
{{
textAlign
:
"
center
"
,
fontSize
:
"
30px
"
,
color
:
"
crimson
"
}}
>
<
Timer
initialTime
=
{
3050
}
direction
=
"
backward
"
checkpoints
=
{[
{
time
:
0
,
callback
:
setQuestion
// history.go(1)
}
]}
>
{()
=>
(
<>
<
Timer
.
Seconds
/>
seconds
<
/
>
)}
<
/Timer
>
)}
<
/Timer> {/
*
npm
i
react
-
compound
-
timer
*
/
}
<
/p
>
<
/div
>
)
}
<
/
>
)
}
export
default
Quiz
;
\ No newline at end of file
src/setupTests.js
View file @
9bb2e131
...
...
@@ -3,3 +3,17 @@
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import
'
@testing-library/jest-dom/extend-expect
'
;
<
Segment
color
=
'
blue
'
>
<
Form
>
<
Form
.
Field
>
정답
<
/Form.Field
>
{
this
.
rateScore
.
map
(
rate
=>
(
<
Form
.
Field
>
<
Radio
value
=
{
rate
}
checked
=
{}
onCange
=
{}
/
>
{
this
.
renderStar
(
rate
)}
<
/Form.Field
>
))}
<
/Form
>
<
/Segment
>
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