<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>メジャースケールクイズ</title>
</head>
<body>
<h1>メジャースケールクイズ</h1>
<p id="question"></p>
<form>
<label><input type="checkbox" value="C">C</label>
<label><input type="checkbox" value="C#">C#</label>
<label><input type="checkbox" value="D">D</label>
<label><input type="checkbox" value="D#">D#</label>
<label><input type="checkbox" value="E">E</label>
<label><input type="checkbox" value="E#">E#</label>
<label><input type="checkbox" value="F">F</label>
<label><input type="checkbox" value="G">G</label>
<label><input type="checkbox" value="G#">G#</label>
<label><input type="checkbox" value="A">A</label>
<label><input type="checkbox" value="A#">A#</label>
<label><input type="checkbox" value="B">B</label>
<br>
<button type="button" onclick="check()">回答</button>
</form>
<p id="result"></p>
<script>
const notes = ["C", "C#", "D", "D#", "E", "F", "G", "G#", "A", "A#", "B"];
const scales = [
["C", "D", "E", "F", "G", "A", "B"],
["C#", "D#", "E#", "F#", "G#", "A#", "B#"],
["D", "E", "F#", "G", "A", "B", "C#"],
["D#", "F", "G", "G#", "A#", "C", "D"],
["E", "F#", "G#", "A", "B", "C#", "D#"],
["F", "G", "A", "A#", "C", "D", "E"],
["G", "A", "B", "C", "D", "E", "F#"],
["G#", "A#", "B#", "C#", "D#", "E#", "F##"],
["A", "B", "C#", "D", "E", "F#", "G#"],
["A#", "C", "D", "D#", "F", "G", "A"],
["B", "C#", "D#", "E", "F#", "G#", "A#"]
];
const joke = "どうやって譜面を読みますか？マンドリンに乗って！"; // マンドリン = mandolin = 操縦桿
let answer = [];
function init() {
const questionIndex = Math.floor(Math.random() * 12);
const question = notes[questionIndex];
answer = scales[questionIndex];
document.getElementById("question").textContent = `${question}のメジャースケールは？`;
}
function check() {
const checked = document.querySelectorAll('input[type="checkbox"]:checked');
const checkedValues = Array.from(checked).map((checkbox) => checkbox.value);
let correct = true;
answer.forEach((note) => {
if (!checkedValues.includes(note)) {
correct = false;
}
});
if (correct && answer.length === checkedValues.length) {
document.getElementById("result").textContent = "正解！";
} else {
document.getElementById("result").textContent = "不正解。再挑戦してください。";
}
}
init();
alert(joke);
</script>
</body>
</html>
