Commit 7306d873 authored by baesangjune's avatar baesangjune
Browse files

2020-07-28

parent 5943a7e8
...@@ -4,17 +4,33 @@ import { Link } from 'react-router-dom'; ...@@ -4,17 +4,33 @@ import { Link } from 'react-router-dom';
function Home() { function Home() {
return ( return (
<div className="Box"> <>
<div classXName="Box">
<div className="Name"> <div className="Name">
이름을 입력하세요 이름을 입력하세요
<input onChange={(event) => { console.log(event.target.value) }} /> <input onChange={(event) => sessionStorage.setItem('name',event.target.value)} />
</div> </div>
<button onClick={(event) => checking(event)}>이름입력완료</button>
{/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
</div>
<div className='Box2'>
<Link to="/quiz"> <Link to="/quiz">
<button className="QuizStart">Quiz Start !</button> <button className="QuizStart">Quiz Start !</button>
</Link> </Link>
</div> </div>
</>
) )
} }
function checking(event) {
if (sessionStorage.getItem('name') === null||'') {
alert('이름을 입력하세요')
// alert('입력하신 이름은'+event.target+'입니다.')
}
}
export default Home; export default Home;
\ No newline at end of file
import React from 'react' import React from 'react'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Timer from 'react-compound-timer'; import Timer from 'react-compound-timer'; // 타이머쓰기위해 import
const question = [ const question = [
{ Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "" }, { Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "", N:1 },
{ Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "" }, { Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "", N:2 },
{ Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "" } { Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "", N:3 }
] ]
class Quiz extends React.Component { class Quiz extends React.Component {
...@@ -13,10 +13,13 @@ class Quiz extends React.Component { ...@@ -13,10 +13,13 @@ class Quiz extends React.Component {
super(props) super(props)
this.setQuestion = this.setQuestion.bind(this) this.setQuestion = this.setQuestion.bind(this)
this.answerbox = this.answerbox.bind(this) this.answerbox = this.answerbox.bind(this)
// this.enterkey = this.enterkey(this)
this.state = { this.state = {
...question[0], ...question[0],
i: 0, i: 0,
page: 0, page: 0,
question
} }
} }
setQuestion() { setQuestion() {
...@@ -37,28 +40,36 @@ class Quiz extends React.Component { ...@@ -37,28 +40,36 @@ class Quiz extends React.Component {
} }
} }
} }
// enterkey() {
// if ( window.event === 13 ) {
// alert("Enter Key 입력 감지 \n함수 실행.");
// }
// }
render() { render() {
return ( return (
<div className="Quiz"> <div className="Quiz">
<h2>Q:{this.state.Q}</h2> <h2>Q:{this.state.Q}</h2>
{this.answerbox()} {this.answerbox()}
{this.state.Choose.map((a) =>
<div> <div>
{this.state.Choose.map((a) =>
<div>{this.state.N}
<input type="radio" name='answer' id={'anwer'+a} value={a} /*ref={this.textInput} input 네임을 문제단위로 바꾸어주어야 함. */ /> <input type="radio" name='answer' id={'anwer'+a} value={a} /*ref={this.textInput} input 네임을 문제단위로 바꾸어주어야 함. */ />
<label for={a}>{a}</label> <label for={a}>{a}</label>
</div>) </div>)
} }
</div>
<div className="App" class='left'>정답을 입력하세요</div> <div className="App" class='left'>정답을 입력하세요</div>
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */} {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
{(this.state.page === question.length-1) {(this.state.page === question.length-1)
? <Link to="/end">제출</Link> ? <Link to="/end">제출</Link>
: <button type="button" onClick={this.setQuestion}>다음</button> : <button type="button" onClick={this.setQuestion} >다음</button>
} }
{/* <input onKeyPress="this.enterkey()"/> */}
<Timer <Timer
initialTime={5000} initialTime={5000}
...@@ -66,7 +77,8 @@ class Quiz extends React.Component { ...@@ -66,7 +77,8 @@ class Quiz extends React.Component {
checkpoints={[ checkpoints={[
{ {
time: 0, time: 0,
callback: () => this.setQuestion, callback: () => console.log('콜백실행')
// history.go(1)
} }
]} ]}
> >
......
...@@ -3,3 +3,17 @@ ...@@ -3,3 +3,17 @@
// expect(element).toHaveTextContent(/react/i) // expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom // learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect'; import '@testing-library/jest-dom/extend-expect';
<Segment color='blue'>
<Form>
<Form.Field>
정답
</Form.Field>
{this.rateScore.map(rate=>(
<Form.Field>
<Radio value={rate} checked={} onCange={}/>
{this.renderStar(rate)}
</Form.Field>
))}
</Form>
</Segment>
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