diff --git a/src/App.css b/src/App.css new file mode 100644 index 0000000000000000000000000000000000000000..74b5e053450a48a6bdb4d71aad648e7af821975c --- /dev/null +++ b/src/App.css @@ -0,0 +1,38 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000000000000000000000000000000000000..dfc338bfe17b8b7270803c68afc3811f596d2b76 --- /dev/null +++ b/src/App.js @@ -0,0 +1,36 @@ +import React from 'react'; +import './App.css'; +import Home from './Home' +import Quiz from './Quiz' +import End from './End' + +import { BrowserRouter as Router, Link, Switch, Route } from 'react-router-dom'; + +function App() { + return ( + +
+ + + +
+
+
+ + + + + + + + + + + +
+ + ) +} + + +export default App; \ No newline at end of file diff --git a/src/App.test.js b/src/App.test.js new file mode 100644 index 0000000000000000000000000000000000000000..4db7ebc25c2d066cd254805af5dda1ed1d2bc819 --- /dev/null +++ b/src/App.test.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + const { getByText } = render(); + const linkElement = getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/src/End.js b/src/End.js new file mode 100644 index 0000000000000000000000000000000000000000..d63dd306c8716cd43426cff4254904648005c40a --- /dev/null +++ b/src/End.js @@ -0,0 +1,57 @@ +import React from 'react' +import tr from './img_end.jpg'; + + +// import { Link } from 'react-router-dom'; + +function End() { + let a = [] + for (let i = 0; i < 3; i++) { + + if (localStorage.getItem('답'+(i+1)) === localStorage.getItem('정답'+(i+1))) { + + a[i] =1 + + + localStorage.setItem('채점'+(i+1),'O') + + } + else { + + a[i] =0 + + localStorage.setItem('채점'+(i+1),'X') + } + } + + + + + + return ( + <> +
+
+ -채점표- +
+

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

+ + +

Quiz 1 : {localStorage.getItem('채점1')}

+

Quiz 2 : {localStorage.getItem('채점2')}

+

Quiz 3 : {localStorage.getItem('채점3')}

+

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

