<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>メジャースケールクイズ</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>メジャースケールクイズ</h1>
<hr>
<h3 id="problem"></h3>
<form>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="cCheckBox">
<label class="form-check-label" for="cCheckBox">C</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="csharpCheckBox">
<label class="form-check-label" for="csharpCheckBox">C#</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="dCheckBox">
<label class="form-check-label" for="dCheckBox">D</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="dsharpCheckBox">
<label class="form-check-label" for="dsharpCheckBox">D#</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="eCheckBox">
<label class="form-check-label" for="eCheckBox">E</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="fCheckBox">
<label class="form-check-label" for="fCheckBox">F</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="fsharpCheckBox">
<label class="form-check-label" for="fsharpCheckBox">F#</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gCheckBox">
<label class="form-check-label" for="gCheckBox">G</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gsharpCheckBox">
<label class="form-check-label" for="gsharpCheckBox">G#</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="aCheckBox">
<label class="form-check-label" for="aCheckBox">A</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="asharpCheckBox">
<label class="form-check-label" for="asharpCheckBox">A#</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="bCheckBox">
<label class="form-check-label" for="bCheckBox">B</label>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="checkAnswer()">回答</button>
</form>
<hr>
<p id="result"></p>
</div>
<script>
// 問題を生成する関数
function generateProblem() {
// メジャースケールの音程を定義
const intervals = [2, 2, 1, 2, 2, 2, 1];
// 基音をランダムで決定
const basicTones = ['C', 'C#', 'D', 'D#', 'E', 'E#', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
const root = basicTones[Math.floor(Math.random() * basicTones.length)];
// メジャースケールを生成
const majorScale = [root];
let currentIndex = basicTones.indexOf(root);
for (let i = 0; i < intervals.length; i++) {
currentIndex = (currentIndex + intervals[i]) % basicTones.length;
majorScale.push(basicTones[currentIndex]);
}
// 問題をHTMLに反映
const problemElement = document.getElementById('problem');
problemElement.textContent = root + 'のメジャースケール';
// チェックボックスのチェックをすべて外す
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => checkbox.checked = false);
// 正解を返す
return majorScale;
}
// 回答をチェックする関数
function checkAnswer() {
const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const selectedTones = [];
checkboxes.forEach((checkbox, index) => {
if (checkbox.checked) {
selectedTones.push(checkbox.labels[0].textContent);
}
});
selectedTones.sort();
const answer = generateProblem();
if (selectedTones.toString() === answer.toString()) {
document.getElementById('result').textContent = '正解！';
} else {
document.getElementById('result').textContent = '不正解…';
}
}
// 初期問題を表示
generateProblem();
</script>
</body>
</html>
