-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
114 lines (98 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
<html>
<head>
<meta charset="UTF-8">
<title>European Language Puzzle Game</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat|Muli|Raleway|Thasadith" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/normalize.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<span class='title-bar'>
<div class='button left' id='Switch' onclick="toTheLeftToTheLeft()">◀</div>
<div id='words'> THE PUZZLE OF EUROPEAN LANGUAGES </div>
<div class='button right' id='Switch' onclick="toTheRight()">▶</div>
</span>
<br>
<br>
<!-- Trigger/Open The Modal -->
<button id="myBtn">◀ how to play ▶</button>
</div>
<table>
<tr>
<th class='name family' id='Indo-European'> ◀ INDO-EUROPEAN ▶</th>
<th class='name family' id='Uralic'> ◀ URALIC ▶</th>
<th class='name family' id='Basque'> ◀ BASQUE ▶</th>
<th class='name family' id='Altaic'> ◀ ALTAIC ▶</th>
<th class='name family' id='Northwest-Caucasian'> ◀ NORTHWEST CAUCASIAN ▶</th>
<th class='name family' id='Afro-Asiatic'> ◀ AFRO-ASIATIC ▶</th>
</tr>
<tr>
<td style='color:#2ef480ff' class='name genus' id='greek'>◀ greek ▶</td>
<td style='color:#f900baff' class='name genus' id='ugric'>◀ ugric ▶</td>
<td style='color:#fa0000ff' class='name genus' id='basque'>◀ basque ▶</td>
<td style='color:#f1680cff' class='name genus' id='turkic'>◀ turkic ▶</td>
<td style='color:#e4bd00ff' class='name genus' id='northwest-caucasian'>◀ northwest caucasian ▶</td>
<td style='color:#00cc00ff' class='name genus' id='semitic'>◀ semitic ▶</td>
</tr>
<tr>
<td style='color:#47edb6ff' class='name' id='baltic'>◀ baltic ▶</td>
<td style='color:#bc0c4eff' class='name' id='finnic'>◀ finnic ▶</td>
</tr>
<tr>
<td style='color:#40dfedff' class='name' id='celtic'>◀ celtic ▶</td>
<td style='color:#9e0a56ff' class='name' id='saami'>◀ saami ▶</td>
</tr>
<tr>
<td style='color: #228df2ff' class='name' id='slavic'>◀ slavic ▶</td>
</tr>
<tr>
<td style='color: #1365a3ff' class='name' id='indic'>◀ indic ▶</td>
</tr>
<tr>
<td style='color: #003fbcff' class='name' id='germanic'>◀ germanic ▶</td>
</tr>
<tr>
<td style='color: #2a08a2ff' class='name' id='romance'>◀ romance ▶</td>
</tr>
<tr>
<td style='color: #7e00b3ff' class='name' id='albanian'>◀ albanian ▶</td>
</tr>
</table>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<p>This game aims to compare geographic and linguistic aspects of languages spoken in Europe.</p>
<p>To play, drag the circles from the right over to their correct spots on the left.</p>
<p>For another challege, you can click on the arrows by the title to play it from the left to the right.</p>
<p>Click on the family and genus names at the bottom to only animate those circles.</p>
<br>
<p class="datasource">data source </p>
<p class="authors">created by </p>
<br>
<p class="authors">Sebastian Hancock and Verena Klasen</p>
<p class="datasource"><a href= "https://wals.info" target="_blank"> The World Atlas of Language Structures </a> </p>
<br>
</div>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="new-index.js"></script>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// When the user clicks on the button, open the modal
btn.onclick = function () {
modal.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>