diff --git a/package-lock.json b/package-lock.json index e2a2e27185a3dfa54be34103761ebbc661e9fe4a..1bda35b93dd53456ea11a4e8ea49d9e34475c7ff 100644 --- a/package-lock.json +++ b/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", diff --git a/src/App.js b/src/App.js index dfc338bfe17b8b7270803c68afc3811f596d2b76..e0c0c334a1f30c9724ad8c6796fa45a9c3824b40 100644 --- a/src/App.js +++ b/src/App.js @@ -14,17 +14,17 @@ function App() { -
+
- + - + - +
diff --git a/src/End.js b/src/End.js index f28a52fb50e2d2b262efe645f257340dc8a7cc1b..a263bc80413238bd947341f03109f1add4e150db 100644 --- a/src/End.js +++ b/src/End.js @@ -3,12 +3,47 @@ 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 ( -
-

수고하셨습니다!

-
+ <> + + +
+
+ -채점표- +
+
+

이름 : {localStorage.getItem('name')}

+ +

Quiz 1 : {k[0][0]}

+

Quiz 2 : {k[1][0]}

+

Quiz 3 : {k[2][0]}

+

Total Score : {k[0][1] + k[1][1] + k[2][1]}

+
+
+

수고하셨습니다.

+
+
+ ) } -export default End; \ No newline at end of file +export default End; diff --git a/src/Home.js b/src/Home.js index 161f89f5ec8a58e2346804a4a9bc8a1019c6982f..673317f3c6e653e2212a6cabccb7820b195c33ef 100644 --- a/src/Home.js +++ b/src/Home.js @@ -1,27 +1,39 @@ -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() { +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 ( <> -
-
- 이름을 입력하세요 - sessionStorage.setItem('name',event.target.value)} /> + {done ? : ''} +
+
이름을 입력하세요 + +
+
+
- - - {/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */} -
- -
- - -
- ) } function checking(event) { @@ -33,4 +45,6 @@ function checking(event) { } } + + export default Home; \ No newline at end of file diff --git a/src/Quiz.js b/src/Quiz.js index c9a174b68eb9d4332d27624f4730d347f8e74189..b38a23340ee3bd0fb7f1c678ca15b5f3aee9bb5f 100644 --- a/src/Quiz.js +++ b/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( + + {() => ( + <> + seconds + + )} + /* npm i react-compound-timer */ + ) + } // enterkey() { // if ( window.event === 13 ) { // alert("Enter Key 입력 감지 \n함수 실행."); @@ -54,7 +77,7 @@ class Quiz extends React.Component {
{this.state.Choose.map((a) =>
{this.state.N} - +
) @@ -71,27 +94,11 @@ class Quiz extends React.Component { } {/* */} - console.log('콜백실행') - // history.go(1) - } - ]} - > - {() => ( - <> - seconds - - )} - {/* npm i react-compound-timer */} + {this.timer()}
) } } -export default Quiz; \ No newline at end of file +export default Quiz; diff --git a/src/history.js b/src/history.js new file mode 100644 index 0000000000000000000000000000000000000000..2bb8b2b8761e515c2663b92563ef9f80f4e7a004 --- /dev/null +++ b/src/history.js @@ -0,0 +1,3 @@ +import { createBrowserHistory as history} from 'history'; + +export default history() \ No newline at end of file