-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (124 loc) · 5.4 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Quiz | Livros são de ficção científica</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="intro py-3 bg-info text-center">
<div class="container">
<h2 class="text-light display-2 my-4">Quiz</h2>
</div>
</div>
<div id="resultado" class="bg-white text-center d-none">
<div class="container">
<h3>Você acertou<span class="text-primary display-4 p-3">0%</span> do quiz!</h3>
<p id="dica" class="h5" class="d-none"></p>
</div>
</div>
<div class="quiz py-4 bg-dark">
<div class="container">
<h2 class="my-5 text-white text-warning">Identifique quais desses livros são de ficção científica / distopia:</h2>
<form class="quiz-form text-light">
<div class="my-5">
<p class="lead font-weight-normal">1. Em um futuro próximo, o papel dos bombeiros será queimar livros... e leitores.</p>
<div class="form-check my-2 text-white-50">
<label class="form-check-label">
<input type="radio" name="inputQuestion1" value="A">
Fahrenheit 451 (Ray Bradbury)
</label>
</div>
<div class="form-check my-2 text-white-50">
<label class="form-check-label">
<input type="radio" name="inputQuestion1" value="B">
Marley e Eu (John Grogan)
</label>
</div>
</div>
<div class="my-5">
<p class="lead font-weight-normal">2. Único livro de ficção de um famoso astrônomo e divulgador científico</p>
<div class="form-check my-2 text-white-50">
<label class="form-check-label">
<input type="radio" name="inputQuestion2" value="A">
Cinquenta Tons de Cinza (E.L.James)
</label>
</div>
<div class="form-check my-2 text-white-50">
<label class="form-check-label">
<input type="radio" name="inputQuestion2" value="B">
Contato (Carl Sagan)
</label>
</div>
</div>
<div class="my-5">
<p class="lead font-weight-normal">3. O livro de ficção científica mais intrigante e sensacional do autor de 2001: uma Odisséia no Espaço</p>
<div class="form-check my-2 text-white-50">
<label class="form-check-label">
<input type="radio" name="inputQuestion3" value="A">
O Fim da Infância (Arthur Clarke)
</label>
</div>
<div class="form-check my-2 text-white-50">
<label class="form-check-label">
<input type="radio" name="inputQuestion3" value="B">
O Cemitério Maldito (Stephen King)
</label>
</div>
</div>
<div class="my-5">
<p class="lead font-weight-normal">4. Uma obra-prima da ficção de distopia, um dos livros para se ler antes de fazer a passagem</p>
<div class="form-check my-2 text-white-50">
<label class="form-check-label">
<input type="radio" name="inputQuestion4" value="A">
O Alquimista (Paulo Coelho)
</label>
</div>
<div class="form-check my-2 text-white-50">
<label class="form-check-label">
<input type="radio" name="inputQuestion4" value="B">
Admirável Mundo Novo (Aldous Huxley)
</label>
</div>
</div>
<div class="my-5">
<p class="lead font-weight-normal">5. Mais sensacional que o filme, o livro mostra uma sociedade de primatas inteligentes como nós, cruéis como nós.</p>
<div class="form-check my-2 text-white-50">
<label class="form-check-label">
<input type="radio" name="inputQuestion5" value="A">
O Planeta dos Macacos (Pierre Boulle)
</label>
</div>
<div class="form-check my-2 text-white-50">
<label class="form-check-label">
<input type="radio" name="inputQuestion5" value="B">
Sapiens: Uma Breve História da Humanidade (Yuval N. Harari)
</label>
</div>
</div>
<div class="my-5">
<p class="lead font-weight-normal">6. Futuro ultra-violento em que delinquentes são tratados com terapia de supressão do livre-arbítrio</p>
<div class="form-check my-2 text-white-50">
<label class="form-check-label">
<input type="radio" name="inputQuestion6" value="A">
Dom Casmurro (Machado de Assis)
</label>
</div>
<div class="form-check my-2 text-white-50">
<label class="form-check-label">
<input type="radio" name="inputQuestion6" value="B">
Laranja Mecânica (Anthony Burgess)
</label>
</div>
</div>
<div class="text-center">
<button class="btn bg-danger btn-lg text-light">E n v i a r</button>
</div>
</form>
</div>
</div>
<script src="./app.js"></script>
</body>
</html>