Commit 89cbc788 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

home

parent 4273ad60
This diff is collapsed.
......@@ -14,17 +14,17 @@ function App() {
<button>Calculus</button>
</Link>
</header>
<hr/>
<hr />
<div>
<Switch>
<Route exact path="/">
<Home/>
<Home />
</Route>
<Route path="/quiz">
<Quiz/>
<Quiz />
</Route>
<Route path="/end">
<End/>
<End />
</Route>
</Switch>
</div>
......
......@@ -3,12 +3,47 @@ import React from 'react'
function End() {
let k = []
for (let i = 0; i < 3; i++) {
if (localStorage.getItem(i + '번문제답') === localStorage.getItem(i + '번문제정답')) {
alert('정답입니다.')
k[i] = ['O', 1]
}
else {
alert('오답입니다.')
k[i] = ['X', 0]
}
}
return (
<div className="Box">
<h2>수고하셨습니다!</h2>
</div>
<>
<div className="card " >
<div className='card-header'>
-채점표-
</div>
<div className='card-body'>
<h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3>
<p className='card-text'>Quiz 1 : {k[0][0]}</p>
<p className='card-text'>Quiz 2 : {k[1][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>
</div>
<div className="Box text-center">
<h1>수고하셨습니다.</h1>
</div>
</div>
</>
)
}
export default End;
\ No newline at end of file
export default End;
import React from 'react'
import { Link } from 'react-router-dom';
import React, { useState } from 'react'
import { Redirect } from 'react-router-dom';
// import { Link } from 'react-router-dom';
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 (
<div className="Box">
<div className="Name">
이름을 입력하세요
<input onChange={(event) => { console.log(event.target.value) }} />
<>
{done ? <Redirect to='/quiz' /> : ''}
<div className="Box">
<div className="Name"> 이름을 입력하세요
<input onChange={handleChange} />
</div>
<div>
<button className="QuizStart" onClick={checking}>Quiz Start !</button>
</div>
</div>
<Link to="/quiz">
<button className="QuizStart">Quiz Start !</button>
</Link>
</div>
</>
)
}
export default Home;
\ No newline at end of file
import React from 'react'
import { Link } from 'react-router-dom';
import Timer from 'react-compound-timer'; // 타이머쓰기위해 import
const question = [
{ Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "" },
{ Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "" },
{ Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "" }
{ Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "24", N:1 },
{ Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "6", N:2 },
{ Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "2", N:3 }
]
class Quiz extends React.Component {
......@@ -12,10 +13,14 @@ class Quiz extends React.Component {
super(props)
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,
page: 0,
question
}
}
setQuestion() {
......@@ -32,31 +37,68 @@ class Quiz extends React.Component {
if (answers[i].checked) {
// checked_index = i;
checked_value = answers[i].value;
localStorage.setItem('answer-' + i, checked_value)
localStorage.setItem(this.state.i+'번문제답', checked_value)
localStorage.setItem(this.state.i+'번문제정답', question[i-1].A)
}
}
}
timer(){
return(
<Timer
initialTime={10010}
direction="backward"
checkpoints={[
{
time: 0,
callback: this.setQuestion
// history.go(1)
}
]}
>
{() => (
<>
<Timer.Seconds /> seconds
</>
)}
</Timer> /* npm i react-compound-timer */
)
}
// 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>
<input type="radio" name='answer' id={a} value={a} /*ref={this.textInput}*/ />
<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 className="App">정답을 입력하세요</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>
: <button type="button" onClick={this.setQuestion} >다음</button>
}
{/* <input onKeyPress="this.enterkey()"/> */}
{this.timer()}
</div>
)
}
}
export default Quiz;
\ No newline at end of file
export default Quiz;
import { createBrowserHistory as history} from 'history';
export default history()
\ 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