generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
146 lines (120 loc) · 6.18 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
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
139
140
141
142
143
144
145
146
<!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="description" content="Quiz to help you learn Hiragana">
<meta name="keywords" content="Hiragana, quiz, Japan, Japanese, language learning">
<link rel="stylesheet" href="assets/css/style.css">
<!-- Favicon links -->
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
<link rel="manifest" href="favicon/site.webmanifest">
<title>JapanEasy!</title>
</head>
<body>
<div id="outer-container">
<div id="inner-container">
<!-- Logo header -->
<header>
<div id="nav-bar">
<h1><a href="index.html">JapanEasy!</a></h1>
</div>
</header>
<!-- Introduction and game variable selectors -->
<section>
<div id="quiz-options">
<p>Welcome to JapanEasy! Your one way ticket to becoming a master of the Japanese syllabary that is
Hiragana. Simply choose whether you would like to be tested in English or Hiragana, the
preferred
difficulty and click start and your journey unto Hiragana mastery will have begun. The quiz will
cycle through the entire syllabary but you can stop at any point and you score will be recorded.
We
hope you have fun! </p>
<div class="radio-button" id="language-choice">
<input type="radio" name="language" value="1" id="language-english" checked>
<label for="language-english">English</label>
<input type="radio" name="language" value="2" id="language-hiragana">
<label for="language-hiragana">Hiragana</label>
<input type="radio" name="language" value="3" id="language-katakana">
<label for="language-hiragana">Katakana</label>
</div>
<div class="radio-button" id="difficulty-level">
<input type="radio" name="difficulty" value="easy" id="difficulty-easy" checked>
<label for="difficulty-easy">Easy</label>
<input type="radio" name="difficulty" value="medium" id="difficulty-medium">
<label for="difficulty-medium">Medium</label>
<input type="radio" name="difficulty" value="hard" id="difficulty-hard">
<label for="difficulty-hard">Hard</label>
</div>
<!-- Button 1.Start game-->
<button id="quiz-start" class="btn-control">Start</button>
</div>
</section>
<!-- Quiz container with an empty h2 and div for questions and answers -->
<section>
<div id="quiz-container">
<div id="question-container">
<h2 id="question"></h2>
</div>
<div id="answer-container">
</div>
<!-- Score counters -->
<div id="counters">
<div>
<p>Correct : <span id="correct-counter">0</span></p>
</div>
<div>
<p>Incorrect : <span id="incorrect-counter">0</span></p>
</div>
</div>
<!-- Button 2. End game -->
<button id="btn-gameover" class="btn-control">End game</button>
</div>
</section>
<!-- Container showing final score of quiz -->
<section>
<div id="gameover-container">
<p>You answered correctly <span id="final-score"></span> out <span id="number-of-questions"></span>
</p>
<p id="message-result"></p>
<!-- Button 3. New game -->
<button id="new-game" class="btn-control">Try again?</button>
</div>
</section>
<!-- Footer with social media links -->
<footer>
<ul>
<li>
<a href="https://facebook.com" target="_blank" rel="noopener"
aria-label="Go to our Facebook page (opens in a new tab)"><i
class="fab fa-facebook"></i></a>
</li>
<li>
<a href="https://twitter.com" target="_blank" rel="noopener"
aria-label="Go to our Twitter page (opens in a new tab)"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="https://youtube.com" target="_blank" rel="noopener"
aria-label="Go to our YouTube page (opens in a new tab)"><i class="fab fa-youtube"></i></a>
</li>
<li>
<a href="https://instagram.com" target="_blank" rel="noopener"
aria-label="Go to our our Instagram page (opens in a new tab)"><i
class="fab fa-instagram"></i></a>
</li>
<li>
<a href="https://tiktok.com" target="_blank" rel="noopener"
aria-label="Go to our tiktok page (opens in a new tab)"><i class="fab fa-tiktok"></i></a>
</li>
</ul>
</footer>
</div>
</div>
<!-- Link to JavaScript file and fontawesome -->
<script src="assets/js/script.js"></script>
<script src="https://kit.fontawesome.com/cdd4ef1597.js" crossorigin="anonymous"></script>
</body>
</html>