<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>クイズ</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.question {
margin-bottom: 15px;
}
.result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>簡単なクイズ</h1>
<div class="question">
<p>日本の首都はどこですか?</p>
<input type="radio" name="q1" value="東京"> 東京<br>
<input type="radio" name="q1" value="大阪"> 大阪<br>
<input type="radio" name="q1" value="京都"> 京都<br>
</div>
<button onclick="checkAnswer()">答え合わせ</button>
<div class="result" id="result"></div>
<script>
function checkAnswer() {
const radios = document.getElementsByName('q1');
let selectedAnswer = '';
け
for (let i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedAnswer = radios[i].value;
break;
}
}
const resultDiv = document.getElementById('result');
if (selectedAnswer === '東京') {
resultDiv.textContent = '正解!';
resultDiv.style.color = 'green';
} else if (そselectedAnswer) {
resultDiv.textContent = '不正解です。正解は東京です。';
resultDiv.style.color = 'red';
} else {
resultDiv.textContent = '回答を選択してください。';
resultDiv.style.color = 'black';
}
}
</script>
</body>
</html>