home

package.json

@@ -7,6 +7,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
+    "react-compound-timer": "^1.2.0",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1"

src/App.js

@@ -14,17 +14,17 @@ function App() {
           <button>Calculus</button>
         </Link>
       </header>
-      <hr/>
+      <hr />
       <div>
         <Switch>
           <Route exact path="/">
-            <Home/>
+            <Home />
           </Route>
           <Route path="/quiz">
-            <Quiz/>
+            <Quiz />
           </Route>
           <Route path="/end">
-            <End/>
+            <End />
           </Route>
         </Switch>
       </div>

src/End.js

@@ -3,10 +3,45 @@ import React from 'react'
 
 
 function End() {
+    let k = []
+    for (let i = 0; i < 3; i++) {
+
+        if (localStorage.getItem(i + '번문제답') === localStorage.getItem(i + '번문제정답')) {
+            alert('정답입니다.')
+            k[i] = ['O', 1]
+
+        }
+        else {
+            alert('오답입니다.')
+            k[i] = ['X', 0]
+        }
+    }
+
+
+
+
+
     return (
-        <div className="Box">
-            <h2>수고하셨습니다!</h2>
+        <>
+
+
+            <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>
+                    <p className='card-text'>Total Score : {k[0][1] + k[1][1] + k[2][1]}</p>
+                </div>
+                <div className="Box text-center">
+                    <h1>수고하셨습니다.</h1>
+                </div>
             </div>
+        </>
 
     )
 }

src/Home.js

-import React from 'react'
-import { Link } from 'react-router-dom';
+import React, { useState } from 'react'
+import { Redirect } from 'react-router-dom';
+// import { Link } from 'react-router-dom';
 
 
 function Home() {
+    const [name, setName] = useState('')
+    const [done, setDone] = useState(false)
+
+    const handleChange = (event) => {
+        setName(event.target.value)
+    }
+
+    function checking(event) {
+        if (!name) {
+            alert('이름을 입력하세요')
+        }
+        else {
+            alert('입력하신 이름은' + name + '입니다.')
+            localStorage.setItem('name', name)
+            setDone(true)
+        }
+    }
+
     return (
+        <>
+            {done ? <Redirect to='/quiz' /> : ''}
             <div className="Box">
-            <div className="Name">
-                이름을 입력하세요
-            <input onChange={(event) => { console.log(event.target.value) }} />
+                <div className="Name"> 이름을 입력하세요
+                <input onChange={handleChange} />
                 </div>
-            <Link to="/quiz">
-                <button className="QuizStart">Quiz Start !</button>
-            </Link>
+                <div>
+                    <button className="QuizStart" onClick={checking}>Quiz Start !</button>
                 </div>
-
+            </div>
+        </>
     )
 }
 
+
+
 export default Home;
\ No newline at end of file

src/Quiz.js

 import React from 'react'
 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: "" },
-    { Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "" },
-    { Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "" }
+    { 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 {
@@ -12,10 +13,14 @@ 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.enterkey = this.enterkey(this)
         this.state = {
             ...question[0],
             i: 0,
             page: 0,
+            question
+
         }
     }
     setQuestion() {
@@ -32,28 +37,65 @@ class Quiz extends React.Component {
             if (answers[i].checked) {
                 // checked_index = i;
                 checked_value = answers[i].value;
-                localStorage.setItem('answer-' + i, checked_value)
+                localStorage.setItem(this.state.i+'번문제답', checked_value)
+                localStorage.setItem(this.state.i+'번문제정답', question[i-1].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 */
+       )
     }
+    // enterkey() {
+    //     if ( window.event === 13 ) {
+    //         alert("Enter Key 입력 감지 \n함수 실행.");
+    //     }
+    // }
 
     render() {
         return (
             <div className="Quiz">
                 <h2>Q:{this.state.Q}</h2>
-                {this.state.Choose.map((a) =>
+                {this.answerbox()}
                 <div>
-                        <input type="radio" name='answer' id={a} value={a} /*ref={this.textInput}*/ />
+                {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 className="App">정답을 입력하세요</div>
+                </div>
+                <div className="App" class='left'>정답을 입력하세요</div>
+
                 
                 {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
                 {(this.state.page === question.length-1)
                     ? <Link to="/end">제출</Link>
-                    : <button type="button" onClick={this.setQuestion}>다음</button>
+                    : <button type="button" onClick={this.setQuestion} >다음</button>
+                    
                 }
+                {/* <input onKeyPress="this.enterkey()"/> */}
+                                
+                {this.timer()}
+               
             </div>
         )
     }

src/history.js

+import { createBrowserHistory as history} from 'history';
+
+export default history()
\ No newline at end of file