-
Notifications
You must be signed in to change notification settings - Fork 0
/
faciles.html
134 lines (122 loc) · 5.24 KB
/
faciles.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Trivia de Harry Potter</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
body {
background-image: linear-gradient(30deg,rgba(0,0,0,.5),rgba(0,0,0,.5)),url('hp-portada3.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
}
@media screen and (max-device-width: 768px){
body {
background-image: linear-gradient(30deg,rgba(0,0,0,.5),rgba(0,0,0,.5)),url('hp-portada5.jpg');
background-attachment: local;
background-size: 22em;
background-position:top;
background-repeat: repeat;
}
}
</style>
</head>
<body>
<div>
<h4 class="title">hp trivia</h4>
</div>
<div class="divisionLine"></div>
<section>
<form name="triviaForm" onsubmit="return verificarRespuestas()">
<div class="container">
<h4 class="class-easyQuestions">1. In the movie, who gives Harry his acceptance letter from Hogwarts?</h4>
<p>
<label class="class-easyAnswers" for="e-q1-a1">A) Dumbeldore.</label>
<input id="e-q1-a1" name="q1" type="radio" value="a">
</p>
<p>
<label class="class-easyAnswers" for="e-q1-a2">B) Hagrid.</label>
<input id="e-q1-a2" name="q1" type="radio" value="b">
</p>
<p>
<label class="class-easyAnswers" for="e-q1-a3">C) An owl.</label>
<input id="e-q1-a3" name="q1" type="radio" value="c">
</p>
</div>
<div class="container">
<h4 class="class-easyQuestions">2. What is a muggle?<br>
</h4>
<p>
<label class="class-easyAnswers" for="e-q2-a1">A) Non magic people.</label>
<input id="e-q2-a1" name="q2" type="radio" value="a">
</p>
<p>
<label class="class-easyAnswers" for="e-q2-a2">B) Wizards.</label>
<input id="e-q2-a2" name="q2" type="radio" value="b">
</p>
<p>
<label class="class-easyAnswers" for="e-q2-a3">C) Half blood people.</label>
<input id="e-q2-a3" name="q2" type="radio" value="c">
</p>
</div>
<div class="container">
<h4 class="class-easyQuestions">3. What is the spell used against dementors?</h4>
<p>
<label class="class-easyAnswers" for="e-q3-a1">A) Patronus.</label>
<input id="e-q3-a1" name="q3" type="radio" value="a">
</p>
<p>
<label class="class-easyAnswers" for="e-q3-a2">B) Petrificus Totalus.</label>
<input id="e-q3-a2" name="q3" type="radio" value="b">
</p>
<p>
<label class="class-easyAnswers" for="e-q3-a3">C) Riddikulus.</label>
<input id="e-q3-a3" name="q3" type="radio" value="c">
</p>
</div>
<div class="container">
<h4 class="class-easyQuestions">4. What is the name of the third book in the Harry Potter saga?</h4>
<p>
<label class="class-easyAnswers" for="e-q4-a1">A) Harry Potter and the Chamber of Secrets.</label>
<input id="e-q4-a1" name="q4" type="radio" value="a">
</p>
<p>
<label class="class-easyAnswers" for="e-q4-a2">B) Harry Potter and the Prisoner of Azkaban.</label>
<input id="e-q4-a2" name="q4" type="radio" value="b">
</p>
<p>
<label class="class-easyAnswers" for="e-q4-a3">C) Harry Potter and the Goblet of Fire.</label>
<input id="e-q4-a3" name="q4" type="radio" value="c">
</p>
</div>
<div class="container">
<h4 class="class-easyQuestions">5. What is a Horcrux?</h4>
<p>
<label class="class-easyAnswers" for="e-q5-a1">A) It is a powerful object that makes whoever possesses it not age.</label>
<input id="e-q5-a1" name="q5" type="radio" value="a">
</p>
<p>
<label class="class-easyAnswers" for="e-q5-a2">B) It is an item that is created when a person is born, when a soul is created.</label>
<input id="e-q5-a2" name="q5" type="radio" value="b">
</p>
<p>
<label class="class-easyAnswers" for="e-q5-a3">C) It is a very powerful object in which a wizard or witch has hidden a fragment of his soul with the purpose of achieving immortality.</label>
<input id="e-q5-a3" name="q5" type="radio" value="c">
</p>
</div>
<div class="containerWelcome">
<input type="submit" class="buttonResults" value="See results">
</div>
</form>
<div class="class-easyQuestions2" id="resultados"></div>
</section>
<br>
<div class="containerPlayAgain">
<button class="buttonResults" onclick="location.href='index.html'">Play again</button>
</div>
<script src="script.js"></script>
</body>
</html>