Skip to content

GitLab

Commit 772c474a authored by baesangjune's avatar baesangjune
Browse files

home

parent d3b1abac
Show whitespace changes
Inline Side-by-side
src/Home.js
View file @ 772c474a
import React, { useState } from 'react' import React from 'react'
import { Redirect } from 'react-router-dom'; import { Link } from 'react-router-dom';
// import { Link } from 'react-router-dom'; import bg from './img_study.jpg'
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 (
<> <>
{done ? <Redirect to='/quiz' /> : ''}
<div style={{ backgroundImage: 'url(' + bg + ')', width:'100%', height:'900%' ,backgroundSize: "100%", backgroundRepeat: 'no-repeat' }}>
<div style={{ boxAlign: 'center' }} className="Main"></div>
<div className="Box"> <div className="Box">
<div className="Name"> 이름을 입력하세요 <div className="Name" style={{ padding: '10px', fontSize: '40px' }}>
<input onChange={handleChange} /> 이름을 입력하세요
<input style={{ marginLeft: '30px', inlineSize: '200px', blockSize: '40px', fontSize: '40px' }} onChange={(event) => sessionStorage.setItem('name', event.target.value)} />
</div>
{/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
</div> </div>
<div>
<div className='Box2'>
<Link to="/quiz">
<button className="QuizStart" onClick={checking}>Quiz Start !</button> <button className="QuizStart" onClick={checking}>Quiz Start !</button>
</Link>
</div> </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.js
View file @ 772c474a
import React 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 fight from './img_quiz.png'
const question = [ const QnA = [
{ Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "24", N:1 }, { Q: "6 X 4 = ?", Choose: [6, 12, 18, 24], A: "", N: 1 },
{ Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "6", N:2 }, { Q: "3 + 3 = ?", Choose: [2, 4, 6, 8], A: "", N: 2 },
{ Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "2", N:3 } { Q: "3 - 1 = ?", Choose: [1, 2, 3, 4], A: "", N: 3 }
] ]
class Quiz extends React.Component { function Quiz() {
constructor(props) { let [question, setQuestionss] = useState({
super(props) ...QnA[0],
this.setQuestion = this.setQuestion.bind(this)
this.answerbox = this.answerbox.bind(this)
this.timer=this.timer.bind(this)
// this.enterkey = this.enterkey(this)
this.state = {
...question[0],
i: 0, i: 0,
page: 0, page: 0,
question })
let [selected, setSelected] = useState("") //선택한 답을 보여줄 것들
function setQuestion() {
setQuestionss({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 })
} }
} let handleChange = (ev) => {
setQuestion() { ev.preventDefault() //새로고침 안되도록
//값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj- setSelected(ev.target.value) //selected값 변경
this.setState({ ...question[this.state.i + 1], i: this.state.i + 1, page: this.state.page + 1 }) let slt = ev.target.value //slt에 선택한값 받아옴
}
//answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장 let count = question.Choose.length //이거 정확히 뭘로할지 모르겠어요 ㅜㅜ
answerbox() {
let answers = document.getElementsByName('answer');
let count = answers.length
// let checked_index = -1; // let checked_index = -1;
let checked_value = ''; let checked_value = '';
checked_value = slt;
//localStorage.setItem('번문제 답' + checked_value, checked_value)
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
if (answers[i].checked) { if (ev.target.checked) { //이거 맞는지도 잘..
// checked_index = i; // checked_index = i;
checked_value = answers[i].value; checked_value = slt;
localStorage.setItem(this.state.i+1+'번문제답', checked_value) localStorage.setItem(question.i + 1 + '번문제 답', checked_value)
localStorage.setItem(this.state.i+1+'번문제정답', question[i-1].A)
} }
} }
} }
timer(){ return (
return( <>
<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>
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
{/* {(question.page === QnA.length - 1)
? <Link to="/end">제출</Link>
: <button type="button" onClick={setQuestion} >다음</button>
} */}
{/* <input onKeyPress="this.enterkey()"/> */}
<p style={{ textAlign: "center", fontSize: "30px", color: "crimson" }}>
<Timer <Timer
initialTime={10010} initialTime={3050}
direction="backward" direction="backward"
checkpoints={[ checkpoints={[
{ {
time: 0, time: 0,
callback: this.setQuestion callback: setQuestion
// history.go(1) // history.go(1)
} }
]} ]}
...@@ -60,45 +97,16 @@ class Quiz extends React.Component { ...@@ -60,45 +97,16 @@ class Quiz extends React.Component {
<Timer.Seconds /> seconds <Timer.Seconds /> seconds
</> </>
)} )}
</Timer> /* npm i react-compound-timer */ </Timer> {/* npm i react-compound-timer */}
) </p>
}
// enterkey() {
// if ( window.event === 13 ) {
// alert("Enter Key 입력 감지 \n함수 실행.");
// }
// }
render() {
return (
<div className="Quiz">
<h2>Q:{this.state.Q}</h2>
{this.answerbox()}
<div>
{this.state.Choose.map((a) =>
<div>{this.state.N}
<input type="radio" name='answer' id={a} value={a} /*ref={this.textInput} input 네임을 문제단위로 바꾸어주어야 함. */ />
<label for={a}>{a}</label>
</div>)
}
</div> </div>
<div className="App" class='left'>정답을 입력하세요</div> </>
)
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
{(this.state.page === question.length-1)
? <Link to="/end">제출</Link>
: <button type="button" onClick={this.setQuestion} >다음</button>
}
{/* <input onKeyPress="this.enterkey()"/> */}
{/* {this.timer()} */}
</div>
)
}
} }
export default Quiz; export default Quiz;
\ No newline at end of file
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