Commit 1eaa8274 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

d

parent bf018d09
...@@ -4,31 +4,31 @@ import './Quiz.css'; ...@@ -4,31 +4,31 @@ import './Quiz.css';
const question = [ const question = [
{ Q: "당신의 성별은?", A: "" }, { Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "" },
{ Q: "당신의 이름은?", A: "" }, { Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "" },
{ Q: "당신의 점수는?", A: "" } { Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "" }
] ]
class Quiz extends React.Component { class Quiz extends React.Component {
constructor(props) { constructor(props) {
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.ShowQuiz1 = this.ShowQuiz1.bind(this) this.ShowQuiz = this.ShowQuiz.bind(this)
this.state = { ...question[0], i: 0, v: "", r: 0 } this.state = { ...question[0], i: 0, v: "", r: 0, c: "" }
} }
ShowQuiz1() { ShowQuiz() {
this.setState({ r: 1 }) 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() {
if (this.state.r === 1) { if (this.state.r === 1) {
if (this.state.i === 3) { if (this.state.i === 3) {
...@@ -42,9 +42,23 @@ class Quiz extends React.Component { ...@@ -42,9 +42,23 @@ class Quiz extends React.Component {
return ( return (
<div className="Quiz"> <div className="Quiz">
<h2>Q:{this.state.Q}</h2> <h2>Q:{this.state.Q}</h2>
<div> <div> {this.state.Choose[0]}</div>
<input type="text" value={this.state.v} name="A" onChange={this.setAnswer} /> <div> {this.state.Choose[1]}</div>
<div> {this.state.Choose[2]}</div>
<div> {this.state.Choose[3]}</div>
<div className="App">
정답을 입력하세요
<select>
<option hidden disabled selected>정답선택</option>
<option value={this.state.Choose[0]}></option>
<option value={this.state.Choose[1]}></option>
<option value={this.state.Choose[2]}></option>
<option value={this.state.Choose[3]}></option>
</select>
</div> </div>
{/* <div>
<input type="text" value={this.state.v} name="A" onChange={this.setAnswer} />
</div> */}
<button type="button" onClick={this.setQuestion}>다음 문제로</button> <button type="button" onClick={this.setQuestion}>다음 문제로</button>
</div> </div>
) )
...@@ -60,7 +74,7 @@ class Quiz extends React.Component { ...@@ -60,7 +74,7 @@ class Quiz extends React.Component {
이름을 입력하세요 이름을 입력하세요
<input onChange={(event) => { console.log(event.target.value) }} /> <input onChange={(event) => { console.log(event.target.value) }} />
</div> </div>
<button className="QuizStart" onClick={this.ShowQuiz1}>Quiz Start !</button> <button className="QuizStart" onClick={this.ShowQuiz}>Quiz Start !</button>
</div> </div>
) )
......
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