generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
153 lines (147 loc) · 7.11 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
147
148
149
150
151
152
153
<!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="Protect Our Planet is an educational, interactive quiz aimed at 8-12 year old children about climate change and environmental issues.">
<!--Prevent favicon error message-->
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<!--Bootstrap CDN-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Font Awesome CDN-->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<!--Custom CSS-->
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
<title>Protect Our Planet</title>
<!--Email JS scripts-->
<script src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js">
</script>
<script>
(function () {
emailjs.init("user_Qg0VvXz59G6JoT6Bdm3rf");
})();
</script>
</head>
<body>
<div id="landing-page-container">
<div>
<header>
<h1>Protect Our Planet</h1>
</header>
</div>
<!--Main Container-->
<div id="main-container">
<div id="greeting">
<h2 id="greeting-heading">Greetings Earthlings!</h2>
<p id="greeting-info">Carbon Kid and Eco Girl need your help to protect our planet! <br> Your mission is
to learn about the
environment and how you can help. Good luck!</p>
</div>
<!--Quiz display-->
<div id="quiz-container" class="hide">
<div>
<h2>Level <span id="level-heading"></span></h2>
</div>
<div id="counter-container">
<div>
<div id="question-counter"></div>
</div>
<div id="correct-counter">
<h3>Score: <span id="score-text"></span></h3>
</div>
</div>
<div id="question-container">Questions</div>
<div id="answer-btns">
<button class="answers">Answer 1</button>
<button class="answers">Answer 2</button>
<button class="answers">Answer 3</button>
</div>
<audio id="correct-sound">
<source src="assets/audio/correct-answer.mp3" type="audio/mpeg">
</audio>
<audio id="incorrect-sound">
<source src="assets/audio/incorrect-answer.mp3" type="audio/mpeg">
</audio>
<audio id="level-complete-sound">
<source src="assets/audio/level-complete.mp3" type="audio/mpeg">
</audio>
</div>
<div>
<button id="start-btn" class="home-page-btn home-btns">Let's Play</button>
<button id="next-btn" class="quiz-btn hide">Next</button>
<button id="next-level-btn" class="quiz-btn hide">Next level</button>
<button id="sound-btn" class="quiz-btn hide"><i class="fas fa-volume-off"></i></button>
<button id="home-btn" class="quiz-btn hide"><i class="fas fa-home"></i></button>
</div>
<!--Modal content modified from Stack Overflow-->
<!--How to Play modal-->
<div>
<button id="play-btn" class="home-page-btn modal-button" data-toggle="modal" data-target="#myModal1">How
to Play</button>
<div id="myModal1" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>How to Play</h2>
</div>
<p>The aim of this quiz is to test your knowledge on climate change and the environment and
help
Carbon Kid and Eco Girl protect the planet!
<br>
The quiz is split into 3 levels.
<br>
In order to pass to the next level, you need to get 7/10.
<br>
Good luck and remember to try these tips at home!
</p>
</div>
</div>
</div>
<!--Contact form modal-->
<div>
<button id="contact-btn" class="home-page-btn modal-button" data-toggle="modal"
data-target="#myModal2">Contact</button>
<div id="myModal2" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Contact</h2>
</div>
<div class="modal-body">
<p>If you have any questions or feedback, please do not hesitate to contact.
<br>
We are happy to help!
</p>
<form id="contact-form">
<div>
<input type="text" class="form-input" id="name" placeholder="Name" name="name" required>
</div>
<div>
<input type="email" class="form-input" id="emailaddress" placeholder="Email"
name="emailaddress" required>
</div>
<div>
<textarea name="message" class="form-input" rows="10" id="message"
placeholder="Message" required></textarea>
</div>
<button id="send-btn" class="quiz-btn" type="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
<!--/End of modified content from Stack Overflow-->
</div>
<!--/Main Container-->
</div>
<script src="https://anyahush.github.io/protect-our-planet-quiz/assets/js/script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
<script src="https://anyahush.github.io/protect-our-planet-quiz/assets/js/contact.js"></script>
</body>
</html>