kunjgit · Aaronf1700 · Oct 6, 2025 · Oct 6, 2025
diff --git a/Games/Geography_Guesser/countries.json b/Games/Geography_Guesser/countries.json
diff --git a/Games/Geography_Guesser/index.html b/Games/Geography_Guesser/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Geography Guesser</title>
+<link rel="stylesheet" href="style.css">
+<link rel="icon" type="image/png" href="thumbnail.png" />
+
+
+</head>
+<body>
+
+<h1>Geography Guesser</h1>
+
+<div id="menu">
+  <div>
+    <label>Mode:</label>
+    <button class="mode" data-mode="flag">Flag</button>
+    <button class="mode" data-mode="capital">Capital</button>
+  </div>
+  <div style="margin-top:15px;">
+    <label for="difficulty">Difficulty:</label>
+    <select id="difficulty">
+      <option value="easy">Easy</option>
+      <option value="medium">Medium</option>
+      <option value="hard">Hard</option>
+    </select>
+  </div>
+  <div style="margin-top:15px;">
+    <label for="timerMode">Timer (seconds):</label>
+    <select id="timerMode">
+      <option value="off">Off</option>
+      <option value="10">10</option>
+      <option value="20">20</option>
+    </select>
+  </div>
+  <button id="startBtn" disabled style="margin-top:20px;">Start Game</button>
+</div>
+
+<div id="game" class="hidden" style="display:none;">
+  <h2 id="modeLabel"></h2>
+  <img id="clueImg" class="hidden">
+  <div id="clueText" class="hidden"></div>
+  <div id="options"></div>
+  <div id="status">
+    Score: <span id="score">0</span> | Lives: <span id="lives">3</span>
+  </div>
+  <div id="timer" class="hidden">Time left: <span id="timerVal">0</span>s</div>
+  <button id="nextBtn" class="hidden">Next</button>
+  <button id="quitBtn">Quit</button>
+</div>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/Geography_Guesser/script.js b/Games/Geography_Guesser/script.js
@@ -0,0 +1,154 @@
+let countries = []; // will fetch from JSON
+let mode = null;
+let difficulty = 'easy';
+let score = 0;
+let lives = 3;
+let currentTarget = null;
+let options = [];
+
+const modeButtons = document.querySelectorAll('.mode');
+const startBtn = document.getElementById('startBtn');
+const difficultySelect = document.getElementById('difficulty');
+const timerSelect = document.getElementById('timerMode');
+const gameDiv = document.getElementById('game');
+const menuDiv = document.getElementById('menu');
+const modeLabel = document.getElementById('modeLabel');
+const clueImg = document.getElementById('clueImg');
+const optionsDiv = document.getElementById('options');
+const scoreSpan = document.getElementById('score');
+const livesSpan = document.getElementById('lives');
+const nextBtn = document.getElementById('nextBtn');
+const quitBtn = document.getElementById('quitBtn');
+
+// Difficulty groups
+let easyCountries = [];
+let mediumCountries = [];
+let hardCountries = [];
+
+fetch('countries.json')
+  .then(res => res.json())
+  .then(data => {
+    countries = data;
+
+    // Example grouping (you can customize as needed)
+    easyCountries = countries.slice(0, 50);    // more familiar countries
+    mediumCountries = countries.slice(50, 150);
+    hardCountries = countries.slice(150);
+  });
+
+// Mode selection
+modeButtons.forEach(btn => {
+  btn.addEventListener('click', () => {
+    modeButtons.forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    mode = btn.dataset.mode;
+    startBtn.disabled = false;
+  });
+});
+
+// Difficulty selection
+difficultySelect.addEventListener('change', e => difficulty = e.target.value);
+
+// Start game
+startBtn.addEventListener('click', () => {
+  menuDiv.style.display = 'none';
+  gameDiv.style.display = 'block';
+  score = 0;
+  lives = 3;
+  scoreSpan.textContent = score;
+  livesSpan.textContent = lives;
+  modeLabel.textContent = mode === 'flag' ? 'Guess the Country' : 'Which country has this capital?';
+  nextQuestion();
+});
+
+// Quit button
+quitBtn.addEventListener('click', () => location.reload());
+
+// Next button
+nextBtn.addEventListener('click', () => {
+  nextBtn.classList.add('hidden');
+  nextQuestion();
+});
+
+// Generate next question
+function nextQuestion() {
+  optionsDiv.innerHTML = '';
+  clueImg.style.display = 'none';
+
+  // Choose difficulty pool
+  let pool = easyCountries;
+  if (difficulty === 'medium') pool = mediumCountries;
+  else if (difficulty === 'hard') pool = hardCountries;
+
+  // Pick target country
+  currentTarget = pool[Math.floor(Math.random() * pool.length)];
+
+  // Show flag if mode is flag
+  if (mode === 'flag') {
+    clueImg.src = currentTarget.flag;
+    clueImg.style.display = 'block';
+  }
+
+  // Generate options
+  options = [currentTarget];
+  while (options.length < 4) {
+    let rand = pool[Math.floor(Math.random() * pool.length)];
+    if (!options.includes(rand)) options.push(rand);
+  }
+
+  shuffle(options);
+
+  // Render options
+  options.forEach(opt => {
+    const btn = document.createElement('button');
+    btn.classList.add('optionBtn');
+
+    // Flag mode shows country names; Capital mode also shows country names
+    btn.textContent = opt.name;
+
+    btn.addEventListener('click', () => checkAnswer(opt));
+    optionsDiv.appendChild(btn);
+  });
+
+  // Show capital in capital mode as the question
+  if (mode === 'capital') {
+    modeLabel.textContent = `Which country has the capital: ${currentTarget.capital}?`;
+  } else {
+    modeLabel.textContent = `Guess the country`;
+  }
+}
+
+// Check answer
+function checkAnswer(selected) {
+  const correct = currentTarget.name;
+  const buttons = document.querySelectorAll('.optionBtn');
+
+  buttons.forEach(btn => {
+    btn.disabled = true;
+    if (btn.textContent === correct) btn.classList.add('correct');
+    else if (btn.textContent === selected.name) btn.classList.add('wrong');
+  });
+
+  if (selected.name === correct) {
+    score++;
+    scoreSpan.textContent = score;
+  } else {
+    lives--;
+    livesSpan.textContent = lives;
+    if (lives === 0) {
+      alert(`Game Over! Your score: ${score}`);
+      location.reload();
+      return;
+    }
+  }
+
+  nextBtn.classList.remove('hidden');
+}
+
+// Simple shuffle function
+function shuffle(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+}
diff --git a/Games/Geography_Guesser/style.css b/Games/Geography_Guesser/style.css
@@ -0,0 +1,71 @@
+/* Body & Fonts */
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background: linear-gradient(135deg, #74ebd5 0%, #acb6e5 100%);
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  color: #333;
+}
+
+/* Title */
+h1 {
+  margin: 20px 0;
+  font-size: 2.2rem;
+  color: #fff;
+  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
+}
+
+/* Containers */
+#menu, #game {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 15px;
+  padding: 20px;
+  width: 90%;
+  max-width: 500px;
+  margin: 20px auto;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
+}
+
+/* Buttons */
+button {
+  padding: 10px 20px;
+  margin: 5px;
+  font-size: 1rem;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+button:hover { transform: scale(1.05); }
+
+/* Mode buttons */
+.mode { background: #4CAF50; color: #fff; }
+.mode.active { box-shadow: 0 0 10px #4CAF50; }
+
+/* Option buttons */
+.optionBtn {
+  display: block;
+  width: 200px;
+  margin: 10px auto;
+  background: #2196F3;
+  color: white;
+  font-size: 1rem;
+  border-radius: 8px;
+  padding: 10px 0;
+}
+
+.optionBtn.correct { background: #4CAF50; }
+.optionBtn.wrong { background: #f44336; }
+
+/* Clue elements */
+#clueImg { max-width: 200px; margin: 15px auto; display: block; border-radius: 8px; }
+#clueText { font-size: 1.5rem; margin: 15px 0; }
+
+/* Status & Timer */
+#status { font-size: 1.2rem; margin-top: 10px; }
+#timer { font-weight: bold; margin: 10px 0; }
+
+/* Next & Quit buttons */
+#nextBtn, #quitBtn { background: #FF9800; color: white; margin-top: 15px; }
diff --git a/Games/Geography_Guesser/thumbnail.png b/Games/Geography_Guesser/thumbnail.png
diff --git a/assets/images/Geography_Guesser.png b/assets/images/Geography_Guesser.png
diff --git a/assets/js/gamesData.json b/assets/js/gamesData.json
@@ -3254,5 +3254,10 @@
     "gameTitle" : "Drummer Kit",
     "gameUrl": "Drummer_Kit",
     "thumbnailUrl": "Drummer_Kit.png"
+ },
+  "649":{
+    "gameTitle" : "Geography Guesser",
+    "gameUrl": "Geography_Guesser",
+    "thumbnailUrl": "Geography_Guesser.png"
  }
 }