メジャースケールクイズ
問題で基音となる音をC C# D D# E E# F G G# A A# B の12音から1つをランダムで出題します。
答えはランダムで選ばれた基音からなるメジャースケールです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>メジャースケールクイズ</title>
<style>
body{
font-family: Arial,sans-serif;
background-color: #f8f8f8;
text-align: center;
padding: 20px;
}
h1{
font-size: 2em;
margin-bottom: 40px;
}
label{
display: inline-block;
width: 50px;
height: 60px;
line-height: 60px;
font-size: 1.5em;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
margin-bottom: 20px;
background-color: #fff;
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
cursor: pointer;
text-align: center;
vertical-align: middle;
}
input[type=button]{
font-size: 1em;
padding: 10px;
border-radius: 5px;
margin-top: 20px;
background-color: #44c767;
color: #fff;
border: none;
text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
cursor: pointer;
}
input[type=button]:hover{
background-color: #5cbf81;
}
</style>
</head>
<body>
<h1>メジャースケールクイズ</h1>
<p>問題で基音となる音をC C# D D# E E# F G G# A A# B の12音から1つをランダムで出題します。<br>
答えはランダムで選ばれた基音からなるメジャースケールです。</p>
<form>
<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="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>
<br>
<input type="button" value="回答する" onclick="checkAnswer()">
</form>
<script>
//問題の基音
var questionNote = ["C", "C#", "D", "D#", "E", "E#", "F", "G", "G#", "A", "A#", "B"];
//ランダムに問題を設定する
var randomIndex = Math.floor(Math.random() * questionNote.length);
var question = questionNote[randomIndex];
document.write("<p>問題：" + question + "メジャースケール</p>");
//回答をチェックする
function checkAnswer(){
var checkboxes = document.querySelectorAll('input[type=checkbox]');
var answer = [];
for(var i = 0; i < checkboxes.length; i++){
if(checkboxes[i].checked){
answer.push(checkboxes[i].value);
}
}
if(answer.length === 7 && answer[0] === question
&& answer[1] === question + "#"
&& answer[2] === question + "D"
&& answer[3] === question + "D#"
&& answer[4] === question + "E"
&& answer[5] === question + "F"
&& answer[6] === question + "G"){
alert("正解！");
} else {
alert("不正解…");
}
}
</script>
</body>
</html>