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