From c0edb31f330bada46af872db43be57c4e56a766b Mon Sep 17 00:00:00 2001 From: Min Su Date: Wed, 12 Aug 2020 01:18:32 +0900 Subject: [PATCH] --- src/Admin.js | 173 +++++++++++++++++------------- src/AdminAddQuiz.js | 91 ++++++++++++++++ src/App.js | 2 +- src/End.css | 31 +----- src/End.js | 8 +- src/Home.css | 32 ------ src/Quiz.js | 19 ++-- src/{ => img}/End-Image01.jpg | Bin src/{ => img}/I_Love_Math.jpg | Bin src/{ => img}/background_ex1.jpg | Bin src/{ => img}/img_background.jpg | Bin src/{ => img}/img_background1.jpg | Bin src/{ => img}/img_background2.jpg | Bin src/{ => img}/img_calculus.jpg | Bin src/{ => img}/img_calculus2.jpg | Bin src/{ => img}/img_end.jpg | Bin src/{ => img}/img_korea.jpg | Bin src/{ => img}/img_question.png | Bin src/{ => img}/img_quiz.png | Bin src/{ => img}/img_study.jpg | Bin src/index.js | 2 +- 21 files changed, 210 insertions(+), 148 deletions(-) create mode 100644 src/AdminAddQuiz.js rename src/{ => img}/End-Image01.jpg (100%) rename src/{ => img}/I_Love_Math.jpg (100%) rename src/{ => img}/background_ex1.jpg (100%) rename src/{ => img}/img_background.jpg (100%) rename src/{ => img}/img_background1.jpg (100%) rename src/{ => img}/img_background2.jpg (100%) rename src/{ => img}/img_calculus.jpg (100%) rename src/{ => img}/img_calculus2.jpg (100%) rename src/{ => img}/img_end.jpg (100%) rename src/{ => img}/img_korea.jpg (100%) rename src/{ => img}/img_question.png (100%) rename src/{ => img}/img_quiz.png (100%) rename src/{ => img}/img_study.jpg (100%) diff --git a/src/Admin.js b/src/Admin.js index c986189..c0d0e48 100644 --- a/src/Admin.js +++ b/src/Admin.js @@ -54,9 +54,9 @@ function Admin() { localStorage.setItem('T', time * 1000) setDone(true) + } - } function addSelectOption() { let list = function () { return
@@ -70,9 +70,22 @@ function Admin() { } setselectOption(list) } + function addSelectOption() { + let list = function () { + return
+
+
+ +
+
+ +
+ } + setselectOption(list) + } function handleClickQuiz() { let addQuiz = function () { - return Quiz4 + return Quiz4 } setaddQuiz(addQuiz) } @@ -80,34 +93,34 @@ function Admin() { return ( <> {done ? alert('모두 입력되었습니다.') : ''} -
-
+
+
-
-

관리자 페이지

+
+

관리자 페이지

-
+
-

관리자 설정 변경하기

+

관리자 설정 변경하기

- Setting + Setting -

Quiz 입력하기

+

Quiz 입력하기

- Quiz1 - Quiz2 - Quiz3 + Quiz1 + Quiz2 + Quiz3 {addQuiz} - +
-
+
-
+
@@ -143,7 +156,7 @@ function Admin() {
-
+
@@ -156,6 +169,7 @@ function Admin() { 1. {/* */} +
@@ -165,7 +179,7 @@ function Admin() {
- +
{selectOption} @@ -186,101 +200,116 @@ function Admin() {
+
+
+
+
+ +
+
+ +
+ {selectOption} + + + +
-
-
+
-
-
-
+
+
+
-

문제만들기

+

문제만들기

-
-
- 1. - {/* */} - +
+
+ 1. + {/* */} + -
+
-
-
-
-
- +
+
+
+
+ +
+
- +
{selectOption} - + -
+
-
- 정답: - -
+
+ 정답: + +
- + +
-
+
-

문제만들기

+

문제만들기

-
-
- 1. - {/* */} - +
+
+ 1. + {/* */} + -
+
-
-
-
-
- +
+
+
+
+ +
+
- +
{selectOption} - - -
+ +
-
- 정답: - -
+
+ 정답: + +
- + +
-
-
-
) diff --git a/src/AdminAddQuiz.js b/src/AdminAddQuiz.js new file mode 100644 index 0000000..56869b3 --- /dev/null +++ b/src/AdminAddQuiz.js @@ -0,0 +1,91 @@ +import React, { useState } from 'react'; +// 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/App.js b/src/App.js index f6d5755..819249b 100644 --- a/src/App.js +++ b/src/App.js @@ -12,7 +12,7 @@ function App() {
- +
diff --git a/src/End.css b/src/End.css index 58c0e08..37048c2 100644 --- a/src/End.css +++ b/src/End.css @@ -1,29 +1,8 @@ -/* .The-End { - display: flex; -} - .card { - display:flex; - justify-content: center; - width: auto; - margin-top: 5%; - /* text-align:"center"; - } - -.card-body { - width: 18em; - text-align: center; - border: solid 1px; -} - -.card-body2 { - width: 18em; - text-align: center; - + font-size:30px; + text-align:center; } -.card-title2 { - width: 18em; - text-align: center; - border: solid 1px; -} */ +.Box { + margin-top:100px; +} \ No newline at end of file diff --git a/src/End.js b/src/End.js index d4b9320..dbb0666 100644 --- a/src/End.js +++ b/src/End.js @@ -45,19 +45,19 @@ function End() { {scores.map((score, index) => { if (score === -1) { - result = Quiz {index + 1} 정답이 입력되지 않았습니다. + result = Quiz {index + 1} 정답이 입력되지 않았습니다. } else if (score === 1) { - result = Quiz {index + 1} O + result = Quiz {index + 1} O } else { - result = Quiz {index + 1} X + result = Quiz {index + 1} X } return result })} - 총점 + 총점 {score}점 diff --git a/src/Home.css b/src/Home.css index 0935f31..e69de29 100644 --- a/src/Home.css +++ b/src/Home.css @@ -1,32 +0,0 @@ -.Main { - background-image: url("img_study.jpg"); - background-color: "grey"; - background-size: "100%"; - width: "100%"; - height: "880px"; - background-repeat: 'no-repeat'; -} - -.Name{ - font-size: '30px'; - position: "absolute"; - top: "330px"; - left: "38%"; -} - -.input-style{ - margin-left: '30px'; - inline-size: '200px'; - block-size: '40px'; - font-size: '40px'; -} - -.QuizStart{ - margin-top: '35%'; - block-size: '100px'; - inline-size: '200px'; - font-size: '35px' -} - - - \ No newline at end of file diff --git a/src/Quiz.js b/src/Quiz.js index b300e94..236e493 100644 --- a/src/Quiz.js +++ b/src/Quiz.js @@ -1,9 +1,7 @@ import React, { useState } from 'react' import { Link, Redirect } from 'react-router-dom'; import Timer from 'react-compound-timer'; // 타이머쓰기위해 import -import logo from './img_question.png' - - +import logo from './img/img_question.png' const QnA = [ { Q: "6 X 4 = ?", Choose: [6, 12, 18, 24], N: 1 }, @@ -22,21 +20,18 @@ function Quiz() { i: 0, page: 0, }) - const [selected, setSelected] = useState("") //선택한 답을 보여줄 것들 - // const [checked, setChecked] = useState(false) + const [selected, setSelected] = useState("") //선택한 답을 보여줄 것 const [timeout, settimeout] = useState(false) function handleQuestion() { setQuestion({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 }) - // setChecked(false) + setSelected("") //페이지 넘어가면 selected 초기화 } let handleChange = (ev) => { - // ev.preventDefault() //새로고침 안되도록 setSelected(ev.target.value) //selected값 변경 Answers[question.N - 1] = Number(ev.target.id) + 1 - localStorage.setItem('Answers', JSON.stringify(Answers)) } return ( @@ -56,8 +51,8 @@ function Quiz() {
{question.Choose.map((a, index) => -
- +
+
)} @@ -73,7 +68,7 @@ function Quiz() {

{() => ( <> - : / 60 : 00 + : / 30 : 00 )} {/* npm i react-compound-timer */}

diff --git a/src/End-Image01.jpg b/src/img/End-Image01.jpg similarity index 100% rename from src/End-Image01.jpg rename to src/img/End-Image01.jpg diff --git a/src/I_Love_Math.jpg b/src/img/I_Love_Math.jpg similarity index 100% rename from src/I_Love_Math.jpg rename to src/img/I_Love_Math.jpg diff --git a/src/background_ex1.jpg b/src/img/background_ex1.jpg similarity index 100% rename from src/background_ex1.jpg rename to src/img/background_ex1.jpg diff --git a/src/img_background.jpg b/src/img/img_background.jpg similarity index 100% rename from src/img_background.jpg rename to src/img/img_background.jpg diff --git a/src/img_background1.jpg b/src/img/img_background1.jpg similarity index 100% rename from src/img_background1.jpg rename to src/img/img_background1.jpg diff --git a/src/img_background2.jpg b/src/img/img_background2.jpg similarity index 100% rename from src/img_background2.jpg rename to src/img/img_background2.jpg diff --git a/src/img_calculus.jpg b/src/img/img_calculus.jpg similarity index 100% rename from src/img_calculus.jpg rename to src/img/img_calculus.jpg diff --git a/src/img_calculus2.jpg b/src/img/img_calculus2.jpg similarity index 100% rename from src/img_calculus2.jpg rename to src/img/img_calculus2.jpg diff --git a/src/img_end.jpg b/src/img/img_end.jpg similarity index 100% rename from src/img_end.jpg rename to src/img/img_end.jpg diff --git a/src/img_korea.jpg b/src/img/img_korea.jpg similarity index 100% rename from src/img_korea.jpg rename to src/img/img_korea.jpg diff --git a/src/img_question.png b/src/img/img_question.png similarity index 100% rename from src/img_question.png rename to src/img/img_question.png diff --git a/src/img_quiz.png b/src/img/img_quiz.png similarity index 100% rename from src/img_quiz.png rename to src/img/img_quiz.png diff --git a/src/img_study.jpg b/src/img/img_study.jpg similarity index 100% rename from src/img_study.jpg rename to src/img/img_study.jpg diff --git a/src/index.js b/src/index.js index d9826e1..037804f 100644 --- a/src/index.js +++ b/src/index.js @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'; import 'react-dom' import './index.css'; import App from './App'; -// import Quiz from './Quiz'; +import 'bootstrap/dist/css/bootstrap.css'; import * as serviceWorker from './serviceWorker'; import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap' -- GitLab