Skip to content

GitLab

Commit a9cf33de authored by JeongYeonwoo's avatar JeongYeonwoo
Browse files

function으로 변경 (시간은 아직..)

parent 5c2276e7
Show whitespace changes
Inline Side-by-side
src/App.js
View file @ a9cf33de
import React from 'react'; import React from 'react';
import logo from './logo.svg';
import './App.css'; import './App.css';
import ReactDOM from 'react-dom'; import Home from './Home'
import Quiz from './Quiz'
import End from './End'
function App(props) { import { BrowserRouter as Router, Link, Switch, Route } from 'react-router-dom';
return (
<>
<div className="App">
<h1 style={{ background: "orange", display: "inline-block", border: "3px solid black", width: "200px" }}> Calculus</h1>
</div>
<div className="App">
이름을 입력하세요
<input onChange={(event) => { console.log(event.target.value) }} />
</div>
<button onClick={ShowQuiz1} style={{ margin: "30px", marginLeft: "690px", width: "150px", height: "30px", fontFamily : "impact"}}>Quiz Start ! </button>
</>
);
}
function Next() {
return alert("다음문제")
//선택한 정답과 실제정답이 일치하는지 판별
}
function Quiz1() { function App() {
return ( return (
<> <Router>
<h2>Q1. 3 + 3 = ?</h2> <header>
<div>① 2</div> <Link to="/">
<div>② 4</div> <button>Calculus</button>
<div>③ 6</div> </Link>
<div>④ 8</div> </header>
<div className="App" style={{ float: "left" }}> <hr/>
정답을 입력하세요 <div>
<select id="number1"> <Switch>
<option value="0" hidden disabled selected>정답선택</option> <Route exact path="/">
<option value="1">①</option> <Home/>
<option value="2">②</option> </Route>
<option value="3">③</option> <Route path="/quiz">
<option value="4">④</option> <Quiz/>
</select> </Route>
<button onClick={ShowQuiz2} style={{ marginLeft: "10px" }}>다음</button> <Route path="/end">
<End/>
</Route>
</Switch>
</div> </div>
</> </Router>
);
}
function ShowQuiz1() {
ReactDOM.render(
<React.StrictMode>
<Quiz1 />
</React.StrictMode>,
document.getElementById('root')
);
}
function Quiz2() {
return (
<>
<h2>Q2. 6 x 4 = ?</h2>
<div>① 6</div>
<div>② 12</div>
<div>③ 18</div>
<div>④ 24</div>
<div className="App" style={{ float: "left" }}>
정답을 입력하세요
<select>
<option hidden disabled selected>정답선택</option>
<option value="6">①</option>
<option value="12">②</option>
<option value="18">③</option>
<option value="24">④</option>
</select>
<button onClick={Showlast} style={{ marginLeft: "10px" }}>다음</button>
</div>
</>
);
}
function ShowQuiz2() {
ReactDOM.render(
<React.StrictMode>
<Quiz2 />
</React.StrictMode>,
document.getElementById('root')
);
}
function Last() {
return (
<>
<div className="App" style={{ margin: "30px", fontSize: "2.0em" }}>Quiz 완료</div>
<h1 style={{ marginLeft: "640px" }}>수고하셨습니다 !!</h1>
</>
) )
} }
function Showlast() {
ReactDOM.render(
<React.StrictMode>
<Last />
</React.StrictMode>,
document.getElementById('root')
);
}
export default App; export default App;
\ No newline at end of file
// export default Quiz1;
\ No newline at end of file
src/End.js 0 → 100644
View file @ a9cf33de
import React from 'react'
// import { Link } from 'react-router-dom';
function End({history}) {
return (
<>
<div>
{/* <button onClick={() => history.push('/')}>홈 버튼!</button> */}
</div>
<div className="Box">
<h2>수고하셨습니다!</h2>
</div>
</>
)
}
export default End;
\ No newline at end of file
src/Home.js 0 → 100644
View file @ a9cf33de
import React from 'react'
import { Link } from 'react-router-dom';
function Home() {
return (
<>
<div className="Box">
<div className="Name">
이름을 입력하세요
<input onChange={(event) => sessionStorage.setItem('name', event.target.value)} />
</div>
{/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
</div>
<div className='Box2'>
<Link to="/quiz">
<button className="QuizStart" onClick={checking}>Quiz Start !</button>
</Link>
</div>
</>
)
}
function checking(event) {
if (sessionStorage.getItem('name') === null || sessionStorage.getItem('name').length === 0) {
alert('이름을 입력하세요')
}
else {
alert('입력하신 이름은'+sessionStorage.getItem('name')+'입니다.')
}
}
export default Home;
src/Prequiz1.js 0 → 100644
View file @ a9cf33de
import React from 'react';
// import logo from './logo.svg';
import './Quiz.css';
import 'bootstrap/dist/css/bootstrap.css';
const question = [
{ Q: "6 X 4 ?", Choose: [6, 12, 18, 24]},
{ Q: "3 + 3 ?", Choose: [2, 4, 6, 8]},
{ Q: "3 - 1 ?", Choose: [1, 2, 3, 4]}
]
class Quiz extends React.Component {
constructor(props) {
super(props)
// this.setAnswer = this.setAnswer.bind(this)
this.checking=this.checking.bind(this)
this.setQuestion = this.setQuestion.bind(this)
this.ShowQuiz = this.ShowQuiz.bind(this)
this.state = { ...question[0], i: 0, page: 0 }
}
ShowQuiz() {
this.setState({ page: 1 })
}
setQuestion() {
this.setState({ ...question[this.state.i + 1], i: this.state.i + 1 })
}
// setAnswer(e) {
// question[this.state.i]["A"] = e.target.value
// this.setState({ v: e.target.value })
// console.log(this.state)
// console.log(question)
// }
checking(e){
this.setState({ userAnswer: e.target.value })
console.log(this.state)
console.log(question)
}
render() {
if (this.state.page === 1) {
if (this.state.i === question.length) {
return (
<div>
<h2>수고하셨습니다!</h2>
</div>
)
}
else {
return (
<div className="Quiz">
<h2>Q:{this.state.Q}</h2>
{this.state.Choose.map((a) =>
<div>
<input type="radio" name="a" id={a} value={a} onClick={this.checking}/>
<label htmlFor={a}>{a}</label>
</div>)}
<div className="App">
정답을 입력하세요
</div>
{/* <div>
<input type="text" value={this.state.v} name="A" onChange={this.setAnswer} />
</div> */}
<button type="button" onClick={this.setQuestion}>다음</button>
</div>
)
}
}
else {
return (
<div className="Box">
<div className="Main">
<h1> Calculus</h1>
</div>
<div className="Name">
이름을 입력하세요
<input onChange={(event) => { console.log(event.target.value) }} />
</div>
<button className="QuizStart" onClick={this.ShowQuiz}>Quiz Start !</button>
</div>
)
}
}
}
export default Quiz;
\ No newline at end of file
src/Quiz.css 0 → 100644
View file @ a9cf33de
.Main {
background: orange;
display: inline-block;
border: 3px solid black;
width: 200px;
text-align: center;
}
/* .Name {} */
.Box {
text-align: center;
margin: 0 auto;
}
.QuizStart {
margin: 30px;
margin-left: 500px;
width: 150px;
height: 30px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
\ No newline at end of file
src/Quiz.js 0 → 100644
View file @ a9cf33de
import React, { useState } from 'react'
import { Link } from 'react-router-dom';
import Timer from 'react-compound-timer'; // 타이머쓰기위해 import
const QnA = [
{ Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "", N: 1 },
{ Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "", N: 2 },
{ Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "", N: 3 }
]
function Quiz() {
let [question, setQuestionss] = useState({
...QnA[0],
i: 0,
page: 0,
})
let [selected,setSelected] = useState("") //선택한 답을 보여줄 것들
function setQuestion() {
setQuestionss({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 })
}
let handleChange = (ev) => {
ev.preventDefault() //새로고침 안되도록
setSelected(ev.target.value) //selected값 변경
let slt=ev.target.value //slt에 선택한값 받아옴
let count = question.Choose.length //이거 정확히 뭘로할지 모르겠어요 ㅜㅜ
// 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 className="Quiz">
<h2>Q:{question.Q}</h2>
<div>
<form onSubmit={handleChange}>
{question.Choose.map( (a,index) =>
<div>
<input key={index} type="radio" name='answer' id={'anwer' + a} value={a} onClick={handleChange} />
<label htmlFor={a}> {a}</label>
</div>
)}
<input hidden type="submit" value="확인" /> {/*버튼 숨김*/}
</form>
<h3>선택한 답 : {selected}</h3> {/* 선택한 값 보여줌 */}
</div>
<div className="App">정답을 입력하세요</div>
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
{(question.page === QnA.length - 1)
? <Link to="/end">제출</Link>
: <button type="button" onClick={setQuestion} >다음</button>
}
{/* <input onKeyPress="this.enterkey()"/> */}
<Timer
initialTime={3050}
direction="backward"
checkpoints={[
{
time: 0,
callback: setQuestion
// history.go(1)
}
]}
>
{() => (
<>
<Timer.Seconds /> seconds
</>
)}
</Timer>
{/* npm i react-compound-timer */}
</div>
)
}
export default Quiz;
\ No newline at end of file
src/index.js
View file @ a9cf33de
...@@ -2,6 +2,7 @@ import React from 'react'; ...@@ -2,6 +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 * as serviceWorker from './serviceWorker'; import * as serviceWorker from './serviceWorker';
ReactDOM.render( ReactDOM.render(
......
src/preQuiz.js 0 → 100644
View file @ a9cf33de
import React from 'react';
// import logo from './logo.svg';
import './Quiz.css';
const question = [
{ Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "" },
{ Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "" },
{ Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "" }
]
class Quiz extends React.Component {
constructor(props) {
super(props)
// this.setAnswer = this.setAnswer.bind(this)
this.setQuestion = this.setQuestion.bind(this)
this.ShowQuiz = this.ShowQuiz.bind(this)
this.answerbox = this.answerbox.bind(this)
this.state = {
...question[0],
i: 0,
page: 0,
}
// this.textInput = React.createRef()
}
ShowQuiz() {
this.setState({ page: 1 })
}
setQuestion() {
//값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj-
this.setState({ ...question[this.state.i + 1], i: this.state.i + 1 })
}
//answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장
answerbox() {
let answers = document.getElementsByName('answer');
let count = answers.length
// var checked_index = -1;
var checked_value = '';
for (var i = 0; i < count; i++) {
if (answers[i].checked) {
// checked_index = i;
checked_value = answers[i].value;
localStorage.setItem('answer-'+i, checked_value)
}
}
// alert('선택된 항목 인덱스: ' + checked_index + '\n선택된 항목 값: ' + checked_value);
// if (document.getElementsByName("answer")[i].checked === true) {
// alert(document.getElementsByName("answer")[i].value);
// }
}
// setAnswer(e) {
// question[this.state.i]["A"] = e.target.value
// this.setState({ v: e.target.value })
// console.log(this.state)
// console.log(question)
// }
render() {
if (this.state.page === 1) {
this.answerbox()
if (this.state.i === question.length) {
return (
<div>
<h2>수고하셨습니다!</h2>
</div>
)
}
else {
return (
<div className="Quiz">
<h2>Q:{this.state.Q}</h2>
{this.state.Choose.map((a) =>
<div>
<input type="radio" name='answer' id={a} value={a} /*ref={this.textInput}*/ />
<label for={a}>{a}</label>
</div>)}
<div className="App">
정답을 입력하세요
</div>
{/* <div>
<input type="text" value={this.state.v} name="A" onChange={this.setAnswer} />
</div> */}
<button type="button" onClick={setTimeout(this.setQuestion, 2000)}>다음</button>
</div>
)
}
}
else {
return (
<div className="Box">
<div className="Main">
<h1> Calculus</h1>
</div>
<div className="Name">
이름을 입력하세요
<input onChange={(event) => { console.log(event.target.value) }} />
</div>
<button className="QuizStart" onClick={this.ShowQuiz}>Quiz Start !</button>
</div>
)
}
}
}
export default Quiz;
src/setupTests.js
View file @ a9cf33de
...@@ -3,3 +3,17 @@ ...@@ -3,3 +3,17 @@
// expect(element).toHaveTextContent(/react/i) // expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom // learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect'; import '@testing-library/jest-dom/extend-expect';
<Segment color='blue'>
<Form>
<Form.Field>
정답
</Form.Field>
{this.rateScore.map(rate=>(
<Form.Field>
<Radio value={rate} checked={} onCange={}/>
{this.renderStar(rate)}
</Form.Field>
))}
</Form>
</Segment>
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