Skip to content

GitLab

Commit bb745301 authored by 김민수's avatar 김민수
Browse files

No commit message 

No commit message
parent edc16551
Minsu
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 305 additions and 56 deletions
+305 -56
src/Admin.js 0 → 100644
View file @ bb745301
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('모두 입력되었습니다.') : ''}
<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 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/AdminSetting.js 0 → 100644
View file @ bb745301
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('모두 입력되었습니다.') : ''}
<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={handleChangePassword} placeholder="New Password" />
</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 className="p-3 border">
<h2>패스워드를 입력하세요</h2>
<input type="text" onChange={handleChangeanswer} placeholder="Answer" />
</div> */}
</div>
</>
)
}
export default AdminSetting
\ No newline at end of file
src/App.js
View file @ bb745301
...@@ -3,8 +3,10 @@ import './App.css'; ...@@ -3,8 +3,10 @@ import './App.css';
import Home from './Home' import Home from './Home'
import Quiz from './Quiz' import Quiz from './Quiz'
import End from './End' 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() { function App() {
return ( return (
...@@ -14,18 +16,20 @@ function App() { ...@@ -14,18 +16,20 @@ function App() {
<button>Calculus</button> <button>Calculus</button>
</Link> </Link>
</header> </header>
<hr/> <hr />
<div> <div>
<Switch> <Switch>
<Route exact path="/"> <Route exact path="/" component={Home} />
<Home/>
</Route> <Route path="/quiz" component={Quiz} />
<Route path="/quiz">
<Quiz/> <Route path="/end" component={End} />
</Route>
<Route path="/end"> <Route path="/admin" component={Admin} />
<End/>
</Route> <Route path="/AdminSetting" component={AdminSetting} />
<Redirect path="/admin" to="/admin" />
</Switch> </Switch>
</div> </div>
</Router> </Router>
......
src/App2.js 0 → 100644
View file @ bb745301
import React from 'react';
import './App.css';
function App() {
return (
<div>
<header>
<Link to="/">
<button>Calculus</button>
</Link>
</header>
<hr />
</div>
)
}
export default App;
\ No newline at end of file
src/End.js
View file @ bb745301
import React from 'react' import React from 'react'
import tr from './img_end.jpg'; // import tr from './img_end.jpg';
// import { Link } from 'react-router-dom'; // import { Link } from 'react-router-dom';
......
src/Home.js
View file @ bb745301
// import bg from './img_study.jpg' // import bg from './img_study.jpg'
// import korea from './img_korea.jpg' // import korea from './img_korea.jpg'
import React, { useState } from 'react' import React, { useState} from 'react'
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
function Home() { function Home() {
const [name, setName] = useState('') const [name, setName] = useState('')
const [password, SetPassword] = useState('') const [password, SetPassword] = useState('')
const [done, setDone] = useState(false) const [done, setDone] = useState(false)
const [admin, setAdmin] = useState(false);
const handleChangename = (event) => { const handleChangename = (event) => {
setName(event.target.value) setName(event.target.value)
} }
...@@ -16,13 +17,20 @@ function Home() { ...@@ -16,13 +17,20 @@ function Home() {
SetPassword(event.target.value) SetPassword(event.target.value)
} }
function checking() { function handleClick() {
if (!name) { if (!name) {
alert('이름을 입력하세요') alert('이름을 입력하세요')
} }
else if (!password) { else if (!password) {
alert('비밀번호를 입력하세요') alert('비밀번호를 입력하세요')
} }
else if (name === 'admin' && password === '0001') {
console.log('done')
return (setAdmin(true)
)
}
else if (password !== '0319') { else if (password !== '0319') {
alert('유효한 비밀번호를 입력하세요') alert('유효한 비밀번호를 입력하세요')
} }
...@@ -35,59 +43,41 @@ function Home() { ...@@ -35,59 +43,41 @@ function Home() {
} }
return ( return (
<> <>
{admin ? <Redirect to='/admin' /> : ''}
{done ? <Redirect to='/quiz' /> : ''} {done ? <Redirect to='/quiz' /> : ''}
{/* <div style={{ backgroundImage: 'url(' + bg + ')', backgroundColor: "grey", backgroundSize: "100%", width: "100%", height: "880px", backgroundRepeat: 'no-repeat' }}> <h1 className="h-3 mb-5 mx-3 text-center bg-danger py-2">
<div className="Main"></div> */}
<div style={{ fontSize: '70px', marginBottom: '100px', textAlign: 'center', backgroundColor: '#AE0E36' }}>
{/* <img alt='korea' src={korea} width='10%'/> */}
KOREA UNIVERSITY KOREA UNIVERSITY
</div> </h1>
<form className="d-flex justify-content-center"> <form className="d-flex justify-content-center">
<div className="table table-bordered " style={{width: "400px" }}> <div className="table table-bordered" style={{width: "400px" }}>
<label for="inputId" className="d-flex justify-content-center" > <label for="inputId" className="d-flex justify-content-center" >
정보 입력 정보 입력
</label> </label>
<div className="form-group"> <div className="form-group text-center">
<label for="inputName"> <label for="inputName">
이름입력<input className="ml-3 inputBox" onChange={handleChangename} /> 이름입력<input className="ml-3 inputBox" onChange={handleChangename} placeholder="Name"/>
</label> </label>
<label for="inputPassword"> <label for="inputPassword">
비밀번호<input type='password' className="ml-3 inputBox" onChange={handleChangepassword} /> 비밀번호<input type='password' className="ml-3 inputBox" onChange={handleChangepassword} placeholder="Password"/>
</label> </label>
<div className="form-group for login"> <div className="form-group for login">
<label for="inputLogin" className="d-flex justify-content-center"> <label for="inputLogin" className="d-flex justify-content-center">
<button className="mt-4 btn btn-dark" onClick={checking}>Login</button> <button className="mt-4 btn btn-dark" onClick={handleClick}>Login</button>
</label> </label>
</div> </div>
</div> </div>
</div> </div>
</form> </form>
{/* <div className="Box" style={{ border: 'solid', position: 'absolute', top: "300px", left: "68%"}} > */}
{/* <div className="Name" style={{boxShadow: '5px 5px 5px 5px gray', border: 'solid', fontSize: '30px', position: "absolute", top: "300px", left: "68%" }}>
이름(Name)
<input style={{ padding: '5px', border: 'solid', borderRight: 'none', borderBottom: 'none', borderTop: 'none', marginLeft: '105px', inlineSize: '160px', blockSize: '40px', fontSize: '40px' }} onChange={handleChangename} />
</div>
<div className="Name" style={{ boxShadow: '5px 5px 5px 5px gray',border: 'solid', fontSize: '30px', position: "absolute", top: "360px", left: "68%" }}>
비밀번호(Password)
<input type='password' style={{ padding: '5px', border: 'solid', borderRight: 'none', borderBottom: 'none', borderTop: 'none', marginLeft: '0px', inlineSize: '160px', blockSize: '40px', fontSize: '40px' }} onChange={handleChangepassword} />
</div>
<div className='Box2'>
<button style={{boxShadow: '5px 5px 5px 5px gray', marginLeft: '82%', marginTop: '10%', blockSize: '50px', inlineSize: '175px', fontSize: '35px' }} className="QuizStart" onClick={checking}>Start !</button>
</div> */}
{/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */}
{/* </div> */}
{/* </div> */}
</> </>
) )
......
src/Quiz.js
View file @ bb745301
import React, { useState } from 'react' 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 Timer from 'react-compound-timer'; // 타이머쓰기위해 import
import logo from './img_question.png' import logo from './img_question.png'
...@@ -11,7 +11,8 @@ const QnA = [ ...@@ -11,7 +11,8 @@ const QnA = [
{ Q: "3 - 1 = ?", Choose: [1, 2, 3, 4], A: "2", N: 3 } { 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] let Solutions = [4, 3, 2]
localStorage.setItem('Solutions', JSON.stringify(Solutions)) localStorage.setItem('Solutions', JSON.stringify(Solutions))
...@@ -24,6 +25,8 @@ function Quiz() { ...@@ -24,6 +25,8 @@ function Quiz() {
const [selected, setSelected] = useState("") //선택한 답을 보여줄 것들 const [selected, setSelected] = useState("") //선택한 답을 보여줄 것들
// const [checked, setChecked] = useState(false) // const [checked, setChecked] = useState(false)
const [timeout, settimeout] = useState(false)
function handleQuestion() { function handleQuestion() {
setQuestion({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 }) setQuestion({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 })
// setChecked(false) // setChecked(false)
...@@ -37,7 +40,8 @@ function Quiz() { ...@@ -37,7 +40,8 @@ function Quiz() {
localStorage.setItem('Answers', JSON.stringify(Answers)) localStorage.setItem('Answers', JSON.stringify(Answers))
} }
return ( return (
<div className="container-fluid position-absolute"> <>
<div className="container-fluid">
<div className="text-center h2 font-weight-bold bg-warning py-2">미적분학 퀴즈</div> <div className="text-center h2 font-weight-bold bg-warning py-2">미적분학 퀴즈</div>
<div className="row justify-content-md-center" > <div className="row justify-content-md-center" >
<div className="col text-right"> <div className="col text-right">
...@@ -53,30 +57,32 @@ function Quiz() { ...@@ -53,30 +57,32 @@ function Quiz() {
<form> <form>
{question.Choose.map((a, index) => {question.Choose.map((a, index) =>
<div key={index}> <div key={index}>
<input type="radio" name='answer' id={index} value={a} onClick={handleChange} /> <input type="radio" name='answer' id={index} value={a} onChange={handleChange} checked={parseInt(selected) === a} />
<label className="font-weight-bold" htmlFor={a}>{a}</label> <label className="font-weight-bold" htmlFor={a}>{a}</label>
</div> </div>
)} )}
<input hidden type="submit" value="확인" /> {/*버튼 숨김*/}
</form> </form>
<span className="h5 font-weight-bold"> Your Answer :</span> <span className="h5 font-weight-bold"> Your Answer :</span>
<span className="h2 font-weight-bold text-danger"> {selected}</span> {/* 선택한 값 보여줌 */} <span className="h2 font-weight-bold text-danger"> {selected}</span> {/* 선택한 값 보여줌 */}
<div className="text-center my-3"> {(question.page === QnA.length - 1) <div className="text-center my-3"> {(question.page === QnA.length - 1)
? <Link to="/end"> ? <Link to="/end">
<button className="btn btn-outline-success">제출</button> <button className="btn btn-outline-success" onClick={localStorage.setItem('Solutions', JSON.stringify(Solutions))}>제출</button>
</Link> </Link>
: <button type="button" className="btn btn-outline-dark" onClick={handleQuestion}>다음</button> : <button type="button" className="btn btn-outline-dark" onClick={handleQuestion}>다음</button>
} }
</div> </div>
<p className="h3 text-center text-danger "> <p className="h3 text-center text-danger ">
<Timer <Timer
initialTime={3600000} initialTime={36000}
direction="backward" direction="backward"
checkpoints={[ checkpoints={[
{time:1,
callback:()=>alert('시간이 초과되었습니다.'),
},
{ {
time: 0, time: 0,
callback: <Link to="/end">제출</Link> callback: () => settimeout(true),
// history.go(1)
} }
]} ]}
> >
...@@ -92,6 +98,8 @@ function Quiz() { ...@@ -92,6 +98,8 @@ function Quiz() {
</div> </div>
</div> </div>
</div> </div>
{timeout ? <Redirect to='/end'/> : '' }
</>
) )
......
src/index.js
View file @ bb745301
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import 'react-dom'
import './index.css'; import './index.css';
import App from './App'; import App from './App';
// import Quiz from './Quiz'; // import Quiz from './Quiz';
......
src/index2.js 0 → 100644
View file @ bb745301
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(
<Router>
<Route exact path="/" component={Home} />
<Route path='/quiz' component={Quiz} />
<Route path='/end' component={End} />
</Router>,
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();
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