Skip to content

GitLab

Commit 148da01a authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

LAST

parent 1bf18ff4
Hide whitespace changes
Inline Side-by-side
src/Admin.js
View file @ 148da01a
import React, { useState } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import AdminQuiz from './AdminQuiz' import AdminQuiz from './AdminQuiz'
import AdminSetting from './AdminSetting' import AdminSetting from './AdminSetting'
let QuizBtn = [] let QuizBtn = []
function Admin() { function Admin() {
const [result, setresult] = useState('') const [result, setresult] = useState('')
const [QuizBtnCount, setQuizBtnCount] = useState(4) const [QuizBtnCount, setQuizBtnCount] = useState(4)
const indexRef = useRef(0)
const dbRef = useRef([])
useEffect(() => {
if (JSON.parse(localStorage.getItem('QnA'))) {
dbRef.current=JSON.parse(localStorage.getItem('QnA'))
}
}, [])
function handleClickSetting() { function handleClickSetting() {
setresult(<AdminSetting />) setresult(<AdminSetting />)
} }
function handleClickQuiz(e) { function handleClickQuiz(e) {
(JSON.parse(localStorage.getItem('QnA')) === null) ? setresult(<AdminQuiz QuizNum={e.target.id} data={[{ Q: 'x', Choose: 'x', A: 'x' ,N :1},{ Q: 'x', Choose: 'x', A: 'x' ,N :2},{ Q: 'x', Choose: 'x', A: 'x' ,N :3}]} />) : setresult(<AdminQuiz QuizNum={e.target.id} data={JSON.parse(localStorage.getItem('QnA'))} />) indexRef.current = Number(e.target.id) - 1
// console.log(dbRef.current, indexRef.current)
if(dbRef.current[e.target.id-1]){
setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={dbRef.current[e.target.id-1]} />) //설명 부탇드립니다.
}
else{
dbRef.current[e.target.id-1] = {'Q':'문제를 입력하세요', 'Choose':['0','0','0','0'], 'A':'정답을 입력하세요'}
setresult(<AdminQuiz quizNum={e.target.id} fn={handleClickSave} data={dbRef.current[e.target.id-1]} />)
}
} }
function handleClickAddQuiz() { function handleClickAddQuiz() {
...@@ -22,23 +37,28 @@ function Admin() { ...@@ -22,23 +37,28 @@ function Admin() {
<button type='button' className='btn btn-outline-primary' id={QuizBtnCount} onClick={handleClickQuiz}>Quiz {QuizBtnCount}</button> <button type='button' className='btn btn-outline-primary' id={QuizBtnCount} onClick={handleClickQuiz}>Quiz {QuizBtnCount}</button>
) )
setQuizBtnCount(QuizBtnCount + 1) setQuizBtnCount(QuizBtnCount + 1)
} } //퀴즈 추가버튼
function handleClickSave(QnAadmin) {
dbRef.current[indexRef.current] = QnAadmin
localStorage.setItem('QnA', JSON.stringify(dbRef.current))
} //설명 부탁드립니다.
return ( return (
<> <>
<div className="container-fluid"> <div className="container-fluid bg-light">
<div className="row justify-content-md-center mt-5"> <div className="row justify-content-md-center mt-5">
<div className="col-2 text-center border py-5"> <div className="col-2 text-center border py-5 bg-white">
<div className="mb-5"> <div className="py-3 border-top border-bottom">
<h4>관리자페이지</h4> <h5 className="font-weight-bold">설정</h5>
</div> </div>
<div> <div className="border-bottom py-4">
<button type="button" className="btn btn-outline-info mb-5" onClick={handleClickSetting}>Setting</button> <button type="button" className="btn btn-info" onClick={handleClickSetting}>Setting</button>
</div> </div>
<div class="btn-group-vertical"> <div className="btn-group-vertical py-4">
<button type="button" className="btn btn-outline-primary" id="1" onClick={handleClickQuiz}>Quiz 1</button> <button type="button" className="btn btn-outline-primary" id={1} onClick={handleClickQuiz}>Quiz 1</button>
<button type="button" className="btn btn-outline-primary" id="2" onClick={handleClickQuiz}>Quiz 2</button> <button type="button" className="btn btn-outline-primary" id={2} onClick={handleClickQuiz}>Quiz 2</button>
<button type="button" className="btn btn-outline-primary" id="3" onClick={handleClickQuiz}>Quiz 3</button> <button type="button" className="btn btn-outline-primary" id={3} onClick={handleClickQuiz}>Quiz 3</button>
{QuizBtn.map((element) => element)} {QuizBtn.map((element) => element)}
<button type="button" className="btn btn-outline-primary" onClick={handleClickAddQuiz}>+</button> <button type="button" className="btn btn-outline-primary" onClick={handleClickAddQuiz}>+</button>
......
src/AdminQuiz.js
View file @ 148da01a
import React, { useState} from 'react'; import React, { useState, useEffect } from 'react';
let list = [] let list = []
let QnAadmins = []
let QnAadmin = {} let QnAadmin = {}
let savechoose = {} let savechoose = {}
function AdminQuiz(props) { function AdminQuiz(props) {
const [question, setQuestion] = useState('')
const [question, setQuestion] = useState(props.data.Q)
// const [choose, setChoose] = useState(props.data.Choose)
const [choose, setChoose] = useState('') const [choose, setChoose] = useState('')
const [answer, setAnswer] = useState('') const [answer, setAnswer] = useState(props.data.A)
const [selectOption, setselectOption] = useState(1) const [selectOption, setselectOption] = useState(1)
// const [c, setC] = useState(props.data.Choose)
console.log(props.data.Choose)
console.log(choose)
// console.log
// props.quizNum가 바뀔때마다 즉, Admin.js에서 퀴즈버튼을 바꿔누를때마다 useEffect가 발생하여 값을 업데이트 시켜줍니다.
useEffect(() => {
setQuestion(props.data.Q)
// setC(props.data.Choose)
setAnswer(props.data.A)
console.log(props.data.Choose)
console.log(choose)
// document.getElementById('3').value = c[2]
// document.getElementById('4').value = c[3]
// setcn(props.data.Choose)
// eslint-disable-next-line
}, [props.quizNum])
const handleChangeQuestion = (event) => { const handleChangeQuestion = (event) => {
QnAadmin['Q'] = event.target.value QnAadmin['Q'] = event.target.value
setQuestion(event.target.value) setQuestion(event.target.value)
} }
const handleChangeChoose = (event) => { const handleChangeChoose = (event) => {
savechoose[event.target.id] = event.target.value savechoose[event.target.id] = event.target.value
setChoose(event.target.value) setChoose(event.target.value)
// console.log(event.target.value)
} }
const handleChangeanswer = (event) => { const handleChangeanswer = (event) => {
QnAadmin['A'] = event.target.value QnAadmin['A'] = event.target.value
setAnswer(event.target.value) setAnswer(event.target.value)
...@@ -33,7 +53,7 @@ function AdminQuiz(props) { ...@@ -33,7 +53,7 @@ function AdminQuiz(props) {
<input type="radio" checked={false} name="answer" /> <input type="radio" checked={false} name="answer" />
</div> </div>
</div> </div>
<input type="text" class="form-control" id={String(selectOption + 1)} placeholder={ props.data[props.QuizNum-1].Choose===null ? (selectOption+1)+'번 보기를 입력하세요' : props.data[props.QuizNum-1].Choose[selectOption]} onChange={handleChangeChoose} /> <input type="text" class="form-control" id={String(selectOption + 1)} placeholder={(selectOption + 1) + '번 보기를 입력하세요'} onChange={handleChangeChoose} />
</div> </div>
) )
setselectOption(selectOption + 1) setselectOption(selectOption + 1)
...@@ -51,48 +71,42 @@ function AdminQuiz(props) { ...@@ -51,48 +71,42 @@ function AdminQuiz(props) {
alert('정답이 입력되지 않았습니다.') alert('정답이 입력되지 않았습니다.')
} }
else { else {
// console.log(QnAadmin)
QnAadmin['Choose'] = Object.values(savechoose) QnAadmin['Choose'] = Object.values(savechoose)
QnAadmin['N'] = String(props.QuizNum) QnAadmin['N'] = String(props.quizNum)
QnAadmins.push(QnAadmin) props.fn(QnAadmin)
QnAadmin = {} QnAadmin = {}
localStorage.setItem('QnA', JSON.stringify(QnAadmins))
// console.log(QnAadmins)
alert('입력이 완료되었습니다.') alert('입력이 완료되었습니다.')
} }
} }
// function handleChangeQuestion(){}
return ( return (
<div className="" id="Quiz1"> <div className="" id="Quiz1">
<h2 className="p-3 border text-center">{String(props.QuizNum)}번 문제만들기</h2> <h2 className="p-3 border text-center bg-white">{String(props.quizNum)}번 문제만들기</h2>
<div className="p-3 borber"> <div className="p-3 borber">
<div className="p-3 "> <div className="p-3 ">
<span className="font-weight-bold mr-2 h3">1. 문제 입력하기</span> <span className="font-weight-bold mr-2 h3">1. 문제 입력하기</span>
<input type="text" id="inputQuiz" className="form-control" onChange={handleChangeQuestion} placeholder={ props.data[props.QuizNum-1].Q==='x' ? '문제를 입력하세요' : props.data[props.QuizNum-1].Q} /> <input type="text" id="inputQuiz" className="form-control" value={question} onChange={handleChangeQuestion} placeholder="문제를 입력하세요" />
</div> </div>
<div className="p-3 "> <div className="p-3 ">
<span className="font-weight-bold mr-2 h3">2. 보기 입력하기</span> <span className="font-weight-bold mr-2 h3">2. 보기 입력하기</span>
<div className="p-3 "> <div className="p-3 ">
<div className="input-group"> <div className="input-group">
<div className="input-group-prepend"> <div className="input-group-prepend">
<div className="input-group-text"> <div className="input-group-text">
<input type="radio" checked={false} name="answer" /> <input type="radio" checked={false} name="answer" />
</div>
</div> </div>
<input type="text" className="form-control" id='1' placeholder="1번 보기를 입력하세요" onChange={handleChangeChoose} />
</div> </div>
<input type="text" className="form-control" id='1' placeholder={ props.data[props.QuizNum-1].Choose==='x' ? '1번 보기를 입력하세요' : props.data[props.QuizNum-1].Choose[0]} onChange={handleChangeChoose} /> {list.map((element, index) => element)}
<button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
</div> </div>
{list.map((element) => element)}
<button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button>
</div>
</div> </div>
<div className="p-3 "> <div className="p-3 ">
<span className="font-weight-bold mr-2 h3">정답:</span> <span className="font-weight-bold mr-2 h3">정답:</span>
<input type="text" value={answer} onChange={handleChangeanswer} placeholder={ props.data[props.QuizNum-1].A==='x' ? '정답를 입력하세요' : props.data[props.QuizNum-1].A} /> <input type="text" value={answer} onChange={handleChangeanswer} placeholder="정답을 입력하세요" />
</div> </div>
<label for="inputLogin" className="d-flex justify-content-center"> <label for="inputLogin" className="d-flex justify-content-center">
......
src/AdminSetting.js
View file @ 148da01a
...@@ -47,20 +47,19 @@ function AdminSetting() { ...@@ -47,20 +47,19 @@ function AdminSetting() {
} }
return ( return (
<div className="col-8"> <div className="">
<h2 className="p-3 border text-center">관리자 설정 변경 창</h2> <h2 className="p-3 border text-center bg-white">관리자 설정 변경 창</h2>
<div className="p-3 border bg-white">
<div className="p-3 border">
<h4>변경할 비밀번호를 입력하세요</h4> <h4>변경할 비밀번호를 입력하세요</h4>
<input type="text" onChange={handleChangePassword} placeholder="New Password" /> <input type="text" onChange={handleChangePassword} placeholder="New Password" />
</div> </div>
<div className="p-3 border"> <div className="p-3 border bg-white">
<h4>변경할 관리자 비밀번호를 입력하세요</h4> <h4>변경할 관리자 비밀번호를 입력하세요</h4>
<input type="text" onChange={handleChangeAdminPassword} placeholder="New Admin Password" /> <input type="text" onChange={handleChangeAdminPassword} placeholder="New Admin Password" />
</div> </div>
<div className="p-3 border"> <div className="p-3 border bg-white">
<h4>타이머를 설정하세요(초단위)</h4> <h4>타이머를 설정하세요(초단위)</h4>
<input type="text" onChange={handleChangeTime} placeholder="Set Time" /> <input type="text" onChange={handleChangeTime} placeholder="Set Time" />
......
src/Home.js
View file @ 148da01a
...@@ -4,12 +4,11 @@ import React, { useState } from 'react' ...@@ -4,12 +4,11 @@ import React, { useState } from 'react'
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
function Home() { function Home() {
let info = []
let info=[] if (JSON.parse(localStorage.getItem("Set")) === null) {
if(JSON.parse(localStorage.getItem("Set")) === null){ info = [{ password: "0319", AdminPassword: "0001", Time: "30010" }]
info=[{password:"0319", AdminPassword:"0001",Time : "30010"}] //수정.추가
} }
else{ else {
info = JSON.parse(localStorage.getItem("Set")) info = JSON.parse(localStorage.getItem("Set"))
} //수정. 추가 } //수정. 추가
...@@ -59,9 +58,9 @@ function Home() { ...@@ -59,9 +58,9 @@ function Home() {
<div className="container-fluid bg-light p-5 h-100"> <div className="container-fluid bg-light p-5 h-100">
{admin ? <Redirect to='/admin' /> : ''} {admin ? <Redirect to='/admin' /> : ''}
{done ? <Redirect to='/quiz' /> : ''} {done ? <Redirect to='/quiz' /> : ''}
<div> <div>
<h3 className="text-center pb-5 font-weight-bold text-danger" style={{'font-family':'sans-serif'}}>Korea University</h3> <h3 className="text-center pb-5 font-weight-bold text-danger" style={{ 'font-family': 'sans-serif' }}>Korea University</h3>
</div> </div>
<div className="row justify-content-center"> <div className="row justify-content-center">
......
src/Quiz.js
View file @ 148da01a
...@@ -6,18 +6,19 @@ import logo from './img_question.png' ...@@ -6,18 +6,19 @@ import logo from './img_question.png'
let localQnA = JSON.parse(localStorage.getItem('QnA')) let localQnA = JSON.parse(localStorage.getItem('QnA'))
let Answers = [] let Answers = []
function Quiz() { function Quiz() {
let Time = 0
if (JSON.parse(localStorage.getItem("Set")) === null) { let Time=0
Time = 30010 if (JSON.parse(localStorage.getItem("Set"))===null){
Time=30010
}
else{
Time=Number(JSON.parse(localStorage.getItem("Set"))[0].Time)
} }
else {
Time = Number(JSON.parse(localStorage.getItem("Set"))[0].Time)
} //수정. 추가. 새로 설정한 시간으로 설정
const [question, setQuestion] = useState({ const [question, setQuestion] = useState({
...localQnA[0] ...localQnA[0]
}) })
...@@ -27,7 +28,7 @@ function Quiz() { ...@@ -27,7 +28,7 @@ function Quiz() {
//for each 사용하기 //for each 사용하기
let Solutions = [] //빈 배열 let Solutions = [] //빈 배열
console.log(localQnA) console.log(localQnA)
localQnA.forEach((element) => { localQnA.forEach((element) => {
Solutions.push(Number(element.A)) Solutions.push(Number(element.A))
}); });
...@@ -86,8 +87,7 @@ function Quiz() { ...@@ -86,8 +87,7 @@ function Quiz() {
</div> </div>
<p className="h3 text-center text-danger "> <p className="h3 text-center text-danger ">
<Timer <Timer
initialTime={Time} // 수정. 추가. 새로설정한 시간으로 설정. 하지만 새로고침해야 적용됨 initialTime={Time}
// initialTime={Number(JSON.parse(localStorage.getItem("Set"))[0].Time)}
direction="backward" direction="backward"
checkpoints={[ checkpoints={[
{ {
......
src/compare.js
View file @ 148da01a
import React from 'react'; import React,{ useState } from 'react'
// import './App.css';
import Home from './Home'
import Quiz from './Quiz' let Setadmins = []
import End from './End' let Setadmin = {}
import Admin from './Admin'
function AdminSetting() {
import { BrowserRouter as Router, Link, Switch, Route, Redirect } from 'react-router-dom';
const [password, setPassword] = useState('')
function App() { const [adminpassword, setAdminPassword] = useState('')
return ( const [time, setTime] = useState('')
<Router>
<div className="container-fluid vh-100 bg-light">
<header className="border-bottom"> const handleChangePassword = (event) => {
<Link to="/"> Setadmin['password'] = event.target.value
<button className="ml-3 btn btn-light btn-lg font-weight-bold text-dark">Home</button> setPassword(event.target.value)
</Link>
</header> }
<Switch> const handleChangeAdminPassword = (event) => {
<Route exact path="/" component={Home} /> Setadmin['AdminPassword'] = event.target.value
setAdminPassword(event.target.value)
<Route path="/quiz" component={Quiz} /> }
const handleChangeTime = (event) => {
<Route path="/end" component={End} /> Setadmin['Time'] = event.target.value
setTime(event.target.value)
<Route path="/admin" component={Admin} /> }
<Redirect path="/admin" to="/admin" />
</Switch> function handleClick() {
</div> if (!password) {
</Router> alert('비밀번호가 입력되지 않았습니다.')
) }
else if (!adminpassword) {
alert('관리자 비밀번호가 입력되지 않았습니다.')
}
else if (!time) {
alert('제한시간이 입력되지 않았습니다.') //타임은 조건은 빼도 될 듯
}
else {
Setadmins.push(Setadmin)
localStorage.setItem('Set', JSON.stringify(Setadmins))
console.log(Setadmins)
alert('저장이 완료되었습니다.')
console.log(Setadmin)
}
}
return (
<div className="">
<h2 className="p-3 border text-center bg-white">관리자 설정 변경 창</h2>
<div className="p-3 border bg-white">
<h4>변경할 비밀번호를 입력하세요</h4>
<input type="text" onChange={handleChangePassword} placeholder="New Password" />
</div>
<div className="p-3 border bg-white">
<h4>변경할 관리자 비밀번호를 입력하세요</h4>
<input type="text" onChange={handleChangeAdminPassword} placeholder="New Admin Password" />
</div>
<div className="p-3 border bg-white">
<h4>타이머를 설정하세요(초단위)</h4>
<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>
)
} }
export default App; export default AdminSetting
\ No newline at end of file \ No newline at end of file
src/index.js
View file @ 148da01a
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import 'react-dom' import 'react-dom'
import './index.css';
import App from './App'; import App from './App';
// import Quiz from './Quiz'; // import Quiz from './Quiz';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
......
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