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

home

parent 4273ad60
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -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