+
+
+ 수고 + +
+
+
+ + + ) +} + +export default End; + diff --git a/src/Home.js b/src/Home.js new file mode 100644 index 0000000000000000000000000000000000000000..492d86815d23e87a35b708a662f7657dcd132e58 --- /dev/null +++ b/src/Home.js @@ -0,0 +1,52 @@ +import bg from './img_study.jpg' +import React, { useState } from 'react' +import { Redirect } 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 ? : ''} +
+ {/*
*/} + +
+
+ 이름을 입력하세요 + +
+ +
+
+ {/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */} +
+ +
계산수학
+ + +
+ + + ) +} + +export default Home; + diff --git a/src/Quiz.css b/src/Quiz.css new file mode 100644 index 0000000000000000000000000000000000000000..01927e36e3fd650fd426d64b3e0fa9a35c6af091 --- /dev/null +++ b/src/Quiz.css @@ -0,0 +1,47 @@ +.Main { + background: gray; + background-image: url(''); + display: inline-block; + border: 3px solid black; + width: 750px; + height: 180px; + text-align: center; + margin-left: 410px; + margin-top: 10px; + font-size: 120px; + font-family: cursive; + color : greenyellow; + text-shadow : + -3px -3px 0 #000, /* 왼쪽 위 그림자 */ + 3px -3px 0 #000, /* 오른쪽 위 그림자 */ + -3px 3px 0 #000, /* 왼쪽 아래 그림자 */ + 3px 3px 0 #000; /* 오른쪽 아래 그림자 */ + +} + +/* .Name {} */ + +.Box { + text-align: center; + margin: 0 auto; + margin-top: 75px; +} + +.QuizStart { + margin: 30px; + margin-left: 650px; + margin-top: 150px; + margin-bottom: 200px; + width: 220px; + height: 50px; + font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; + font-size: 20px; + letter-spacing: 3px; +} + +.card{ + text-align: center; + margin: 100px; + font-size: 10px; + +} \ No newline at end of file diff --git a/src/Quiz.js b/src/Quiz.js new file mode 100644 index 0000000000000000000000000000000000000000..4025d1f3b83d4ca3ab18f312b103bf7d5c4d5ac4 --- /dev/null +++ b/src/Quiz.js @@ -0,0 +1,105 @@ +import React, { useState } from 'react' +import { Link } from 'react-router-dom'; +import Timer from 'react-compound-timer'; // 타이머쓰기위해 import +import logo from './img_question.png' +import fight from './img_quiz.png' + +const QnA = [ + { Q: "6 X 4 = ?", Choose: [6, 12, 18, 24], A: "4", N: 1 }, + { Q: "3 + 3 = ?", Choose: [2, 4, 6, 8], A: "3", N: 2 }, + { Q: "3 - 1 = ?", Choose: [1, 2, 3, 4], A: "2", N: 3 } +] + + + +function Quiz() { + let [question, setQuestion] = useState({ + ...QnA[0], + i: 0, + page: 0, + }) + let [selected, setSelected] = useState("") //선택한 답을 보여줄 것들 + + function handleQuestion() { + setQuestion({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 }) + } + + let handleChange = (ev) => { + ev.preventDefault() //새로고침 안되도록 + setSelected(ev.target.value) //selected값 변경 + + let checked_number = ev.target.id; + + localStorage.setItem('답'+(question.N), Number(checked_number)+1) + localStorage.setItem('정답' + (question.N), QnA[question.N-1].A) + + } + return ( + <> +
미적분학 퀴즈
+ lion +
+

question {question.Q}

+ {/*
정답을 선택하세요
*/} + +
+
+ {question.Choose.map((a, index) => +
+ + +
+ )} + {/*버튼 숨김*/} +
+

Answer : {selected} {/* 선택한 값 보여줌 */} {(question.page === QnA.length - 1) + ? 제출 + : + + } +

+
+ + + + + + {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.handleQuestion발생 */} + {/* {(question.page === QnA.length - 1) + ? 제출 + : + + } */} + + {/* */} + + +

+ 제출 + // history.go(1) + } + ]} + > + {() => ( + <> + : / 60 : 00 + )} + {/* npm i react-compound-timer */} +

+ +
+ + ) + + + +} + + +export default Quiz; \ No newline at end of file diff --git a/src/img_background.jpg b/src/img_background.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d45b2a57011163e9a59e906e076d50c913c1c20c Binary files /dev/null and b/src/img_background.jpg differ diff --git a/src/img_background1.jpg b/src/img_background1.jpg new file mode 100644 index 0000000000000000000000000000000000000000..20c42e6b1dc1149694f9595a23435337ea09a1ae Binary files /dev/null and b/src/img_background1.jpg differ diff --git a/src/img_background2.jpg b/src/img_background2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..41ed0f65ca2d9c71903919a788b4eb7a701f37e1 Binary files /dev/null and b/src/img_background2.jpg differ diff --git a/src/img_calculus.jpg b/src/img_calculus.jpg new file mode 100644 index 0000000000000000000000000000000000000000..48c27e32ecf40ece5ae3fbe4ce5ee2d3c344d6ae Binary files /dev/null and b/src/img_calculus.jpg differ diff --git a/src/img_calculus2.jpg b/src/img_calculus2.jpg new file mode 100644 index 0000000000000000000000000000000000000000..dd3effac2ff1f2cbc0c191e522d088ddd4e11fb1 Binary files /dev/null and b/src/img_calculus2.jpg differ diff --git a/src/img_end.jpg b/src/img_end.jpg new file mode 100644 index 0000000000000000000000000000000000000000..06d368bd89a1e1a72fc0840c8661051e78bf37a3 Binary files /dev/null and b/src/img_end.jpg differ diff --git a/src/img_question.png b/src/img_question.png new file mode 100644 index 0000000000000000000000000000000000000000..2fa93fa9183e2542580a625eabb4bad8ad38eda9 Binary files /dev/null and b/src/img_question.png differ diff --git a/src/img_quiz.png b/src/img_quiz.png new file mode 100644 index 0000000000000000000000000000000000000000..392e7c53428817938740e3ff2841a08923305799 Binary files /dev/null and b/src/img_quiz.png differ diff --git a/src/img_study.jpg b/src/img_study.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a7d06fbc1f6dd6d73e343aa57586d18a94084680 Binary files /dev/null and b/src/img_study.jpg differ diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000000000000000000000000000000000000..ec2585e8c0bb8188184ed1e0703c4c8f2a8419b0 --- /dev/null +++ b/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', + monospace; +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000000000000000000000000000000000000..b2dae02863206e2fdb55a44ec39ead64ae228dce --- /dev/null +++ b/src/index.js @@ -0,0 +1,18 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +// import Quiz from './Quiz'; +import * as serviceWorker from './serviceWorker'; + +ReactDOM.render( + + + , + document.getElementById('root') +); + +// If you want your app to work offline and load faster, you can change +// unregister() to register() below. Note this comes with some pitfalls. +// Learn more about service workers: https://bit.ly/CRA-PWA +serviceWorker.unregister(); diff --git a/src/logo.svg b/src/logo.svg new file mode 100644 index 0000000000000000000000000000000000000000..6b60c1042f58d9fabb75485aa3624dddcf633b5c --- /dev/null +++ b/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/preQuiz.js b/src/preQuiz.js new file mode 100644 index 0000000000000000000000000000000000000000..c8d1526441242f7c0063cb5ce27f6af9275ec3c6 --- /dev/null +++ b/src/preQuiz.js @@ -0,0 +1,116 @@ +import React from 'react'; +// import logo from './logo.svg'; +import './Quiz.css'; + + +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: "" } +] + +class Quiz extends React.Component { + constructor(props) { + super(props) + // this.setAnswer = this.setAnswer.bind(this) + this.setQuestion = this.setQuestion.bind(this) + this.ShowQuiz = this.ShowQuiz.bind(this) + this.answerbox = this.answerbox.bind(this) + this.state = { + ...question[0], + i: 0, + page: 0, + } + // this.textInput = React.createRef() + + } + ShowQuiz() { + this.setState({ page: 1 }) + } + setQuestion() { + //값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj- + this.setState({ ...question[this.state.i + 1], i: this.state.i + 1 }) + + } +//answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장 + answerbox() { + let answers = document.getElementsByName('answer'); + let count = answers.length + // var checked_index = -1; + var checked_value = ''; + + for (var i = 0; i < count; i++) { + if (answers[i].checked) { + // checked_index = i; + checked_value = answers[i].value; + localStorage.setItem('answer-'+i, checked_value) + } + } + // alert('선택된 항목 인덱스: ' + checked_index + '\n선택된 항목 값: ' + checked_value); + + + // if (document.getElementsByName("answer")[i].checked === true) { + + // alert(document.getElementsByName("answer")[i].value); + // } + + + } + + // setAnswer(e) { + // question[this.state.i]["A"] = e.target.value + // this.setState({ v: e.target.value }) + // console.log(this.state) + // console.log(question) + // } + render() { + if (this.state.page === 1) { + this.answerbox() + if (this.state.i === question.length) { + return ( +
+

