0

src/End.js

-import React from 'react'
+import React, { createContext } from 'react'
 import tr from './img_end.jpg';
 
 
@@ -25,12 +25,9 @@ function End() {
 
     return (
         <>
-
-
-            <div className="card " >
+            <div className="card" style={{fontSize:'30px', textAlign:"center"}} >
                 <div className='card-header'>
                     -채점표-            
-            </div>
                 <div className='card-body'>
                     <h3 className='card-title'>이름 : {localStorage.getItem('name')}</h3>
 
@@ -39,9 +36,10 @@ function End() {
                     <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">
-                <img src={tr} alt="수고"/>
-                <h2>수고하셨습니다!</h2>
+                <div style={{marginTop:'100px'}}className="Box text-center">
+                    <img src={tr} alt="수고" />
+       
+                </div>
                 </div>
             </div>
         </>

src/Home.js

@@ -6,30 +6,31 @@ import bg from './img_study.jpg'
 function Home() {
     return (
         <>
-    
-            <div style={{ backgroundImage: 'url(' + bg + ')', width:'100%', height:'900%' ,backgroundSize: "100%", backgroundRepeat: 'no-repeat' }}>
-                <div style={{ boxAlign: 'center' }} className="Main"></div>
+            <div style={{ backgroundImage: 'url(' + bg + ')', backgroundColor: "grey", backgroundSize: "100%", width: "100%", height: "880px", backgroundRepeat:'no-repeat' }}>
+                {/* <div className="Main"></div> */}
 
                 <div className="Box">
-                    <div className="Name" style={{ padding: '10px', fontSize: '40px' }}>
+                    <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)} />
-                    </div>
-
-                    {/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
-                </div>
-
                         <div className='Box2'>
                             <Link to="/quiz">
-                        <button className="QuizStart" onClick={checking}>Quiz Start !</button>
+                                <button style={{marginTop:'35%',blockSize:'100px', inlineSize:'200px', fontSize:'35px' }} className="QuizStart" onClick={checking}>Quiz Start !</button>
                             </Link>
                         </div>
                     </div>
+                    {/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
+                </div>
+
+                <div>계산수학</div>
+
+
+            </div>
         </>
 
     )
 }
-function checking(event) {
+function checking() {
 
     if (sessionStorage.getItem('name') === null || sessionStorage.getItem('name').length === 0) {
         alert('이름을 입력하세요')

src/Quiz.css

@@ -38,3 +38,10 @@
     font-size: 20px;
     letter-spacing: 3px;
 }
+
+.card{
+    text-align: center;
+    margin: 100px;
+    font-size: 10px;
+
+}
\ No newline at end of file

src/Quiz.js

@@ -43,10 +43,11 @@ function Quiz() {
     }
     return (
         <>
-            <img src={fight} style={{ position: "absolute", top: "65px",left: "1050px" }} alt="lion" />
-            <div className="Quiz">
+        <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 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={{ marginTop: "30px", marginBottom: "30px", marginLeft:'450px', fontSize:'40px' }}>정답을 선택하세요</div> */}
 
                 <div>
                     <form>
@@ -58,7 +59,7 @@ function Quiz() {
                         )}
                         <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={setQuestion} style={{ width: "85px", height: "40px" }} >다음</button>
 
@@ -82,20 +83,19 @@ function Quiz() {
 
                 <p style={{ textAlign: "center", fontSize: "30px", color: "crimson" }}>
                     <Timer
-                        initialTime={3050}
+                        initialTime={3600000}
                         direction="backward"
                         checkpoints={[
                             {
                                 time: 0,
-                                callback: setQuestion
+                                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>