Commit 45d7d82e authored by baesangjune's avatar baesangjune
Browse files

.

parent e470ec03
......@@ -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>
</>
)
}
......
......@@ -30,7 +30,7 @@ function checking(event) {
}
else {
alert('입력하신 이름은'+sessionStorage.getItem('name')+'입니다.')
alert('입력하신 이름은 '+sessionStorage.getItem('name')+'입니다.')
}
}
......
......@@ -100,4 +100,223 @@ 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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment