-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
222 lines (217 loc) · 15.7 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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="icon" href="public/img/pacman.png">
<title>GAMING QUIZ</title>
<!-- DIVs Pais e Mães estou colocando como id(#) e DIVs filhas como class(.) -->
<!-- NÃO ESQUECER DE MUDAR A FONTE -->
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<video autoplay muted loop id="background-video">
<source src="./public/video/videoBackground.mp4" type="video/mp4">
</video>
<div class="container">
<img onclick="audioPlay()" id="pacManPlay" class="pacMan" src="./public/img/pacman.png">
<img onclick="audioPause()" id="pacManPause" class="pacMan" style="display:none" src="./public/img/pacman.png">
<div id="mainBox" class="mainBox">
<div id="divInterna">
<div id="menuPrincipal">
<h1>GAMING QUIZ</h1> <!-- Nome do Quizz (Temporário por ora) -->
<h2>Teste seu conhecimento sobre jogos</h2> <!-- Se quiserem mudar, eu mudo 🙂 -->
</div>
<div id="divQuestoes" style="display: none">
<div id="question1" style="display: none">
<div class="headingContainer">
<h1>1 - Quem é esse Pokemón?</h1>
</div>
<div class="imageContainer">
<img id="bulbasaurBlack" class="blackBulba" src="./public/img/bulbasaurCensured.gif">
</div>
<div id="question1Options" class="buttonsContainer">
<button onClick="questionAnswered(false)" class="optionButton questionButton">Pikachu</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Snorlax</button>
<button onClick="questionAnswered(true)" class="optionButton questionButton">Bulbasauro</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Magikarp</button>
</div>
</div>
<div id="question2" style="display: none">
<div class="headingContainer">
<h1>2 - Qual golpe do Mortal Kombat após ser desferido era responsável por fazer
o criador do jogo aparecer como um Easter Egg?</h1>
</div>
<div class="imageContainer">
<img id="scorpionMk" src="./public/img/scorpionMk.gif">
</div>
<div id="question2Options" class="buttonsContainer">
<button onClick="questionAnswered(false)" class="optionButton questionButton">Agarrão</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Rasteira</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Soco baixo</button>
<button onClick="questionAnswered(true)" class="optionButton questionButton">Gancho</button>
</div>
</div>
<div id="question3" style="display: none">
<div class="headingContainer">
<h1>3 - Em qual jogo o Mario aparece pela primeira vez?</h1>
</div>
<div class="imageContainer">
<img src="./public/img/mario.gif">
</div>
<div id="question3Options" class="buttonsContainer">
<button onClick="questionAnswered(false)" class="optionButton questionButton">Sonic</button>
<button onClick="questionAnswered(true)" class="optionButton questionButton">Donkey Kong</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Pac-Man</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Super Mario Bros</button>
</div>
</div>
<div id="question4" style="display: none">
<div class="headingContainer">
<h1>4 - Dentre estes personagens, qual o mais conhecido na franquia Call of Duty?</h1>
</div>
<div class="imageContainer">
<img src="./public/img/codd.gif">
</div>
<div id="question4Options" class="buttonsContainer">
<button onClick="questionAnswered(false)" class="optionButton questionButton">Alex Mason</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Viktpr Reznov</button>
<button onClick="questionAnswered(true)" class="optionButton questionButton">Simon 'Ghost' Riley</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Soap Mactavish</button>
</div>
</div>
<div id="question5" style="display: none">
<div class="headingContainer">
<h1>5 - O personagem Ryu é pertencente a qual jogo do genêro "luta"?</h1>
</div>
<div class="imageContainer">
<img class="ryu" src="./public/img/ryu.gif">
</div>
<div id="question5Options" class="buttonsContainer">
<button onClick="questionAnswered(false)" class="optionButton questionButton">The King of Fighters</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Brawlhalla</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Tekken 7</button>
<button onClick="questionAnswered(true)" class="optionButton questionButton">Street Fighter</button>
</div>
</div>
<div id="question6" style="display: none">
<div class="headingContainer">
<h1>6 - Onde se passa os principais eventos de GTA San Andreas?</h1>
</div>
<div class="imageContainer">
<img src="./public/img/ah-shit.gif">
</div>
<div id="question6Options" class="buttonsContainer">
<button onClick="questionAnswered(true)" class="optionButton questionButton">Los Santos</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Vice City</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Rockport</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Nova York</button>
</div>
</div>
<div id="question7" style="display: none">
<div class="headingContainer">
<h1>7 - Em Spider Man PS4, quem é o chefe de Peter Parker?</h1>
</div>
<div class="imageContainer2">
<img class="miranha" src="./public/img/spiderman.gif">
</div>
<div id="question7Options" class="buttonsContainer">
<button onClick="questionAnswered(false)" class="optionButton questionButton">John Jonah Jameson (JJJ)</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Adilson Konrad</button>
<button onClick="questionAnswered(true)" class="optionButton questionButton">Dr. Otto Octavius</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Norman Osborn</button>
</div>
</div>
<div id="question8" style="display: none">
<div class="headingContainer">
<h1>8 - Quem é esse personagem?</h1>
</div>
<div class="imageContainer">
<img src="./public/img/claptrap-borderlands.gif">
</div>
<div id="question8Options" class="buttonsContainer">
<button onClick="questionAnswered(false)" class="optionButton questionButton">Gl4dos</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Snorlax</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Zer0</button>
<button onClick="questionAnswered(true)" class="optionButton questionButton">Claptrap</button>
</div>
</div>
<div id="question9" style="display: none">
<div class="headingContainer">
<h1>9 - Quem é o vilão de FarCry 3?</h1>
</div>
<div class="imageContainer2">
<img class="farcry" src="./public/img/farcry.jpg">
</div>
<div id="question9Options" class="buttonsContainer">
<button onClick="questionAnswered(false)" class="optionButton questionButton">Joseph Seed (O Pai)</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Pagan Min</button>
<button onClick="questionAnswered(true)" class="optionButton questionButton">Vaas Montenegro</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Antón Castillo</button>
</div>
</div>
<div id="question10" style="display: none">
<div class="headingContainer">
<h1>10 - Qual desses jogos de corrida foi feito em 2005?</h1>
</div>
<div class="imageContainer2">
<img class="speed" src="./public/img/speed.gif">
</div>
<div id="question10Options" class="buttonsContainer">
<button onClick="questionAnswered(false)" class="optionButton questionButton">Forza Horizon 2</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">Need for Speed: Carbon</button>
<button onClick="questionAnswered(false)" class="optionButton questionButton">DiRT 3</button>
<button onClick="questionAnswered(true)" class="optionButton questionButton">Need for Speed: Most Wanted</button>
</div>
</div>
</div>
<div id="divQuizFinalizado" style="display: none">
<p>Sua pontuação: ${score}</p>
<br>
<button onclick="reloadPage()" class="optionButton questionButton">Menu Principal</button>
</div>
<div id="divInstrucoes" style="display: none">
<h1>Instruções</h1>
<ol>
<li>Para começar clique em "Começar Quiz".</li>
<li>Para cada resposta correta será contabilizado 1 ponto.</li>
<li>Ao selecionar uma alternativa, aparecerá qual é a
certa (Verde) e qual é a errada (Vermelha).</li>
<li>Após selecionar uma resposta, você será redirecionado
para a próxima pergunta depois de alguns segundos.</li>
<li>Após o fim do Quiz, clique em "Menu Principal" para voltar a página principal.</li>
<li>Há um Easter-egg no Quiz (É fácil de achar 😉).</li>
</ol>
<button onclick="resetAndGoToMainMenu()" class="optionButton questionButton">Menu Principal</button>
</div>
<div id= "divCreditos" style="display: none">
<h1>Créditos</h1>
<h2 class="groupNames">Integrantes do Grupo:</h2>
<p class="pName"> <a href="https://github.com/RicardioHemmel" target="_blank">Ricardo Hemmel Helfstein Conceição</a></p>
<p class="pName"> <a href="https://github.com/TheoBortoletto" target="_blank">Théo Henrique Ghetti Bortoletto</a></p>
<p class="pName"> <a href="https://github.com/thiagopls1" target="_blank">Thiago Pereira Lins da Silva</a></p>
<h2 class= >Instituição:</h2>
<p class="infoUni">Centro Universitário Senac - Campus Santo Amaro</p>
<h2>Professores:</h2>
<p>Fábio Abenza</p>
<p>Mário Toledo</p>
<br>
<button onclick="resetAndGoToMainMenu()" class="optionButton questionButton">Menu Principal</button>
</div>
</div>
</div>
<div class="buttonContainer">
<button id="startButton" class="optionButton" onClick="increaseMainBox(renderQuestion)">
Começar Quiz
</button>
<button id="helpButton" class="optionButton" onClick="increaseMainBox(renderInstructions)">
Instruções
</button>
<button id="creditsButton" class="optionButton" onClick="increaseMainBox(renderCredits)">
Créditos
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>