Commit 75b9c5fa authored by baesangjune's avatar baesangjune
Browse files

Quiz.js

parent 26eec347
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.state = { ...question[0], i: 0, v: "", r: 0, c: "" }
}
ShowQuiz() {
this.setState({ r: 1 })
}
setQuestion() {
this.setState({ ...question[this.state.i + 1], i: this.state.i + 1, v: "" })
}
// 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.r === 1) {
if (this.state.i === 3) {
return (
<div>
<h2>수고하셨습니다!</h2>
</div>
)
}
else {
return (
<div className="Quiz">
<h2>Q:{this.state.Q}</h2>
<div> {this.state.Choose[0]}</div>
<div> {this.state.Choose[1]}</div>
<div> {this.state.Choose[2]}</div>
<div> {this.state.Choose[3]}</div>
<div className="App">
정답을 입력하세요
<select>
<option hidden disabled selected>정답선택</option>
<option value={this.state.Choose[0]}></option>
<option value={this.state.Choose[1]}></option>
<option value={this.state.Choose[2]}></option>
<option value={this.state.Choose[3]}></option>
</select>
</div>
{/* <div>
<input type="text" value={this.state.v} name="A" onChange={this.setAnswer} />
</div> */}
{localStorage.setItem('Answer1', this.question[0].A),
localStorage.getItem('Answer1')}
<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;
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import App from './App';
import Quiz from './Quiz';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
<Quiz />
</React.StrictMode>,
document.getElementById('root')
);
......
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