Geostudy/index.html at main · allclasses/Geostudy · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Global Geography Challenge</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background-color: #f0f8ff;
      color: #333;
    }
    header {
      text-align: center;
      padding: 1em;
      background-color: #4caf50;
      color: white;
    }
    main {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #clue-box {
      margin: 1em;
      padding: 1em;
      background-color: #fff;
      border: 2px solid #4caf50;
      border-radius: 8px;
      width: 80%;
      max-width: 600px;
      text-align: center;
    }
    #map {
      height: 500px;
      width: 90%;
      max-width: 1000px;
      margin-bottom: 2em;
      border: 2px solid #4caf50;
      border-radius: 8px;
    }
    button {
      padding: 0.5em 1em;
      background-color: #4caf50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #45a049;
    }
    footer {
      text-align: center;
      padding: 1em;
      background-color: #ddd;
    }
  </style>
</head>
<body>
  <header>
    <h1>🌍 Global Geography Challenge</h1>
    <p>Click the map to guess each location!</p>
  </header>

  <main>
    <div id="clue-box">
      <h2 id="location-name">Click "Start Game" to begin!</h2>
      <button onclick="nextClue()">Start Game</button>
    </div>
    <div id="map"></div>
  </main>

  <footer>
    <p>Created for educational fun 🌎</p>
  </footer>

  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script>
    const clues = [
      { name: "Mediterranean Sea", lat: 35.0, lng: 18.0 },
      { name: "Mariana Trench", lat: 11.35, lng: 142.2 },
      { name: "Mid-Atlantic Ridge", lat: 0, lng: -30 },
      { name: "Baja California", lat: 28.0, lng: -113.5 },
      { name: "Yucatan Peninsula", lat: 20.0, lng: -89.0 },
      { name: "East African Rift Valley", lat: -1.2921, lng: 36.8219 },
      { name: "Grand Canyon", lat: 36.1069, lng: -112.1129 },
      { name: "Nile River", lat: 30.0444, lng: 31.2357 },
      { name: "Amazon River", lat: -3.4653, lng: -62.2159 },
      { name: "Mississippi River", lat: 35.1557, lng: -90.0659 },
      { name: "Caribbean Sea", lat: 15.0, lng: -75.0 },
      { name: "Gulf of Mexico", lat: 25.0, lng: -90.0 },
      { name: "Sea of Japan", lat: 40.0, lng: 135.0 },
      { name: "Strait of Gibraltar", lat: 36.0, lng: -5.5 }
    ];

    let currentIndex = -1;
    const map = L.map('map').setView([20, 0], 2);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    function nextClue() {
      currentIndex++;
      if (currentIndex >= clues.length) {
        document.getElementById("location-name").textContent = "🎉 Game Complete!";
        return;
      }
      const clue = clues[currentIndex];
      document.getElementById("location-name").textContent = `Find: ${clue.name}`;
    }

    map.on('click', function(e) {
      if (currentIndex >= clues.length) return;

      const guessLat = e.latlng.lat;
      const guessLng = e.latlng.lng;
      const target = clues[currentIndex];

      const distance = getDistance(guessLat, guessLng, target.lat, target.lng);
      const marker = L.marker([guessLat, guessLng]).addTo(map);

      if (distance < 800) {
        marker.bindPopup(`✅ Correct! That was ${target.name}.`).openPopup();
        setTimeout(nextClue, 1500);
      } else {
        marker.bindPopup(`❌ Too far from ${target.name}. Try again.`).openPopup();
        // Remove wrong marker after 2 seconds
        setTimeout(() => {
          map.removeLayer(marker);
        }, 2000);
      }
    });

    function getDistance(lat1, lon1, lat2, lon2) {
      const R = 6371;
      const dLat = toRad(lat2 - lat1);
      const dLon = toRad(lon2 - lon1);
      const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
                Math.sin(dLon / 2) * Math.sin(dLon / 2);
      const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
      return R * c;
    }

    function toRad(value) {
      return value * Math.PI / 180;
    }
  </script>
</body>
</html>