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
4273ad60
Commit
4273ad60
authored
Jul 28, 2020
by
Jiwon Yoon
Browse files
react router 적용 완료-jw
parent
69284cba
Changes
6
Hide whitespace changes
Inline
Side-by-side
src/App.js
View file @
4273ad60
import
React
from
'
react
'
;
// import logo from './logo.svg';
import
'
./App.css
'
;
import
Home
from
'
./Home
'
import
Quiz
from
'
./Quiz
'
import
End
from
'
./End
'
import
{
BrowserRouter
as
Router
,
Link
,
Switch
,
Route
}
from
'
react-router-dom
'
;
function
App
()
{
return
(
<
div
className
=
"
App
"
>
<
h2
>
어떤
페이지가
나올까요
?
^
^<
/h2
>
궁금합니다
^
^
<
/div
>
);
<
Router
>
<
header
>
<
Link
to
=
"
/
"
>
<
button
>
Calculus
<
/button
>
<
/Link
>
<
/header
>
<
hr
/>
<
div
>
<
Switch
>
<
Route
exact
path
=
"
/
"
>
<
Home
/>
<
/Route
>
<
Route
path
=
"
/quiz
"
>
<
Quiz
/>
<
/Route
>
<
Route
path
=
"
/end
"
>
<
End
/>
<
/Route
>
<
/Switch
>
<
/div
>
<
/Router
>
)
}
export
default
App
;
export
default
App
;
\ No newline at end of file
src/End.js
0 → 100644
View file @
4273ad60
import
React
from
'
react
'
// import { Link } from 'react-router-dom';
function
End
()
{
return
(
<
div
className
=
"
Box
"
>
<
h2
>
수고하셨습니다
!<
/h2
>
<
/div
>
)
}
export
default
End
;
\ No newline at end of file
src/Home.js
0 → 100644
View file @
4273ad60
import
React
from
'
react
'
import
{
Link
}
from
'
react-router-dom
'
;
function
Home
()
{
return
(
<
div
className
=
"
Box
"
>
<
div
className
=
"
Name
"
>
이름을
입력하세요
<
input
onChange
=
{(
event
)
=>
{
console
.
log
(
event
.
target
.
value
)
}}
/
>
<
/div
>
<
Link
to
=
"
/quiz
"
>
<
button
className
=
"
QuizStart
"
>
Quiz
Start
!<
/button
>
<
/Link
>
<
/div
>
)
}
export
default
Home
;
\ No newline at end of file
src/Quiz.js
View file @
4273ad60
import
React
from
'
react
'
;
// import logo from './logo.svg';
import
'
./Quiz.css
'
;
import
React
from
'
react
'
import
{
Link
}
from
'
react-router-dom
'
;
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
:
""
}
{
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
:
""
}
]
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
],
i
:
0
,
page
:
0
,
constructor
(
props
)
{
super
(
props
)
this
.
setQuestion
=
this
.
setQuestion
.
bind
(
this
)
this
.
answerbox
=
this
.
answerbox
.
bind
(
this
)
this
.
state
=
{
...
question
[
0
],
i
:
0
,
page
:
0
,
}
}
// this.textInput = React.createRef()
}
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
=
''
;
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
)
}
setQuestion
()
{
//값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj-
this
.
setState
({
...
question
[
this
.
state
.
i
+
1
],
i
:
this
.
state
.
i
+
1
,
page
:
this
.
state
.
page
+
1
})
}
//answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장
answerbox
()
{
let
answers
=
document
.
getElementsByName
(
'
answer
'
);
let
count
=
answers
.
length
// let checked_index = -1;
let
checked_value
=
''
;
for
(
let
i
=
0
;
i
<
count
;
i
++
)
{
if
(
answers
[
i
].
checked
)
{
// checked_index = i;
checked_value
=
answers
[
i
].
value
;
localStorage
.
setItem
(
'
answer-
'
+
i
,
checked_value
)
}
}
}
// 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
>
)
}
else
{
render
()
{
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
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
>
<
/div>
)
}
<
div
className
=
"
App
"
>
정답을
입력하세요
{
/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */
}
{(
this
.
state
.
page
===
question
.
length
-
1
)
?
<
Link
to
=
"
/end
"
>
제출
<
/Link
>
:
<
button
type
=
"
button
"
onClick
=
{
this
.
setQuestion
}
>
다음
<
/button
>
}
<
/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
>
)
}
}
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
;
export
default
Quiz
;
\ No newline at end of file
src/index.js
View file @
4273ad60
import
React
from
'
react
'
;
import
ReactDOM
from
'
react-dom
'
;
import
'
./index.css
'
;
//
import App from './App';
import
Quiz
from
'
./Quiz
'
;
import
App
from
'
./App
'
;
//
import Quiz from './Quiz';
import
*
as
serviceWorker
from
'
./serviceWorker
'
;
ReactDOM
.
render
(
<
React
.
StrictMode
>
<
Quiz
/>
<
App
/>
<
/React.StrictMode>
,
document
.
getElementById
(
'
root
'
)
);
...
...
src/preQuiz.js
0 → 100644
View file @
4273ad60
import
React
from
'
react
'
;
// import logo from './logo.svg';
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
:
""
}
]
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
],
i
:
0
,
page
:
0
,
}
// this.textInput = React.createRef()
}
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
=
''
;
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
)
}
}
// 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
>
)
}
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
>
{
/* <div>
<input type="text" value={this.state.v} name="A" onChange={this.setAnswer} />
</div> */
}
<
button
type
=
"
button
"
onClick
=
{
setTimeout
(
this
.
setQuestion
,
2000
)}
>
다음
<
/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
;
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