Commit e4916d4b authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

화면전환

parent 6594e718
...@@ -14,27 +14,57 @@ class Quiz extends React.Component { ...@@ -14,27 +14,57 @@ class Quiz extends React.Component {
super(props) super(props)
this.setAnswer = this.setAnswer.bind(this) this.setAnswer = this.setAnswer.bind(this)
this.setQuestion = this.setQuestion.bind(this) this.setQuestion = this.setQuestion.bind(this)
this.state = {...question[0], i:0, v:""} this.ShowQuiz1 = this.ShowQuiz1.bind(this)
this.state = { ...question[0], i: 0, v: "", r: 0 }
}
ShowQuiz1() {
this.setState({ r: 1 })
} }
setQuestion() { setQuestion() {
this.setState({...question[this.state.i+1], i:this.state.i+1, v:""}) this.setState({ ...question[this.state.i + 1], i: this.state.i + 1, v: "" })
} }
setAnswer(e) { setAnswer(e) {
question[this.state.i]["A"] = e.target.value question[this.state.i]["A"] = e.target.value
this.setState({v:e.target.value}) this.setState({ v: e.target.value })
console.log(this.state) console.log(this.state)
console.log(question) console.log(question)
} }
render() { render() {
return ( if (this.state.r === 1) {
<div> if (this.state.i === 3) {
<h2>Q:{this.state.Q}</h2> return (
<div> <div>
<input type="text" value={this.state.v} name="A" onChange={this.setAnswer} /> <h2>수고하셨습니다!</h2>
</div> </div>
<button type="button" onClick={this.setQuestion}>다음 문제로</button> )
</div> }
) else {
return (
<div className="quiz">
<h2>Q:{this.state.Q}</h2>
<div>
<input type="text" value={this.state.v} name="A" onChange={this.setAnswer} />
</div>
<button type="button" onClick={this.setQuestion}>다음 문제로</button>
</div>
)
}
}
else {
return (
<>
<div className="App">
<h1 style={{ background: "orange", display: "inline-block", border: "3px solid black", width: "200px" }}> Calculus</h1>
</div>
<div className="App">
이름을 입력하세요
<input onChange={(event) => { console.log(event.target.value) }} />
</div>
<button onClick={this.ShowQuiz1} style={{ margin: "30px", marginLeft: "690px", width: "150px", height: "30px", fontFamily: "impact" }}>Quiz Start !</button>
</>
)
}
} }
} }
......
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; 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';
......
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