Quiz-game-/index.html at main · kit0-0/Quiz-game- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Document</title>
</head>
<body>
    <!--Start quiz button-->
    <div class="start_btn"><button>Start quiz</button></div>

    <!--Info Box-->
    <div class="info_box">
        <div class="info_title"><span>
            Some Rules of the quiz
        </span></div>
        <div class="info_list">
            <div class="info">1.You will have only <span>15 seconds </span>Per question</div>
            <div class="info">2.once you select your answer ,you can't reselect</div>
            <div class="info">3.you can not select any option once time goes off</div>
            <div class="info">4.you can not exit the quiz while you are playing</div>
            <div class="info">5.you will get points on the basis of your answer</div>

        </div>
        <div class="buttons">
            <button class="quit"> Exit</button>
            <button class="restart"> continue</button>
        </div>
    </div>

    <!--quiz box-->
    <div class="quiz_box">
        <header>
            <div class="title">Quiz Application</div>
            <div class="timer">
                <div class="time_text">time left</div>
                <div class="timer_sec">15</div>
            </div>

        </header>
        <section>
            <div class="que_text">
                <!-- <span>
                what does html stands for?
            </span> -->
        </div>
            <div class="option_list">
                <!-- <div class="option">
                    <span>
                    Hypertext Makeup Language.
                    </span>
                    <div class="icon tick">
                        <i class="fa-solid fa-check"></i>
                </div>
                </div>
                <div class="option">
                    <span>
                        Hypertext Markup Language.
                </span>
                <div class="icon cross"><i class="fa fa-times" ></i>
                </div>
                </div>
                <div class="option">
                    <span>
                        Hyper Markup Language.
                </span>

                </div>
                <div class="option">
                    <span>
                        Hypertext Maekup Language.
                </span>

                </div> -->
            </div>
        </section>
        <!--Quiz box footer-->
        <footer>
            <div class="total_que">
                <!-- <span>
                    <p>2</p>
                    of
                    <p>5</p> questions
                </span> -->
            </div>
            <div class="next_btn">Next</div>
        </footer>
        <!--Quiz box footer End-->
    </div>
    <!--quiz box end-->

<!-- result box -->
<div class="result_box">
    <div class="icon"><i class="fa-solid fa-crown"></i></div>
    <div class="complete_text"> You have completed the quiz!</div>
    <div class="score_text">
        <!-- <span>you got <p>2</p> out of <p>5</p></span> -->
    </div>
    <div class="buttons">
        <button class="restart">Replay</button>
        <button class="quit">quit</button></div>
</div>
<!-- result box End-->

<script src="question.js"></script>
<script src="script.js"></script>
</body>
</html>