Skip to content

GitLab

Commit b52542d2 authored by baesangjune's avatar baesangjune
Browse files

0805

parent 05599652
Show whitespace changes
Inline Side-by-side
src/End.js
View file @ b52542d2
import React, { createContext } from 'react'
import React from 'react'
import tr from './img_end.jpg';
// import { Link } from 'react-router-dom';
function End() {
let k = []
let a = []
for (let i = 0; i < 3; i++) {
if (localStorage.getItem(i + '번문제답') === localStorage.getItem(i + '번문제정답')) {
if (localStorage.getItem('답'+(i+1)) === localStorage.getItem('정답'+(i+1))) {
k[i] = ['O', 1]
a[i] =1
localStorage.setItem('채점'+(i+1),'O')
}
else {
k[i] = ['X', 0]
a[i] =0
localStorage.setItem('채점'+(i+1),'X')
}
}
......@@ -31,10 +36,11 @@ function End() {
<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>
<p className='card-text'>Quiz 1 : {localStorage.getItem('채점1')}</p>
<p className='card-text'>Quiz 2 : {localStorage.getItem('채점2')}</p>
<p className='card-text'>Quiz 3 : {localStorage.getItem('채점3')}</p>
<p className='card-text'>Total Score : {a[0] + a[1] + a[2]}</p>
</div>
<div style={{marginTop:'100px'}}className="Box text-center">
<img src={tr} alt="수고" />
......
src/Home.js
View file @ b52542d2
......@@ -12,14 +12,14 @@ function Home() {
<div className="Box">
<div className="Name" style={{ fontSize: '30px', position: "absolute", top: "330px", left: "38%"}}>
이름을 입력하세요
<input style={{ marginLeft: '30px', inlineSize: '200px', blockSize: '40px', fontSize: '40px' }} onChange={(event) => sessionStorage.setItem('name', event.target.value)} />
<input style={{ marginLeft: '30px', inlineSize: '200px', blockSize: '40px', fontSize: '40px' }} onChange={(event) => localStorage.setItem('name', event.target.value)} />
<div className='Box2'>
<Link to="/quiz">
<button style={{marginTop:'35%',blockSize:'100px', inlineSize:'200px', fontSize:'35px' }} className="QuizStart" onClick={checking}>Quiz Start !</button>
</Link>
</div>
</div>
{/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
{/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */}
</div>
<div>계산수학</div>
......@@ -32,12 +32,12 @@ function Home() {
}
function checking() {
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 @ b52542d2
......@@ -5,46 +5,39 @@ import logo from './img_question.png'
import fight from './img_quiz.png'
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 }
{ Q: "6 X 4 = ?", Choose: [6, 12, 18, 24], A: "4", N: 1 },
{ Q: "3 + 3 = ?", Choose: [2, 4, 6, 8], A: "3", N: 2 },
{ Q: "3 - 1 = ?", Choose: [1, 2, 3, 4], A: "2", N: 3 }
]
function Quiz() {
let [question, setQuestionss] = useState({
let [question, setQuestion] = useState({
...QnA[0],
i: 0,
page: 0,
})
let [selected, setSelected] = useState("") //선택한 답을 보여줄 것들
function setQuestion() {
setQuestionss({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 })
function handleQuestion() {
setQuestion({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 })
}
let handleChange = (ev) => {
ev.preventDefault() //새로고침 안되도록
setSelected(ev.target.value) //selected값 변경
let slt = ev.target.value //slt에 선택한값 받아옴
let count = question.Choose.length //이거 정확히 뭘로할지 모르겠어요 ㅜㅜ
let checked_number = ev.target.id;
// let checked_index = -1;
let checked_value = '';
checked_value = slt;
localStorage.setItem('답'+(question.N), Number(checked_number)+1)
localStorage.setItem('정답' + (question.N), QnA[question.N-1].A)
//localStorage.setItem('번문제 답' + checked_value, checked_value)
for (let i = 0; i < count; i++) {
if (ev.target.checked) { //이거 맞는지도 잘..
// checked_index = i;
checked_value = slt;
localStorage.setItem(question.i + 1 + '번문제 답', checked_value)
}
}
}
return (
<>
<div style={{fontSize:'80px', marginBottom:'100px', textAlign:"center", backgroundColor:'yellow'}}>미적분학 퀴즈</div>
<img src={fight} style={{ position: "absolute", top: "65px",left: "1050px", top:'200px' }} alt="lion" />
<div style={{ fontSize: '80px', marginBottom: '100px', textAlign: "center", backgroundColor: 'yellow' }}>미적분학 퀴즈</div>
<img src={fight} style={{ position: "absolute", left: "1050px", top: '200px' }} alt="lion" />
<div className="Quiz" >
<h1><img src={logo} style={{ marginLeft: "450px" }} width='75' height='75' alt='question' /> <span style={{ fontSize: "75px", marginLeft: "30px" }}>{question.Q}</span></h1>
{/* <div style={{ marginTop: "30px", marginBottom: "30px", marginLeft:'450px', fontSize:'40px' }}>정답을 선택하세요</div> */}
......@@ -53,7 +46,7 @@ function Quiz() {
<form>
{question.Choose.map((a, index) =>
<div key={index}>
<input type="radio" name='answer' id={'anwer' + a} value={a} onClick={handleChange} style={{ marginLeft: "475px", width: "25px", height: "25px" }} />
<input type="radio" name='answer' id={index} value={a} onClick={handleChange} style={{ marginLeft: "475px", width: "25px", height: "25px" }} />
<label htmlFor={a} style={{ fontSize: "40px", marginLeft: "22px" }}>{a}</label>
</div>
)}
......@@ -61,7 +54,7 @@ function Quiz() {
</form>
<p style={{ fontSize: "40px", marginLeft: "480px" }}>Answer :<span style={{ color: "green", fontWeight: "bold", fontSize: "90px", marginLeft: "30px" }}> {selected}</span> {/* 선택한 값 보여줌 */}<span style={{ marginLeft: "50px" }}> {(question.page === QnA.length - 1)
? <Link to="/end">제출</Link>
: <button type="button" onClick={setQuestion} style={{ width: "85px", height: "40px" }} >다음</button>
: <button type="button" onClick={handleQuestion} style={{ width: "85px", height: "40px" }} >다음</button>
}</span>
</p>
......@@ -71,10 +64,10 @@ function Quiz() {
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
{/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.handleQuestion발생 */}
{/* {(question.page === QnA.length - 1)
? <Link to="/end">제출</Link>
: <button type="button" onClick={setQuestion} >다음</button>
: <button type="button" onClick={handleQuestion} >다음</button>
} */}
......
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