정답 오답 확인 로털에 저장

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,25 +25,22 @@ 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() {
+        return (
             <Timer
                 initialTime={10010}
                 direction="backward"
@@ -63,17 +60,11 @@ class Quiz extends React.Component {
             </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}
@@ -87,8 +78,8 @@ class Quiz extends React.Component {
 
 
                 {/* 마지막 질문일 경우 /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>
 
                 }