From bb7453014d8f4e1c79b5406e57799955ca3b738d Mon Sep 17 00:00:00 2001 From: Min Su Date: Mon, 10 Aug 2020 11:10:09 +0900 Subject: [PATCH] --- src/Admin.js | 106 ++++++++++++++++++++++++++++++++++++++++++++ src/AdminSetting.js | 92 ++++++++++++++++++++++++++++++++++++++ src/App.js | 26 ++++++----- src/App2.js | 21 +++++++++ src/End.js | 2 +- src/Home.js | 56 ++++++++++------------- src/Quiz.js | 30 ++++++++----- src/index.js | 1 + src/index2.js | 27 +++++++++++ 9 files changed, 305 insertions(+), 56 deletions(-) create mode 100644 src/Admin.js create mode 100644 src/AdminSetting.js create mode 100644 src/App2.js create mode 100644 src/index2.js diff --git a/src/Admin.js b/src/Admin.js new file mode 100644 index 0000000..18ca0d2 --- /dev/null +++ b/src/Admin.js @@ -0,0 +1,106 @@ +import React, { useState } from 'react'; +import { Container, Nav } from 'react-bootstrap'; +// import { Link } from 'react-router-dom'; + +function Admin() { + + + // let QnAadmin = [] + // let Q = [] + // let choose = [] + // let N = [] + + const [number, setNumber] = useState('') + const [question, setQuestion] = useState('') + const [choose, setChoose] = useState('') + const [answer, setAnswer] = useState('') + const [done, setDone] = useState(false) + + const handleChangenumber = (event) => { + setNumber(event.target.value) + } + const handleChangequestion = (event) => { + setQuestion(event.target.value) + } + const handleChangechoose = (event) => { + setChoose(event.target.value) + } + const handleChangeanswer = (event) => { + setAnswer(event.target.value) + } + + function handleClick() { + + alert('입력이 완료되었습니다') + localStorage.setItem('N', number) + localStorage.setItem('Q', question) + localStorage.setItem('Choose', choose) + localStorage.setItem('Answer', answer) + setDone(true) + + + } + + return ( + <> + {done ? alert('모두 입력되었습니다.') : ''} + + + +
+
+
+
+ +

관리자 문제제출 창

+
+

문제번호를 입력하세요

+ + +
+
+

문제를 입력하세요

+ + +
+
+

보기를 입력하세요(배열형태)

+ + +
+
+

답을 입력하세요

+ + +
+ + + +
+
+
+ {/*
+

패스워드를 입력하세요

+ + +
*/} +
+ + ) +} + +export default Admin \ No newline at end of file diff --git a/src/AdminSetting.js b/src/AdminSetting.js new file mode 100644 index 0000000..28afb3f --- /dev/null +++ b/src/AdminSetting.js @@ -0,0 +1,92 @@ +import React, { useState } from 'react'; +import { Container } from 'react-bootstrap'; +// import { Link } from 'react-router-dom'; + +function AdminSetting() { + + + // let QnAadmin = [] + // let Q = [] + // let choose = [] + // let N = [] + + const [password, setPassword] = useState('') + const [adminpassword, setAdminPassword] = useState('') + const [time, setTime] = useState('') + const [done, setDone] = useState(false) + + const handleChangePassword = (event) => { + setPassword(event.target.value) + } + const handleChangeAdminPassword = (event) => { + setAdminPassword(event.target.value) + } + const handleChangeTime = (event) => { + setTime(event.target.value) + } + + function handleClick() { + if (!password) { + alert('비밀번호를 입력하세요') + } + else if (!adminpassword) { + alert('관리자 비밀번호를 입력하세요') + } + else if (!time) { + alert('타이머를 설정해주세요') + } + else { + alert('입력이 완료되었습니다') + localStorage.setItem('P', password) + localStorage.setItem('AP', adminpassword) + localStorage.setItem('T', time*1000) + setDone(true) + } + } + + return ( + <> + {done ? alert('모두 입력되었습니다.') : ''} + + +
+
+
+
+ +

관리자 설정 변경 창

+
+

변경할 비밀번호를 입력하세요

+ + +
+
+

변경할 관리자 비밀번호를 입력하세요

+ + +
+
+

타이머를 설정하세요(초단위)

