end 수정

src/End.js

@@ -5,47 +5,47 @@ import tr from './img_end.jpg';
 // import { Link } from 'react-router-dom';
 
 function End() {
-    let a = []
+    let Scores = []
+    let Score = 0
+    JSON.parse(localStorage.getItem('Answers'))
     for (let i = 0; i < 3; i++) {
 
-        if (localStorage.getItem('답'+(i+1)) === localStorage.getItem('정답'+(i+1))) {
+        if (JSON.parse(localStorage.getItem('Answers'))[i] === JSON.parse(localStorage.getItem('Solutions'))[i]) {
 
-            a[i] =1
-            
-
-            localStorage.setItem('채점'+(i+1),'O')
+            Scores[i] = 1
 
         }
         else {
 
-            a[i] =0
-            
-            localStorage.setItem('채점'+(i+1),'X')
+            Scores[i] = 0
         }
+        Score += Scores[i]
     }
 
-
-
-
-
     return (
         <>
-            <div className="card" style={{fontSize:'30px', textAlign:"center"}} >
+            <div className="card" style={{ fontSize: '30px', textAlign: "center" }} >
                 <div className='card-header'>
-                    -채점표-            
+                    -채점표-
                 <div className='card-body'>
-                    <h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3>
-                    
+                        <h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3>
 
-                    <p className='card-text'>Quiz 1 : {localStorage.getItem('채점1')}</p>
-                    <p className='card-text'>Quiz 2 : {localStorage.getItem('채점2')}</p>
-                    <p className='card-text'>Quiz 3 : {localStorage.getItem('채점3')}</p>
-                    <p className='card-text'>Total Score : {a[0] + a[1] + a[2]}</p>
-                </div>
-                <div style={{marginTop:'100px'}}className="Box text-center">
-                    <img src={tr} alt="수고" />
-       
-                </div>
+                        {Scores.map(score => {
+                            for (let i = 0; i < 3; i++) {
+                                if (score === 1) {
+                                    return <p className='card-text'>Quiz {(i + 1)} : 'O' </p>
+                                }
+                                else { return <p className='card-text'>Quiz {(i + 1)} : 'X' </p> }
+
+                            }
+
+                        })}
+                        <p className='card-text'>Total Score : {Score}</p>
+                    </div>
+                    <div style={{ marginTop: '100px' }} className="Box text-center">
+                        <img src={tr} alt="수고" />
+
+                    </div>
                 </div>
             </div>
         </>

src/Home.js

@@ -11,7 +11,7 @@ function Home() {
         setName(event.target.value)
     }
 
-    function checking(event) {
+    function checking() {
         if (!name) {
             alert('이름을 입력하세요')
         }
@@ -24,6 +24,7 @@ function Home() {
 
     return (
         <>
+        
             {done ? <Redirect to='/quiz' /> : ''}
             <div style={{ backgroundImage: 'url(' + bg + ')', backgroundColor: "grey", backgroundSize: "100%", width: "100%", height: "880px", backgroundRepeat: 'no-repeat' }}>
                 {/* <div className="Main"></div> */}
@@ -39,8 +40,6 @@ function Home() {
                     {/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */}
                 </div>
 
-                <div>계산수학</div>
-
 
             </div>
         </>

src/Quiz.js

@@ -10,7 +10,9 @@ const QnA = [
     { Q: "3 - 1 = ?", Choose: [1, 2, 3, 4], A: "2", N: 3 }
 ]
 
-
+let Answers = []
+let Solutions = [4, 3, 2]
+localStorage.setItem('Solutions', JSON.stringify(Solutions))
 
 function Quiz() {
     let [question, setQuestion] = useState({
@@ -28,11 +30,9 @@ function Quiz() {
         ev.preventDefault()  //새로고침 안되도록
         setSelected(ev.target.value)  //selected값 변경
 
-        let checked_number = ev.target.id;
+        Answers[question.N - 1] = Number(ev.target.id)+1
 
-                localStorage.setItem('답'+(question.N), Number(checked_number)+1)
-                localStorage.setItem('정답' + (question.N), QnA[question.N-1].A)
-                
+        localStorage.setItem('Answers', JSON.stringify(Answers))
     }
     return (
         <>
@@ -46,7 +46,7 @@ function Quiz() {
                     <form>
                         {question.Choose.map((a, index) =>
                             <div key={index}>
-                                <input type="radio" name='answer' id={index} value={a} onClick={handleChange} style={{ marginLeft: "475px", width: "25px", height: "25px" }}  />
+                                <input type="radio" name='answer' id={index} value={a} onClick={handleChange} style={{ marginLeft: "475px", width: "25px", height: "25px" }} />
                                 <label htmlFor={a} style={{ fontSize: "40px", marginLeft: "22px" }}>{a}</label>
                             </div>
                         )}