国の首都クイズ

<!DOCTYPE html>
<html>
<head>
	<title>国の首都クイズ</title>
</head>
<body>
	<h1>国の首都クイズ</h1>
	<p>以下の問題に答えてください。</p>
	<div id="quiz-container">
		<p id="question"></p>
		<button id="option1"></button>
		<button id="option2"></button>
		<button id="option3"></button>
		<button id="option4"></button>
	</div>

	<script>
		// 国と首都のペアの配列
		var countries = [
			["日本", "東京"],
			["アメリカ", "ワシントンD.C."],
			["フランス", "パリ"],
			["イタリア", "ローマ"],
			["カナダ", "オタワ"],
			["ドイツ", "ベルリン"],
			["スペイン", "マドリード"],
			["中国", "北京"],
			["ブラジル", "ブラジリア"],
			["インド", "ニューデリー"]
		];

		// ランダムに問題を選ぶ関数
		function getRandomQuestion() {
			var randomNumber = Math.floor(Math.random() * countries.length);
			var country = countries[randomNumber][0];
			var capital = countries[randomNumber][1];

			return {"question": country + "の首都は？", "answer": capital};
		}

		// 問題を表示する関数
		function displayQuestion(question) {
			document.getElementById("question").innerHTML = question.question;
			document.getElementById("option1").innerHTML = getRandomCapital();
			document.getElementById("option2").innerHTML = getRandomCapital();
			document.getElementById("option3").innerHTML = getRandomCapital();
			document.getElementById("option4").innerHTML = question.answer;
		}

		// ランダムに国名を選び、その首都を返す関数
		function getRandomCapital() {
			var randomNumber = Math.floor(Math.random() * countries.length);
			return countries[randomNumber][1];
		}

		// ボタンがクリックされたときの処理
		function buttonClick(button) {
			if (button.innerHTML === question.answer) {
				alert("正解！");
				showToast("再読み込みしてください"); // ページをリロードして次の問題に進む
			} else {
				alert("不正解！");
			}
		}

		// 最初の問題を表示する
		var question = getRandomQuestion();
		displayQuestion(question);

		// ボタンがクリックされたときのイベントを追加する
		document.getElementById("option1").addEventListener("click", function() {
			buttonClick(this);
		});
		document.getElementById("option2").addEventListener("click", function() {
			buttonClick(this);
		});
		document.getElementById("option3").addEventListener("click", function() {
			buttonClick(this);
		});
		document.getElementById("option4").addEventListener("click", function() {
			buttonClick(this);
		});
	</script>
</body>
</html>