Quiz.js

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(
        <Timer
            initialTime={10010}
            direction="backward"
            checkpoints={[
                {
                    time: 0,
                    callback: this.setQuestion
                    //  history.go(1)
                }
            ]}
        >
            {() => (
                <>
                    <Timer.Seconds /> seconds
                </>
            )}
        </Timer> /* npm i react-compound-timer */
       )
    }
    // enterkey() {
    //     if ( window.event === 13 ) {
    //         alert("Enter Key 입력 감지 \n함수 실행.");
    //     }
    // }

    render() {
        return (
            <div className="Quiz">
                <h2>Q:{this.state.Q}</h2>
                {this.answerbox()}
                <div>
                {this.state.Choose.map((a) =>
                    <div>{this.state.N}
                        <input type="radio" name='answer'  id={a} value={a} /*ref={this.textInput}  input 네임을 문제단위로 바꾸어주어야 함. */ />
                        <label for={a}>{a}</label>
                    </div>)                   

                }
                </div>
                <div className="App" class='left'>정답을 입력하세요</div>

                
                {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
                {(this.state.page === question.length-1)
                    ? <Link to="/end">제출</Link>
                    : <button type="button" onClick={this.setQuestion} >다음</button>
                    
                }
                {/* <input onKeyPress="this.enterkey()"/> */}
                                
                {this.timer()}
               
            </div>
        )
    }
}

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 (
        <div className="Quiz">
            <h2>Q:{question.Q}</h2>
            {answerbox}
            <div>
                {question.Choose.map((a) =>
                    <div> {/*this.state.N*/}
                        <input type="radio" name='answer' id={'anwer' + a} value={a} ref={get} />
                        <label for={a}> {a}</label>
                    </div>)

                }
            </div>
            <div className="App" class='left'>정답을 입력하세요</div>


            {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
            {(question.page === QnA.length - 1)
                ? <Link to="/end">제출</Link>
                : <button type="button" onClick={setQuestion} >다음</button>

            }
            {/* <input onKeyPress="this.enterkey()"/> */}



            <Timer
                initialTime={3010}
                direction="backward"
                checkpoints={[
                    {
                        time: 0,
                        callback: setQuestion
                        //  history.go(1)
                    }
                ]}
            >
                {() => (
                    <>
                        <Timer.Seconds /> seconds
                        </>
                )}
            </Timer>
            {/* npm i react-compound-timer */}

        </div>
    )



}

// 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 (
//             <div className="Quiz">
//                 <h2>Q:{this.state.Q}</h2>
//                 {this.answerbox()}
//                 <div>
//                     {this.state.Choose.map((a) =>
//                         <div> {/*this.state.N*/}
//                             <input type="radio" name='answer' id={'anwer' + a} value={a} /*ref={this.textInput}  input 네임을 문제단위로 바꾸어주어야 함. */ />
//                             <label for={a}> {a}</label>
//                         </div>)

//                     }
//                 </div>
//                 <div className="App" class='left'>정답을 입력하세요</div>


//                 {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
//                 {(this.state.page === question.length - 1)
//                     ? <Link to="/end">제출</Link>
//                     : <button type="button" onClick={this.setQuestion} >다음</button>

//                 }
//                 {/* <input onKeyPress="this.enterkey()"/> */}



//                 <Timer
//                     initialTime={3010}
//                     direction="backward"
//                     checkpoints={[
//                         {
//                             time: 0,
//                             callback: this.setQuestion
//                             //  history.go(1)
//                         }
//                     ]}
//                 >
//                     {() => (
//                         <>
//                             <Timer.Seconds /> seconds
//                         </>
//                     )}
//                 </Timer>
//                 {/* npm i react-compound-timer */}

//             </div>
//         )
//     }
// }

export default Quiz;