No commit message

No commit message

src/App.js

 import React from 'react';
 import './App.css';
-import './Quiz.css';
 import Home from './Home'
 import Quiz from './Quiz'
 import End from './End'

src/End.js

 import React from 'react'
-// import { Link } from 'react-router-dom';
 import tr from './img_end.jpg';
 
 
-function End({history}) {
+// import { Link } from 'react-router-dom';
+
+function End() {
+    let a = []
+    for (let i = 0; i < 3; i++) {
+
+        if (localStorage.getItem('답'+(i+1)) === localStorage.getItem('정답'+(i+1))) {
+
+            a[i] =1
+            
+
+            localStorage.setItem('채점'+(i+1),'O')
+
+        }
+        else {
+
+            a[i] =0
+            
+            localStorage.setItem('채점'+(i+1),'X')
+        }
+    }
+
+
+
+
+
     return (
         <>
-            <div>
-                {/* <button onClick={() => history.push('/')}>홈 버튼!</button> */}
-            </div>
-            <div className="Box">
-                <img src={tr} alt="수고"/>
-                <h2>수고하셨습니다!</h2>
+            <div className="card" style={{fontSize:'30px', textAlign:"center"}} >
+                <div className='card-header'>
+                    -채점표-            
+                <div className='card-body'>
+                    <h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3>
+                    
+
+                    <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="수고" />
+       
+                </div>
+                </div>
             </div>
         </>
+
     )
 }
 
-export default End;
\ No newline at end of file
+export default End;
+

src/Home.js

-import React from 'react'
-import { Link } from 'react-router-dom';
-import bg from './background_ex1.jpg'
+import bg from './img_study.jpg'
+import React, { useState } from 'react'
+import { Redirect } from 'react-router-dom';
 
 
 function Home() {
+    const [name, setName] = useState('')
+    const [done, setDone] = useState(false)
+
+    const handleChange = (event) => {
+        setName(event.target.value)
+    }
+
+    function checking(event) {
+        if (!name) {
+            alert('이름을 입력하세요')
+        }
+        else {
+            alert('입력하신 이름은' + name + '입니다.')
+            localStorage.setItem('name', name)
+            setDone(true)
+        }
+    }
+
     return (
         <>
-            <div style={{backgroundImage:'url(' + bg + ')',backgroundSize: "100%"}}>
-                <div className="Main"></div>
+            {done ? <Redirect to='/quiz' /> : ''}
+            <div style={{ backgroundImage: 'url(' + bg + ')', backgroundColor: "grey", backgroundSize: "100%", width: "100%", height: "880px", backgroundRepeat: 'no-repeat' }}>
+                {/* <div className="Main"></div> */}
 
-                <div className="Box" style={{}}>
-                    <div className="Name" style ={{color : "black", fontSize :'30px'}}>
-                        이름을 입력하세요  
-            <input style={{blockSize:'30px', marginLeft:'30px'}} onChange={(event) => sessionStorage.setItem('name', event.target.value)} />
+                <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={handleChange} />
+                        <div className='Box2'>
+                            <button style={{ marginTop: '35%', blockSize: '100px', inlineSize: '200px', fontSize: '35px' }} className="QuizStart" onClick={checking}>Quiz Start !</button>
+                        </div>
                     </div>
-                       {/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
-                </div>
-                
-                <div className='Box2'>
-                    <Link to="/quiz">
-                        <button className="QuizStart" onClick={checking}>Quiz Start !</button>
-                    </Link>
+                    {/* localStorage를 사용해야는지 localstorage를 사용해야하는지 */}
                 </div>
+
+                <div>계산수학</div>
+
+
             </div>
         </>
-    )
-}
-function checking(event) {
-
-    if (sessionStorage.getItem('name') === null || sessionStorage.getItem('name').length === 0) {
-        alert('이름을 입력하세요')
 
-    }
-    else {
-        alert('입력하신 이름은' + sessionStorage.getItem('name') + '입니다.')
-    }
+    )
 }
 
 export default Home;
+

src/Quiz.css

 .Main {
     background: gray;
-    background-image: url('I_Love_Math.jpg');
+    background-image: url('');
     display: inline-block;
     border: 3px solid black;
     width: 750px;
     height: 180px;
     text-align: center;
     margin-left: 410px;
-    margin-top: 30px;
+    margin-top: 10px;
     font-size: 120px;
     font-family: cursive;
     color : greenyellow;
@@ -16,6 +16,7 @@
     3px -3px 0 #000, /* 오른쪽 위 그림자 */
     -3px 3px 0 #000, /* 왼쪽 아래 그림자 */
     3px 3px 0 #000; /* 오른쪽 아래 그림자 */
+
 }
 
 /* .Name {} */
@@ -23,17 +24,24 @@
 .Box {
     text-align: center;
     margin: 0 auto;
-    margin-top: 30px;
+    margin-top: 75px;
 }
 
 .QuizStart {
     margin: 30px;
     margin-left: 650px;
-    margin-top: 30px;
-    margin-bottom: 400px;
+    margin-top: 150px;
+    margin-bottom: 200px;
     width: 220px;
     height: 50px;
     font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
     font-size: 20px;
     letter-spacing: 3px;
+}
+
+.card{
+    text-align: center;
+    margin: 100px;
+    font-size: 10px;
+
 }
\ No newline at end of file

src/Quiz.js

 import React, { useState } from 'react'
 import { Link } from 'react-router-dom';
 import Timer from 'react-compound-timer'; // 타이머쓰기위해 import
-import 'bootstrap';
 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, setQuestion] = useState({
         ...QnA[0],
@@ -22,44 +23,36 @@ function Quiz() {
     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_index = -1;
-        let checked_value = '';
-        checked_value = slt;
-
-        //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)
-            }
-        }
+
+        let checked_number = ev.target.id;
+
+                localStorage.setItem('답'+(question.N), Number(checked_number)+1)
+                localStorage.setItem('정답' + (question.N), QnA[question.N-1].A)
+                
     }
     return (
         <>
-           <img src={fight} style={{ position: "absolute", top: "65px",left: "1050px" }} 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={{ textAlign: "center", marginTop: "30px", marginBottom: "30px" }}>정답을 선택하세요</div>
+            <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> */}
 
                 <div>
                     <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>
                         )}
                         <input hidden type="submit" value="확인" />    {/*버튼 숨김*/}
                     </form>
