a

src/Quiz.js

@@ -15,13 +15,31 @@ class Quiz extends React.Component {
     // this.setAnswer = this.setAnswer.bind(this)
     this.setQuestion = this.setQuestion.bind(this)
     this.ShowQuiz = this.ShowQuiz.bind(this)
-    this.state = { ...question[0], i: 0, v: "", r: 0, c: "" }
+    this.state = {
+      ...question[0],
+      i: 0,
+      page: 0,
+      list: ""
+    }
   }
   ShowQuiz() {
-    this.setState({  r: 1 })
+    let list = this.state.Choose.map((a) =>
+      <div>
+        <input type="radio" name={a} id={a} value={a} />
+        <label for={a}>{a}</label>
+      </div>)
+    this.setState({ page: 1, list: list })
   }
   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 })
+    let list = this.state.Choose.map((a) =>
+      <div>
+        <input type="radio" name={a} id={a} value={a} />
+        <label for={a}>{a}</label>
+      </div>)
+    this.setState({ list: list })
+
   }
   // setAnswer(e) {
   //   question[this.state.i]["A"] = e.target.value
@@ -30,8 +48,8 @@ class Quiz extends React.Component {
   //   console.log(question)
   // }
   render() {
-    if (this.state.r === 1) {
-      if (this.state.i === 3) {
+    if (this.state.page === 1) {
+      if (this.state.i === question.length) {
         return (
           <div>
             <h2>수고하셨습니다!</h2>
@@ -42,24 +60,15 @@ class Quiz extends React.Component {
         return (
           <div className="Quiz">
             <h2>Q:{this.state.Q}</h2>
-            <div>① {this.state.Choose[0]}</div>
-            <div>② {this.state.Choose[1]}</div>
-            <div>③ {this.state.Choose[2]}</div>
-            <div>④ {this.state.Choose[3]}</div>
+            <div>
+            </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>
               <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>
         )
       }