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: "", N:1 },
{ Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "", N:2 },
{ Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "", 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, checked_value)
}
}
}
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;
import React, { useState, useRef } 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 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('answer-' + i, '번문제 답'+checked_value,checked_value)
// }
// }
// }
//************** */
// function 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(question.i+'번문제 답' + checked_value, checked_value)
// }
// }
// }
function Quiz() {
let [question, setQuestionss] = useState({
...QnA[0],
i: 0,
page: 0,
})
function setQuestion() {
setQuestionss({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 })
}
function answerbox() {
let get=useRef(null);
let get2=()=>{
localStorage.setItem(get.current.focus())
}
let count = get2.length
// let checked_index = -1;
let checked_value = '';
for (let i = 0; i < count; i++) {
if (get2[i].checked) {
// checked_index = i;
checked_value = get2[i];
localStorage.setItem(question.i+'번문제 답' + checked_value, checked_value)
}
}
}
return (
Q:{question.Q}
{answerbox}
{question.Choose.map((a) =>
{/*this.state.N*/}
)
}
정답을 입력하세요
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
{(question.page === QnA.length - 1)
?
제출
:
}
{/*
*/}
{() => (
<>
seconds
>
)}
{/* npm i react-compound-timer */}
)
}
// class Quiz extends React.Component {
// constructor(props) {
// super(props)
// this.setQuestion = this.setQuestion.bind(this)
// this.answerbox = this.answerbox.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('answer-' + i, checked_value)
// }
// }
// }
// // 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)
// ?
제출
// :
// }
// {/*
*/}
//
// {() => (
// <>
// seconds
// >
// )}
//
// {/* npm i react-compound-timer */}
//
// )
// }
// }
export default Quiz;