Commit 05599652 authored by baesangjune's avatar baesangjune
Browse files

0

parent 62c50288
import React from 'react' import React, { createContext } from 'react'
import tr from './img_end.jpg'; import tr from './img_end.jpg';
...@@ -9,7 +9,7 @@ function End() { ...@@ -9,7 +9,7 @@ function End() {
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
if (localStorage.getItem(i + '번문제답') === localStorage.getItem(i + '번문제정답')) { if (localStorage.getItem(i + '번문제답') === localStorage.getItem(i + '번문제정답')) {
k[i] = ['O', 1] k[i] = ['O', 1]
} }
...@@ -25,12 +25,9 @@ function End() { ...@@ -25,12 +25,9 @@ function End() {
return ( return (
<> <>
<div className="card" style={{fontSize:'30px', textAlign:"center"}} >
<div className="card " >
<div className='card-header'> <div className='card-header'>
-채점표- -채점표-
</div>
<div className='card-body'> <div className='card-body'>
<h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3> <h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3>
...@@ -39,9 +36,10 @@ function End() { ...@@ -39,9 +36,10 @@ function End() {
<p className='card-text'>Quiz 3 : {k[2][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'>Total Score : {k[0][1] + k[1][1] + k[2][1]}</p>
</div> </div>
<div className="Box text-center"> <div style={{marginTop:'100px'}}className="Box text-center">
<img src={tr} alt="수고"/> <img src={tr} alt="수고" />
<h2>수고하셨습니다!</h2>
</div>
</div> </div>
</div> </div>
</> </>
......
...@@ -6,30 +6,31 @@ import bg from './img_study.jpg' ...@@ -6,30 +6,31 @@ import bg from './img_study.jpg'
function Home() { function Home() {
return ( return (
<> <>
<div style={{ backgroundImage: 'url(' + bg + ')', backgroundColor: "grey", backgroundSize: "100%", width: "100%", height: "880px", backgroundRepeat:'no-repeat' }}>
<div style={{ backgroundImage: 'url(' + bg + ')', width:'100%', height:'900%' ,backgroundSize: "100%", backgroundRepeat: 'no-repeat' }}> {/* <div className="Main"></div> */}
<div style={{ boxAlign: 'center' }} className="Main"></div>
<div className="Box"> <div className="Box">
<div className="Name" style={{ padding: '10px', fontSize: '40px' }}> <div className="Name" style={{ fontSize: '30px', 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> </div>
{/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */} {/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
</div> </div>
<div className='Box2'> <div>계산수학</div>
<Link to="/quiz">
<button className="QuizStart" onClick={checking}>Quiz Start !</button>
</Link>
</div>
</div> </div>
</> </>
) )
} }
function checking(event) { function checking() {
if (sessionStorage.getItem('name') === null || sessionStorage.getItem('name').length === 0) { if (sessionStorage.getItem('name') === null || sessionStorage.getItem('name').length === 0) {
alert('이름을 입력하세요') alert('이름을 입력하세요')
...@@ -40,4 +41,4 @@ function checking(event) { ...@@ -40,4 +41,4 @@ function checking(event) {
} }
} }
export default Home; export default Home;
\ No newline at end of file
...@@ -37,4 +37,11 @@ ...@@ -37,4 +37,11 @@
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 20px; font-size: 20px;
letter-spacing: 3px; letter-spacing: 3px;
}
.card{
text-align: center;
margin: 100px;
font-size: 10px;
} }
\ No newline at end of file
...@@ -43,10 +43,11 @@ function Quiz() { ...@@ -43,10 +43,11 @@ function Quiz() {
} }
return ( return (
<> <>
<img src={fight} style={{ position: "absolute", top: "65px",left: "1050px" }} alt="lion" /> <div style={{fontSize:'80px', marginBottom:'100px', textAlign:"center", backgroundColor:'yellow'}}>미적분학 퀴즈</div>
<div className="Quiz"> <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> <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> <div>
<form> <form>
...@@ -58,7 +59,7 @@ function Quiz() { ...@@ -58,7 +59,7 @@ function Quiz() {
)} )}
<input hidden type="submit" value="확인" /> {/*버튼 숨김*/} <input hidden type="submit" value="확인" /> {/*버튼 숨김*/}
</form> </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) <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> ? <Link to="/end">제출</Link>
: <button type="button" onClick={setQuestion} style={{ width: "85px", height: "40px" }} >다음</button> : <button type="button" onClick={setQuestion} style={{ width: "85px", height: "40px" }} >다음</button>
...@@ -82,20 +83,19 @@ function Quiz() { ...@@ -82,20 +83,19 @@ function Quiz() {
<p style={{ textAlign: "center", fontSize: "30px", color: "crimson" }}> <p style={{ textAlign: "center", fontSize: "30px", color: "crimson" }}>
<Timer <Timer
initialTime={3050} initialTime={3600000}
direction="backward" direction="backward"
checkpoints={[ checkpoints={[
{ {
time: 0, time: 0,
callback: setQuestion callback: <Link to="/end">제출</Link>
// history.go(1) // history.go(1)
} }
]} ]}
> >
{() => ( {() => (
<> <>
<Timer.Seconds /> seconds <Timer.Minutes /> : <Timer.Seconds></Timer.Seconds> / 60 : 00 </>
</>
)} )}
</Timer> {/* npm i react-compound-timer */} </Timer> {/* npm i react-compound-timer */}
</p> </p>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment