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
b52542d2
Commit
b52542d2
authored
Aug 05, 2020
by
baesangjune
Browse files
0805
parent
05599652
Changes
3
Hide whitespace changes
Inline
Side-by-side
src/End.js
View file @
b52542d2
import
React
,
{
createContext
}
from
'
react
'
import
React
from
'
react
'
import
tr
from
'
./img_end.jpg
'
;
// import { Link } from 'react-router-dom';
function
End
()
{
let
k
=
[]
let
a
=
[]
for
(
let
i
=
0
;
i
<
3
;
i
++
)
{
if
(
localStorage
.
getItem
(
i
+
'
번문제답
'
)
===
localStorage
.
getItem
(
i
+
'
번문제정답
'
))
{
if
(
localStorage
.
getItem
(
'
답
'
+
(
i
+
1
)
)
===
localStorage
.
getItem
(
'
정답
'
+
(
i
+
1
)
))
{
k
[
i
]
=
[
'
O
'
,
1
]
a
[
i
]
=
1
localStorage
.
setItem
(
'
채점
'
+
(
i
+
1
),
'
O
'
)
}
else
{
a
[
i
]
=
0
k
[
i
]
=
[
'
X
'
,
0
]
localStorage
.
setItem
(
'
채점
'
+
(
i
+
1
),
'
X
'
)
}
}
...
...
@@ -30,11 +35,12 @@ function End() {
-
채점표
-
<
div
className
=
'
card-body
'
>
<
h3
className
=
'
card-title
'
>
이름
:
{
localStorage
.
getItem
(
'
name
'
)}
<
/h3
>
<
p
className
=
'
card-text
'
>
Quiz
1
:
{
k
[
0
][
0
]
}
<
/p
>
<
p
className
=
'
card-text
'
>
Quiz
2
:
{
k
[
1
][
0
]
}
<
/p
>
<
p
className
=
'
card-text
'
>
Quiz
3
:
{
k
[
2
][
0
]
}
<
/p
>
<
p
className
=
'
card-text
'
>
Total
Score
:
{
k
[
0
]
[
1
]
+
k
[
1
]
[
1
]
+
k
[
2
]
[
1
]
}
<
/p
>
<
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
style
=
{{
marginTop
:
'
100px
'
}}
className
=
"
Box text-center
"
>
<
img
src
=
{
tr
}
alt
=
"
수고
"
/>
...
...
src/Home.js
View file @
b52542d2
...
...
@@ -12,14 +12,14 @@ function Home() {
<
div
className
=
"
Box
"
>
<
div
className
=
"
Name
"
style
=
{{
fontSize
:
'
30px
'
,
position
:
"
absolute
"
,
top
:
"
330px
"
,
left
:
"
38%
"
}}
>
이름을
입력하세요
<
input
style
=
{{
marginLeft
:
'
30px
'
,
inlineSize
:
'
200px
'
,
blockSize
:
'
40px
'
,
fontSize
:
'
40px
'
}}
onChange
=
{(
event
)
=>
session
Storage
.
setItem
(
'
name
'
,
event
.
target
.
value
)}
/
>
<
input
style
=
{{
marginLeft
:
'
30px
'
,
inlineSize
:
'
200px
'
,
blockSize
:
'
40px
'
,
fontSize
:
'
40px
'
}}
onChange
=
{(
event
)
=>
local
Storage
.
setItem
(
'
name
'
,
event
.
target
.
value
)}
/
>
<
div
className
=
'
Box2
'
>
<
Link
to
=
"
/quiz
"
>
<
button
style
=
{{
marginTop
:
'
35%
'
,
blockSize
:
'
100px
'
,
inlineSize
:
'
200px
'
,
fontSize
:
'
35px
'
}}
className
=
"
QuizStart
"
onClick
=
{
checking
}
>
Quiz
Start
!<
/button
>
<
/Link
>
<
/div
>
<
/div
>
{
/*
session
Storage를 사용해야는지 localstorage를 사용해야하는지 */
}
{
/*
local
Storage를 사용해야는지 localstorage를 사용해야하는지 */
}
<
/div
>
<
div
>
계산수학
<
/div
>
...
...
@@ -32,12 +32,12 @@ function Home() {
}
function
checking
()
{
if
(
session
Storage
.
getItem
(
'
name
'
)
===
null
||
session
Storage
.
getItem
(
'
name
'
).
length
===
0
)
{
if
(
local
Storage
.
getItem
(
'
name
'
)
===
null
||
local
Storage
.
getItem
(
'
name
'
).
length
===
0
)
{
alert
(
'
이름을 입력하세요
'
)
}
else
{
alert
(
'
입력하신 이름은
'
+
session
Storage
.
getItem
(
'
name
'
)
+
'
입니다.
'
)
alert
(
'
입력하신 이름은
'
+
local
Storage
.
getItem
(
'
name
'
)
+
'
입니다.
'
)
}
}
...
...
src/Quiz.js
View file @
b52542d2
...
...
@@ -5,46 +5,39 @@ import logo from './img_question.png'
import
fight
from
'
./img_quiz.png
'
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
}
{
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
}
]
function
Quiz
()
{
let
[
question
,
setQuestion
ss
]
=
useState
({
let
[
question
,
setQuestion
]
=
useState
({
...
QnA
[
0
],
i
:
0
,
page
:
0
,
})
let
[
selected
,
setSelected
]
=
useState
(
""
)
//선택한 답을 보여줄 것들
function
set
Question
()
{
setQuestion
ss
({
...
QnA
[
question
.
i
+
1
],
i
:
question
.
i
+
1
,
page
:
question
.
page
+
1
})
function
handle
Question
()
{
setQuestion
({
...
QnA
[
question
.
i
+
1
],
i
:
question
.
i
+
1
,
page
:
question
.
page
+
1
})
}
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
(
ev
.
target
.
checked
)
{
//이거 맞는지도 잘..
// checked_index = i;
checked_value
=
slt
;
localStorage
.
setItem
(
question
.
i
+
1
+
'
번문제 답
'
,
checked_value
)
}
}
let
checked_number
=
ev
.
target
.
id
;
localStorage
.
setItem
(
'
답
'
+
(
question
.
N
),
Number
(
checked_number
)
+
1
)
localStorage
.
setItem
(
'
정답
'
+
(
question
.
N
),
QnA
[
question
.
N
-
1
].
A
)
}
return
(
<>
<
div
style
=
{{
fontSize
:
'
80px
'
,
marginBottom
:
'
100px
'
,
textAlign
:
"
center
"
,
backgroundColor
:
'
yellow
'
}}
>
미적분학
퀴즈
<
/div
>
<
img
src
=
{
fight
}
style
=
{{
position
:
"
absolute
"
,
top
:
"
65px
"
,
left
:
"
1050px
"
,
top
:
'
200px
'
}}
alt
=
"
lion
"
/>
<
div
style
=
{{
fontSize
:
'
80px
'
,
marginBottom
:
'
100px
'
,
textAlign
:
"
center
"
,
backgroundColor
:
'
yellow
'
}}
>
미적분학
퀴즈
<
/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> */
}
...
...
@@ -53,7 +46,7 @@ function Quiz() {
<
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
"
}}
/
>
<
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
>
<
/div
>
)}
...
...
@@ -61,7 +54,7 @@ function Quiz() {
<
/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
=
{
set
Question
}
style
=
{{
width
:
"
85px
"
,
height
:
"
40px
"
}}
>
다음
<
/button
>
:
<
button
type
=
"
button
"
onClick
=
{
handle
Question
}
style
=
{{
width
:
"
85px
"
,
height
:
"
40px
"
}}
>
다음
<
/button
>
}
<
/span
>
<
/p
>
...
...
@@ -71,10 +64,10 @@ function Quiz() {
{
/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.
set
Question발생 */
}
{
/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.
handle
Question발생 */
}
{
/* {(question.page === QnA.length - 1)
? <Link to="/end">제출</Link>
: <button type="button" onClick={
set
Question} >다음</button>
: <button type="button" onClick={
handle
Question} >다음</button>
} */
}
...
...
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