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
7306d873
Commit
7306d873
authored
Jul 29, 2020
by
baesangjune
Browse files
2020-07-28
parent
5943a7e8
Changes
3
Show whitespace changes
Inline
Side-by-side
src/Home.js
View file @
7306d873
...
@@ -4,17 +4,33 @@ import { Link } from 'react-router-dom';
...
@@ -4,17 +4,33 @@ import { Link } from 'react-router-dom';
function
Home
()
{
function
Home
()
{
return
(
return
(
<
div
className
=
"
Box
"
>
<>
<
div
classXName
=
"
Box
"
>
<
div
className
=
"
Name
"
>
<
div
className
=
"
Name
"
>
이름을
입력하세요
이름을
입력하세요
<
input
onChange
=
{(
event
)
=>
{
console
.
log
(
event
.
target
.
value
)
}
}
/
>
<
input
onChange
=
{(
event
)
=>
sessionStorage
.
setItem
(
'
name
'
,
event
.
target
.
value
)}
/
>
<
/div
>
<
/div
>
<
button
onClick
=
{(
event
)
=>
checking
(
event
)}
>
이름입력완료
<
/button
>
{
/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */
}
<
/div
>
<
div
className
=
'
Box2
'
>
<
Link
to
=
"
/quiz
"
>
<
Link
to
=
"
/quiz
"
>
<
button
className
=
"
QuizStart
"
>
Quiz
Start
!<
/button
>
<
button
className
=
"
QuizStart
"
>
Quiz
Start
!<
/button
>
<
/Link
>
<
/Link
>
<
/div
>
<
/div
>
<
/
>
)
)
}
}
function
checking
(
event
)
{
if
(
sessionStorage
.
getItem
(
'
name
'
)
===
null
||
''
)
{
alert
(
'
이름을 입력하세요
'
)
// alert('입력하신 이름은'+event.target+'입니다.')
}
}
export
default
Home
;
export
default
Home
;
\ No newline at end of file
src/Quiz.js
View file @
7306d873
import
React
from
'
react
'
import
React
from
'
react
'
import
{
Link
}
from
'
react-router-dom
'
;
import
{
Link
}
from
'
react-router-dom
'
;
import
Timer
from
'
react-compound-timer
'
;
import
Timer
from
'
react-compound-timer
'
;
// 타이머쓰기위해 import
const
question
=
[
const
question
=
[
{
Q
:
"
6 X 4 ?
"
,
Choose
:
[
6
,
12
,
18
,
24
],
A
:
""
},
{
Q
:
"
6 X 4 ?
"
,
Choose
:
[
6
,
12
,
18
,
24
],
A
:
""
,
N
:
1
},
{
Q
:
"
3 + 3 ?
"
,
Choose
:
[
2
,
4
,
6
,
8
],
A
:
""
},
{
Q
:
"
3 + 3 ?
"
,
Choose
:
[
2
,
4
,
6
,
8
],
A
:
""
,
N
:
2
},
{
Q
:
"
3 - 1 ?
"
,
Choose
:
[
1
,
2
,
3
,
4
],
A
:
""
}
{
Q
:
"
3 - 1 ?
"
,
Choose
:
[
1
,
2
,
3
,
4
],
A
:
""
,
N
:
3
}
]
]
class
Quiz
extends
React
.
Component
{
class
Quiz
extends
React
.
Component
{
...
@@ -13,10 +13,13 @@ class Quiz extends React.Component {
...
@@ -13,10 +13,13 @@ class Quiz extends React.Component {
super
(
props
)
super
(
props
)
this
.
setQuestion
=
this
.
setQuestion
.
bind
(
this
)
this
.
setQuestion
=
this
.
setQuestion
.
bind
(
this
)
this
.
answerbox
=
this
.
answerbox
.
bind
(
this
)
this
.
answerbox
=
this
.
answerbox
.
bind
(
this
)
// this.enterkey = this.enterkey(this)
this
.
state
=
{
this
.
state
=
{
...
question
[
0
],
...
question
[
0
],
i
:
0
,
i
:
0
,
page
:
0
,
page
:
0
,
question
}
}
}
}
setQuestion
()
{
setQuestion
()
{
...
@@ -37,28 +40,36 @@ class Quiz extends React.Component {
...
@@ -37,28 +40,36 @@ class Quiz extends React.Component {
}
}
}
}
}
}
// enterkey() {
// if ( window.event === 13 ) {
// alert("Enter Key 입력 감지 \n함수 실행.");
// }
// }
render
()
{
render
()
{
return
(
return
(
<
div
className
=
"
Quiz
"
>
<
div
className
=
"
Quiz
"
>
<
h2
>
Q
:{
this
.
state
.
Q
}
<
/h2
>
<
h2
>
Q
:{
this
.
state
.
Q
}
<
/h2
>
{
this
.
answerbox
()}
{
this
.
answerbox
()}
{
this
.
state
.
Choose
.
map
((
a
)
=>
<
div
>
<
div
>
{
this
.
state
.
Choose
.
map
((
a
)
=>
<
div
>
{
this
.
state
.
N
}
<
input
type
=
"
radio
"
name
=
'
answer
'
id
=
{
'
anwer
'
+
a
}
value
=
{
a
}
/*ref={this.textInput} input 네임을 문제단위로 바꾸어주어야 함. */
/
>
<
input
type
=
"
radio
"
name
=
'
answer
'
id
=
{
'
anwer
'
+
a
}
value
=
{
a
}
/*ref={this.textInput} input 네임을 문제단위로 바꾸어주어야 함. */
/
>
<
label
for
=
{
a
}
>
{
a
}
<
/label
>
<
label
for
=
{
a
}
>
{
a
}
<
/label
>
<
/div>
)
<
/div>
)
}
}
<
/div
>
<
div
className
=
"
App
"
class
=
'
left
'
>
정답을
입력하세요
<
/div
>
<
div
className
=
"
App
"
class
=
'
left
'
>
정답을
입력하세요
<
/div
>
{
/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */
}
{
/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */
}
{(
this
.
state
.
page
===
question
.
length
-
1
)
{(
this
.
state
.
page
===
question
.
length
-
1
)
?
<
Link
to
=
"
/end
"
>
제출
<
/Link
>
?
<
Link
to
=
"
/end
"
>
제출
<
/Link
>
:
<
button
type
=
"
button
"
onClick
=
{
this
.
setQuestion
}
>
다음
<
/button
>
:
<
button
type
=
"
button
"
onClick
=
{
this
.
setQuestion
}
>
다음
<
/button
>
}
}
{
/* <input onKeyPress="this.enterkey()"/> */
}
<
Timer
<
Timer
initialTime
=
{
5000
}
initialTime
=
{
5000
}
...
@@ -66,7 +77,8 @@ class Quiz extends React.Component {
...
@@ -66,7 +77,8 @@ class Quiz extends React.Component {
checkpoints
=
{[
checkpoints
=
{[
{
{
time
:
0
,
time
:
0
,
callback
:
()
=>
this
.
setQuestion
,
callback
:
()
=>
console
.
log
(
'
콜백실행
'
)
// history.go(1)
}
}
]}
]}
>
>
...
...
src/setupTests.js
View file @
7306d873
...
@@ -3,3 +3,17 @@
...
@@ -3,3 +3,17 @@
// expect(element).toHaveTextContent(/react/i)
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
// learn more: https://github.com/testing-library/jest-dom
import
'
@testing-library/jest-dom/extend-expect
'
;
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