<!DOCTYPE html>
<html>
<head>
<title>メジャースケールのクイズアプリ</title>
<meta charset="UTF-8">
<style>
#question {
font-size: 3em;
font-weight: bold;
margin-bottom: 50px;
}
#answer {
font-size: 2em;
font-weight: bold;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="question"></div>
<div id="options"></div>
<button id="answerButton">答えをチェック</button>
<div id="answer"></div>
<script>
const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
const majorScalePatterns = [2, 2, 1, 2, 2, 2, 1]; // メジャースケールの音程パターン
let questionNote;
function generateQuestion() {
// ランダムな基音を選ぶ
questionNote = notes[Math.floor(Math.random() * notes.length)];
document.querySelector('#question').innerHTML = `${questionNote}メジャースケールの構成音は？`;
// 回答オプションを作る
let optionsHtml = '';
let rootNoteIndex = notes.indexOf(questionNote);
let scaleNotes = [rootNoteIndex];
let currentNoteIndex = rootNoteIndex;
for (let i = 0; i < majorScalePatterns.length; i++) {
currentNoteIndex = (currentNoteIndex + majorScalePatterns[i]) % notes.length;
scaleNotes.push(currentNoteIndex);
}
for (let i = 0; i < notes.length; i++) {
if (scaleNotes.indexOf(i) !== -1) {
optionsHtml += `<label><input type="checkbox" id="${notes[i]}" name="${notes[i]}">${notes[i]}</label>`;
} else {
optionsHtml += `<label><input type="checkbox" id="${notes[i]}" name="${notes[i]}" disabled>${notes[i]}</label>`;
}
}
document.querySelector('#options').innerHTML = optionsHtml;
document.querySelector('#answer').innerHTML = '';
}
function checkAnswer() {
// 回答を取得
let selectedNotes = [];
document.querySelectorAll('#options input:checked').forEach(function(checkbox) {
selectedNotes.push(checkbox.id);
});
// 正解判断
let isCorrect = true;
let rootNoteIndex = notes.indexOf(questionNote);
let scaleNotes = [rootNoteIndex];
let currentNoteIndex = rootNoteIndex;
for (let i = 0; i < majorScalePatterns.length; i++) {
currentNoteIndex = (currentNoteIndex + majorScalePatterns[i]) % notes.length;
if (selectedNotes.indexOf(notes[currentNoteIndex]) === -1) {
isCorrect = false;
break;
}
}
// 結果表示
if(isCorrect) {
document.querySelector('#answer').innerHTML = `正解！ ${questionNote}メジャースケールの構成音は${selectedNotes.join(', ')}です`;
} else {
document.querySelector('#answer').innerHTML = `不正解。。。正解は${questionNote}メジャースケールの構成音は${scaleNotes.map(function(noteIndex){return notes[noteIndex]}).join(', ')}です`;
}
}
// 初期化
generateQuestion();
document.querySelector('#answerButton').addEventListener('click', checkAnswer);
</script>
</body>
</html>
