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

정답 오답 확인 로털에 저장

parent 89cbc788
...@@ -11,7 +11,7 @@ function App() { ...@@ -11,7 +11,7 @@ function App() {
<Router> <Router>
<header> <header>
<Link to="/"> <Link to="/">
<button>Calculus</button> <button className="calcButton">Calculus</button>
</Link> </Link>
</header> </header>
<hr /> <hr />
......
import React from 'react' import React from 'react'
// import { Link } from 'react-router-dom'; // import { Link } from 'react-router-dom';
function End() { function End() {
let k = [] let k = []
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
if (localStorage.getItem((i+1) + '번문제답') === localStorage.getItem((i+1) + '번문제정답')) {
if (localStorage.getItem(i + '번문제답') === localStorage.getItem(i + '번문제정답')) {
alert('정답입니다.') alert('정답입니다.')
k[i] = ['O', 1] k[i] = ['O', 1]
} }
else { else {
alert('오답입니다.') alert('오답입니다.')
k[i] = ['X', 0] k[i] = ['X', 0]
} }
} }
return ( return (
<> <>
<div className="card " > <div className="card " >
<div className='card-header'> <div className='card-header'>
-채점표- -채점표-
</div> </div>
<div className='card-body'> <div className='card-body'>
<h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3> <h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3>
<p className='card-text'>Quiz 1 : {k[0][0]}</p> <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 2 : {k[1][0]}</p>
<p className='card-text'>Quiz 3 : {k[2][0]}</p> <p className='card-text'>Quiz 3 : {k[2][0]}</p>
......
...@@ -3,9 +3,9 @@ import { Link } from 'react-router-dom'; ...@@ -3,9 +3,9 @@ import { Link } from 'react-router-dom';
import Timer from 'react-compound-timer'; // 타이머쓰기위해 import import Timer from 'react-compound-timer'; // 타이머쓰기위해 import
const question = [ const question = [
{ Q: "6 X 4 ?", Choose: [6, 12, 18, 24], A: "24", N:1 }, { 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 + 3 ?", Choose: [2, 4, 6, 8], A: "6", N: 2 },
{ Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "2", N:3 } { Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "2", N: 3 }
] ]
class Quiz extends React.Component { class Quiz extends React.Component {
...@@ -13,7 +13,7 @@ class Quiz extends React.Component { ...@@ -13,7 +13,7 @@ class Quiz extends React.Component {
super(props) super(props)
this.setQuestion = this.setQuestion.bind(this) this.setQuestion = this.setQuestion.bind(this)
this.answerbox = this.answerbox.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.enterkey = this.enterkey(this)
this.state = { this.state = {
...question[0], ...question[0],
...@@ -25,77 +25,68 @@ class Quiz extends React.Component { ...@@ -25,77 +25,68 @@ class Quiz extends React.Component {
} }
setQuestion() { setQuestion() {
//값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj- //값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj-
this.answerbox()
this.setState({ ...question[this.state.i + 1], i: this.state.i + 1, page: this.state.page + 1 }) this.setState({ ...question[this.state.i + 1], i: this.state.i + 1, page: this.state.page + 1 })
} }
//answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장 //answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장
answerbox() { answerbox() {
let answers = document.getElementsByName('answer'); let answers = document.getElementsByName('answer');
let count = answers.length for (let i = 0; i < answers.length; i++) {
// let checked_index = -1; if (answers[i].checked === true) {
let checked_value = ''; localStorage.setItem((this.state.i + 1) + '번문제답', answers[i].value)
for (let i = 0; i < count; i++) { localStorage.setItem((this.state.i + 1) + '번문제정답', question[this.state.i].A)
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)
} }
} }
} }
timer(){
return( timer() {
<Timer return (
initialTime={10010} <Timer
direction="backward" initialTime={10010}
checkpoints={[ direction="backward"
{ checkpoints={[
time: 0, {
callback: this.setQuestion time: 0,
// history.go(1) callback: this.setQuestion
} // history.go(1)
]} }
> ]}
{() => ( >
<> {() => (
<Timer.Seconds /> seconds <>
</> <Timer.Seconds /> seconds
)} </>
</Timer> /* npm i react-compound-timer */ )}
) </Timer> /* npm i react-compound-timer */
)
} }
// enterkey() {
// if ( window.event === 13 ) {
// alert("Enter Key 입력 감지 \n함수 실행.");
// }
// }
render() { render() {
return ( return (
<div className="Quiz"> <div className="Quiz">
<h2>Q:{this.state.Q}</h2> <h2>Q:{this.state.Q}</h2>
{this.answerbox()}
<div> <div>
{this.state.Choose.map((a) => {this.state.Choose.map((a) =>
<div>{this.state.N} <div>{this.state.N}
<input type="radio" name='answer' id={a} value={a} /*ref={this.textInput} input 네임을 문제단위로 바꾸어주어야 함. */ /> <input type="radio" name='answer' id={a} value={a} /*ref={this.textInput} input 네임을 문제단위로 바꾸어주어야 함. */ />
<label for={a}>{a}</label> <label for={a}>{a}</label>
</div>) </div>)
} }
</div> </div>
<div className="App" class='left'>정답을 입력하세요</div> <div className="App" class='left'>정답을 입력하세요</div>
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */} {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
{(this.state.page === question.length-1) {(this.state.page === question.length - 1)
? <Link to="/end">제출</Link> ? <Link to="/end"><button onClick={this.answerbox}>제출</button></Link>
: <button type="button" onClick={this.setQuestion} >다음</button> : <button type="button" onClick={this.setQuestion} >다음</button>
} }
{/* <input onKeyPress="this.enterkey()"/> */} {/* <input onKeyPress="this.enterkey()"/> */}
{this.timer()} {this.timer()}
</div> </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