.

src/End.js

@@ -4,10 +4,22 @@ import React from 'react'
 
 function End() {
     return (
+        <>
         <div className="Box">
-            <h2>수고하셨습니다!</h2>
+            <h1>수고하셨습니다.</h1>
         </div>
 
+        <div class = "card " >
+            <div class = 'card-header'>
+                -채점표-
+            </div>
+            <div class ='card-body'>
+                <h3 class='card-title'>이름</h3>
+                <p class='card-text'>Lorem ipsum dolor sit</p>          
+            </div>
+        </div>
+        </>
+
     )
 }
 

src/Home.js

@@ -30,7 +30,7 @@ function checking(event) {
 
     }
     else {
-        alert('입력하신 이름은'+sessionStorage.getItem('name')+'입니다.')
+        alert('입력하신 이름은 '+sessionStorage.getItem('name')+'입니다.')
     }
 }
 

src/Quiz.js

@@ -101,3 +101,222 @@ class Quiz extends React.Component {
 }
 
 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;
\ No newline at end of file