Commit 14e5daa2 authored by Jiwon Yoon's avatar Jiwon Yoon
Browse files

정답 오답 확인 로털에 저장

parent 89cbc788
......@@ -11,7 +11,7 @@ function App() {
<Router>
<header>
<Link to="/">
<button>Calculus</button>
<button className="calcButton">Calculus</button>
</Link>
</header>
<hr />
......
import React from 'react'
// import { Link } from 'react-router-dom';
function End() {
let k = []
for (let i = 0; i < 3; i++) {
if (localStorage.getItem(i + '번문제답') === localStorage.getItem(i + '번문제정답')) {
if (localStorage.getItem((i+1) + '번문제답') === localStorage.getItem((i+1) + '번문제정답')) {
alert('정답입니다.')
k[i] = ['O', 1]
}
else {
alert('오답입니다.')
k[i] = ['X', 0]
}
}
return (
<>
<div className="card " >
<div className='card-header'>
-채점표-
</div>
<div className='card-body'>
<h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3>
<p className='card-text'>Quiz 1 : {k[0][0]}</p>
<p className='card-text'>Quiz 2 : {k[1][0]}</p>
<p className='card-text'>Quiz 3 : {k[2][0]}</p>
......
......@@ -3,9 +3,9 @@ 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: "24", N:1 },
{ Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "6", N:2 },
{ Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "2", N:3 }
{ Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "24", N: 1 },
{ Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "6", N: 2 },
{ Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "2", N: 3 }
]
class Quiz extends React.Component {
......@@ -13,7 +13,7 @@ class Quiz extends React.Component {
super(props)
this.setQuestion = this.setQuestion.bind(this)
this.answerbox = this.answerbox.bind(this)
this.timer=this.timer.bind(this)
this.timer = this.timer.bind(this)
// this.enterkey = this.enterkey(this)
this.state = {
...question[0],
......@@ -25,77 +25,68 @@ class Quiz extends React.Component {
}
setQuestion() {
//값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj-
this.answerbox()
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)
localStorage.setItem(this.state.i+'번문제정답', question[i-1].A)
for (let i = 0; i < answers.length; i++) {
if (answers[i].checked === true) {
localStorage.setItem((this.state.i + 1) + '번문제답', answers[i].value)
localStorage.setItem((this.state.i + 1) + '번문제정답', question[this.state.i].A)
}
}
}
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 */
)
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>)
{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>
{(this.state.page === question.length - 1)
? <Link to="/end"><button onClick={this.answerbox}>제출</button></Link>
: <button type="button" onClick={this.setQuestion} >다음</button>
}
{/* <input onKeyPress="this.enterkey()"/> */}
{this.timer()}
</div>
)
}
......
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