Skip to content

GitLab

Commit 6bdefa5b authored by baesangjune's avatar baesangjune
Browse files

.

parent 45d7d82e
Hide whitespace changes
Inline Side-by-side
src/End.js
View file @ 6bdefa5b
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 + '번문제정답')) {
alert('정답입니다.')
k[i] = ['O', 1]
}
else {
alert('오답입니다.')
k[i] = ['X', 0]
}
}
return (
<>
<div className="Box">
<h1>수고하셨습니다.</h1>
</div>
<div class = "card " >
<div class = 'card-header'>
-채점표-
<div className="card " >
<div className='card-header'>
-채점표-
</div>
<div class ='card-body'>
<h3 class='card-title'>이름</h3>
<p class='card-text'>Lorem ipsum dolor sit</p>
<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>
<p className='card-text'>Total Score : {k[0][1] + k[1][1] + k[2][1]}</p>
</div>
<div className="Box text-center">
<h1>수고하셨습니다.</h1>
</div>
</div>
</div>
</>
)
......
src/Home.js
View file @ 6bdefa5b
......@@ -8,7 +8,7 @@ function Home() {
<div classXName="Box">
<div className="Name">
이름을 입력하세요
<input onChange={(event) => sessionStorage.setItem('name', event.target.value)} />
<input onChange={(event) => localStorage.setItem('name', event.target.value)} />
</div>
{/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
......@@ -25,12 +25,12 @@ function Home() {
}
function checking(event) {
if (sessionStorage.getItem('name') === null || sessionStorage.getItem('name').length === 0) {
if (localStorage.getItem('name') === null || localStorage.getItem('name').length === 0) {
alert('이름을 입력하세요')
}
else {
alert('입력하신 이름은 '+sessionStorage.getItem('name')+'입니다.')
alert('입력하신 이름은 '+localStorage.getItem('name')+'입니다.')
}
}
......
src/Quiz.js
View file @ 6bdefa5b
......@@ -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: "", N:1 },
{ Q: "3 + 3 ?", Choose: [2, 4, 6, 8], A: "", N:2 },
{ Q: "3 - 1 ?", Choose: [1, 2, 3, 4], A: "", 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 {
......@@ -37,7 +37,8 @@ class Quiz extends React.Component {
if (answers[i].checked) {
// checked_index = i;
checked_value = answers[i].value;
localStorage.setItem(this.state.i+'번문제 답' + checked_value, checked_value)
localStorage.setItem(this.state.i+'번문제답', checked_value)
localStorage.setItem(this.state.i+'번문제정답', question[i-1].A)
}
}
}
......@@ -101,222 +102,3 @@ 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