-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
205 lines (176 loc) · 8.23 KB
/
Copy pathindex.html
File metadata and controls
205 lines (176 loc) · 8.23 KB
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
<!DOCTYPE html>
<html>
<head>
<title>Quiz para programadores</title>
<meta name="description" content="Um quiz interativo para testar seus conhecimentos">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Quiz interativo para programadores</h1>
<p>Teste seus conhecimento em programação e veja qual pontuação você consegue fazer!</p>
</header>
<main>
<!--Introdução-->
<section>
<h2>Sobre esse quiz</h2>
<p> <strong>Este quiz</strong> foi desenvolvido para testar seus conhecimentos em programação, como
<em>linguagens de programação</em>, conceitos básicos e mais.</p>
<p>Você encontrará diferentes tipos de perguntas, incluindo múltipla escolha, textos e perguntas de data.
<br> Desafie-se com este quiz!
</p>
<p>Você poderá encontrar alguns acrônimos como <abbr title="HyperText Markup Language">HTML</abbr> e <abbr
title="Cascading Style Sheets">CSS</abbr>, que são comumente usados em questões relacionadas ao desenvolvimento web</p>
</section>
<!--Pergunta 1: múltipla escolha-->
<section>
<h2>Pergunta 1: Qual linguagem é usada para estruturar páginas web?</h2>
<form>
<input type="radio" value="Python" id="p1a" name="pergunta1">
<label for="p1a">Python</label><br>
<input type="radio" value="HTML" id="p1b" name="pergunta1">
<label for="p1b">HTML</label><br>
<input type="radio" value="Javascript" id="p1c" name="pergunta1">
<label for="p1c">Javascript</label><br>
<input type="radio" value="Ruby" id="p1d" name="pergunta1">
<label for="p1d">Ruby</label><br>
</form>
</section>
<!--Pergunta 2: texto-->
<section>
<h2>Pergunta 2: Na URL https://www.google.com o trecho "google.com" é o ____</h2>
<form>
<input type="text" id="p2" name="pergunta2"
placeholder="Digite sua resposta...">
</form>
</section>
<!--Pergunta 3: senha-->
<section>
<h2>Pergunta 3: Escreva um exemplo de senha forte</h2>
<form>
<input type="password" id="p3" name="pergunta3" placeholder="Digite uma senha...">
</form>
</section>
<!--Pergunta 4: data-->
<section>
<h2>Pergunta 4: Em que ano o HTML lançou sua primeira versão?</h2>
<form>
<input type="date" id="p4" name="pergunta4">
</form>
</section>
<!--Pergunta 5: seleção múltipla-->
<section>
<h2>Pergunta 5: Quais dessas tecnologias são consideradas linguagens de programação?</h2>
<form>
<input type="checkbox" id="p5a" name="pergunta5" value="Javascript">
<label for="p5a">Javascript</label><br>
<input type="checkbox" id="p5b" name="pergunta5" value="HTML">
<label for="p5b">HTML</label><br>
<input type="checkbox" id="p5c" name="pergunta5" value="Java">
<label for="p5c">Java</label><br>
<input type="checkbox" id="p5d" name="pergunta5" value="CSS">
<label for="p5d">CSS</label><br>
</form>
</section>
<!--Pergunta 6: upload de arquivo-->
<section>
<h2>Pergunta 6: Faça o upload de um arquivo contendo código HTML</h2>
<form>
<input type="file" id="p6" name="pergunta6" >
</form>
</section>
<!--Pergunta 7: menu suspenso-->
<section>
<h2>Pergunta 7: Selecione o atributo do input que define o seu tipo:</h2>
<form>
<select name="pergunta7" id="p7">
<option value="id">id</option>
<option value="type">type</option>
<option value="placeholder">placeholder</option>
</select>
</form>
</section>
<!--Pergunta 8: imagem-->
<section>
<h2>Pergunta 8: Qual imagem de programação é representada pelo logotipo abaixo?</h2>
<figure>
<img src="./assets/perg8.png" alt="Logotipo de uma linguagem de programação"><br>
<figcaption>Figura 1: Logotipo de uma linguagem de programação.</figcaption>
</figure>
<input type="text" id="p8" name="pergunta8" placeholder="Digite sua resposta...">
</section>
<!--Tabela de pontuação-->
<section>
<h2>Tabela de pontuação</h2>
<table border="1">
<thead>
<tr>
<th>Pontuação</th>
<th>Avaliação</th>
</tr>
</thead>
<tbody>
<tr>
<td>0-2</td>
<td>Não desista! Cada tentativa é uma oportunidade de você aprender.</td>
</tr>
<tr>
<td>3-4</td>
<td>Você ainda precisa melhorar! Que tal estudar mais programação?</td>
</tr>
<tr>
<td>5-7</td>
<td>Bom! Seu conhecimento em programação está satisfatório.</td>
</tr>
<tr>
<td>8</td>
<td>Perfeito! Você está muito bem informado sobre programação.</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Boa sorte na próxima!</td>
</tr>
</tfoot>
</table>
</section>
<!--Listas de respostas-->
<section>
<h2>Verifique as respostas corretas!</h2>
<details>
<summary>Clique aqui para visualizar as respostas corretas!</summary>
<ol>
<li>HTML</li>
<li>Domínio</li>
<li>sudcbsudrhvb545cs!!</li>
<li>1991</li>
<li>Javascript, Java</li>
<li>Arquivo deve ter extensão .html</li>
<li>type</li>
<li>Java</li>
</ol>
</details>
</section>
<!--Formulário de feedback-->
<section>
<h2>Nos dê o seu feedback</h2>
<form>
<fieldset>
<legend>Informações de contato</legend>
<label for="name">Nome:</label>
<input type="text" id="name" name="name"><br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email"><br>
<label for="comentários">Comentários:</label><br>
<textarea id="comentários" name="comentários" rows="4" cols="50" placeholder="Digite seu comentário"></textarea><br>
<button onclick="alert('FEEDBACK ENVIADO!')">Enviar</button>
</fieldset>
</form>
</section>
</main>
<footer>
<p>© Quiz de programadores. Todos os direitos reservados.</p>
<p>Para conhecer mais sobre mim <a href="sobremim.html" target="_blank">clique aqui.</a></p>
</footer>
</body>
</html>