import React from 'react' import { Link } from 'react-router-dom'; import Timer from 'react-compound-timer'; // 타이머쓰기위해 import const question = [ { Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "24", N:1 }, { Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "6", N:2 }, { Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "2", N:3 } ] class Quiz extends React.Component { constructor(props) { super(props) this.setQuestion = this.setQuestion.bind(this) this.answerbox = this.answerbox.bind(this) this.timer=this.timer.bind(this) // this.enterkey = this.enterkey(this) this.state = { ...question[0], i: 0, page: 0, question } } setQuestion() { //값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj- this.setState({ ...question[this.state.i + 1], i: this.state.i + 1, page: this.state.page + 1 }) } //answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장 answerbox() { let answers = document.getElementsByName('answer'); let count = answers.length // let checked_index = -1; let checked_value = ''; for (let i = 0; i < count; i++) { if (answers[i].checked) { // checked_index = i; checked_value = answers[i].value; localStorage.setItem(this.state.i+'번문제답', checked_value) localStorage.setItem(this.state.i+'번문제정답', question[i-1].A) } } } timer(){ return( {() => ( <> seconds )} /* npm i react-compound-timer */ ) } // enterkey() { // if ( window.event === 13 ) { // alert("Enter Key 입력 감지 \n함수 실행."); // } // } render() { return (

Q:{this.state.Q}

{this.answerbox()}
{this.state.Choose.map((a) =>
{this.state.N}
) }
정답을 입력하세요
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */} {(this.state.page === question.length-1) ? 제출 : } {/* */} {this.timer()}
) } } export default Quiz;