-                    <p style={{ fontSize: "20px", marginLeft: "600px" }}>선택한 답 :<span style={{ color: "green", fontWeight: "bold", fontSize: "90px", marginLeft: "30px" }}> {selected}</span>  {/* 선택한 값 보여줌 */}<span style={{ marginLeft: "50px" }}>            {(question.page === QnA.length - 1)
+                    <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={handleQuestion} style={{ width: "85px", height: "40px" }} >다음</button>
 
@@ -68,7 +61,10 @@ function Quiz() {
                 </div>
 
 
-                {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
+
+
+
+                {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.handleQuestion발생 */}
                 {/* {(question.page === QnA.length - 1)
                 ? <Link to="/end">제출</Link>
                 : <button type="button" onClick={handleQuestion} >다음</button>
@@ -80,20 +76,19 @@ function Quiz() {
 
                 <p style={{ textAlign: "center", fontSize: "30px", color: "crimson" }}>
                     <Timer
-                        initialTime={3050}
+                        initialTime={3600000}
                         direction="backward"
                         checkpoints={[
                             {
                                 time: 0,
-                                callback: handleQuestion
+                                callback: <Link to="/end">제출</Link>
                                 //  history.go(1)
                             }
                         ]}
                     >
                         {() => (
                             <>
-                                <Timer.Seconds /> seconds
-                        </>
+                                <Timer.Minutes /> : <Timer.Seconds></Timer.Seconds> / 60 : 00                        </>
                         )}
                     </Timer>     {/* npm i react-compound-timer */}
                 </p>