Commit 7171c73a authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

No commit message

No commit message
parent dc027bff
import React from 'react';
import './App.css';
import './Quiz.css';
import Home from './Home'
import Quiz from './Quiz'
import End from './End'
......
import React from 'react'
// import { Link } from 'react-router-dom';
import tr from './img_end.jpg';
function End({history}) {
......@@ -9,6 +10,7 @@ function End({history}) {
{/* <button onClick={() => history.push('/')}>홈 버튼!</button> */}
</div>
<div className="Box">
<img src={tr} alt="수고"/>
<h2>수고하셨습니다!</h2>
</div>
</>
......
import React from 'react'
import { Link } from 'react-router-dom';
import bg from './img_background2.jpg'
function Home() {
return (
<>
<div className="Box">
<div className="Name">
이름을 입력하세요
<input onChange={(event) => sessionStorage.setItem('name', event.target.value)} />
</div>
<div style={{backgroundImage:'url(' + bg + ')', backgroundColor : "grey" ,backgroundSize: "100%"}}>
<div className="Main"></div>
{/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
</div>
<div className="Box">
<div className="Name" style ={{color : "white", fontSize :'30px'}}>
이름을 입력하세요
<input style={{blockSize:'40px', marginLeft:'30px'}} onChange={(event) => sessionStorage.setItem('name', event.target.value)} />
</div>
<div className='Box2'>
<Link to="/quiz">
<button className="QuizStart" onClick={checking}>Quiz Start !</button>
</Link>
{/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
</div>
<div className='Box2'>
<Link to="/quiz">
<button className="QuizStart" onClick={checking}>Quiz Start !</button>
</Link>
</div>
</div>
</>
......@@ -30,7 +35,7 @@ function checking(event) {
}
else {
alert('입력하신 이름은'+sessionStorage.getItem('name')+'입니다.')
alert('입력하신 이름은' + sessionStorage.getItem('name') + '입니다.')
}
}
......
.Main {
background: orange;
background: gray;
background-image: url('img_calculus.jpg');
display: inline-block;
border: 3px solid black;
width: 200px;
width: 750px;
height: 180px;
text-align: center;
margin-left: 410px;
margin-top: 10px;
font-size: 120px;
font-family: cursive;
color : greenyellow;
text-shadow :
-3px -3px 0 #000, /* 왼쪽 위 그림자 */
3px -3px 0 #000, /* 오른쪽 위 그림자 */
-3px 3px 0 #000, /* 왼쪽 아래 그림자 */
3px 3px 0 #000; /* 오른쪽 아래 그림자 */
}
/* .Name {} */
......@@ -11,12 +24,17 @@
.Box {
text-align: center;
margin: 0 auto;
margin-top: 75px;
}
.QuizStart {
margin: 30px;
margin-left: 500px;
width: 150px;
height: 30px;
margin-left: 650px;
margin-top: 150px;
margin-bottom: 200px;
width: 220px;
height: 50px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 20px;
letter-spacing: 3px;
}
\ No newline at end of file
import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import Timer from 'react-compound-timer'; // 타이머쓰기위해 import
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: "", N: 1 },
{ Q: "3 + 3 = ?", Choose: [2, 4, 6, 8], A: "", N: 2 },
{ Q: "3 - 1 = ?", Choose: [1, 2, 3, 4], A: "", N: 3 }
]
function Quiz() {
......@@ -41,56 +42,66 @@ function Quiz() {
}
}
return (
<div className="Quiz">
<h2>Q:{question.Q}</h2>
<div>
<form onSubmit={handleChange}>
{question.Choose.map((a, index) =>
<div key={index}>
<input type="radio" name='answer' id={'anwer' + a} value={a} onClick={handleChange} />
<label htmlFor={a}> {a}</label>
</div>
)}
<input hidden type="submit" value="확인" /> {/*버튼 숨김*/}
</form>
<p>선택한 :<span style={{color : "green", fontWeight : "bold", fontSize: "30px"}}> {selected}</span> {/* 선택한 보여줌 */}
</p>
</div>
<>
<img src={fight} style={{ position: "absolute", top: "65px",left: "1050px" }} 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>
<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" }} />
<label htmlFor={a} style={{ fontSize: "40px", marginLeft: "22px" }}>{a}</label>
</div>
)}
<input hidden type="submit" value="확인" /> {/*버튼 숨김*/}
</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)
? <Link to="/end">제출</Link>
: <button type="button" onClick={setQuestion} style={{ width: "85px", height: "40px" }} >다음</button>
}</span>
</p>
</div>
<div className="App">정답을 입력하세요</div>
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
{(question.page === QnA.length - 1)
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
{/* {(question.page === QnA.length - 1)
? <Link to="/end">제출</Link>
: <button type="button" onClick={setQuestion} >다음</button>
}
{/* <input onKeyPress="this.enterkey()"/> */}
<Timer
initialTime={3050}
direction="backward"
checkpoints={[
{
time: 0,
callback: setQuestion
// history.go(1)
}
]}
>
{() => (
<>
<Timer.Seconds /> seconds
} */}
{/* <input onKeyPress="this.enterkey()"/> */}
<p style={{ textAlign: "center", fontSize: "30px", color: "crimson" }}>
<Timer
initialTime={3050}
direction="backward"
checkpoints={[
{
time: 0,
callback: setQuestion
// history.go(1)
}
]}
>
{() => (
<>
<Timer.Seconds /> seconds
</>
)}
</Timer> {/* npm i react-compound-timer */}
)}
</Timer> {/* npm i react-compound-timer */}
</p>
</div>
</div>
</>
)
......
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