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() {
}
function handleClickQuiz(e) {
setresult(<AdminQuiz QuizNum={e.target.id} />)
setresult(<AdminQuiz QuizNum={e.target.id} data={JSON.parse(localStorage.getItem('QnA'))} />)
}
function handleClickAddQuiz() {
......@@ -29,9 +29,9 @@ function Admin() {
return (
<>
<div className="container-fluid">
<div className="row justify-content-md-center mt-5 ">
<div className="col-2 text-center border">
<div className="my-5">
<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>
<div>
......@@ -47,7 +47,7 @@ function Admin() {
</div>
</div>
<div className="col-8">
<div className="col-8 ">
{result}
</div>
</div>
......
src/AdminQuiz.js
View file @ 50fae079
......@@ -16,13 +16,14 @@ function AdminQuiz(props) {
const [choose, setChoose] = useState('')
const [answer, setAnswer] = useState('')
const [selectOption, setselectOption] = useState(1)
const [v, setv] = useState('')
const handleChangeQuestion = (event) => {
QnAadmin['Q'] = event.target.value
setv(event.target.value)
setQuestion(event.target.value)
}
const handleChangeChoose = (event) => {
savechoose[event.target.id] = event.target.value
......@@ -42,7 +43,7 @@ function AdminQuiz(props) {
<div className="input-group">
<div className="input-group-prepend">
<div className="input-group-text">
<input type="radio" name="answer" />
<input type="radio" checked={false} name="answer" />
</div>
</div>
<input type="text" class="form-control" id={String(selectOption + 1)} placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
......@@ -64,7 +65,7 @@ function AdminQuiz(props) {
}
else {
// console.log(QnAadmin)
QnAadmin['Choose']=Object.values(savechoose)
QnAadmin['Choose'] = Object.values(savechoose)
QnAadmin['N'] = String(props.QuizNum)
QnAadmins.push(QnAadmin)
QnAadmin = {}
......@@ -74,8 +75,10 @@ function AdminQuiz(props) {
}
}
// function handleChangeQuestion(){}
function onFocusHandler(){
document.getElementById("inputQuiz").value=""
setv("")
}
return (
......@@ -84,7 +87,7 @@ function AdminQuiz(props) {
<div className="p-3 borber">
<div className="p-3 ">
<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 className="p-3 ">
<span className="font-weight-bold mr-2 h3">2. 보기 입력하기</span>
......@@ -92,7 +95,7 @@ function AdminQuiz(props) {
<div className="input-group">
<div className="input-group-prepend">
<div className="input-group-text">
<input type="radio" id={selectOption} name="answer" />
<input type="radio" checked={false} name="answer" />
</div>
</div>
<input type="text" className="form-control" id='1' placeholder="보기를 입력하세요" onChange={handleChangeChoose} />
......
src/App.js
View file @ 50fae079
import React from 'react';
import './App.css';
// import './App.css';
import Home from './Home'
import Quiz from './Quiz'
import End from './End'
......@@ -10,13 +10,12 @@ import { BrowserRouter as Router, Link, Switch, Route, Redirect } from 'react-ro
function App() {
return (
<Router>
<header>
<div className="container-fluid vh-100 bg-light">
<header className="border-bottom">
<Link to="/">
<button className="calcButton">Calculus</button>
<button className="ml-3 btn btn-light btn-lg font-weight-bold text-dark">Home</button>
</Link>
</header>
<hr />
<div>
<Switch>
<Route exact path="/" component={Home} />
......@@ -29,6 +28,8 @@ function App() {
<Redirect path="/admin" to="/admin" />
</Switch>
</div>
</Router>
)
}
......
src/Home.js
View file @ 50fae079
......@@ -47,16 +47,20 @@ function Home() {
return (
<>
<div className="container-fluid bg-light p-5 h-100">
{admin ? <Redirect to='/admin' /> : ''}
{done ? <Redirect to='/quiz' /> : ''}
<h1 className="h-3 mb-5 mx-3 text-center bg-danger py-2">
KOREA UNIVERSITY
</h1>
<div className="d-flex justify-content-center">
<form>
<div style={{ width: "400px" }}>
<div>
<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">
<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">
<label for="inputName">이름입력</label>
<input className="form-control" onChange={handleChangename} placeholder="Name" />
......@@ -73,7 +77,7 @@ function Home() {
</form>
</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 Timer from 'react-compound-timer'; // 타이머쓰기위해 import
import logo from './img/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 localQnA = JSON.parse(localStorage.getItem('QnA'))
let Answers = [0,0,0]
localStorage.setItem('Answers', JSON.stringify(Answers))
let Solutions = [4, 3, 2]
localStorage.setItem('Solutions', JSON.stringify(Solutions))
let Answers = []
function Quiz() {
const [question, setQuestion] = useState({
...QnA[0]
...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({ ...QnA[question.N]})
setQuestion({ ...localQnA[question.N] })
setSelected("") //페이지 넘어가면 selected 초기화
}
......@@ -44,7 +60,7 @@ function Quiz() {
</div>
<div className="col-md-auto">
<div className="h2 mt-2">
{question.Q}
{localQnA[0].Q}
</div>
<div className="mt-2">
<form>
......@@ -57,9 +73,9 @@ function Quiz() {
</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 === QnA.length - 1)
<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>
<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>
}
......@@ -69,8 +85,9 @@ function Quiz() {
initialTime={30010}
direction="backward"
checkpoints={[
{time:1,
callback:()=>alert('시간이 초과되었습니다.'),
{
time: 1,
callback: () => alert('시간이 초과되었습니다.'),
},
{
time: 0,
......@@ -91,7 +108,7 @@ function Quiz() {
</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 ReactDOM from 'react-dom';
import 'react-dom'
import './index.css';
// import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import * as serviceWorker from './serviceWorker';
import 'bootstrap/dist/css/bootstrap.css'
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