-
Notifications
You must be signed in to change notification settings - Fork 0
/
5.html
240 lines (193 loc) · 9.24 KB
/
5.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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!--
SKAPA EN EGEN MALLSIDA FÖR UPPDRAG
==========================================================
Nu blir det lite repetition. Den sida hu hintills arbetet med
introducerade jakten och hade därför lite speciellt innehåll.
Målet med den sida du arbetar med just nu är att skapa en
mall som du sedan kan kopiera till så många uppdrag du behöver.
Du behöver sedan ändra ett saker på varje sida.
1. Beskrivningen av uppdraget.
2. Uppgiftens nummer
3. Vad det rätta svaret är
4. Vilken sida som skall laddas om man svarar rätt.
-->
<!DOCTYPE html>
<html lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<!--
# Genom att ändra denna informationen nedan kan du ge jakten ett eget namn
# EX: <title>Ett helt eget namn</title>
# Informationen visas inte någonstans på webbsidan utan ändrar det namn som
# webbsidans flik/tabb har då du du surfar till sidan.
#
-->
<title>5. Västerortsbibliotekens sommartävling</title>
<!--Filer som berättar hur sidan skall se ut laddas in. Här behöver vi inte ändra något-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link href="css/agency.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Denna del av koden berättar vad menyn skall innehålla -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Västerortsbibliotekens <br> sommartävling</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="http://www.itbib.se/teknikjakten/om.html"></a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="http://www.itbib.se/teknikjakten/om.html"></a>
</li>
</ul>
</div>
</div>
</nav>
<!--SLUT PÅ DELEN SOM BESKRIVER MENYN LÄNGST UPP-->
<!-- DELEN SOM BESKRIVER FÖRSTA UPPDRAGET STARTAR -->
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<!--Sidans största rubrik-->
<h2 class="section-heading text-uppercase"></h2>
<!--Bakgrunds information-->
<h3></h3>
<!--Eventuellt återkoppling gällande det tidigare uppdraget-->
<p>
Helt rätt! <br> Zombies älskar hjärnor!
</p>
<!--Uppgiftens nummer-->
<h3>Fråga 5</h3>
<!--Vilket är uppdraget?-->
<p>
Gå nu till fantasyhyllan för åldern 9-12. Titta på bilderna och gissa vilken varelse vi letar efter!
<!--Ibland kanske du vill lägga till en bild i beskrivningen.
I så fall läger du in bilden i katalogen img.
Du lägger sedan in följande kod för att berätta att en bild skall visas.
Men ersätter bildensnamn med det namn din bild och det filformat din bild har.
EX:
<img src="./img/bildensnamn.filformat">
T.ex: <img src="./img/coolbild.jpeg">
-->
</p>
</div>
</div>
</div>
</section>
<!-- DELEN DÄR MAN MATAR IN SITT SVAR STARTAR -->
<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Vilken varelse är det?</h2>
<h3 class="section-subheading text-muted"></h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<!--VILKEN SIDA SKALL LADDAS OM MAN SKRIVIT IN RÄTT SVAR
Du behöver här berätta vilken sida som skall laddas om man löser uppdraget.
Just nu är det sidan som heter 2.html som skall laddas.
Om vi istället skulle arbeta med uppdrag 2 just så och ändra i filen 2.html skulle vi då alltså
istället låta det stå 3.html eftersom det då är den sidan som borde laddas.
Om detta är sista uppdraget i din jakt skriver du in klar.html
Vi kan fortsätta på detta viset och lägga till nya sidor tills dess att vi skapat
så många uppdrag vi vill.
-->
<form id="contactForm" name="sentMessage" novalidate="novalidate"
action="./6.html"
onsubmit="return validateForm()" autocomplete="off">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input class="form-control" id="answer" type="text" placeholder="Skriv ditt svar här" required="required" data-validation-required-message="Rutan får inte vara tom">
<p class="help-block text-danger"></p>
</div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button id="sendMessageButton" class="btn btn-primary btn-xl text-uppercase" type="submit">Skicka ditt svar</button>
</div>
</div>
</div></form>
</div>
</div>
</div></section>
<!-- DENNA DEL BESKRIVER INFORMATIONEN SOM VISAS LÄNGST NER PÅ SIDAN -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<span class="copyright">
<a href="http://www.biblioteket.se" style="font-weight: bold">
Stockholms stadsbibliotek, Hässelby-Vällingby-Bromma-enheten
</a>
</span>
</div>
</div>
</div>
</footer>
<!-- Filer som denna mall använder läses in -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="js/agency.min.js"></script>
<script src="js/agency.min.js"></script>
<!--I DENNA DEL BERÄTTAR DU VAD SOM ÄR RÄTT SVAR-->
<script>
function validateForm() {
//Det använder skriver i rutan hämtas in och sparas i en variabel som heter answer.
var answer = document.forms["contactForm"]["spöke"].value.toLowerCase();
/*Genom att ändra det som står mellan dessa tecken "" kan du välja vad som är rätt svar
Viktigt! Skriv svaret med små bokstäver.
EX: if (answer == "mittsvar")
Om man nu skriver in mittsvar i rutan kommer man vidare.
Finns det fler än ett rätt svar?
Genom att lägga till följande tecken || (markera texten och kopiera
eller tryck alt-gr samtidigt som du trycker på tangenten till höger om shift)
så kan du lägga till fler alternativ som är rätt.
EX: Med två räta svar
if (answer == "svar1" || answer == "svar2" )
EX: Med tre rätta svar
if (answer == "svar1" || answer == "svar2" answer == "svar3" )
*/
if (answer == "drake"|| answer == "draken"|| answer == "drakar") {
return true;
}else{
document.getElementById("answer").value ="";
document.getElementById("answer").setAttribute("placeholder","Det var tyvärr fel svar, försök igen!");
return false;
}
}
</script>
<!--GRATTIS Du har nu gjort uppdrag nummer två!
Du har nu skapat en mall för en uppdragssida att utgå från.
Vill du t.ex. skapa en teknikjakt med kan du kopiera
dokument och döpa kopian till 3.html. Du kan sedan upprepa samma tillvägagångssätt
fler gånger och du vill skapa en jakt med fler uppdrag.
3.html
Du går sedan igenom dessa kopior på samma vis som detta dokument.
Så avslutar du jakten.
Du avslutar jakten genom att säga att man skall hamna på sidan
klar.html om man skriver in rätt svar.
EX:
action="./klar.html"
Du hittar fler instruktioner här ovan under delen som heter
VILKEN SIDA SKALL LADDAS OM SKRIVIT IN RÄTT SVAR
-->
</body>
</html>