forked from FollowRob/Newbie_To_Ninja
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathquiz.html
More file actions
139 lines (118 loc) · 5.53 KB
/
quiz.html
File metadata and controls
139 lines (118 loc) · 5.53 KB
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="Description" content="NewbieToNinja – Learn coding from scratch, take quizzes, explore projects, and become a coding ninja with DOMo!">
<!-- Link to external style libraries -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
>
<!--Bootstrap-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
crossorigin="anonymous"
>
<!-- Font Awesome 6 (for fa-solid fa-house) -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
>
<!-- Link to custom CSS file -->
<link rel="stylesheet" href="assets/css/style.css">
<title>NewbieToNinja</title>
<!-- Favicon -->
<!-- SVG for modern browsers -->
<link rel="icon" href="assets/favicon/favicon-newbietoninja.svg" type="image/svg+xml">
<!-- PNG fallbacks -->
<link rel="icon" href="assets/favicon/newbietoninja-32.png" sizes="32x32">
<link rel="icon" href="assets/favicon/newbietoninja-16.png" sizes="16x16">
<!-- Classic ICO fallback -->
<link rel="icon" href="assets/favicon/favicon-newbietoninja.ico" sizes="any">
<!-- iOS home screen -->
<link rel="apple-touch-icon" href="assets/favicon/apple-touch-icon-n2n.png">
<!-- Optional larger sizes -->
<link rel="icon" href="assets/favicon/newbietoninja-256.png" sizes="192x192">
<link rel="icon" href="assets/favicon/newbietoninja-512.png" sizes="512x512">
</head>
<body>
<!--Navbar using bootstrap-->
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="index.html"><img src="assets/images/domo-logo.png" alt="DOMo Logo">
NewbieToNinja</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="quiz.html">Quiz</a></li>
<li class="nav-item"><a class="nav-link" href="projects.html">Projects</a></li>
</ul>
</div>
</div>
</nav>
<main>
<!-- create the quiz container-->
<div class="quiz-container">
<div class="ms-auto float-end"><img src="assets/images/domo-correct.png" alt="Ninja mascot giving thumbs up"></div>
<h1>Can you beat DOMo's quiz?</h1>
<!--create the timer -->
<div class="timer">Time left:10 seconds</div>
<!--create the question -->
<h2 class="question"></h2>
<!-- create the options -->
<div class="options col-12">
</div>
<!--create the next button -->
<button class="next-button">Next</button>
<button class="retake-button">Restart Quiz</button>
<h2 class="results"></h2>
<h3 class="answer-explanation"></h3>
</div>
</main>
<!--Footer with links to social media and copyright-->
<footer id="footer" class="custom-footer mt-5">
<div class="container p-4">
<div class="row gy-4">
<!-- Center column: Team01 Hackathon + ❤️ -->
<div class="col-12 col-lg-6 text-center order-1 order-lg-2">
<p>Made with ❤️ for the Hackathon <br>
© 2025 Team01. All rights reserved.</p>
</div>
<!-- Left column: Follow Us -->
<div class="col-12 col-lg-3 text-center text-lg-start order-2 order-lg-1">
<h4 class="text-uppercase">Follow Us</h4>
<ul class="list-unstyled mb-0">
<li><a href="https://www.twitter.com" class="footer-link" target="_blank" rel="noopener"><i
class="fab fa-twitter me-2"></i> Twitter</a></li>
<li><a href="https://github.com/FollowRob/Team01_Hackathon" class="footer-link" target="_blank"
rel="noopener"><i class="fab fa-github me-2"></i> GitHub</a></li>
<li><a href="https://www.facebook.com" class="footer-link" target="_blank" rel="noopener"><i
class="fab fa-facebook me-2"></i> Facebook</a></li>
</ul>
</div>
<!-- Right column: Navigation Links -->
<div class="col-12 col-lg-3 text-center text-lg-end order-3">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled mb-0">
<li><a href="index.html" class="footer-link"><i class="fa-solid fa-house me-2"></i> Home</a></li>
<li><a href="projects.html" class="footer-link"><i class="fa-solid fa-code"></i> Projects</a></li>
<li><a href="quiz.html" class="footer-link"><i class="fa-solid fa-brain me-2"></i> Quiz</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Pull external Javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
<script src="assets/js/script.js"></script>
</body>
</html>