🎹 メジャースケール クイズ 🎵
❓
🌟
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(5px); }
50% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
100% { transform: translateX(0); }
}
.button-animated {
animation: bounce 2s infinite;
}
.button-shake {
animation: shake 0.5s;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; margin: auto; text-align: center; overflow: hidden; border: 2px solid #000; border-radius: 10px;">
<h2 style="font-size: 24px;">🎹 メジャースケール クイズ 🎵</h2>
<div id="question" style="font-size: 24px; padding: 10px;">❓</div>
<div>
<input type="button" value="C" id="C" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
<input type="button" value="C#" id="C#" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
<input type="button" value="D" id="D" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
<input type="button" value="D#" id="D#" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
<input type="button" value="E" id="E" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
<input type="button" value="F" id="F" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
<input type="button" value="F#" id="F#" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
<input type="button" value="G" id="G" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
<input type="button" value="G#" id="G#" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
<input type="button" value="A" id="A" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
<input type="button" value="A#" id="A#" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
<input type="button" value="B" id="B" class="button-animated" style="font-size: 22px;" onclick="toggleCheck(this)">
</div>
<input type="button" value="🎯 回答 🎯" id="submit" style="font-size: 24px; margin-top: 20px; margin-bottom: 10px; padding: 10px 20px;" onclick="checkAnswer()">
<div id="result" style="font-size: 20px; padding: 10px;">🌟</div>
</div>
<script>
const scales = {
'C': ['C', 'D', 'E', 'F', 'G', 'A', 'B'],
'C#': ['C#', 'D#', 'F', 'F#', 'G#', 'A#', 'C'],
'D': ['D', 'E', 'F#', 'G', 'A', 'B', 'C#'],
'D#': ['D#', 'F', 'G', 'G#', 'A#', 'C', 'D'],
'E': ['E', 'F#', 'G#', 'A', 'B', 'C#', 'D#'],
'F': ['F', 'G', 'A', 'A#', 'C', 'D', 'E'],
'F#': ['F#', 'G#', 'A#', 'B', 'C#', 'D#', 'F'],
'G': ['G', 'A', 'B', 'C', 'D', 'E', 'F#'],
'G#': ['G#', 'A#', 'C', 'C#', 'D#', 'F', 'G'],
'A': ['A', 'B', 'C#', 'D', 'E', 'F#', 'G#'],
'A#': ['A#', 'C', 'D', 'D#', 'F', 'G', 'A'],
'B': ['B', 'C#', 'D#', 'E', 'F#', 'G#', 'A#'],
};
let selectedQuestion;
function newQuestion(){
const keys = Object.keys(scales);
selectedQuestion = keys[Math.floor(Math.random() * keys.length)];
document.getElementById('question').innerText = `基音: ${selectedQuestion} 🎵`;
}
function toggleCheck(elm){
elm.classList.toggle('button-shake');
}
function checkAnswer(){
const correctAnswer = scales[selectedQuestion];
let userAnswer = [];
Object.keys(scales).forEach(key => {
if(document.getElementById(key).classList.contains('button-shake')){
userAnswer.push(key);
}
});
const resultMessage = (correctAnswer.length === userAnswer.length && correctAnswer.every(value => userAnswer.includes(value))) ? "🎉 正解です! 🎉" : "❌ 不正解 ❌";
document.getElementById('result').innerText = resultMessage;
newQuestion();
}
document.addEventListener("DOMContentLoaded", newQuestion);
</script>
</body>
</html>
```