-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathquiz.html
72 lines (67 loc) · 2.59 KB
/
quiz.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
<html>
<head>
<script src="map.js" charset="UTF-8"></script>
<script>
var $ = (x) => document.getElementById(x);
function abbreviate(word) {
return word.toLowerCase();
}
var nameToAreas = {};
var areaToName = {};
var abbrToName = {};
function loadMap() {
for (var name in areas) {
abbrToName[abbreviate(name)] = name;
nameToAreas[name] = [];
for (var points of areas[name]) {
area = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
area.setAttribute("points", points);
area.setAttribute("stroke", "black");
area.addEventListener("click", (x => () => { alert("You clicked on " + x + "."); })(name));
$("map").appendChild(area);
nameToAreas[name].push(area);
}
}
reset();
}
var guessed;
function reset() {
guessed = [];
$("score").textContent = 0;
$("total").textContent = Object.keys(nameToAreas).length;
for (var name in nameToAreas) {
colorByName(name, "grey");
}
}
function colorByName(name, color) {
for (var area of nameToAreas[name]) {
area.setAttribute("fill", color);
}
}
function makeGuess() {
var input = $("guess");
var abbr = abbreviate(input.value);
if (!guessed.includes(abbr) && abbr in abbrToName) {
var name = abbrToName[abbr];
guessed.push(abbr);
colorByName(name, "green");
input.value = "";
$("score").textContent = guessed.length;
}
}
</script>
</head>
<body onload="loadMap();">
<svg id="map" height="500px" viewBox="0 0 775 925" xmlns="http://www.w3.org/2000/svg"></svg>
<p>
<input type="text" id="guess" oninput="makeGuess();">
<input type="button" value="Reset" onclick="reset();">
</p>
<p>
You guessed <span id="score"></span> out of <span id="total"></span> municipalities.
</p>
<p>
If you are stuck, you can click on any municipality to learn its name.
</p>
</body>
</html>