Skip to content

GitLab

Commit fe8d40d8 authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

adminsetting 적용

parent 909b2687
Hide whitespace changes
Inline Side-by-side
src/Admin.js
View file @ fe8d40d8
...@@ -2,175 +2,57 @@ import React, { useState } from 'react'; ...@@ -2,175 +2,57 @@ import React, { useState } from 'react';
import AdminQuiz from './AdminQuiz' import AdminQuiz from './AdminQuiz'
import AdminSetting from './AdminSetting' import AdminSetting from './AdminSetting'
let QuizBtn = []
// let QnAadmins = []
// let QnAadmin = {}
// let Setadmins = []
// let Setadmin = {}
let QuizBtn=[]
function Admin() { function Admin() {
const[result, setresult] = useState('') const [result, setresult] = useState('')
const[QuizBtnCount, setQuizBtnCount] = useState(4) const [QuizBtnCount, setQuizBtnCount] = useState(4)
function handleClickSetting(){ function handleClickSetting() {
setresult(<AdminSetting/>) setresult(<AdminSetting />)
} }
function handleClickQuiz(){ function handleClickQuiz(e) {
setresult(<AdminQuiz/>) (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'))} />)
} }
function handleClickAddQuiz(){ function handleClickAddQuiz() {
QuizBtn.push( QuizBtn.push(
<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)
} }
// 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 [selectOption, setselectOption] = useState('')
// const handleChangeQuestion = (event) => {
// QnAadmin['Q'] = event.target.value
// setQuestion(event.target.value)
// }
// const handleChangechoose = (event) => {
// QnAadmin['Choose'] = event.target.value
// setChoose(event.target.value)
// }
// const handleChangeanswer = (event) => {
// QnAadmin['A'] = event.target.value
// setAnswer(event.target.value)
// }
// 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 handleClickQnA() {
// if (!question) {
// alert('문제가 입력되지 않았습니다.')
// }
// else if (!choose) {
// alert('보기가 입력되지 않았습니다.')
// }
// else if (!answer) {
// alert('정답이 입력되지 않았습니다.')
// }
// else {
// console.log(QnAadmin)
// QnAadmins.push(QnAadmin)
// localStorage.setItem('QnA', JSON.stringify(QnAadmins))
// console.log(QnAadmins)
// alert('입력이 완료되었습니다.')
// }
// }
// function handleClicksetting() {
// 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)
// // setDoneset(true)
// }
// }
// 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="Quiz4-tab" data-toggle="pill" href="#Quiz" role="tab" >Quiz4</a>
// }
// setaddQuiz(addQuiz)
// }
return ( return (
<> <>
<div className="container-fluid"> <div className="container-fluid">
<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"> <div className="col-2 text-center border py-5">
<div className="my-5"> <div className="mb-5">
<h4>관리자페이지</h4> <h4>관리자페이지</h4>
</div> </div>
<div> <div>
<button type="button" className="btn btn-outline-info mb-5" onClick={handleClickSetting}>Setting</button> <button type="button" className="btn btn-outline-info mb-5" onClick={handleClickSetting}>Setting</button>
</div> </div>
<div class="btn-group-vertical"> <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="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>
</div>
</div> </div>
</div>
<div className="col-8"> <div className="col-8 ">
<div className="tab-content" id="v-pills-tabContent">
<div className="tab-pane fade show active" id="setting" role="tabpanel" >
<div className="row d-flex justify-content-center">
</div>
</div>
{result} {result}
</div> </div>
</div> </div>
</div> </div>
</div>
</> </>
) )
} }
......
src/AdminQuiz.js
View file @ fe8d40d8
import React, { useState } from 'react'; import React, { useState} from 'react';
let list = [] let list = []
let QnAadmins = [] let QnAadmins = []
let QnAadmin = {} let QnAadmin = {}
let savechoose = {}
function AdminQuiz(props) {
function AdminQuiz() {
const [question, setQuestion] = useState('') const [question, setQuestion] = useState('')
const [choose, setChoose] = useState('') const [choose, setChoose] = useState('')
const [answer, setAnswer] = useState('') const [answer, setAnswer] = useState('')
const [selectOption, setselectOption] = useState(1) const [selectOption, setselectOption] = useState(1)
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
QnAadmin['Choose'] = event.target.value setChoose(event.target.value)
setChoose(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)
} }
function addSelectOption() { function addSelectOption() {
list.push( list.push(
<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" id={selectOption + 1} name="answer" /> <input type="radio" checked={false} name="answer" />
</div> </div>
</div> </div>
<input type="text" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangeChoose} /> <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} />
</div> </div>
) )
setselectOption(selectOption + 1) setselectOption(selectOption + 1)
} }
function handleClick() { function handleClick() {
if (!question) { if (!question) {
alert('문제가 입력되지 않았습니다.') alert('문제가 입력되지 않았습니다.')
...@@ -61,11 +51,13 @@ function AdminQuiz() { ...@@ -61,11 +51,13 @@ function AdminQuiz() {
alert('정답이 입력되지 않았습니다.') alert('정답이 입력되지 않았습니다.')
} }
else { else {
console.log(QnAadmin) // console.log(QnAadmin)
QnAadmin['Choose'] = Object.values(savechoose)
QnAadmin['N'] = String(props.QuizNum)
QnAadmins.push(QnAadmin) QnAadmins.push(QnAadmin)
QnAadmin={} QnAadmin = {}
localStorage.setItem('QnA', JSON.stringify(QnAadmins)) localStorage.setItem('QnA', JSON.stringify(QnAadmins))
console.log(QnAadmins) // console.log(QnAadmins)
alert('입력이 완료되었습니다.') alert('입력이 완료되었습니다.')
} }
...@@ -76,28 +68,31 @@ function AdminQuiz() { ...@@ -76,28 +68,31 @@ function AdminQuiz() {
return ( return (
<div className="" id="Quiz1"> <div className="" id="Quiz1">
<h2 className="p-3 border text-center">문제만들기</h2> <h2 className="p-3 border text-center">{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" className="form-control" onChange={handleChangeQuestion} placeholder="문제를 입력하세요" /> <input type="text" id="inputQuiz" className="form-control" onChange={handleChangeQuestion} placeholder={ props.data[props.QuizNum-1].Q==='x' ? '문제를 입력하세요' : props.data[props.QuizNum-1].Q} />
</div> </div>
<div className="p-3 "> <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">
<div className="input-group-prepend"> <div className="input-group-prepend">
<div className="input-group-text"> <div className="input-group-text">
<input type="radio" id={selectOption} name="answer" /> <input type="radio" checked={false} name="answer" />
</div> </div>
</div> </div>
<input type="text" className="form-control" placeholder="보기를 입력하세요" onChange={handleChangeChoose} /> <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} />
</div> </div>
{list.map((element) => element)} {list.map((element) => element)}
<button className="btn btn-outline-secondary btn-sm" onClick={addSelectOption}>+</button> <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" onChange={handleChangeanswer} placeholder="정답을 입력하세요" /> <input type="text" value={answer} onChange={handleChangeanswer} placeholder={ props.data[props.QuizNum-1].A==='x' ? '정답를 입력하세요' : props.data[props.QuizNum-1].A} />
</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 @ fe8d40d8
...@@ -43,25 +43,25 @@ function AdminSetting() { ...@@ -43,25 +43,25 @@ function AdminSetting() {
alert('저장이 완료되었습니다.') alert('저장이 완료되었습니다.')
console.log(Setadmin) console.log(Setadmin)
// setDoneset(true)
} }
} }
return ( return (
<div className="col-8"> <div className="col-8">
<h1 className="p-3 border">관리자 설정 변경 창</h1> <h2 className="p-3 border text-center">관리자 설정 변경 창</h2>
<div className="p-3 border"> <div className="p-3 border">
<h2>변경할 비밀번호를 입력하세요</h2> <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">
<h2>변경할 관리자 비밀번호를 입력하세요</h2> <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">
<h2>타이머를 설정하세요(초단위)</h2> <h4>타이머를 설정하세요(초단위)</h4>
<input type="text" onChange={handleChangeTime} placeholder="Set Time" /> <input type="text" onChange={handleChangeTime} placeholder="Set Time" />
</div> </div>
......
src/App.js
View file @ fe8d40d8
import React from 'react'; import React from 'react';
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'
...@@ -10,13 +9,12 @@ import { BrowserRouter as Router, Link, Switch, Route, Redirect } from 'react-ro ...@@ -10,13 +9,12 @@ import { BrowserRouter as Router, Link, Switch, Route, Redirect } from 'react-ro
function App() { function App() {
return ( return (
<Router> <Router>
<header> <div className="container-fluid vh-100 bg-light">
<Link to="/"> <header className="border-bottom">
<button>Calculus</button> <Link to="/">
</Link> <button className="ml-3 btn btn-light btn-lg font-weight-bold text-dark">Home</button>
</header> </Link>
<hr /> </header>
<div>
<Switch> <Switch>
<Route exact path="/" component={Home} /> <Route exact path="/" component={Home} />
......
src/Home.js
View file @ fe8d40d8
// 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() {
let info=[]
if(JSON.parse(localStorage.getItem("Set")) === null){
info=[{password:"0319", AdminPassword:"0001",Time : "30010"}] //수정.추가
}
else{
info = JSON.parse(localStorage.getItem("Set"))
} //수정. 추가
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)
...@@ -24,14 +33,14 @@ function Home() { ...@@ -24,14 +33,14 @@ function Home() {
else if (!password) { else if (!password) {
alert('비밀번호를 입력하세요') alert('비밀번호를 입력하세요')
} }
else if (name === 'admin' && password === '0001') { else if (name === 'admin' && password === info[0].AdminPassword) {
console.log('done') console.log('done')
return (setAdmin(true) return (setAdmin(true)
) )
} }
else if (password !== '0319') { else if (password !== info[0].password) {
alert('유효한 비밀번호를 입력하세요') alert('유효한 비밀번호를 입력하세요')
} }
else { else {
...@@ -47,38 +56,37 @@ function Home() { ...@@ -47,38 +56,37 @@ function Home() {
return ( return (
<> <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' /> : ''}
<h1 className="h-3 mb-5 mx-3 text-center bg-danger py-2">
KOREA UNIVERSITY
</h1>
<form className="d-flex justify-content-center"> <div>
<h3 className="text-center pb-5 font-weight-bold text-danger" style={{'font-family':'sans-serif'}}>Korea University</h3>
<div className="table table-bordered" style={{width: "400px" }}> </div>
<label for="inputId" className="d-flex justify-content-center" > <div className="row justify-content-center">
정보 입력 <form className="col-4 p-5 border bg-white">
</label> <div>
<div className="form-group text-center"> <div>
<label for="inputName"> <p className="font-weight-bold h5 pb-3">로그인</p>
이름입력<input className="ml-3 inputBox" onChange={handleChangename} placeholder="Name"/> </div>
</label> <div className="form-group">
<label for="inputName">이름입력</label>
<label for="inputPassword"> <input className="form-control" onChange={handleChangename} placeholder="Name" />
비밀번호<input type='password' className="ml-3 inputBox" onChange={handleChangepassword} placeholder="Password"/> </div>
</label> <div className="form-group">
<div className="form-group for login"> <label for="inputPassword">비밀번호</label>
<label for="inputLogin" className="d-flex justify-content-center"> <input type='password' className="form-control" onChange={handleChangepassword} placeholder="Password" />
<button className="mt-4 btn btn-dark" onClick={handleClick}>Login</button> </div>
</label> <div className="form-group text-center">
<label for="inputLogin" className="d-flex justify-content-center"> </label>
<button className="mt-4 btn btn-dark" onClick={handleClick}>Login</button>
</div> </div>
</div> </div>
</div> </form>
</form> </div>
</>
</div>
) )
} }
......
src/Quiz.js
View file @ fe8d40d8
import React, { useState } from 'react' import React, { useState, useEffect } from 'react'
import { Link, Redirect } 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'
const QnA = [
{ 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 a = localStorage.getItem('QnA') let localQnA = JSON.parse(localStorage.getItem('QnA'))
let b = JSON.parse(a)
// let q=[]
// let p =b.map((x)=>{
// q.push(x.A)
// })
// localStorage.setItem("userAnswer",JSON.stringify(q))
// let c = b.map((x,index) =>{
// delete x.A
// return {...x , N : index+1}
// })
let Answers = []
// const [z, setz] = useState({
// ...c[0]
// })
let Answers = [0, 0, 0]
localStorage.setItem('Answers', JSON.stringify(Answers))
let Solutions = [4, 3, 2]
localStorage.setItem('Solutions', JSON.stringify(Solutions))
function Quiz() { function Quiz() {
let Time = 0
if (JSON.parse(localStorage.getItem("Set")) === null) {
Time = 30010
}
else {
Time = Number(JSON.parse(localStorage.getItem("Set"))[0].Time)
} //수정. 추가. 새로 설정한 시간으로 설정
const [question, setQuestion] = useState({ const [question, setQuestion] = useState({
...QnA[0] ...localQnA[0]
}) })
const [selected, setSelected] = useState("") //선택한 답을 보여줄 것 const [selected, setSelected] = useState("") //선택한 답을 보여줄 것
const [timeout, settimeout] = useState(false) const [timeout, settimeout] = useState(false)
//for each 사용하기
let Solutions = [] //빈 배열
console.log(localQnA)
let q = [] //빈 배열 localQnA.forEach((element) => {
console.log(b) Solutions.push(Number(element.A))
b.map((x) => { //A만 꺼내서 q에 추가 });
q.push(x.A) useEffect(() => {
}) for (let i = 1; i <= Solutions.length; i++) {
console.log(q, b) Answers.push(0)
localStorage.setItem("userAnswer", JSON.stringify(q)) //그걸 로컬에 저장 localStorage.setItem('Answers', JSON.stringify(Answers))
localStorage.setItem("Solutions", JSON.stringify(Solutions))
let c = b.map((x, index) => { }
//delete x.A //A 삭제 // eslint-disable-next-line
return { ...x, N: index + 1 } //N 추가 }, [])
})
console.log(c)
function handleQuestion() { function handleQuestion() {
setQuestion({ ...QnA[question.N] }) setQuestion({ ...localQnA[question.N] })
setSelected("") //페이지 넘어가면 selected 초기화 setSelected("") //페이지 넘어가면 selected 초기화
} }
...@@ -84,7 +64,7 @@ function Quiz() { ...@@ -84,7 +64,7 @@ function Quiz() {
</div> </div>
<div className="col-md-auto"> <div className="col-md-auto">
<div className="h2 mt-2"> <div className="h2 mt-2">
{question.Q} {b[0].Q} {question.Q}
</div> </div>
<div className="mt-2"> <div className="mt-2">
<form> <form>
...@@ -97,16 +77,17 @@ function Quiz() { ...@@ -97,16 +77,17 @@ function Quiz() {
</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.N - 1 === QnA.length - 1) <div className="text-center my-3"> {(question.N - 1 === localQnA.length - 1)
? <Link to="/end"> ? <Link to="/end">
<button className="btn btn-outline-success" onClick={localStorage.setItem('Solutions', JSON.stringify(Solutions))}>제출</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={3001000} initialTime={Time} // 수정. 추가. 새로설정한 시간으로 설정. 하지만 새로고침해야 적용됨
// initialTime={Number(JSON.parse(localStorage.getItem("Set"))[0].Time)}
direction="backward" direction="backward"
checkpoints={[ checkpoints={[
{ {
......
src/Quiz12.js 0 → 100644
View file @ fe8d40d8
import React, { useState, useEffect } from 'react'
import { Link, Redirect } from 'react-router-dom';
import Timer from 'react-compound-timer'; // 타이머쓰기위해 import
import logo from './img_question.png'
let localQnA = JSON.parse(localStorage.getItem('QnA'))
let Answers = []
function Quiz() {
const [question, setQuestion] = useState({
...localQnA[0]
})
const [selected, setSelected] = useState("") //선택한 답을 보여줄 것
const [timeout, settimeout] = useState(false)
//for each 사용하기
let Solutions = [] //빈 배열
console.log(localQnA)
localQnA.map((x) => { //A만 꺼내서 q에 추가
// Answers.push(0)
return Solutions.push(x.A)
})
useEffect(()=>{for (let i=1 ; i <= Solutions.length;i++){
Answers.push(0)
localStorage.setItem('Answers',JSON.stringify(Answers))
localStorage.setItem("Solutions", JSON.stringify(Solutions))
}},[])
//그걸 로컬에 저장
//foreach 쓰기
let finalQnA = localQnA.map((x, index) => {
//delete x.A //A 삭제
return { ...x, N: index + 1 } //N 추가
})
function handleQuestion() {
setQuestion({ ...localQnA[question.N] })
setSelected("") //페이지 넘어가면 selected 초기화
}
let handleChange = (ev) => {
setSelected(ev.target.value) //selected값 변경
Answers[question.N - 1] = Number(ev.target.id) + 1
localStorage.setItem('Answers', JSON.stringify(Answers))
}
return (
<>
<div className="container-fluid">
<div className="text-center h2 font-weight-bold bg-warning py-2">미적분학 퀴즈</div>
<div className="row justify-content-md-center" >
<div className="col text-right">
<h1>
<img src={logo} width='50' height='50' alt='question' />
</h1>
</div>
<div className="col-md-auto">
<div className="h2 mt-2">
{localQnA[0].Q}
</div>
<div className="mt-2">
<form>
{question.Choose.map((a, index) =>
<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>
)}
</form>
<span className="h5 font-weight-bold"> Your Answer :</span>
<span className="h2 font-weight-bold text-danger"> {selected}</span> {/* 선택한 값 보여줌 */}
<div className="text-center my-3"> {(question.N - 1 === localQnA.length - 1)
? <Link to="/end">
<button className="btn btn-outline-success" /*onClick={localStorage.setItem('Solutions', JSON.stringify(Solutions))}*/>제출</button>
</Link>
: <button type="button" className="btn btn-outline-dark" onClick={handleQuestion}>다음</button>
}
</div>
<p className="h3 text-center text-danger ">
<Timer
initialTime={3000}
direction="backward"
checkpoints={[
{
time: 1,
callback: () => alert('시간이 초과되었습니다.'),
},
{
time: 0,
callback: () => settimeout(true),
}
]}
>
{() => (
<>
<Timer.Minutes /> : <Timer.Seconds></Timer.Seconds> / 30 : 00 </>
)}
</Timer> {/* npm i react-compound-timer */}
</p>
</div>
</div>
<div className="col">
</div>
</div>
</div>
{timeout ? <Redirect to='/end' /> : ''}
</>
)
}
export default Quiz;
src/compare.js
View file @ fe8d40d8
import React, { useState } from 'react'; import React from 'react';
// import { Link } from 'react-router-dom'; // import './App.css';
import Home from './Home'
function Admin() { import Quiz from './Quiz'
import End from './End'
const [question, setQuestion] = useState('') import Admin from './Admin'
const [choose, setChoose] = useState('')
const [answer, setAnswer] = useState('') import { BrowserRouter as Router, Link, Switch, Route, Redirect } from 'react-router-dom';
const [selectOption, setselectOption ] = useState('')
// const [done, setDone] = useState(false) function App() {
return (
const handleChangeQuestion = (event) => { <Router>
setQuestion(event.target.value) <div className="container-fluid vh-100 bg-light">
} <header className="border-bottom">
const handleChangechoose = (event) => { <Link to="/">
setChoose(event.target.value) <button className="ml-3 btn btn-light btn-lg font-weight-bold text-dark">Home</button>
} </Link>
const handleChangeanswer = (event) => { </header>
setAnswer(event.target.value) <Switch>
} <Route exact path="/" component={Home} />
function handleClick() { <Route path="/quiz" component={Quiz} />
// localStorage.setItem('N', number) <Route path="/end" component={End} />
localStorage.setItem('Q', question)
localStorage.setItem('Choose', choose) <Route path="/admin" component={Admin} />
localStorage.setItem('Answer', answer)
// setDone(true) <Redirect path="/admin" to="/admin" />
alert('입력이 완료되었습니다') </Switch>
} </div>
</Router>
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" class="form-control" placeholder="보기를 입력하세요" onChange={handleChangechoose} />
</div>
}
setselectOption(list)
}
return (
<>
{/* {done ? alert('모두 입력되었습니다.') : ''} */}
<div className="container-fluid">
<div className="row d-flex justify-content-center">
<div className="col-8">
<h2 className="p-3 border text-center">문제만들기</h2>
<div className="p-3 borber">
<div className="p-3 ">
<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 ">
<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 className="p-3 ">
<span className="font-weight-bold mr-2 h3">정답:</span>
<input type="text" onChange={handleChangeanswer} placeholder="정답을 입력하세요" />
</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>
</>
)
} }
export default Admin
\ No newline at end of file export default App;
\ No newline at end of file
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