No commit message

No commit message

src/Admin.js

@@ -54,9 +54,9 @@ function Admin() {
         localStorage.setItem('T', time * 1000)
 
         setDone(true)
+    }
 
 
-    }
     function addSelectOption() {
         let list = function () {
             return <div className="input-group">
@@ -70,9 +70,22 @@ function Admin() {
         }
         setselectOption(list)
     }
+    function addSelectOption() {
+        let list = function () {
+            return <div className="input-group">
+                <div className="input-group-prepend">
+                    <div className="input-group-text">
+                        <input type="radio" id="option" />
+                    </div>
+                </div>
+                <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
+            </div>
+        }
+        setselectOption(list)
+    }
     function handleClickQuiz() {
         let addQuiz = function () {
-            return <a className="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#Quiz4" role="tab" aria-controls="v-pills-settings" aria-selected="false">Quiz4</a>
+            return <a className="nav-link" id="Quiz4-tab" data-toggle="pill" href="#Quiz4" role="tab" >Quiz4</a>
         }
         setaddQuiz(addQuiz)
     }
@@ -80,34 +93,34 @@ function Admin() {
     return (
         <>
             {done ? alert('모두 입력되었습니다.') : ''}
-            <div className="row">
-                <div className="col-3">
+            <div className="row justify-content-md-center mt-5 ">
+                <div className="col-2 text-center border">
                     <div className="container-fluid ">
-                        <div className="navbar-header p-3">
-                            <p className="navbar-brand">관리자 페이지</p>
+                        <div className="navbar-header p-3 ">
+                            <p className="navbar-brand border-bottom ">관리자 페이지</p>
                         </div>
-                        <div className="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
+                        <div className="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
 
-                            <p className="navbar-text">관리자 설정 변경하기</p>
+                            <p className="navbar-text border-bottom">관리자 설정 변경하기</p>
 
-                            <a className="nav-link" id="setting-tab" data-toggle='pill' href="#setting" role="tab" aria-controls="v-pills-home" aria-selected="false">Setting</a>
+                            <a className="nav-link" id="setting-tab" data-toggle='pill' href="#setting" role="tab">Setting</a>
 
 
-                            <p className="navbar-text">Quiz 입력하기</p>
+                            <p className="navbar-text border-bottom">Quiz 입력하기</p>
 
-                            <a className="nav-link" id="Quiz1-tab" data-toggle="pill" href="#Quiz1" role="tab" aria-controls="v-pills-profile" aria-selected="false">Quiz1</a>
-                            <a className="nav-link" id="Quiz2-tab" data-toggle="pill" href="#Quiz2" role="tab" aria-controls="v-pills-messages" aria-selected="false">Quiz2</a>
-                            <a className="nav-link" id="Quiz3-tab" data-toggle="pill" href="#Quiz3" role="tab" aria-controls="v-pills-settings" aria-selected="false">Quiz3</a>
+                            <a className="nav-link" id="Quiz1-tab" data-toggle="pill" href="#Quiz1" role="tab" >Quiz1</a>
+                            <a className="nav-link" id="Quiz2-tab" data-toggle="pill" href="#Quiz2" role="tab" >Quiz2</a>
+                            <a className="nav-link" id="Quiz3-tab" data-toggle="pill" href="#Quiz3" role="tab" >Quiz3</a>
                             {addQuiz}
-                            <button class="btn btn-danger navbar-btn" onClick={handleClickQuiz} >Quiz 추가</button>
+                            <button className="btn btn-danger navbar-btn" onClick={handleClickQuiz} >Quiz 추가</button>
 
 
                         </div>
                     </div>
                 </div>
-                <div className="col-9">
+                <div className="col-8">
                     <div className="tab-content" id="v-pills-tabContent">
-                        <div className="tab-pane fade show active" id="setting" role="tabpanel" aria-labelledby="v-pills-home-tab">
+                        <div className="tab-pane fade show active" id="setting" role="tabpanel" >
                             <div>
                                 <div className="container">
                                     <div className="row d-flex justify-content-center">
@@ -143,7 +156,7 @@ function Admin() {
 
                         </div>
 
-                        <div className="tab-pane fade show active" id="Quiz1" role="tabpanel" aria-labelledby="v-pills-profile-tab">
+                        <div className="tab-pane fade" id="Quiz1" role="tabpanel" >
 
                             <div className="container">
                                 <div className="row d-flex justify-content-center">
@@ -156,6 +169,7 @@ function Admin() {
                                                 <span className="font-weight-bold mr-2 h3">1.</span>
                                                 {/* <input type="text" onChange={handleChangenumber} placeholder="Number" /> */}
                                                 <input type="text" onChange={handleChangeQuestion} placeholder="문제를 입력하세요" />
+
                                             </div>
 
                                             <div className="p-3 ">
@@ -165,7 +179,7 @@ function Admin() {
                                                             <input type="radio" id="option" />
                                                         </div>
                                                     </div>
-                                                    <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
+                                                    <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
                                                 </div>
                                                 {selectOption}
 
@@ -186,10 +200,23 @@ function Admin() {
                                     </div>
                                 </div>
 
+                                <div className="p-3 ">
+                                    <div className="input-group">
+                                        <div className="input-group-prepend">
+                                            <div className="input-group-text">
+                                                <input type="radio" id="option" />
+                                            </div>
+                                        </div>
+                                        <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
+                                    </div>
+                                    {selectOption}
+
+                                    <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
+
                                 </div>
                             </div>
 
-                        <div className="tab-pane fade" id="Quiz2" role="tabpanel" aria-labelledby="v-pills-messages-tab">
+                        <div className="tab-pane fade" id="Quiz2" role="tabpanel">
 
                                 <div className="container">
                                     <div className="row d-flex justify-content-center">
@@ -214,6 +241,8 @@ function Admin() {
                                                         </div>
                                                         <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
                                                     </div>
+                                                    <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
+                                                </div>
                                                 {selectOption}
 
                                                     <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
@@ -234,7 +263,8 @@ function Admin() {
                                     </div>
                                 </div>
                             </div>
-                        <div className="tab-pane fade" id="Quiz3" role="tabpanel" aria-labelledby="v-pills-settings-tab">
+                        </div>
+                        <div className="tab-pane fade" id="Quiz3" role="tabpanel">
                             <div className="container">
                                 <div className="row d-flex justify-content-center">
                                     <div className="col-8">
@@ -258,10 +288,11 @@ function Admin() {
                                                         </div>
                                                         <input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
                                                     </div>
+                                                    <input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
+                                                </div>
                                                 {selectOption}
 
                                                     <button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
-
                                                 </div>
 
                                                 <div className="p-3 ">
@@ -279,8 +310,6 @@ function Admin() {
                                 </div>
                             </div>
                         </div>
-                </div>
-            </div>
 
         </>
     )

src/AdminAddQuiz.js

+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('모두 입력되었습니다.') : ''}
+
+            <div>
+                <div className="container">
+                    <div className="row d-flex justify-content-center">
+                        <div className="col-8">
+
+                            <h1 className="p-3 border">관리자 문제제출 창</h1>
+                            <div className="p-3 border">
+                                <h2>문제번호를 입력하세요</h2>
+                                <input type="text" onChange={handleChangenumber} placeholder="Number" />
+
+                            </div>
+                            <div className="p-3 border">
+                                <h2>문제를 입력하세요</h2>
+                                <input type="text" onChange={handleChangequestion} placeholder="Question" />
+
+                            </div>
+                            <div className="p-3 border">
+                                <h2>보기를 입력하세요(배열형태)</h2>
+                                <input type="text" onChange={handleChangechoose} placeholder="Choose" />
+
+                            </div>
+                            <div className="p-3 border">
+                                <h2>답을 입력하세요</h2>
+                                <input type="text" onChange={handleChangeanswer} placeholder="Answer" />
+
+                            </div>
+
+                            <label for="inputLogin" className="d-flex justify-content-center">
+                                <button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
+                            </label>
+
+                        </div>
+                    </div>
+                </div>
+                {/* <div className="p-3 border">
+                    <h2>패스워드를 입력하세요</h2>
+                    <input type="text" onChange={handleChangeanswer} placeholder="Answer" />
+
+                </div> */}
+            </div>
+        </>
+    )
+}
+
+export default Admin
\ No newline at end of file

src/App.js

@@ -12,7 +12,7 @@ function App() {
     <Router>
       <header>
         <Link to="/">
-          <button>Calculus</button>
+          <button className="calcButton">Calculus</button>
         </Link>
       </header>
       <hr />

src/End.css

-/* .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;
+    font-size:30px;
+    text-align:center;
 }
 
-.card-body2 {
-    width: 18em;
-    text-align: center;
-
+.Box {
+    margin-top:100px;
 }
\ No newline at end of file
-
-.card-title2 {
-    width: 18em;
-    text-align: center;
-    border: solid 1px;
-} */

src/End.js

@@ -45,19 +45,19 @@ function End() {
                         {scores.map((score, index) => {
                             
                             if (score === -1) {
-                                result = <tr><th>Quiz {index + 1}</th> <td> 정답이 입력되지 않았습니다. </td></tr>
+                                result = <tr><td>Quiz {index + 1}</td> <td> 정답이 입력되지 않았습니다. </td></tr>
                             }
                             else if (score === 1) {
-                                result = <tr><th>Quiz {index + 1}</th> <td> O </td></tr>
+                                result = <tr><td>Quiz {index + 1}</td> <td> O </td></tr>
                             }
                             else {
-                                result = <tr><th>Quiz {index + 1}</th> <td> X</td></tr>
+                                result = <tr><td>Quiz {index + 1}</td> <td> X</td></tr>
                             }
 
                             return result
                         })}
                         <tr>
-                            <th>총점</th>
+                            <td>총점</td>
                             <td>{score}점</td>
                         </tr>
                     </tbody>

src/Home.css

-.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

src/Quiz.js

 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() {
                     <div className="mt-2">
                         <form>
                             {question.Choose.map((a, index) =>
-                                <div key={index}>
-                                    <input type="radio" name='answer' id={index} value={a} onChange={handleChange} checked={parseInt(selected) === a} />
+                                <div>
+                                    <input type="radio" name='answer' id={index} value={a} onChange={handleChange} checked={selected === String(a)} />
                                     <label className="font-weight-bold" htmlFor={a}>{a}</label>
                                 </div>
                             )}                          
@@ -73,7 +68,7 @@ function Quiz() {
                         </div>
                         <p className="h3 text-center text-danger ">
                             <Timer
-                                initialTime={36000}
+                                initialTime={30010}
                                 direction="backward"
                                 checkpoints={[
                                     {time:1,
@@ -88,7 +83,7 @@ function Quiz() {
                             >
                                 {() => (
                                     <>
-                                        <Timer.Minutes /> : <Timer.Seconds></Timer.Seconds> / 60 : 00                        </>
+                                        <Timer.Minutes /> : <Timer.Seconds></Timer.Seconds> / 30 : 00                        </>
                                 )}
                             </Timer>     {/* npm i react-compound-timer */}
                         </p>