home

src/Home.js

-import React, { useState } from 'react'
-import { Redirect } from 'react-router-dom';
-// import { Link } from 'react-router-dom';
+import React from 'react'
+import { Link } from 'react-router-dom';
+import bg from './img_study.jpg'
 
 
 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 (
         <>
-            {done ? <Redirect to='/quiz' /> : ''}
-            <div className="Box">
-                <div className="Name"> 이름을 입력하세요
-                <input onChange={handleChange} />
+    
+            <div style={{ backgroundImage: 'url(' + bg + ')', width:'100%', height:'900%' ,backgroundSize: "100%", backgroundRepeat: 'no-repeat' }}>
+                <div style={{ boxAlign: 'center' }} className="Main"></div>
+
+                <div className="Box">
+                    <div className="Name" style={{ padding: '10px', fontSize: '40px' }}>
+                        이름을 입력하세요
+                    <input style={{ marginLeft: '30px', inlineSize: '200px', blockSize: '40px', fontSize: '40px' }} onChange={(event) => sessionStorage.setItem('name', event.target.value)} />
+                    </div>
+
+                    {/* sessionStorage를 사용해야는지 localstorage를 사용해야하는지 */}
                 </div>
-                <div>
-                    <button className="QuizStart" onClick={checking}>Quiz Start !</button>
+
+                <div className='Box2'>
+                    <Link to="/quiz">
+                        <button className="QuizStart" onClick={checking}>Quiz Start !</button>
+                    </Link>
                 </div>
             </div>
         </>
+
     )
 }
+function checking(event) {
 
+    if (sessionStorage.getItem('name') === null || sessionStorage.getItem('name').length === 0) {
+        alert('이름을 입력하세요')
 
+    }
+    else {
+        alert('입력하신 이름은' + sessionStorage.getItem('name') + '입니다.')
+    }
+}
 
-export default Home;
\ No newline at end of file
+export default Home;

src/Quiz.js

-import React from 'react'
+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 question = [
-    { 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 }
+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 }
 ]
 
-class Quiz extends React.Component {
-    constructor(props) {
-        super(props)
-        this.setQuestion = this.setQuestion.bind(this)
-        this.answerbox = this.answerbox.bind(this)
-        this.timer=this.timer.bind(this)
-        // this.enterkey = this.enterkey(this)
-        this.state = {
-            ...question[0],
-            i: 0,
-            page: 0,
-            question
+function Quiz() {
+    let [question, setQuestionss] = useState({
+        ...QnA[0],
+        i: 0,
+        page: 0,
+    })
+    let [selected, setSelected] = useState("")  //선택한 답을 보여줄 것들
 
-        }
-    }
-    setQuestion() {
-        //값이 입력되지 않은채로 넘겨졌을 때 문제 해결 해야 함-sj-
-        this.setState({ ...question[this.state.i + 1], i: this.state.i + 1, page: this.state.page + 1 })
+    function setQuestion() {
+        setQuestionss({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 })
     }
-    //answerbox - answer박스의 값을 네임리스트로 받아와서 값을 localstorage에 저장 
-    answerbox() {
-        let answers = document.getElementsByName('answer');
-        let count = answers.length
+    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 (answers[i].checked) {
+            if (ev.target.checked) {  //이거 맞는지도 잘..
                 // checked_index = i;
-                checked_value = answers[i].value;
-                localStorage.setItem(this.state.i+1+'번문제답', checked_value)
-                localStorage.setItem(this.state.i+1+'번문제정답', question[i-1].A)
+                checked_value = slt;
+                localStorage.setItem(question.i + 1 + '번문제 답', checked_value)
             }
         }
     }
-    timer(){
-        return(
-        <Timer
-            initialTime={10010}
-            direction="backward"
-            checkpoints={[
-                {
-                    time: 0,
-                    callback: this.setQuestion
-                    //  history.go(1)
-                }
-            ]}
-        >
-            {() => (
-                <>
-                    <Timer.Seconds /> seconds
-                </>
-            )}
-        </Timer> /* npm i react-compound-timer */
-       )
-    }
-    // enterkey() {
-    //     if ( window.event === 13 ) {
-    //         alert("Enter Key 입력 감지 \n함수 실행.");
-    //     }
-    // }
-
-    render() {
-        return (
+    return (
+        <>
+            <img src={fight} style={{ position: "absolute", top: "65px",left: "1050px" }} alt="lion" />
             <div className="Quiz">
-                <h2>Q:{this.state.Q}</h2>
-                {this.answerbox()}
+                <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>
-                {this.state.Choose.map((a) =>
-                    <div>{this.state.N}
-                        <input type="radio" name='answer'  id={a} value={a} /*ref={this.textInput}  input 네임을 문제단위로 바꾸어주어야 함. */ />
-                        <label for={a}>{a}</label>
-                    </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" class='left'>정답을 입력하세요</div>
 
-                
+
+
+
+
                 {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.setQuestion발생 */}
-                {(this.state.page === question.length-1)
-                    ? <Link to="/end">제출</Link>
-                    : <button type="button" onClick={this.setQuestion} >다음</button>
-                    
-                }
+                {/* {(question.page === QnA.length - 1)
+                ? <Link to="/end">제출</Link>
+                : <button type="button" onClick={setQuestion} >다음</button>
+
+            } */}
+
                 {/* <input onKeyPress="this.enterkey()"/> */}
-                                
-                {/* {this.timer()} */}
-               
+
+
+                <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 */}
+                </p>
+
             </div>
-        )
-    }
+        </>
+    )
+
+
+
 }
 
-export default Quiz;
+
+export default Quiz;
\ No newline at end of file