web-quiz/bootstrapQuize.html at main · surajshinde87/web-quiz · 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
112
113
114
115
116
117
118
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Web quiz</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <main>
        <header class="d-flex align-items-center justify-content-center bg-primary text-white">
           <h3>Web Quiz</h3>
        </header>
        <div class="questions">
            <div class="quiz">
                <h3>1. What is Bootstrap?</h3>
                <label><input type="radio" value="true" name="q1">A. A CSS framework for developing responsive websites</label> <br>
                <label><input type="radio" value="false" name="q1">B. A JavaScript library</label> <br>
                <label><input type="radio" value="false" name="q1">C. A back-end framework</label> <br>
                <label><input type="radio" value="false" name="q1">D. A programming language</label> <br>
                <button class="submit-btn">Submit</button>
            </div>
            <div class="quiz">
                <h3>2. What is the main purpose of the Bootstrap grid system?</h3>
                <label><input type="radio" value="true" name="q2">A. To create a responsive layout</label> <br>
                <label><input type="radio" value="false" name="q2">B. To apply custom fonts</label> <br>
                <label><input type="radio" value="false" name="q2">C. To style buttons</label> <br>
                <label><input type="radio" value="false" name="q2">D. To manage form validation</label> <br>
                <button class="submit-btn">Submit</button>
            </div>
            <div class="quiz">
                <h3>3. Which class is used to create a button in Bootstrap?</h3>
                <label><input type="radio" value="false" name="q3">A. .btn-primary</label> <br>
                <label><input type="radio" value="true" name="q3">B. .btn</label> <br>
                <label><input type="radio" value="false" name="q3">C. .button</label> <br>
                <label><input type="radio" value="false" name="q3">D. .btn-default</label> <br>
                <button class="submit-btn">Submit</button>
            </div>
            <div class="quiz">
                <h3>4. How can you center a div element horizontally in Bootstrap?</h3>
                <label><input type="radio" value="true" name="q4">A. Use .mx-auto class</label> <br>
                <label><input type="radio" value="false" name="q4">B. Use .text-center class</label> <br>
                <label><input type="radio" value="false" name="q4">C. Use .align-center class</label> <br>
                <label><input type="radio" value="false" name="q4">D. Use .center-block class</label> <br>
                <button class="submit-btn">Submit</button>
            </div>
            <div class="quiz">
                <h3>5. What is the default font size of Bootstrap's HTML elements?</h3>
                <label><input type="radio" value="false" name="q5">A. 14px</label> <br>
                <label><input type="radio" value="true" name="q5">B. 16px</label> <br>
                <label><input type="radio" value="false" name="q5">C. 18px</label> <br>
                <label><input type="radio" value="false" name="q5">D. 12px</label> <br>
                <button class="submit-btn">Submit</button>
            </div>
            <div class="quiz">
                <h3>6. Which Bootstrap class can be used to add a blue background color to a div element?</h3>
                <label><input type="radio" value="true" name="q6">A. .bg-primary</label> <br>
                <label><input type="radio" value="false" name="q6">B. .bg-blue</label> <br>
                <label><input type="radio" value="false" name="q6">C. .bg-info</label> <br>
                <label><input type="radio" value="false" name="q6">D. .bg-light</label> <br>
                <button class="submit-btn">Submit</button>
            </div>
            <div class="quiz">
                <h3>7. How do you make a form element inline in Bootstrap?</h3>
                <label><input type="radio" value="false" name="q7">A. Use .form-horizontal class</label> <br>
                <label><input type="radio" value="true" name="q7">B. Use .form-inline class</label> <br>
                <label><input type="radio" value="false" name="q7">C. Use .inline-form class</label> <br>
                <label><input type="radio" value="false" name="q7">D. Use .form-group class</label> <br>
                <button class="submit-btn">Submit</button>
            </div>
            <div class="quiz">
                <h3>8. Which class is used to create a responsive navigation bar in Bootstrap?</h3>
                <label><input type="radio" value="false" name="q8">A. .navbar-static-top</label> <br>
                <label><input type="radio" value="true" name="q8">B. .navbar</label> <br>
                <label><input type="radio" value="false" name="q8">C. .nav</label> <br>
                <label><input type="radio" value="false" name="q8">D. .navbar-default</label> <br>
                <button class="submit-btn">Submit</button>
            </div>
            <div class="quiz">
                <h3>9. Which class is used to make a table responsive in Bootstrap?</h3>
                <label><input type="radio" value="true" name="q9">A. .table-responsive</label> <br>
                <label><input type="radio" value="false" name="q9">B. .table-condensed</label> <br>
                <label><input type="radio" value="false" name="q9">C. .table-striped</label> <br>
                <label><input type="radio" value="false" name="q9">D. .table-bordered</label> <br>
                <button class="submit-btn">Submit</button>
            </div>
            <div class="quiz">
                <h3>10. Which class provides a set of utility spacing classes in Bootstrap?</h3>
                <label><input type="radio" value="false" name="q10">A. .spacer</label> <br>
                <label><input type="radio" value="true" name="q10">B. .m-*</label> <br>
                <label><input type="radio" value="false" name="q10">C. .p-*</label> <br>
                <label><input type="radio" value="false" name="q10">D. .spacing</label> <br>
                <button class="submit-btn">Submit</button>
            </div>
        </div>

 <div class="home w-100 d-flex align-content-center justify-content-center">
    <a href="./index.html" class="mx-auto p-2 fs-3 fw-bold text-decoration-none">Back To Home</a>
 </div>

 <div id="quiz-container ">
   <!-- Your quiz questions go here -->
  <!-- Summary div for displaying the results -->
   <div id="quiz-summary" style="display:none;">
       <h3>Score</h3>
       <p id="score"></p>
       <p id="questions-attempted"></p>
       <p id="correct-questions"></p>
       <p id="wrong-questions"></p>
   </div>
</div>

    </main>
<script src="script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>