수고하셨습니다!

+
+ ) + } + else { + return ( +
+

Q:{this.state.Q}

+ {this.state.Choose.map((a) => +
+ + + + +
)} +
+ 정답을 입력하세요 +
+ {/*
+ +
*/} + +
+ ) + } + } + else { + return ( +
+
+

Calculus

+
+
+ 이름을 입력하세요 + { console.log(event.target.value) }} /> +
+ +
+ + ) + } + } +} + +export default Quiz; diff --git a/src/serviceWorker.js b/src/serviceWorker.js new file mode 100644 index 0000000000000000000000000000000000000000..b04b771a82613a80b0532d7082508763620074bf --- /dev/null +++ b/src/serviceWorker.js @@ -0,0 +1,141 @@ +// This optional code is used to register a service worker. +// register() is not called by default. + +// This lets the app load faster on subsequent visits in production, and gives +// it offline capabilities. However, it also means that developers (and users) +// will only see deployed updates on subsequent visits to a page, after all the +// existing tabs open on the page have been closed, since previously cached +// resources are updated in the background. + +// To learn more about the benefits of this model and instructions on how to +// opt-in, read https://bit.ly/CRA-PWA + +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.0/8 are considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + +export function register(config) { + if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebook/create-react-app/issues/2374 + return; + } + + window.addEventListener('load', () => { + const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; + + if (isLocalhost) { + // This is running on localhost. Let's check if a service worker still exists or not. + checkValidServiceWorker(swUrl, config); + + // Add some additional logging to localhost, pointing developers to the + // service worker/PWA documentation. + navigator.serviceWorker.ready.then(() => { + console.log( + 'This web app is being served cache-first by a service ' + + 'worker. To learn more, visit https://bit.ly/CRA-PWA' + ); + }); + } else { + // Is not localhost. Just register service worker + registerValidSW(swUrl, config); + } + }); + } +} + +function registerValidSW(swUrl, config) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + if (installingWorker == null) { + return; + } + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the updated precached content has been fetched, + // but the previous service worker will still serve the older + // content until all client tabs are closed. + console.log( + 'New content is available and will be used when all ' + + 'tabs for this page are closed. See https://bit.ly/CRA-PWA.' + ); + + // Execute callback + if (config && config.onUpdate) { + config.onUpdate(registration); + } + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); + + // Execute callback + if (config && config.onSuccess) { + config.onSuccess(registration); + } + } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} + +function checkValidServiceWorker(swUrl, config) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl, { + headers: { 'Service-Worker': 'script' }, + }) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + const contentType = response.headers.get('content-type'); + if ( + response.status === 404 || + (contentType != null && contentType.indexOf('javascript') === -1) + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); + }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl, config); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); + }); +} + +export function unregister() { + if ('serviceWorker' in navigator) { + navigator.serviceWorker.ready + .then(registration => { + registration.unregister(); + }) + .catch(error => { + console.error(error.message); + }); + } +} diff --git a/src/setupTests.js b/src/setupTests.js new file mode 100644 index 0000000000000000000000000000000000000000..84fe416715eadd9283d8018721a4e0af80531028 --- /dev/null +++ b/src/setupTests.js @@ -0,0 +1,19 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom/extend-expect'; + + +
+ + 정답 + + {this.rateScore.map(rate=>( + + + {this.renderStar(rate)} + + ))} +
+