Skip to content

GitLab

Commit 50fae079 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

ha..

parent 7e1104e5
Show whitespace changes
Inline Side-by-side
src/Admin.js
View file @ 50fae079
...@@ -16,7 +16,7 @@ function Admin() { ...@@ -16,7 +16,7 @@ function Admin() {
} }
function handleClickQuiz(e) { function handleClickQuiz(e) {
setresult(<AdminQuiz QuizNum={e.target.id} />) setresult(<AdminQuiz QuizNum={e.target.id} data={JSON.parse(localStorage.getItem('QnA'))} />)
} }
function handleClickAddQuiz() { function handleClickAddQuiz() {
...@@ -29,9 +29,9 @@ function Admin() { ...@@ -29,9 +29,9 @@ function Admin() {
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>
...@@ -47,7 +47,7 @@ function Admin() { ...@@ -47,7 +47,7 @@ function Admin() {
</div> </div>
</div> </div>
<div className="col-8"> <div className="col-8 ">
{result} {result}
</div> </div>
</div> </div>
......
src/AdminQuiz.js
View file @ 50fae079
...@@ -16,13 +16,14 @@ function AdminQuiz(props) { ...@@ -16,13 +16,14 @@ function AdminQuiz(props) {
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 [v, setv] = useState('')
const handleChangeQuestion = (event) => { const handleChangeQuestion = (event) => {
QnAadmin['Q'] = event.target.value QnAadmin['Q'] = event.target.value
setv(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
...@@ -42,7 +43,7 @@ function AdminQuiz(props) { ...@@ -42,7 +43,7 @@ function AdminQuiz(props) {
<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" name="answer" /> <input type="radio" checked={false} name="answer" />
</div> </div>
</div> </div>
<input type="text" class="form-control" id={String(selectOption + 1)} placeholder="보기를 입력하세요" onChange={handleChangeChoose} /> <input type="text" class="form-control" id={String(selectOption + 1)} placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
...@@ -64,7 +65,7 @@ function AdminQuiz(props) { ...@@ -64,7 +65,7 @@ function AdminQuiz(props) {
} }
else { else {
// console.log(QnAadmin) // 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) QnAadmins.push(QnAadmin)
QnAadmin = {} QnAadmin = {}
...@@ -74,8 +75,10 @@ function AdminQuiz(props) { ...@@ -74,8 +75,10 @@ function AdminQuiz(props) {
} }
} }
function onFocusHandler(){
// function handleChangeQuestion(){} document.getElementById("inputQuiz").value=""
setv("")
}
return ( return (
...@@ -84,7 +87,7 @@ function AdminQuiz(props) { ...@@ -84,7 +87,7 @@ function AdminQuiz(props) {
<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" onFocus={onFocusHandler} value={props.QuizNum<4?props.data[props.QuizNum-1].Q:v} 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>
...@@ -92,7 +95,7 @@ function AdminQuiz(props) { ...@@ -92,7 +95,7 @@ function AdminQuiz(props) {
<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" id='1' placeholder="보기를 입력하세요" onChange={handleChangeChoose} /> <input type="text" className="form-control" id='1' placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
......
src/App.js
View file @ 50fae079
import React from 'react'; import React from 'react';
import './App.css'; // 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 +10,12 @@ import { BrowserRouter as Router, Link, Switch, Route, Redirect } from 'react-ro ...@@ -10,13 +10,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">
<header className="border-bottom">
<Link to="/"> <Link to="/">
<button className="calcButton">Calculus</button> <button className="ml-3 btn btn-light btn-lg font-weight-bold text-dark">Home</button>
</Link> </Link>
</header> </header>
<hr />
<div>
<Switch> <Switch>
<Route exact path="/" component={Home} /> <Route exact path="/" component={Home} />
...@@ -29,6 +28,8 @@ function App() { ...@@ -29,6 +28,8 @@ function App() {
<Redirect path="/admin" to="/admin" /> <Redirect path="/admin" to="/admin" />
</Switch> </Switch>
</div> </div>
</Router> </Router>
) )
} }
......
src/Home.js
View file @ 50fae079
...@@ -47,16 +47,20 @@ function Home() { ...@@ -47,16 +47,20 @@ 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 <div>
</h1> <h3 className="text-center pb-5 font-weight-bold text-danger" style={{'font-family':'sans-serif'}}>Korea University</h3>
<div className="d-flex justify-content-center"> </div>
<form>
<div style={{ width: "400px" }}> <div className="row justify-content-center">
<form className="col-4 p-5 border bg-white">
<div>
<div>
<p className="font-weight-bold h5 pb-3">로그인</p>
</div>
<div className="form-group"> <div className="form-group">
<label for="inputName">이름입력</label> <label for="inputName">이름입력</label>
<input className="form-control" onChange={handleChangename} placeholder="Name" /> <input className="form-control" onChange={handleChangename} placeholder="Name" />
...@@ -73,7 +77,7 @@ function Home() { ...@@ -73,7 +77,7 @@ function Home() {
</form> </form>
</div> </div>
</> </div>
) )
} }
......
src/Quiz.js
View file @ 50fae079
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/img_question.png' import logo from './img/img_question.png'
const QnA = [ let localQnA = JSON.parse(localStorage.getItem('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 Answers = [0,0,0] let Answers = []
localStorage.setItem('Answers', JSON.stringify(Answers))
let Solutions = [4, 3, 2]
localStorage.setItem('Solutions', JSON.stringify(Solutions))
function Quiz() { function Quiz() {
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)
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() { function handleQuestion() {
setQuestion({ ...QnA[question.N]}) setQuestion({ ...localQnA[question.N] })
setSelected("") //페이지 넘어가면 selected 초기화 setSelected("") //페이지 넘어가면 selected 초기화
} }
...@@ -44,7 +60,7 @@ function Quiz() { ...@@ -44,7 +60,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} {localQnA[0].Q}
</div> </div>
<div className="mt-2"> <div className="mt-2">
<form> <form>
...@@ -57,9 +73,9 @@ function Quiz() { ...@@ -57,9 +73,9 @@ 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>
} }
...@@ -69,8 +85,9 @@ function Quiz() { ...@@ -69,8 +85,9 @@ function Quiz() {
initialTime={30010} initialTime={30010}
direction="backward" direction="backward"
checkpoints={[ checkpoints={[
{time:1, {
callback:()=>alert('시간이 초과되었습니다.'), time: 1,
callback: () => alert('시간이 초과되었습니다.'),
}, },
{ {
time: 0, time: 0,
...@@ -91,7 +108,7 @@ function Quiz() { ...@@ -91,7 +108,7 @@ function Quiz() {
</div> </div>
</div> </div>
</div> </div>
{timeout ? <Redirect to='/end'/> : '' } {timeout ? <Redirect to='/end' /> : ''}
</> </>
) )
......
src/Quiz12.js 0 → 100644
View file @ 50fae079
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/index.js
View file @ 50fae079
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 './index.css';
import App from './App'; import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap' import 'bootstrap'
......
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