Eksamen vår 2015
Oppgave 1
Du skal utvikle en applikasjon med utgangspunkt i det vedlagte kartet over sykkelrutene.
Fylkeskommunen ønsker videopresentasjoner av fem steder langs sykkelrutene på
kartet: Askim, Ørje, Halden, Fredrikstad og Moss.
Under eksamen er det nok at du legger inn videopresentasjoner for to av stedene: Halden
og Fredrikstad. For Fredrikstad skal du bruke den vedlagte videofila uten å redigere den.
For Halden skal du bruke de vedlagte fotoene og videoen og sette dem sammen til en
videopresentasjon på en lengde på mellom 1 og 1,5 minutt.
Når brukere klikker i kartet på henholdsvis Halden eller Fredrikstad, skal det åpnes et
nytt vindu der videopresentasjonen skal kjøres. Presentasjonene av stedene må kunne
kjøres så mange ganger som det er ønskelig, og i den rekkefølgen brukeren velger.
Løsningsforslag
Jeg antar at videoredigering går greit. I løsningen under refererer jeg til videofiler med navnet halden.mp4 og fredrik.mp4.
Kartet kan du hente ved å lagre bildet over på din maskin.
Jeg lager en html som vist under. ( skriv ! i VSCode og rediger)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="kart.css">
<script src="kart.js"></script>
<title>Sykkeltur</title>
</head>
<body>
<div id="overskrift">
<h1>Velg reisemål</h1>
</div>
<div id="kart">
<canvas id="merker"></canvas>
</div>
<script>
setup();
</script>
</body>
</html>
I kart.css har jeg følgende regel for å få fram kartet som bakgrunnsbilde:
#kart {
background-image: url("kart.gif");
background-position: center;
background-size: contain;
width: 599px;
height: 735px;
}
Jeg lager også en regel for canvas slik at den dekker hele kartet:
#merker {
width: 599px;
height: 735px;
border: solid green 1px;
}
I fila kart.js definerer jeg setup() på vanlig måte: