import React, { useState } from 'react' import { Link } from 'react-router-dom'; import Timer from 'react-compound-timer'; // 타이머쓰기위해 import import logo from './img/img_question.png' import fight from './img/img_quiz.png' const QnA = [ { Q: "6 X 4 = ?", Choose: [6, 12, 18, 24], A: "4", N: 1 }, { Q: "3 + 3 = ?", Choose: [2, 4, 6, 8], A: "3", N: 2 }, { Q: "3 - 1 = ?", Choose: [1, 2, 3, 4], A: "2", N: 3 } ] function Quiz() { let [question, setQuestion] = useState({ ...QnA[0], i: 0, page: 0, }) let [selected, setSelected] = useState("") //선택한 답을 보여줄 것들 function handleQuestion() { setQuestion({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 }) } let handleChange = (ev) => { ev.preventDefault() //새로고침 안되도록 setSelected(ev.target.value) //selected값 변경 let checked_number = ev.target.id; localStorage.setItem('답' + (question.N), Number(checked_number) + 1) localStorage.setItem('정답' + (question.N), QnA[question.N - 1].A) } return ( <>
미적분학 퀴즈
lion

question {question.Q}

{/*
정답을 선택하세요
*/}
{question.Choose.map((a, index) =>
)} {/*버튼 숨김*/}

Answer : {selected} {/* 선택한 값 보여줌 */} {(question.page === QnA.length - 1) ? 제출 : }

{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.handleQuestion발생 */} {/* {(question.page === QnA.length - 1) ? 제출 : } */} {/* */}

제출 // history.go(1) } ]} > {() => ( <> : / 60 : 00 )} {/* npm i react-compound-timer */}

) } export default Quiz;