Skip to content

GitLab

Commit 5d6fa361 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

a

parent 14e5daa2
Hide whitespace changes
Inline Side-by-side
package-lock.json
View file @ 5d6fa361
...@@ -3651,6 +3651,8 @@ ...@@ -3651,6 +3651,8 @@
}, },
"@testing-library/jest-dom": { "@testing-library/jest-dom": {
"version": "4.2.4", "version": "4.2.4",
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-4.2.4.tgz",
"integrity": "sha512-j31Bn0rQo12fhCWOUWy9fl7wtqkp7In/YP2p5ZFyRuiiB9Qs3g+hS4gAmDWONbAHcRmVooNJ5eOHQDCOmUFXHg==",
"requires": { "requires": {
"@babel/runtime": "^7.5.1", "@babel/runtime": "^7.5.1",
"chalk": "^2.4.1", "chalk": "^2.4.1",
...@@ -3675,6 +3677,8 @@ ...@@ -3675,6 +3677,8 @@
}, },
"@testing-library/react": { "@testing-library/react": {
"version": "9.5.0", "version": "9.5.0",
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-9.5.0.tgz",
"integrity": "sha512-di1b+D0p+rfeboHO5W7gTVeZDIK5+maEgstrZbWZSSvxDyfDRkkyBE1AJR5Psd6doNldluXlCWqXriUfqu/9Qg==",
"requires": { "requires": {
"@babel/runtime": "^7.8.4", "@babel/runtime": "^7.8.4",
"@testing-library/dom": "^6.15.0", "@testing-library/dom": "^6.15.0",
...@@ -3682,7 +3686,9 @@ ...@@ -3682,7 +3686,9 @@
} }
}, },
"@testing-library/user-event": { "@testing-library/user-event": {
"version": "7.2.1" "version": "7.2.1",
"resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-7.2.1.tgz",
"integrity": "sha512-oZ0Ib5I4Z2pUEcoo95cT1cr6slco9WY7yiPpG+RGNkj8YcYgJnM7pXmYmorNOReh8MIGcKSqXyeGjxnr8YiZbA=="
}, },
"@types/babel__core": { "@types/babel__core": {
"version": "7.1.9", "version": "7.1.9",
...@@ -5085,6 +5091,11 @@ ...@@ -5085,6 +5091,11 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=" "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
}, },
"bootstrap": {
"version": "4.5.1",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.1.tgz",
"integrity": "sha512-bxUooHBSbvefnIZfjD0LE8nfdPKrtiFy2sgrxQwUZ0UpFzpjVbVMUxaGIoo9XWT4B2LG1HX6UQg0UMOakT0prQ=="
},
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
...@@ -9477,6 +9488,11 @@ ...@@ -9477,6 +9488,11 @@
"supports-color": "^6.1.0" "supports-color": "^6.1.0"
} }
}, },
"jquery": {
"version": "3.5.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
"integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
},
"js-tokens": { "js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
...@@ -11116,6 +11132,11 @@ ...@@ -11116,6 +11132,11 @@
"ts-pnp": "^1.1.6" "ts-pnp": "^1.1.6"
} }
}, },
"popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
},
"portfinder": { "portfinder": {
"version": "1.0.27", "version": "1.0.27",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.27.tgz", "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.27.tgz",
...@@ -12298,6 +12319,8 @@ ...@@ -12298,6 +12319,8 @@
}, },
"react": { "react": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
"integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
"requires": { "requires": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0",
"object-assign": "^4.1.1", "object-assign": "^4.1.1",
...@@ -12509,6 +12532,8 @@ ...@@ -12509,6 +12532,8 @@
}, },
"react-dom": { "react-dom": {
"version": "16.13.1", "version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
"integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
"requires": { "requires": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0",
"object-assign": "^4.1.1", "object-assign": "^4.1.1",
...@@ -12545,6 +12570,8 @@ ...@@ -12545,6 +12570,8 @@
}, },
"react-router-dom": { "react-router-dom": {
"version": "5.2.0", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
"requires": { "requires": {
"@babel/runtime": "^7.1.2", "@babel/runtime": "^7.1.2",
"history": "^4.9.0", "history": "^4.9.0",
...@@ -12567,6 +12594,8 @@ ...@@ -12567,6 +12594,8 @@
}, },
"react-scripts": { "react-scripts": {
"version": "3.4.1", "version": "3.4.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
"integrity": "sha512-JpTdi/0Sfd31mZA6Ukx+lq5j1JoKItX7qqEK4OiACjVQletM1P38g49d9/D0yTxp9FrSF+xpJFStkGgKEIRjlQ==",
"requires": { "requires": {
"@babel/core": "7.9.0", "@babel/core": "7.9.0",
"@svgr/webpack": "4.3.3", "@svgr/webpack": "4.3.3",
......
src/End.css 0 → 100644
View file @ 5d6fa361
.card {
font-size:30px;
text-align:center;
}
.Box {
margin-top:100px;
}
\ No newline at end of file
src/End.js
View file @ 5d6fa361
import React from 'react' import React, { createContext } from 'react'
import './End.css'
import tr from './img/img_end.jpg';
// import { Link } from 'react-router-dom'; // import { Link } from 'react-router-dom';
function End() { function End() {
let k = [] let k = []
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
if (localStorage.getItem((i+1) + '번문제답') === localStorage.getItem((i+1) + '번문제정답')) { if (localStorage.getItem(i + '번문제답') === localStorage.getItem(i + '번문제정답')) {
alert('정답입니다.')
k[i] = ['O', 1] k[i] = ['O', 1]
} }
else { else {
alert('오답입니다.')
k[i] = ['X', 0] k[i] = ['X', 0]
} }
} }
return ( return (
<> <>
<div className="card " > <div className="card" >
<div className='card-header'> <div className='card-header'>
-채점표- -채점표-
</div>
<div className='card-body'> <div className='card-body'>
<h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3> <h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3>
<p className='card-text'>Quiz 1 : {k[0][0]}</p> <p className='card-text'>Quiz 1 : {k[0][0]}</p>
...@@ -27,7 +29,9 @@ function End() { ...@@ -27,7 +29,9 @@ function End() {
<p className='card-text'>Total Score : {k[0][1] + k[1][1] + k[2][1]}</p> <p className='card-text'>Total Score : {k[0][1] + k[1][1] + k[2][1]}</p>
</div> </div>
<div className="Box text-center"> <div className="Box text-center">
<h1>수고하셨습니다.</h1> <img src={tr} alt="수고" />
</div>
</div> </div>
</div> </div>
</> </>
......
src/Home.css 0 → 100644
View file @ 5d6fa361
.container {
background-image: url("./img/img_study.jpg");
background-color: white;
background-size: 100%;
width: 100%;
height: 880px;
background-repeat: no-repeat;
}
/* .Name {
font-size: 30px;
position: absolute;
top: 330px;
left: 38%
} */
/* .inputBox {
margin-left: 30px;
inline-size: 200px;
block-size: 40px;
font-size: 40px;
} */
/* .QuizStart {
margin-top: 35%;
block-size: 100px;
inline-size: 200px;
font-size: 35px;
} */
\ No newline at end of file
src/Home.js
View file @ 5d6fa361
import React, { useState } from 'react' import React from 'react'
import { Redirect } from 'react-router-dom'; import { Link } from 'react-router-dom';
// import { Link } from 'react-router-dom'; import './Home.css';
// import bg from './img_study.jpg'
function Home() { function Home() {
const [name, setName] = useState('')
const [done, setDone] = useState(false)
const handleChange = (event) => {
setName(event.target.value)
}
function checking(event) {
if (!name) {
alert('이름을 입력하세요')
}
else {
alert('입력하신 이름은' + name + '입니다.')
localStorage.setItem('name', name)
setDone(true)
}
}
return ( return (
<> <div className="container my-con">
{done ? <Redirect to='/quiz' /> : ''} <div >
<div className="Box"> <p className="text-center font-weight-bold">이름을 입력하세요</p>
<div className="Name"> 이름을 입력하세요
<input onChange={handleChange} />
</div>
<div> <div>
<button className="QuizStart" onClick={checking}>Quiz Start !</button> <div>
<input className="inputBox" onChange={(event) => sessionStorage.setItem('name', event.target.value)} />
</div>
<div>
<Link to="/quiz">
<button className="QuizStart" onClick={checking}>Quiz Start !</button>
</Link>
</div>
</div> </div>
</div> </div>
</> <div>
계산수학
</div>
</div>
) )
} }
function checking() {
if (sessionStorage.getItem('name') === null || sessionStorage.getItem('name').length === 0) {
alert('이름을 입력하세요')
}
else {
alert('입력하신 이름은' + sessionStorage.getItem('name') + '입니다.')
}
}
export default Home;
export default Home;
\ No newline at end of file
src/Quiz.css
View file @ 5d6fa361
.Main { .Main {
background: orange; background: gray;
background-image: url('');
display: inline-block; display: inline-block;
border: 3px solid black; border: 3px solid black;
width: 200px; width: 750px;
height: 180px;
text-align: center; text-align: center;
margin-left: 410px;
margin-top: 10px;
font-size: 120px;
font-family: cursive;
color : greenyellow;
text-shadow :
-3px -3px 0 #000, /* 왼쪽 위 그림자 */
3px -3px 0 #000, /* 오른쪽 위 그림자 */
-3px 3px 0 #000, /* 왼쪽 아래 그림자 */
3px 3px 0 #000; /* 오른쪽 아래 그림자 */
} }
/* .Name {} */ /* .Name {} */
...@@ -11,12 +24,24 @@ ...@@ -11,12 +24,24 @@
.Box { .Box {
text-align: center; text-align: center;
margin: 0 auto; margin: 0 auto;
margin-top: 75px;
} }
.QuizStart { .QuizStart {
margin: 30px; margin: 30px;
margin-left: 500px; margin-left: 650px;
width: 150px; margin-top: 150px;
height: 30px; margin-bottom: 200px;
width: 220px;
height: 50px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
} font-size: 20px;
\ No newline at end of file letter-spacing: 3px;
}
.card{
text-align: center;
margin: 100px;
font-size: 10px;
}
src/Quiz.js
View file @ 5d6fa361
import React from 'react' import React, { useState } from 'react'
import { Link } from 'react-router-dom'; import { Link } 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 fight from './img/img_quiz.png'
const question = [ const QnA = [
{ Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "24", N: 1 }, { Q: "6 X 4 = ?", Choose: [6, 12, 18, 24], A: "", N: 1 },
{ Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "6", N: 2 }, { Q: "3 + 3 = ?", Choose: [2, 4, 6, 8], A: "", N: 2 },
{ Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "2", N: 3 } { Q: "3 - 1 = ?", Choose: [1, 2, 3, 4], A: "", N: 3 }
] ]
class Quiz extends React.Component { function Quiz() {
constructor(props) { let [question, setQuestionss] = useState({
super(props) ...QnA[0],
this.setQuestion = this.setQuestion.bind(this) i: 0,
this.answerbox = this.answerbox.bind(this) page: 0,
this.timer = this.timer.bind(this) })
// this.enterkey = this.enterkey(this) let [selected, setSelected] = useState("") //선택한 답을 보여줄 것들
this.state = {
...question[0],
i: 0,
page: 0,
question
} function setQuestion() {
} setQuestionss({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 })
setQuestion() {
//값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj-
this.answerbox()
this.setState({ ...question[this.state.i + 1], i: this.state.i + 1, page: this.state.page + 1 })
} }
//answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장 let handleChange = (ev) => {
answerbox() { ev.preventDefault() //새로고침 안되도록
let answers = document.getElementsByName('answer'); setSelected(ev.target.value) //selected값 변경
for (let i = 0; i < answers.length; i++) { let slt = ev.target.value //slt에 선택한값 받아옴
if (answers[i].checked === true) {
localStorage.setItem((this.state.i + 1) + '번문제답', answers[i].value) let count = question.Choose.length //이거 정확히 뭘로할지 모르겠어요 ㅜㅜ
localStorage.setItem((this.state.i + 1) + '번문제정답', question[this.state.i].A)
// let checked_index = -1;
let checked_value = '';
checked_value = slt;
//localStorage.setItem('번문제 답' + checked_value, checked_value)
for (let i = 0; i < count; i++) {
if (ev.target.checked) { //이거 맞는지도 잘..
// checked_index = i;
checked_value = slt;
localStorage.setItem(question.i + 1 + '번문제 답', checked_value)
} }
} }
} }
return (
<>
<div style={{fontSize:'80px', marginBottom:'100px', textAlign:"center", backgroundColor:'yellow'}}>미적분학 퀴즈</div>
<img src={fight} style={{ position: "absolute", top: "65px",left: "1050px", top:'200px' }} alt="lion" />
<div className="Quiz" >
<h1><img src={logo} style={{ marginLeft: "450px" }} width='75' height='75' alt='question' /> <span style={{ fontSize: "75px", marginLeft: "30px" }}>{question.Q}</span></h1>
{/* <div style={{ marginTop: "30px", marginBottom: "30px", marginLeft:'450px', fontSize:'40px' }}>정답을 선택하세요</div> */}
timer() {
return (
<Timer
initialTime={10010}
direction="backward"
checkpoints={[
{
time: 0,
callback: this.setQuestion
// history.go(1)
}
]}
>
{() => (
<>
<Timer.Seconds /> seconds
</>
)}
</Timer> /* npm i react-compound-timer */
)
}
render() {
return (
<div className="Quiz">
<h2>Q:{this.state.Q}</h2>
<div> <div>
{this.state.Choose.map((a) => <form>
<div>{this.state.N} {question.Choose.map((a, index) =>
<input type="radio" name='answer' id={a} value={a} /*ref={this.textInput} input 네임을 문제단위로 바꾸어주어야 함. */ /> <div key={index}>
<label for={a}>{a}</label> <input type="radio" name='answer' id={'answer' + a} value={a} onClick={handleChange} style={{ marginLeft: "475px", width: "25px", height: "25px" }} />
</div>) <label htmlFor={a} style={{ fontSize: "40px", marginLeft: "22px" }}>{a}</label>
</div>
)}
<input hidden type="submit" value="확인" /> {/*버튼 숨김*/}
</form>
<p style={{ fontSize: "40px", marginLeft: "480px" }}>Answer :<span style={{ color: "green", fontWeight: "bold", fontSize: "90px", marginLeft: "30px" }}> {selected}</span> {/* 선택한 값 보여줌 */}<span style={{ marginLeft: "50px" }}> {(question.page === QnA.length - 1)
? <Link to="/end">제출</Link>
: <button type="button" onClick={setQuestion} style={{ width: "85px", height: "40px" }} >다음</button>
} }</span>
</p>
</div> </div>
<div className="App" class='left'>정답을 입력하세요</div>
<p style={{ textAlign: "center", fontSize: "30px", color: "crimson" }}>
<Timer
initialTime={3600000}
direction="backward"
checkpoints={[
{
time: 0,
callback: <Link to="/end">제출</Link>
// history.go(1)
}
]}
>
{() => (
<>
<Timer.Minutes /> : <Timer.Seconds></Timer.Seconds> / 60 : 00 </>
)}
</Timer> {/* npm i react-compound-timer */}
</p>
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */} </div>
{(this.state.page === question.length - 1) </>
? <Link to="/end"><button onClick={this.answerbox}>제출</button></Link> )
: <button type="button" onClick={this.setQuestion} >다음</button>
}
{/* <input onKeyPress="this.enterkey()"/> */}
{this.timer()}
</div>
)
}
} }
export default Quiz; export default Quiz;
src/history.js deleted 100644 → 0
View file @ 14e5daa2
import { createBrowserHistory as history} from 'history';
export default history()
\ No newline at end of file
src/index.js
View file @ 5d6fa361
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
// import Quiz from './Quiz'; import 'bootstrap'
import * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
ReactDOM.render( ReactDOM.render(
......
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