Skip to content

GitLab

Commit 8b898374 authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

updated

parent 7171c73a
Hide whitespace changes
Inline Side-by-side
src/App.js
View file @ 8b898374
import React from 'react'; import React from 'react';
import './App.css'; import './App.css';
import './Quiz.css';
import Home from './Home' import Home from './Home'
import Quiz from './Quiz' import Quiz from './Quiz'
import End from './End' import End from './End'
......
src/End.css 0 → 100644
View file @ 8b898374
.card {
font-size:30px;
text-align:center;
}
.Box {
margin-top:100px;
}
\ No newline at end of file
src/End.js
View file @ 8b898374
import React from 'react' import React, { createContext } from 'react'
import tr from './img/img_end.jpg';
import './End.css'
// import { Link } from 'react-router-dom'; // import { Link } from 'react-router-dom';
import tr from './img_end.jpg';
function End() {
let a = []
for (let i = 0; i < 3; i++) {
if (localStorage.getItem('답'+(i+1)) === localStorage.getItem('정답'+(i+1))) {
a[i] =1
localStorage.setItem('채점'+(i+1),'O')
}
else {
a[i] =0
localStorage.setItem('채점'+(i+1),'X')
}
}
function End({history}) {
return ( return (
<> <>
<div> <div className="card" style={{fontSize:'30px', textAlign:"center"}} >
{/* <button onClick={() => history.push('/')}>홈 버튼!</button> */} <div className='card-header'>
</div> -채점표-
<div className="Box"> <div className='card-body'>
<img src={tr} alt="수고"/> <h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3>
<h2>수고하셨습니다!</h2>
<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="수고" />
</div>
</div>
</div> </div>
</> </>
) )
} }
export default End; export default End;
\ No newline at end of file
src/Home.css 0 → 100644
View file @ 8b898374
.container {
background-image: url("./img/img_study.jpg");
background-color: white;
background-size: 100%;
width: 100%;
height: 880px;
background-repeat: no-repeat;
}
/* .Name {
font-size: 30px;
position: absolute;
top: 330px;
left: 38%
} */
/* .inputBox {
margin-left: 30px;
inline-size: 200px;
block-size: 40px;
font-size: 40px;
} */
/* .QuizStart {
margin-top: 35%;
block-size: 100px;
inline-size: 200px;
font-size: 35px;
} */
\ No newline at end of file
src/Home.js
View file @ 8b898374
import React from 'react' import bg from './img_study.jpg'
import { Link } from 'react-router-dom'; import React, { useState } from 'react'
import bg from './img_background2.jpg' import { Redirect } from 'react-router-dom';
import './Home.css'
function Home() { function Home() {
const [name, setName] = useState('')
const [done, setDone] = useState(false)
const handleChange = (event) => {
setName(event.target.value)
}
function checking(event) {
if (!name) {
alert('이름을 입력하세요')
}
else {
alert('입력하신 이름은' + name + '입니다.')
localStorage.setItem('name', name)
setDone(true)
}
}
return ( return (
<> <>
<div style={{backgroundImage:'url(' + bg + ')', backgroundColor : "grey" ,backgroundSize: "100%"}}> {done ? <Redirect to='/quiz' /> : ''}
<div 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 ={{color : "white", fontSize :'30px'}}> <div className="container">
이름을 입력하세요 <div className="text-center">
<input style={{blockSize:'40px', marginLeft:'30px'}} onChange={(event) => sessionStorage.setItem('name', event.target.value)} /> 이름을 입력하세요
<input className="inputBox" onChange={handleChange} />
<div className='Box2'>
<button className="btn btn-dark" onClick={checking}>Quiz Start !</button>
</div>
</div> </div>
{/* localStorage를 사용해야는지 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) {
if (sessionStorage.getItem('name') === null || sessionStorage.getItem('name').length === 0) {
alert('이름을 입력하세요')
} )
else {
alert('입력하신 이름은' + sessionStorage.getItem('name') + '입니다.')
}
}
}
export default Home; export default Home;
src/Quiz.css
View file @ 8b898374
.Main { .Main {
background: gray; background: gray;
background-image: url('img_calculus.jpg'); background-image: url('');
display: inline-block; display: inline-block;
border: 3px solid black; border: 3px solid black;
width: 750px; width: 750px;
...@@ -31,10 +31,17 @@ ...@@ -31,10 +31,17 @@
margin: 30px; margin: 30px;
margin-left: 650px; margin-left: 650px;
margin-top: 150px; margin-top: 150px;
margin-bottom: 200px; margin-bottom: 200px;
width: 220px; width: 220px;
height: 50px; height: 50px;
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;
} }
\ No newline at end of file
.card{
text-align: center;
margin: 100px;
font-size: 10px;
}
src/Quiz.js
View file @ 8b898374
import React, { useState } from 'react' import React, { useState } from 'react'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Timer from 'react-compound-timer'; // 타이머쓰기위해 import import Timer from 'react-compound-timer'; // 타이머쓰기위해 import
import logo from './img_question.png' import logo from './img/img_question.png'
import fight from './img_quiz.png' import fight from './img/img_quiz.png'
const QnA = [ const QnA = [
{ Q: "6 X 4 = ?", Choose: [6, 12, 18, 24], A: "", N: 1 }, { Q: "6 X 4 = ?", Choose: [6, 12, 18, 24], A: "4", N: 1 },
{ Q: "3 + 3 = ?", Choose: [2, 4, 6, 8], A: "", N: 2 }, { Q: "3 + 3 = ?", Choose: [2, 4, 6, 8], A: "3", N: 2 },
{ Q: "3 - 1 = ?", Choose: [1, 2, 3, 4], A: "", N: 3 } { Q: "3 - 1 = ?", Choose: [1, 2, 3, 4], A: "2", N: 3 }
] ]
function Quiz() { function Quiz() {
let [question, setQuestionss] = useState({ let [question, setQuestion] = useState({
...QnA[0], ...QnA[0],
i: 0, i: 0,
page: 0, page: 0,
}) })
let [selected, setSelected] = useState("") //선택한 답을 보여줄 것들 let [selected, setSelected] = useState("") //선택한 답을 보여줄 것들
function setQuestion() { function handleQuestion() {
setQuestionss({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 }) setQuestion({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 })
} }
let handleChange = (ev) => { let handleChange = (ev) => {
ev.preventDefault() //새로고침 안되도록 ev.preventDefault() //새로고침 안되도록
setSelected(ev.target.value) //selected값 변경 setSelected(ev.target.value) //selected값 변경
let slt = ev.target.value //slt에 선택한값 받아옴
let checked_number = ev.target.id;
let count = question.Choose.length //이거 정확히 뭘로할지 모르겠어요 ㅜㅜ
localStorage.setItem('답' + (question.N), Number(checked_number) + 1)
// let checked_index = -1; localStorage.setItem('정답' + (question.N), QnA[question.N - 1].A)
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)
}
}
} }
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", 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>
{question.Choose.map((a, index) => {question.Choose.map((a, index) =>
<div key={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> <label htmlFor={a} style={{ fontSize: "40px", marginLeft: "22px" }}>{a}</label>
</div> </div>
)} )}
<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={handleQuestion} style={{ width: "85px", height: "40px" }} >다음</button>
}</span> }</span>
</p> </p>
...@@ -70,10 +64,10 @@ function Quiz() { ...@@ -70,10 +64,10 @@ function Quiz() {
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */} {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.handleQuestion발생 */}
{/* {(question.page === QnA.length - 1) {/* {(question.page === QnA.length - 1)
? <Link to="/end">제출</Link> ? <Link to="/end">제출</Link>
: <button type="button" onClick={setQuestion} >다음</button> : <button type="button" onClick={handleQuestion} >다음</button>
} */} } */}
...@@ -82,20 +76,19 @@ function Quiz() { ...@@ -82,20 +76,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>
......
src/index.js
View file @ 8b898374
...@@ -4,6 +4,7 @@ import './index.css'; ...@@ -4,6 +4,7 @@ import './index.css';
import App from './App'; import App from './App';
// import Quiz from './Quiz'; // import Quiz from './Quiz';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render( ReactDOM.render(
<React.StrictMode> <React.StrictMode>
......
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