generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
77 lines (66 loc) · 2.59 KB
/
index.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
<!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">
<meta name="keywords" content="mandarin, chinese, HSK, HSK1, hanyu">
<meta name="description" content="HSKone is a small interactive learning game that helps you build HSK1 vocabulary!">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://kit.fontawesome.com/2117a56b98.js" crossorigin="anonymous"></script>
<title>HSKone</title>
</head>
<body>
<!-- Header will hold the site logo -->
<header>
<a href="index.html">
<img class="logo" src="assets/images/logo.webp" alt="website logo">
</a>
</header>
<!-- Modal that contains the game menu for starting the game and finding instructions -->
<div class="modal" id="menu">
<button id="play-button">Play</button>
<h2>Instructions</h2>
<p class="instructions">
After pressing the play button above,
4 buttons containing english words on
the bottom of the screen and a square
card containing a mandarin symbol and
its pinyin will be revealed. One of the
4 english words below is the english
translation for the symbol in the middle.
Use your mandarin knowlage to select the
right answer and improve your mandarin!
The Segmented Progress Bar found under
the logo will show you your answer history.
</p>
</div>
<!-- Main will be the game area and hold all of our game components -->
<main>
<!-- Segmented Progress bar that tracks the amount of rounds completed and their result -->
<div id="segmented-progress-bar">
<div data-round="1" class="segment"></div>
<div data-round="2" class="segment"></div>
<div data-round="3" class="segment"></div>
<div data-round="4" class="segment"></div>
<div data-round="5" class="segment"></div>
</div>
<!-- Container for characater and its pinyin -->
<div class="word-card">
<h2 id="card-hanzi">子</h2>
<p id="card-pinyin">Pinyin</p>
</div>
<!-- Container for buttons used to answer -->
<div class="answer-buttons">
<button class="answer-button not-clickable">Answer1</button>
<button class="answer-button not-clickable">Answer2</button>
<button class="answer-button not-clickable">Answer3</button>
<button class="answer-button not-clickable">Answer4</button>
</div>
</main>
<script src="assets/js/Enums.js" type="module"></script>
<script src="assets/js/ProgressBar.js" type="module"></script>
<script src="assets/js/GameManager.js" type="module"></script>
<script src="assets/js/main.js" type="module"></script>
</body>
</html>