generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgame.html
82 lines (67 loc) · 3.24 KB
/
game.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Meta tags for search engines -->
<meta name="description"
content="Test your knowledge of the Indian Sign Language (ISL) alphabet in this fun and interactive quiz game. Can you correctly identify the signs for English alphabets? Challenge yourself and learn more about ISL!">
<meta name="keywords" content="Indian Sign Language, ISL, ISL alphabet, quiz, interactive game">
<!-- Title of the website -->
<title>Indian Sign Language Alphabet Quiz</title>
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/favicon/site.webmanifest">
<!-- Stylesheet -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- Header -->
<header>
<h1>Guess ISL alphabet!</h1>
</header>
<main>
<!-- Container that holds all elements of the quiz game together -->
<div class="box-container">
<div class="game-question-timer">
<h2>Question: <span id="current-question"></span> /10</h2>
<h2>Timer: <span id="timer"></span>s</h2>
<a id="close-btn" href="index.html" aria-label="Quit the game and return to the home page"><i
class="fa-solid fa-x"></i></a>
</div>
<!-- Game element -->
<div class="question">
<h3>What does this sign represents?</h3>
<img id="sign-abc" src="assets/images/ind_sl_a.webp"
alt="An image of Indian Sign Language fingerspelling alphabet">
<h3>Choose your answer:</h3>
<!-- Answer buttons -->
<div id="answer-choice">
<button id="ans-btn-1" aria-label="Answer button one"></button>
<button id="ans-btn-2" aria-label="Answer button two"></button>
<button id="ans-btn-3" aria-label="Answer button three"></button>
<button id="ans-btn-4" aria-label="Answer button four"></button>
</div>
</div>
<!-- Next button appears once an user click any of answer button as this is done by JS event handler -->
<div class="next-button">
<a id="game-next" aria-label="The next button to advance to the next question"><i
class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
<!-- Result container appears upon the completion of the game and this is done by JS event handler -->
<div class="result-container"></div>
</main>
<!-- Footer -->
<footer>
<!-- Copyright -->
<p>© Guess ISL Alphabet</p>
</footer>
<!-- Link to JavaScript file -->
<script src="assets/js/script.js"></script>
<!-- FontAwesome kit -->
<script src="https://kit.fontawesome.com/be0d508cf4.js" crossorigin="anonymous"></script>
</body>
</html>