Commit 5943a7e8 authored by baesangjune's avatar baesangjune
Browse files

timer

parent 6987c355
This diff is collapsed.
import React from 'react' import React from 'react'
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import Timer from 'react-compound-timer';
const question = [ const question = [
{ Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "" }, { Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "" },
...@@ -41,19 +42,41 @@ class Quiz extends React.Component { ...@@ -41,19 +42,41 @@ class Quiz extends React.Component {
return ( return (
<div className="Quiz"> <div className="Quiz">
<h2>Q:{this.state.Q}</h2> <h2>Q:{this.state.Q}</h2>
{this.answerbox()}
{this.state.Choose.map((a) => {this.state.Choose.map((a) =>
<div> <div>
<input type="radio" name='answer' id={a} value={a} /*ref={this.textInput}*/ /> <input type="radio" name='answer' id={'anwer'+a} value={a} /*ref={this.textInput} input 네임을 문제단위로 바꾸어주어야 함. */ />
<label for={a}>{a}</label> <label for={a}>{a}</label>
</div>) </div>)
} }
<div className="App">정답을 입력하세요</div> <div className="App" class='left'>정답을 입력하세요</div>
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */} {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
{(this.state.page === question.length-1) {(this.state.page === question.length-1)
? <Link to="/end">제출</Link> ? <Link to="/end">제출</Link>
: <button type="button" onClick={this.setQuestion}>다음</button> : <button type="button" onClick={this.setQuestion}>다음</button>
} }
<Timer
initialTime={5000}
direction="backward"
checkpoints={[
{
time: 0,
callback: () => this.setQuestion,
}
]}
>
{() => (
<>
<Timer.Seconds /> seconds
</>
)}
</Timer> {/* npm i react-compound-timer */}
</div> </div>
) )
} }
......
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