정답 오답 확인 로털에 저장

src/App.js

@@ -11,7 +11,7 @@ function App() {
     <Router>
       <header>
         <Link to="/">
-          <button>Calculus</button>
+          <button className="calcButton">Calculus</button>
         </Link>
       </header>
       <hr />

src/End.js

 import React from 'react'
 // import { Link } from 'react-router-dom';
 
-
 function End() {
     let k = []
     for (let i = 0; i < 3; i++) {
-
-        if (localStorage.getItem(i + '번문제답') === localStorage.getItem(i + '번문제정답')) {
+        if (localStorage.getItem((i+1) + '번문제답') === localStorage.getItem((i+1) + '번문제정답')) {
             alert('정답입니다.')
             k[i] = ['O', 1]
-
         }
         else {
             alert('오답입니다.')
             k[i] = ['X', 0]
         }
     }
-
-
-
-
-
     return (
         <>
-
-
             <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>

src/Quiz.js

@@ -3,9 +3,9 @@ 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: "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 }
+    { 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 {
@@ -13,7 +13,7 @@ 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.timer = this.timer.bind(this)
         // this.enterkey = this.enterkey(this)
         this.state = {
             ...question[0],
@@ -25,77 +25,68 @@ class Quiz extends React.Component {
     }
     setQuestion() {
         //값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj-
+        this.answerbox()
         this.setState({ ...question[this.state.i + 1], i: this.state.i + 1, page: this.state.page + 1 })
     }
     //answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장 
     answerbox() {
         let answers = document.getElementsByName('answer');
-        let count = answers.length
-        // let checked_index = -1;
-        let checked_value = '';
-        for (let i = 0; i < count; i++) {
-            if (answers[i].checked) {
-                // checked_index = i;
-                checked_value = answers[i].value;
-                localStorage.setItem(this.state.i+'번문제답', checked_value)
-                localStorage.setItem(this.state.i+'번문제정답', question[i-1].A)
+        for (let i = 0; i < answers.length; i++) {
+            if (answers[i].checked === true) {
+                localStorage.setItem((this.state.i + 1) + '번문제답', answers[i].value)
+                localStorage.setItem((this.state.i + 1) + '번문제정답', question[this.state.i].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 */
-       )
+
+    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>{this.state.N}
-                        <input type="radio" name='answer'  id={a} value={a} /*ref={this.textInput}  input 네임을 문제단위로 바꾸어주어야 함. */ />
-                        <label for={a}>{a}</label>
-                    </div>)                   
+                    {this.state.Choose.map((a) =>
+                        <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" class='left'>정답을 입력하세요</div>
 
-                
+
                 {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
-                {(this.state.page === question.length-1)
-                    ? <Link to="/end">제출</Link>
+                {(this.state.page === question.length - 1)
+                    ? <Link to="/end"><button onClick={this.answerbox}>제출</button></Link>
                     : <button type="button" onClick={this.setQuestion} >다음</button>
-                    
+
                 }
                 {/* <input onKeyPress="this.enterkey()"/> */}
-                                
+
                 {this.timer()}
-               
+
             </div>
         )
     }