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
05599652
Commit
05599652
authored
Aug 05, 2020
by
baesangjune
Browse files
0
parent
62c50288
Changes
4
Hide whitespace changes
Inline
Side-by-side
src/End.js
View file @
05599652
import
React
from
'
react
'
import
React
,
{
createContext
}
from
'
react
'
import
tr
from
'
./img_end.jpg
'
;
...
...
@@ -9,7 +9,7 @@ function End() {
for
(
let
i
=
0
;
i
<
3
;
i
++
)
{
if
(
localStorage
.
getItem
(
i
+
'
번문제답
'
)
===
localStorage
.
getItem
(
i
+
'
번문제정답
'
))
{
k
[
i
]
=
[
'
O
'
,
1
]
}
...
...
@@ -25,12 +25,9 @@ function End() {
return
(
<>
<
div
className
=
"
card
"
>
<
div
className
=
"
card
"
style
=
{{
fontSize
:
'
30px
'
,
textAlign
:
"
center
"
}}
>
<
div
className
=
'
card-header
'
>
-
채점표
-
<
/div
>
-
채점표
-
<
div
className
=
'
card-body
'
>
<
h3
className
=
'
card-title
'
>
이름
:
{
localStorage
.
getItem
(
'
name
'
)}
<
/h3
>
...
...
@@ -39,9 +36,10 @@ function End() {
<
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
>
<
/div
>
<
div
className
=
"
Box text-center
"
>
<
img
src
=
{
tr
}
alt
=
"
수고
"
/>
<
h2
>
수고하셨습니다
!<
/h2
>
<
div
style
=
{{
marginTop
:
'
100px
'
}}
className
=
"
Box text-center
"
>
<
img
src
=
{
tr
}
alt
=
"
수고
"
/>
<
/div
>
<
/div
>
<
/div
>
<
/
>
...
...
src/Home.js
View file @
05599652
...
...
@@ -6,30 +6,31 @@ import bg from './img_study.jpg'
function
Home
()
{
return
(
<>
<
div
style
=
{{
backgroundImage
:
'
url(
'
+
bg
+
'
)
'
,
width
:
'
100%
'
,
height
:
'
900%
'
,
backgroundSize
:
"
100%
"
,
backgroundRepeat
:
'
no-repeat
'
}}
>
<
div
style
=
{{
boxAlign
:
'
center
'
}}
className
=
"
Main
"
><
/div
>
<
div
style
=
{{
backgroundImage
:
'
url(
'
+
bg
+
'
)
'
,
backgroundColor
:
"
grey
"
,
backgroundSize
:
"
100%
"
,
width
:
"
100%
"
,
height
:
"
880px
"
,
backgroundRepeat
:
'
no-repeat
'
}}
>
{
/* <div className="Main"></div> */
}
<
div
className
=
"
Box
"
>
<
div
className
=
"
Name
"
style
=
{{
padding
:
'
1
0px
'
,
fontSize
:
'
40px
'
}}
>
<
div
className
=
"
Name
"
style
=
{{
fontSize
:
'
3
0px
'
,
position
:
"
absolute
"
,
top
:
"
330px
"
,
left
:
"
38%
"
}}
>
이름을
입력하세요
<
input
style
=
{{
marginLeft
:
'
30px
'
,
inlineSize
:
'
200px
'
,
blockSize
:
'
40px
'
,
fontSize
:
'
40px
'
}}
onChange
=
{(
event
)
=>
sessionStorage
.
setItem
(
'
name
'
,
event
.
target
.
value
)}
/
>
<
input
style
=
{{
marginLeft
:
'
30px
'
,
inlineSize
:
'
200px
'
,
blockSize
:
'
40px
'
,
fontSize
:
'
40px
'
}}
onChange
=
{(
event
)
=>
sessionStorage
.
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
>
{
/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */
}
<
/div
>
<
div
className
=
'
Box2
'
>
<
Link
to
=
"
/quiz
"
>
<
button
className
=
"
QuizStart
"
onClick
=
{
checking
}
>
Quiz
Start
!<
/button
>
<
/Link
>
<
/div
>
<
div
>
계산수학
<
/div
>
<
/div
>
<
/
>
)
}
function
checking
(
event
)
{
function
checking
()
{
if
(
sessionStorage
.
getItem
(
'
name
'
)
===
null
||
sessionStorage
.
getItem
(
'
name
'
).
length
===
0
)
{
alert
(
'
이름을 입력하세요
'
)
...
...
@@ -40,4 +41,4 @@ function checking(event) {
}
}
export
default
Home
;
export
default
Home
;
\ No newline at end of file
src/Quiz.css
View file @
05599652
...
...
@@ -37,4 +37,11 @@
font-family
:
Impact
,
Haettenschweiler
,
'Arial Narrow Bold'
,
sans-serif
;
font-size
:
20px
;
letter-spacing
:
3px
;
}
.card
{
text-align
:
center
;
margin
:
100px
;
font-size
:
10px
;
}
\ No newline at end of file
src/Quiz.js
View file @
05599652
...
...
@@ -43,10 +43,11 @@ function Quiz() {
}
return
(
<>
<
img
src
=
{
fight
}
style
=
{{
position
:
"
absolute
"
,
top
:
"
65px
"
,
left
:
"
1050px
"
}}
alt
=
"
lion
"
/>
<
div
className
=
"
Quiz
"
>
<
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
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
=
{{
textAlign
:
"
center
"
,
marginTop
:
"
30px
"
,
marginBottom
:
"
30px
"
}}
>
정답을
선택하세요
<
/div
>
{
/*
<div style={{ marginTop: "30px", marginBottom: "30px"
, marginLeft:'450px', fontSize:'40px'
}}>정답을 선택하세요</div>
*/
}
<
div
>
<
form
>
...
...
@@ -58,7 +59,7 @@ function Quiz() {
)}
<
input
hidden
type
=
"
submit
"
value
=
"
확인
"
/>
{
/*버튼 숨김*/
}
<
/form
>
<
p
style
=
{{
fontSize
:
"
2
0px
"
,
marginLeft
:
"
60
0px
"
}}
>
선택한
답
:
<
span
style
=
{{
color
:
"
green
"
,
fontWeight
:
"
bold
"
,
fontSize
:
"
90px
"
,
marginLeft
:
"
30px
"
}}
>
{
selected
}
<
/span> {/
*
선택한
값
보여줌
*
/}<span style={{ marginLeft: "50px" }}> {
(
question.page === QnA.length - 1
)
<
p
style
=
{{
fontSize
:
"
4
0px
"
,
marginLeft
:
"
48
0px
"
}}
>
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
=
{
setQuestion
}
style
=
{{
width
:
"
85px
"
,
height
:
"
40px
"
}}
>
다음
<
/button
>
...
...
@@ -82,20 +83,19 @@ function Quiz() {
<
p
style
=
{{
textAlign
:
"
center
"
,
fontSize
:
"
30px
"
,
color
:
"
crimson
"
}}
>
<
Timer
initialTime
=
{
30
5
0
}
initialTime
=
{
3
6000
00
}
direction
=
"
backward
"
checkpoints
=
{[
{
time
:
0
,
callback
:
setQuestion
callback
:
<
Link
to
=
"
/end
"
>
제출
<
/Link
>
// history.go(1)
}
]}
>
{()
=>
(
<>
<
Timer
.
Seconds
/>
seconds
<
/
>
<
Timer
.
Minutes
/>
:
<
Timer
.
Seconds
><
/Timer.Seconds> /
60
:
00
<
/
>
)}
<
/Timer> {/
*
npm
i
react
-
compound
-
timer
*
/
}
<
/p
>
...
...
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