メジャースケールのクイズ

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>メジャースケールのクイズ</title>
	<style>
		body {
			text-align: center;
			font-family: Arial, sans-serif;
		}
		h1 {
			margin-top: 50px;
		}
		label {
			display: inline-block;
			margin: 10px;
		}
		input[type="submit"] {
			margin-top: 20px;
			padding: 10px;
			border: none;
			border-radius: 5px;
			background-color: #337ab7;
			color: #fff;
			font-size: 16px;
			cursor: pointer;
		}
		input[type="submit"]:hover {
			background-color: #23527c;
		}
	</style>
</head>
<body>
	<h1>メジャースケールのクイズ</h1>
	<p>以下の12個のチェックボックスから、選ばれた基音からなるメジャースケールを当ててください。</p>
	<form id="quizForm">
		<div>
			<p id="question"></p>
		</div>
		<div>
			<label><input type="checkbox" name="C" value="C">C</label>
			<label><input type="checkbox" name="C#" value="C#">C#</label>
			<label><input type="checkbox" name="D" value="D">D</label>
			<label><input type="checkbox" name="D#" value="D#">D#</label>
			<label><input type="checkbox" name="E" value="E">E</label>
			<label><input type="checkbox" name="F" value="F">F</label>
			<label><input type="checkbox" name="F#" value="F#">F#</label>
			<label><input type="checkbox" name="G" value="G">G</label>
			<label><input type="checkbox" name="G#" value="G#">G#</label>
			<label><input type="checkbox" name="A" value="A">A</label>
			<label><input type="checkbox" name="A#" value="A#">A#</label>
			<label><input type="checkbox" name="B" value="B">B</label>
		</div>
		<input type="submit" value="回答する">
	</form>
	
	<script>
		function generateQuestion() {
			var notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
			var baseNote = notes[Math.floor(Math.random() * notes.length)];
			var majorScale = [baseNote, notes[(notes.indexOf(baseNote) + 2) % 12], notes[(notes.indexOf(baseNote) + 4) % 12], notes[(notes.indexOf(baseNote) + 5) % 12], notes[(notes.indexOf(baseNote) + 7) % 12], notes[(notes.indexOf(baseNote) + 9) % 12], notes[(notes.indexOf(baseNote) + 11) % 12]];
			
			document.getElementById("question").innerHTML = "問題：" + baseNote + "を基音とするメジャースケールは？";
			document.querySelector('input[name="C"]').checked = false;
			document.querySelector('input[name="C#"]').checked = false;
			document.querySelector('input[name="D"]').checked = false;
			document.querySelector('input[name="D#"]').checked = false;
			document.querySelector('input[name="E"]').checked = false;
			document.querySelector('input[name="F"]').checked = false;
			document.querySelector('input[name="F#"]').checked = false;
			document.querySelector('input[name="G"]').checked = false;
			document.querySelector('input[name="G#"]').checked = false;
			document.querySelector('input[name="A"]').checked = false;
			document.querySelector('input[name="A#"]').checked = false;
			document.querySelector('input[name="B"]').checked = false;
			
			return majorScale;
		}
		
		function checkAnswer(answer) {
			var correctAnswers = generateQuestion();
			var selectedAnswers = [];
			var checkboxes = document.querySelectorAll('input[type="checkbox"]');
			for (var i = 0; i < checkboxes.length; i++) {
				if (checkboxes[i].checked) {
					selectedAnswers.push(checkboxes[i].value);
				}
			}
			
			if (selectedAnswers.length != 7) {
				alert("チェックボックスに7つの音を選択してください");
				return;
			}
			
			selectedAnswers.sort();
			correctAnswers.sort();
			if (JSON.stringify(selectedAnswers) == JSON.stringify(correctAnswers)) {
				alert("正解です！");
			} else {
				alert("不正解です！正解は" + correctAnswers.join(", ") + "です。");
			}
		}
		
		document.getElementById("quizForm").addEventListener("submit", function(event) {
			event.preventDefault();
			checkAnswer();
		});
		
		generateQuestion();
	</script>
</body>
</html>