-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
170 lines (170 loc) · 8.05 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
<!DOCTYPE html>
<html>
<head>
<title>Quiz para programadores</title>
<meta name="description" content="Um quiz interativo para testar seus conhecimentos">
</head>
<body>
<header>
<h1>Quiz interativo para programadores</h1>
<p>Teste seus conhecimentos 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, texto 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 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>
<input type="checkbox" id="p5b" name="pergunta5" value="HTML">
<label for="p5b">HTML</label>
<input type="checkbox" id="p5c" name="pergunta5" value="Java">
<label for="p5c">Java</label>
<input type="checkbox" id="p5d" name="pergunta5" value="CSS">
<label for="p5d">CSS</label>
</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 linguagem de programação é representada pelo logotipo abaixo?</h2>
<figure>
<img src="./assets/perg8.jpeg" 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 sobre 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! Estude mais para melhorar</td>
</tr>
</tfoot>
</table>
</section>
<!--Lista de Respostas-->
<section>
<h2>Verifique suas respostas</h2>
<details>
<summary>Clique aqui para ver as respostas do quiz</summary>
<ol>
<li>HTML</li>
<li>Domínio</li>
<li>Ab23!kao8Anmd#</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="nome">Nome:</label>
<input type="text" id="nome" name="nome"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="comentarios">Comentários:</label><br>
<textarea id="comentarios" name="comentarios" rows="4" cols="50" placeholder="Digite seus comentários aqui"></textarea><br>
<button onclick="alert('FEEDBACK ENVIADO')">Envie o feedback</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>