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}) {
@@ -9,6 +10,7 @@ function End({history}) {
                 {/* <button onClick={() => history.push('/')}>홈 버튼!</button> */}
             </div>
             <div className="Box">
+                <img src={tr} alt="수고"/>
                 <h2>수고하셨습니다!</h2>
             </div>
         </>

src/Home.js

 import React from 'react'
 import { Link } from 'react-router-dom';
+import bg from './img_background2.jpg'
 
 
 function Home() {
     return (
         <>
-            <div className="Box">
-                <div className="Name">
-                    이름을 입력하세요
-            <input onChange={(event) => sessionStorage.setItem('name', event.target.value)} />
-                </div>
+            <div style={{backgroundImage:'url(' + bg + ')', backgroundColor : "grey" ,backgroundSize: "100%"}}>
+                <div className="Main"></div>
 
-                {/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
-            </div>
+                <div className="Box">
+                    <div className="Name" style ={{color : "white", fontSize :'30px'}}>
+                        이름을 입력하세요   
+            <input style={{blockSize:'40px', marginLeft:'30px'}} onChange={(event) => sessionStorage.setItem('name', event.target.value)} />
+                    </div>
 
-            <div className='Box2'>
-                <Link to="/quiz">
-                    <button className="QuizStart" onClick={checking}>Quiz Start !</button>
-                </Link>
+                    {/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
+                </div>
+
+                <div className='Box2'>
+                    <Link to="/quiz">
+                        <button className="QuizStart" onClick={checking}>Quiz Start !</button>
+                    </Link>
+                </div>
             </div>
         </>
 
@@ -30,7 +35,7 @@ function checking(event) {
 
     }
     else {
-        alert('입력하신 이름은'+sessionStorage.getItem('name')+'입니다.')
+        alert('입력하신 이름은' + sessionStorage.getItem('name') + '입니다.')
     }
 }
 

src/Quiz.css

 .Main {
-    background: orange;
+    background: gray;
+    background-image: url('img_calculus.jpg');
     display: inline-block;
     border: 3px solid black;
-    width: 200px;
+    width: 750px;
+    height: 180px;
     text-align: center;
+    margin-left: 410px;
+    margin-top: 10px;
+    font-size: 120px;
+    font-family: cursive;
+    color : greenyellow;
+    text-shadow :
+    -3px -3px 0 #000, /* 왼쪽 위 그림자 */
+    3px -3px 0 #000, /* 오른쪽 위 그림자 */
+    -3px 3px 0 #000, /* 왼쪽 아래 그림자 */
+    3px 3px 0 #000; /* 오른쪽 아래 그림자 */
+
 }
 
 /* .Name {} */
@@ -11,12 +24,17 @@
 .Box {
     text-align: center;
     margin: 0 auto;
+    margin-top: 75px;
 }
 
 .QuizStart {
     margin: 30px;
-    margin-left: 500px;
-    width: 150px;
-    height: 30px;
+    margin-left: 650px;
+    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;
 }
\ 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 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: "", 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 Quiz() {
@@ -41,56 +42,66 @@ function Quiz() {
         }
     }
     return (
-        <div className="Quiz">
-            <h2>Q:{question.Q}</h2>
-            <div>
-                <form onSubmit={handleChange}>
-                    {question.Choose.map((a, index) =>
-                        <div key={index}>
-                            <input type="radio" name='answer' id={'anwer' + a} value={a} onClick={handleChange} />
-                            <label htmlFor={a}> {a}</label>
-                        </div>
-                    )}
-                    <input hidden type="submit" value="확인" />    {/*버튼 숨김*/}
-                </form>
-                <p>선택한 답 :<span style={{color : "green", fontWeight : "bold", fontSize: "30px"}}> {selected}</span>  {/* 선택한 값 보여줌 */}
-                </p>
-            </div>
+        <>
+            <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>
+                    <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" }} />
+                                <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)
+                        ? <Link to="/end">제출</Link>
+                        : <button type="button" onClick={setQuestion} style={{ width: "85px", height: "40px" }} >다음</button>
+
+                    }</span>
+                    </p>
+                </div>
 
 
-            <div className="App">정답을 입력하세요</div>
 
 
-            {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
-            {(question.page === QnA.length - 1)
+
+                {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
+                {/* {(question.page === QnA.length - 1)
                 ? <Link to="/end">제출</Link>
                 : <button type="button" onClick={setQuestion} >다음</button>
 
-            }
-
-            {/* <input onKeyPress="this.enterkey()"/> */}
-
-
-            
-            <Timer
-                initialTime={3050}
-                direction="backward"
-                checkpoints={[
-                    {
-                        time: 0,
-                        callback: setQuestion
-                        //  history.go(1)
-                    }
-                ]}
-            >
-                {() => (
-                    <>
-                        <Timer.Seconds /> seconds
+            } */}
+
+                {/* <input onKeyPress="this.enterkey()"/> */}
+
+
+                <p style={{ textAlign: "center", fontSize: "30px", color: "crimson" }}>
+                    <Timer
+                        initialTime={3050}
+                        direction="backward"
+                        checkpoints={[
+                            {
+                                time: 0,
+                                callback: setQuestion
+                                //  history.go(1)
+                            }
+                        ]}
+                    >
+                        {() => (
+                            <>
+                                <Timer.Seconds /> seconds
                         </>
-                )}
-            </Timer>     {/* npm i react-compound-timer */}
+                        )}
+                    </Timer>     {/* npm i react-compound-timer */}
+                </p>
 
-        </div>
+            </div>
+        </>
     )