Merge branch 'jiwon' into TeamJS

package-lock.json

@@ -3773,9 +3773,9 @@
       "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
     },
     "@types/node": {
-      "version": "14.0.26",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.26.tgz",
-      "integrity": "sha512-W+fpe5s91FBGE0pEa0lnqGLL4USgpLgs4nokw16SrBBco/gQxuua7KnArSEOd5iaMqbbSHV10vUDkJYJJqpXKA=="
+      "version": "14.0.27",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.27.tgz",
+      "integrity": "sha512-kVrqXhbclHNHGu9ztnAwSncIgJv/FaxmzXJvGXNdcCpV1b8u1/Mi6z6m0vwy0LzKeXFTPLH0NzwmoJ3fNCIq0g=="
     },
     "@types/parse-json": {
       "version": "4.0.0",

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 (
         <>
-            <div classXName="Box">
-                <div className="Name">
-                    이름을 입력하세요
-            <input onChange={(event) => sessionStorage.setItem('name',event.target.value)} />
+            {done ? <Redirect to='/quiz' /> : ''}
+            <div className="Box">
+                <div className="Name"> 이름을 입력하세요
+                <input onChange={handleChange} />
                 </div>
-                <button onClick={(event) =>  checking(event)}>이름입력완료</button>
-
-                {/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
+                <div>
+                    <button className="QuizStart" onClick={checking}>Quiz Start !</button>
                 </div>
-            
-            <div className='Box2'>
-                <Link to="/quiz">
-                    <button className="QuizStart">Quiz Start !</button>
-                </Link>
             </div>
         </>
-
     )
 }
 function checking(event) {
@@ -33,4 +45,6 @@ function checking(event) {
     }
 }
 
+
+
 export default Home;
\ No newline at end of file

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: "", N:1 },
-    { Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "", N:2 },
-    { Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "", 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,6 +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.enterkey = this.enterkey(this)
         this.state = {
             ...question[0],
@@ -36,10 +37,32 @@ 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함수 실행.");
@@ -54,7 +77,7 @@ class Quiz extends React.Component {
                 <div>
                 {this.state.Choose.map((a) =>
                     <div>{this.state.N}
-                        <input type="radio" name='answer'  id={'anwer'+a} value={a} /*ref={this.textInput}  input 네임을 문제단위로 바꾸어주어야 함. */ />
+                        <input type="radio" name='answer'  id={a} value={a} /*ref={this.textInput}  input 네임을 문제단위로 바꾸어주어야 함. */ />
                         <label for={a}>{a}</label>
                     </div>)                   
 
@@ -71,23 +94,7 @@ class Quiz extends React.Component {
                 }
                 {/* <input onKeyPress="this.enterkey()"/> */}
                                 
-               <Timer
-                    initialTime={5000}
-                    direction="backward"
-                    checkpoints={[
-                        {
-                            time: 0,
-                            callback: () => console.log('콜백실행')
-                            //  history.go(1)
-                        }
-                    ]}
-                >
-                    {() => (
-                        <>
-                            <Timer.Seconds /> seconds
-                        </>
-                    )}
-                </Timer> {/* npm i react-compound-timer */}
+                {this.timer()}
                
             </div>
         )

src/history.js

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