Quiz.js 4.19 KB
Newer Older
Jiwon Yoon's avatar
a    
Jiwon Yoon committed
1
import React, { useState } from 'react'
Jiwon Yoon's avatar
Jiwon Yoon committed
2
import { Link } from 'react-router-dom';
Jiwon Yoon's avatar
home    
Jiwon Yoon committed
3
import Timer from 'react-compound-timer'; // 타이머쓰기위해 import
Jiwon Yoon's avatar
a    
Jiwon Yoon committed
4
5
import logo from './img/img_question.png'
import fight from './img/img_quiz.png'
Jiwon Yoon's avatar
quiz    
Jiwon Yoon committed
6

Jiwon Yoon's avatar
a    
Jiwon Yoon committed
7
const QnA = [
baesangjune's avatar
0805    
baesangjune committed
8
9
10
    { 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 }
Jiwon Yoon's avatar
quiz    
Jiwon Yoon committed
11
12
]

Jiwon Yoon's avatar
a    
Jiwon Yoon committed
13
function Quiz() {
baesangjune's avatar
0805    
baesangjune committed
14
    let [question, setQuestion] = useState({
Jiwon Yoon's avatar
a    
Jiwon Yoon committed
15
16
17
18
19
        ...QnA[0],
        i: 0,
        page: 0,
    })
    let [selected, setSelected] = useState("")  //선택한 답을 보여줄 것들
Jiwon Yoon's avatar
home    
Jiwon Yoon committed
20

baesangjune's avatar
0805    
baesangjune committed
21
22
    function handleQuestion() {
        setQuestion({ ...QnA[question.i + 1], i: question.i + 1, page: question.page + 1 })
Jiwon Yoon's avatar
Jiwon Yoon committed
23
    }
baesangjune's avatar
0805    
baesangjune committed
24

Jiwon Yoon's avatar
a    
Jiwon Yoon committed
25
26
27
    let handleChange = (ev) => {
        ev.preventDefault()  //새로고침 안되도록
        setSelected(ev.target.value)  //selected값 변경
baesangjune's avatar
0805    
baesangjune committed
28
29
30
31
32
33

        let checked_number = ev.target.id;

                localStorage.setItem(''+(question.N), Number(checked_number)+1)
                localStorage.setItem('정답' + (question.N), QnA[question.N-1].A)
                
baesangjune's avatar
ing    
baesangjune committed
34
    }
Jiwon Yoon's avatar
a    
Jiwon Yoon committed
35
36
    return (
        <>
baesangjune's avatar
0805    
baesangjune committed
37
38
            <div style={{ fontSize: '80px', marginBottom: '100px', textAlign: "center", backgroundColor: 'yellow' }}>미적분학 퀴즈</div>
            <img src={fight} style={{ position: "absolute", left: "1050px", top: '200px' }} alt="lion" />
Jiwon Yoon's avatar
a    
Jiwon Yoon committed
39
40
41
            <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> */}
42

Jiwon Yoon's avatar
home    
Jiwon Yoon committed
43
                <div>
Jiwon Yoon's avatar
a    
Jiwon Yoon committed
44
45
46
                    <form>
                        {question.Choose.map((a, index) =>
                            <div key={index}>
baesangjune's avatar
0805    
baesangjune committed
47
                                <input type="radio" name='answer' id={index} value={a} onClick={handleChange} style={{ marginLeft: "475px", width: "25px", height: "25px" }}  />
Jiwon Yoon's avatar
a    
Jiwon Yoon committed
48
49
50
51
52
53
54
                                <label htmlFor={a} style={{ fontSize: "40px", marginLeft: "22px" }}>{a}</label>
                            </div>
                        )}
                        <input hidden type="submit" value="확인" />    {/*버튼 숨김*/}
                    </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>
baesangjune's avatar
0805    
baesangjune committed
55
                        : <button type="button" onClick={handleQuestion} style={{ width: "85px", height: "40px" }} >다음</button>
Jiwon Yoon's avatar
home    
Jiwon Yoon committed
56

Jiwon Yoon's avatar
a    
Jiwon Yoon committed
57
58
                    }</span>
                    </p>
Jiwon Yoon's avatar
home    
Jiwon Yoon committed
59
60
                </div>

baesangjune's avatar
home    
baesangjune committed
61
62
63
64




baesangjune's avatar
0805    
baesangjune committed
65
                {/* 마지막 질문일 경우 /end페이지로 이동, 그렇지 않을경우는 this.handleQuestion발생 */}
baesangjune's avatar
home    
baesangjune committed
66
67
                {/* {(question.page === QnA.length - 1)
                ? <Link to="/end">제출</Link>
baesangjune's avatar
0805    
baesangjune committed
68
                : <button type="button" onClick={handleQuestion} >다음</button>
baesangjune's avatar
home    
baesangjune committed
69
70
71

            } */}

baesangjune's avatar
baesangjune committed
72
                {/* <input onKeyPress="this.enterkey()"/> */}
baesangjune's avatar
home    
baesangjune committed
73
74


Jiwon Yoon's avatar
a    
Jiwon Yoon committed
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
                <p style={{ textAlign: "center", fontSize: "30px", color: "crimson" }}>
                    <Timer
                        initialTime={3600000}
                        direction="backward"
                        checkpoints={[
                            {
                                time: 0,
                                callback: <Link to="/end">제출</Link>
                                //  history.go(1)
                            }
                        ]}
                    >
                        {() => (
                            <>
                                <Timer.Minutes /> : <Timer.Seconds></Timer.Seconds> / 60 : 00                        </>
                        )}
                    </Timer>     {/* npm i react-compound-timer */}
                </p>
93

Jiwon Yoon's avatar
a    
Jiwon Yoon committed
94
95
96
            </div>
        </>
    )
97
98
99



Jiwon Yoon's avatar
quiz    
Jiwon Yoon committed
100
101
}

Jiwon Yoon's avatar
a    
Jiwon Yoon committed
102

Jiwon Yoon's avatar
home    
Jiwon Yoon committed
103
export default Quiz;