edutrul/flag_game.html

## flag_game.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Country Image Guess Game</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div id="game">
      <img id="flag" src="" alt="Flag">
      <div id="options">
        <button id="option1"></button>
        <button id="option2"></button>
        <button id="option3"></button>
        <button id="option4"></button>
      </div>
    </div>
  </body>
  <script src="script.js"></script>
</html>

## flag_game.js
const countries = {
  "Argentina": "argentina.jpg",
  "Australia": "australia.jpg",
  "Brazil": "brazil.jpg",
  "Canada": "canada.jpg"
};

const flagImage = document.getElementById("flag");
const optionButtons = [
  document.getElementById("option1"),
  document.getElementById("option2"),
  document.getElementById("option3"),
  document.getElementById("option4")
];

function getRandomCountry() {
  return Object.keys(countries)[Math.floor(Math.random() * Object.keys(countries).length)];
}

function getOptions(answer, countries) {
  const options = [answer];
  while (options.length < 4) {
    const country = Object.keys(countries)[Math.floor(Math.random() * Object.keys(countries).length)];
    if (!options.includes(country)) {
      options.push(country);
    }
  }
  return options;
}

function displayOptions(options) {
  for (let i = 0; i < options.length; i++) {
    optionButtons[i].innerHTML = options[i];
    optionButtons[i].addEventListener("click", function() {
      checkAnswer(options[i]);
    });
  }
}

function checkAnswer(answer) {
  for (const button of optionButtons) {
    button.disabled = true;
  }
  if (answer === currentAnswer) {
    alert("Correct!");
  } else {
    alert("Incorrect!");
  }
}

let currentAnswer;

function playGame() {
  currentAnswer = getRandomCountry();
  flagImage.src = countries[currentAnswer];
  const options = getOptions(currentAnswer, countries);
  displayOptions(options);
}

play
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Country Image Guess Game</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	<div id="game">
	<img id="flag" src="" alt="Flag">
	<div id="options">
	<button id="option1"></button>
	<button id="option2"></button>
	<button id="option3"></button>
	<button id="option4"></button>
	</div>
	</div>
	</body>
	<script src="script.js"></script>
	</html>
	const countries = {
	"Argentina": "argentina.jpg",
	"Australia": "australia.jpg",
	"Brazil": "brazil.jpg",
	"Canada": "canada.jpg"
	};

	const flagImage = document.getElementById("flag");
	const optionButtons = [
	document.getElementById("option1"),
	document.getElementById("option2"),
	document.getElementById("option3"),
	document.getElementById("option4")
	];

	function getRandomCountry() {
	return Object.keys(countries)[Math.floor(Math.random() * Object.keys(countries).length)];
	}

	function getOptions(answer, countries) {
	const options = [answer];
	while (options.length < 4) {
	const country = Object.keys(countries)[Math.floor(Math.random() * Object.keys(countries).length)];
	if (!options.includes(country)) {
	options.push(country);
	}
	}
	return options;
	}

	function displayOptions(options) {
	for (let i = 0; i < options.length; i++) {
	optionButtons[i].innerHTML = options[i];
	optionButtons[i].addEventListener("click", function() {
	checkAnswer(options[i]);
	});
	}
	}

	function checkAnswer(answer) {
	for (const button of optionButtons) {
	button.disabled = true;
	}
	if (answer === currentAnswer) {
	alert("Correct!");
	} else {
	alert("Incorrect!");
	}
	}

	let currentAnswer;

	function playGame() {
	currentAnswer = getRandomCountry();
	flagImage.src = countries[currentAnswer];
	const options = getOptions(currentAnswer, countries);
	displayOptions(options);
	}

	play