+ + +
+ + + + +
+
+
+ {/*
+

패스워드를 입력하세요

+ + +
*/} +
+ + ) + } + + export default AdminSetting \ No newline at end of file diff --git a/src/App.js b/src/App.js index dfc338b..3c5ae18 100644 --- a/src/App.js +++ b/src/App.js @@ -3,8 +3,10 @@ import './App.css'; import Home from './Home' import Quiz from './Quiz' import End from './End' +import Admin from './Admin' +import AdminSetting from './AdminSetting' -import { BrowserRouter as Router, Link, Switch, Route } from 'react-router-dom'; +import { BrowserRouter as Router, Link, Switch, Route, Redirect } from 'react-router-dom'; function App() { return ( @@ -14,18 +16,20 @@ function App() { -
+
- - - - - - - - - + + + + + + + + + + +
diff --git a/src/App2.js b/src/App2.js new file mode 100644 index 0000000..a16e69d --- /dev/null +++ b/src/App2.js @@ -0,0 +1,21 @@ +import React from 'react'; +import './App.css'; + +function App() { + return ( + +
+
+ + + +
+
+
+ + + ) +} + + +export default App; \ No newline at end of file diff --git a/src/End.js b/src/End.js index 2c0910b..53466fd 100644 --- a/src/End.js +++ b/src/End.js @@ -1,5 +1,5 @@ import React from 'react' -import tr from './img_end.jpg'; +// import tr from './img_end.jpg'; // import { Link } from 'react-router-dom'; diff --git a/src/Home.js b/src/Home.js index 169f159..7a469ba 100644 --- a/src/Home.js +++ b/src/Home.js @@ -1,14 +1,15 @@ // import bg from './img_study.jpg' // import korea from './img_korea.jpg' -import React, { useState } from 'react' +import React, { useState} from 'react' import { Redirect } from 'react-router-dom'; - function Home() { const [name, setName] = useState('') const [password, SetPassword] = useState('') const [done, setDone] = useState(false) + const [admin, setAdmin] = useState(false); + const handleChangename = (event) => { setName(event.target.value) } @@ -16,13 +17,20 @@ function Home() { SetPassword(event.target.value) } - function checking() { + function handleClick() { if (!name) { alert('이름을 입력하세요') } else if (!password) { alert('비밀번호를 입력하세요') } + else if (name === 'admin' && password === '0001') { + console.log('done') + + return (setAdmin(true) + + ) + } else if (password !== '0319') { alert('유효한 비밀번호를 입력하세요') } @@ -35,59 +43,41 @@ function Home() { } + + + return ( <> + {admin ? : ''} {done ? : ''} - {/*
-
*/} -
- {/* korea */} +

KOREA UNIVERSITY -

- + +
-
+
-
+
- - {/*
*/} - {/*
- 이름(Name) - -
-
- 비밀번호(Password) - -
-
- -
*/} - - {/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */} - {/*
*/} - - - {/*
*/} ) diff --git a/src/Quiz.js b/src/Quiz.js index e069e6d..603479d 100644 --- a/src/Quiz.js +++ b/src/Quiz.js @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { Link } from 'react-router-dom'; +import { Link, Redirect } from 'react-router-dom'; import Timer from 'react-compound-timer'; // 타이머쓰기위해 import import logo from './img_question.png' @@ -11,7 +11,8 @@ const QnA = [ { Q: "3 - 1 = ?", Choose: [1, 2, 3, 4], A: "2", N: 3 } ] -let Answers = [] +let Answers = [0,0,0] +localStorage.setItem('Answers', JSON.stringify(Answers)) let Solutions = [4, 3, 2] localStorage.setItem('Solutions', JSON.stringify(Solutions)) @@ -24,6 +25,8 @@ function Quiz() { const [selected, setSelected] = useState("") //선택한 답을 보여줄 것들 // const [checked, setChecked] = useState(false) + const [timeout, settimeout] = useState(false) + function handleQuestion() { setQuestion({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 }) // setChecked(false) @@ -35,9 +38,10 @@ function Quiz() { Answers[question.N - 1] = Number(ev.target.id) + 1 localStorage.setItem('Answers', JSON.stringify(Answers)) - } + } return ( -
+ <> +
미적분학 퀴즈
@@ -53,30 +57,32 @@ function Quiz() {
{question.Choose.map((a, index) =>
- +
- )} - {/*버튼 숨김*/} + )}
Your Answer : {selected} {/* 선택한 값 보여줌 */}
{(question.page === QnA.length - 1) ? - + : }

alert('시간이 초과되었습니다.'), + }, { time: 0, - callback: 제출 - // history.go(1) + callback: () => settimeout(true), + } ]} > @@ -92,6 +98,8 @@ function Quiz() {

+ {timeout ? : '' } + ) diff --git a/src/index.js b/src/index.js index e10a9d0..c39d898 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; +import 'react-dom' import './index.css'; import App from './App'; // import Quiz from './Quiz'; diff --git a/src/index2.js b/src/index2.js new file mode 100644 index 0000000..d789e1f --- /dev/null +++ b/src/index2.js @@ -0,0 +1,27 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import 'react-dom' +import './index.css'; + +import Home from './Home' +import Quiz from './Quiz' +import End from './End' + +import { BrowserRouter as Router, Route } from 'react-router-dom'; +// import Quiz from './Quiz'; +import * as serviceWorker from './serviceWorker'; +import 'bootstrap/dist/css/bootstrap.css' + +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(); -- GitLab