-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (135 loc) · 4.67 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Geography Game</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.css' rel='stylesheet' />
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
<script src="sweetalert-master/dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="sweetalert-master/dist/sweetalert.css">
<style>
body {
margin: 0;
padding: 0;
font: 15px/20px sans-serif;
}
.overlay {
padding: 10px;
position: absolute;
height: 100px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: rgba(255,255,255,0);
}
#buttons {
display: inline;
}
.button {
margin-right: 5px;
height: 50px;
font-size: 120%;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<div class='overlay'>
<div style='display:inline-block;padding:5px 20px;color: white'>
<h1>Spot the Place in the Imagery</h1>
</div>
<div id='buttons'>
</div>
</div>
<script src='sites.js'></script>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiamluYWxmb2ZsaWEiLCJhIjoiOE53X2toRSJ9.2aMeuYERrEvKHul16lAJjA';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/satellite-v8',
center: [0, 0],
zoom: 3
});
var names = Object.keys(boundsByName);
// console.log(names);
var score = 0;
var currentIndex = 0;
buttons.innerHTML = '';
var startPlace = getRandomName();
// console.log(startPlace);
var placesVisited = [];
showPlace(getRandomName());
// function refresh() {
// setTimeout(function () {location.reload()}, 5000);}
function getRandomName() {
var randomIndex = Math.floor(Math.random() * names.length);
return names[randomIndex];
}
function randomPlace(names) {
var randomName = getRandomName();
if (names.indexOf(randomName) === -1) {
return randomName;
} else {
return randomPlace(names);
}
}
function getOptions(name) {
var nameIndex = names.indexOf(name);
var option1 = randomPlace([name]);
var option2 = randomPlace([name, option1]);
var options = [
option1,
option2,
name
];
return options.sort(function() {
return Math.random() - 0.5;
});
}
function showPlace(name) {
//
map.fitBounds(boundsByName[name]);
placesVisited.push(name);
var options = getOptions(name);
buttons.innerHTML = '';
options.forEach(function(choice, i) {
var button = document.createElement('button');
button.setAttribute('class', 'button fill-teal');
var optionButton = buttons.appendChild(button);
optionButton.innerHTML = options[i];
optionButton.onclick = function() {
var selectedText = this.innerText;
var correctAnswer = name;
if (selectedText === correctAnswer) {
swal("Correct Answer", "You're right", "success");
score = score + 1;
if (placesVisited.length < 10) {
showPlace(randomPlace(placesVisited));
} else {
swal("Game Over", "Refresh the Page. Your Scored "+score+"/10", "success");
// score != score+1;
}
} else {
swal("Wrong Answer","Try next","error");
if (placesVisited.length < 10) {
showPlace(randomPlace(placesVisited));
} else {
swal('Game Over!', "Refresh the Page. You Scored "+score+"/10", "success");
// score != score+1;
}
}
};
});
}
// setTimeout(function() {window.location.reload();}, 5000);
</script>
</body>
</html>