Skip to content

GitLab

Commit 1195959c authored by 김민수's avatar 김민수
Browse files

0810

parent 04e75b30
Hide whitespace changes
Inline Side-by-side
src/Admin.js
View file @ 1195959c
import React, { useState } from 'react';
import { Container, Nav } from 'react-bootstrap';
// import { Link } from 'react-router-dom';
function Admin() {
......@@ -14,6 +14,11 @@ function Admin() {
const [question, setQuestion] = useState('')
const [choose, setChoose] = useState('')
const [answer, setAnswer] = useState('')
const [password, setPassword] = useState('')
const [adminpassword, setAdminPassword] = useState('')
const [time, setTime] = useState('')
const [addQuiz, setaddQuiz ] = useState('')
const [done, setDone] = useState(false)
const handleChangenumber = (event) => {
......@@ -28,6 +33,16 @@ function Admin() {
const handleChangeanswer = (event) => {
setAnswer(event.target.value)
}
const handleChangePassword = (event) => {
setPassword(event.target.value)
}
const handleChangeAdminPassword = (event) => {
setAdminPassword(event.target.value)
}
const handleChangeTime = (event) => {
setTime(event.target.value)
}
function handleClick() {
......@@ -36,68 +51,202 @@ function Admin() {
localStorage.setItem('Q', question)
localStorage.setItem('Choose', choose)
localStorage.setItem('Answer', answer)
localStorage.setItem('P', password)
localStorage.setItem('AP', adminpassword)
localStorage.setItem('T', time * 1000)
setDone(true)
}
function handleClickQuiz() {
let addQuiz =function(){
return <a className="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Quiz4</a>
}
setaddQuiz(addQuiz)
}
return (
<>
{done ? alert('모두 입력되었습니다.') : ''}
<div className="row">
<div className="col-3">
<div className="container-fluid ">
<div className="navbar-header p-3">
<a className="navbar-brand" href="/admin">관리자 페이지</a>
</div>
<div className="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<li className="dropdown p-4 mb-3">
<a className="dropdown-toggle" data-toggle="dropdown" href="-pills-profile-tab">관리자 설정 변경하기
<span className="caret"></span></a>
<ul className="dropdown-menu">
<a className="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Setting</a>
</ul>
</li>
<li className="dropdown p-4">
<a className="dropdown-toggle" data-toggle="dropdown" href="-pills-profile-tab">Quiz 입력하기
<span className="caret"></span></a>
<ul className="dropdown-menu">
<a className="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Quiz1</a>
<a className="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Quiz2</a>
<a className="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Quiz3</a>
{addQuiz}
<button class="btn btn-danger navbar-btn" onClick={handleClickQuiz} >Quiz 추가</button>
</ul>
</li>
<Nav
activeKey="/home"
>
<Nav.Item>
<Nav.Link href="/AdminSetting">Setting</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-2">Link</Nav.Link>
</Nav.Item>
</Nav>
<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>
</div>
<div className="col-9">
<div className="tab-content" id="v-pills-tabContent">
<div className="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div>
<div className="container">
<div className="row d-flex justify-content-center">
<div className="col-8">
</div>
<div className="p-3 border">
<h2>문제를 입력하세요</h2>
<input type="text" onChange={handleChangequestion} placeholder="Question" />
<h1 className="p-3 border">관리자 설정 변경 창</h1>
<div className="p-3 border">
<h2>변경할 비밀번호를 입력하세요</h2>
<input type="text" onChange={handleChangePassword} placeholder="New Password" />
</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={handleChangeAdminPassword} placeholder="New Admin Password" />
</div>
<div className="p-3 border">
<h2>타이머를 설정하세요(초단위)</h2>
<input type="text" onChange={handleChangeTime} placeholder="Set Time" />
</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>
<div className="p-3 border">
<h2>답을 입력하세요</h2>
<input type="text" onChange={handleChangeanswer} placeholder="Answer" />
</div>
<div className="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<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="Nunber" />
</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>
<label for="inputLogin" className="d-flex justify-content-center">
<button className="mt-4 btn btn-dark" onClick={handleClick}>작성완료</button>
</label>
</div>
<div className="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<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="Nunber" />
</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>
<div className="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<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="Nunber" />
</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>
</div>
</div>
{/* <div className="p-3 border">
<h2>패스워드를 입력하세요</h2>
<input type="text" onChange={handleChangeanswer} placeholder="Answer" />
</div> */}
</div>
</>
)
......
src/App.js
View file @ 1195959c
......@@ -4,7 +4,6 @@ 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, Redirect } from 'react-router-dom';
......@@ -27,8 +26,6 @@ function App() {
<Route path="/admin" component={Admin} />
<Route path="/adminSetting" component={AdminSetting} />
<Redirect path="/admin" to="/admin" />
</Switch>
</div>
......
src/End.js
View file @ 1195959c
......@@ -5,6 +5,7 @@ import React from 'react'
// import { Link } from 'react-router-dom';
function End() {
let result = ''
let scores = []
let score = 0
const answers = JSON.parse(localStorage.getItem('Answers'))
......@@ -16,11 +17,17 @@ function End() {
scores[i] = 1
}
else if (answers[i] === 0) {
scores[i] = -1
}
else {
scores[i] = 0
}
score += scores[i]
if (score <0){
score =0
}
}
return (
......@@ -36,8 +43,18 @@ function End() {
</thead>
<tbody>
{scores.map((score, index) => {
if (score === -1) {
result = <tr><td>Quiz {index + 1}</td> <td> 정답이 입력되지 않았습니다. </td></tr>
}
else if (score === 1) {
result = <tr><td>Quiz {index + 1}</td> <td> O </td></tr>
}
else {
result = <tr><td>Quiz {index + 1}</td> <td> X</td></tr>
}
return (score === 1) ? <tr><td>Quiz {index + 1}</td> <td> O </td></tr> : <tr><td>Quiz {index + 1}</td> <td> X</td></tr>
return result
})}
<tr>
<td>총점</td>
......@@ -48,7 +65,7 @@ function End() {
</div>
</>
......
src/Quiz.js
View file @ 1195959c
......@@ -6,9 +6,9 @@ import logo from './img_question.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 }
{ Q: "6 X 4 = ?", Choose: [6, 12, 18, 24], N: 1 },
{ Q: "3 + 3 = ?", Choose: [2, 4, 6, 8], N: 2 },
{ Q: "3 - 1 = ?", Choose: [1, 2, 3, 4], N: 3 }
]
let Answers = [0,0,0]
......
src/index.js
View file @ 1195959c
......@@ -6,6 +6,7 @@ import App from './App';
// import Quiz from './Quiz';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap'
ReactDOM.render(
<React.StrictMode>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment