STUDY_html_017

　　STUDY_html_017_E.html

html
CSS
JavaScript

<html>
<meta charset="utf-8">

<style>　　スタイル　　</style>

<div class="ボックス">
<section>
<div class="トップ"><input type="button"onclick="window.location.reload();"
value="リロード"style="font-size:20px;color:red;"></div>
<h1>ハイブリッド・コード当てゲーム</h1>
<hr>
<p style="font-size:14px;color:gray;">音源を聴いて正しいコード・ネームを一つ選んでください.</p>
<button id="すたーと"style="font-size:20px;color:red;">▶ この Hybrid Chord は ?</button>
</section>

<script>　　すくりぷと- 1　　</script>

<section>
<p style="font-size:20px;color:dodgerblue;">ヒント音源</p>
<input type="button"value=" B♭ "onclick="コード1()"style="font-size:20px;color:dodgerblue;">
<audio id="和音-1_Bb">
<source src="Bb.mp3"type="audio/mp3">
</audio>
<input type="button"value=" B "onclick="コード2()"style="font-size:20px;color:dodgerblue;">
<audio id="和音-2_B">
<source src="B.mp3"type="audio/mp3">
</audio>
<input type="button"value=" C "onclick="コード3()"style="font-size:20px;color:dodgerblue;">
<audio id="和音-3_C">
<source src="C.mp3"type="audio/mp3">
</audio>
<input type="button"value=" D♭ "onclick="コード4()"style="font-size:20px;color:dodgerblue;">
<audio id="和音-4_Db">
<source src="Db.mp3"type="audio/mp3">
</audio>
<input type="button"value=" D "onclick="コード5()"style="font-size:20px;color:dodgerblue;">
<audio id="和音-5_D">
<source src="D.mp3"type="audio/mp3">
</audio>
<input type="button"value=" Eb "onclick="コード6()"style="font-size:20px;color:dodgerblue;">
<audio id="和音-6_Eb">
<source src="Eb.mp3"type="audio/mp3">
</audio>
<input type="button"value=" E "onclick="コード7()"style="font-size:20px;color:dodgerblue;">
<audio id="和音-7_E">
<source src="E.mp3"type="audio/mp3">
</audio>
<input type="button"value=" F "onclick="コード8()"style="font-size:20px;color:dodgerblue;">
<audio id="和音-8_F">
<source src="F.mp3"type="audio/mp3">
</audio>
<input type="button"value=" Gb "onclick="コード9()"style="font-size:20px;color:dodgerblue;">
<audio id="和音-9_Gb">
<source src="Gb.mp3"type="audio/mp3">
</audio>
<input type="button"value=" G "onclick="コード10()"style="font-size:20px;color:dodgerblue;">
<audio id="和音-10_G">
<source src="G.mp3"type="audio/mp3">
</audio>
<input type="button"value=" Ab "onclick="コード11()"style="font-size:20px;color:dodgerblue;">
<audio id="和音-11_Ab">
<source src="Ab.mp3"type="audio/mp3">
</audio>
<input type="button"value=" A "onclick="コード12()"style="font-size:20px;color:dodgerblue;">
<audio id="和音-12_A">
<source src="A.mp3"type="audio/mp3">
</audio>
<img src="Bb_over_blue.jpg"width="500">
<hr>
<p style="font-size:24px;color:black;font-weight:bold;">答えはどれでしょう？</p>

<script>　　すくりぷと - 2　　</script>

<form method="post">
<input type="button"value=" B♭ "onclick="答え1()"> 
<input type="button"value=" B "onclick="答え2()"> 
<input type="button"value=" C "onclick="答え3()"> 
<input type="button"value=" D♭ "onclick="答え4()"> 
<input type="button"value=" D "onclick="答え5()"> 
<input type="button"value=" E♭ "onclick="答え6()"> 
<input type="button"value=" E "onclick="答え7()"> 
<input type="button"value=" F "onclick="答え8()"> 
<input type="button"value=" G♭ "onclick="答え9()"> 
<input type="button"value=" G "onclick="答え10()"> 
<input type="button"onclick="location.href='　　.html'"value=" A♭ "> 
<input type="button"value=" A "onclick="答え12()">
<img src="Bb_over.jpg"width="500">
</form>
</section>
</div>

</html>

<style>
body{text-align:center;}
h1{margin-top:40px;
font-size:26px;
color:#007f6f;
font-weight:bold;}
p{margin-top:40px;
font-size:18px;
color:#444444;}
img{display:block;
margin:0 auto;
margin-top:6px;
margin-bottom:20px;}
section{text-align:center;
margin:0 auto;}
div.ボックス{clear:both;
border:1px solid #abcdef;
margin-bottom:15px;
padding:14px 14px 14px 14px;
text-align:left;
overflow:hidden;
background-color:#ffffff;
-webkitborder-radius:6px;
-mozborder-radius:6px;
border-radius:6px;
-moz-box-shadow:4px 4px 4px 0px #abcdef;
-webkit-box-shadow: 4px 4px 4px 0px #abcdef;
box-shadow:4px 4px 4px 0px #abcdef;}
</style>

<script>
const 曲目=new Audio('　　.mp3');
const ぷれい=document.getElementById('すたーと');
const 停止1=document.getElementById('停止');
ぷれい.addEventListener('click',function()
{if(!曲目.paused)
{ぷれい.innerHTML=" 　 ▶ 　 ";
曲目.pause();}
else{ぷれい.innerHTML
="　||■||　";
曲目.play();}});
function コード1()
{document.getElementById("和音-1_Bb").play();}
function コード2()
{document.getElementById("和音-2_B").play();}
function コード3()
{document.getElementById("和音-3_C").play();}
function コード4()
{document.getElementById("和音-4_Db").play();}
function コード5()
{document.getElementById("和音-5_D").play();}
function コード6()
{document.getElementById("和音-6_Eb").play();}
function コード7()
{document.getElementById("和音-7_E").play();}
function コード8()
{document.getElementById("和音-8_F").play();}
function コード9()
{document.getElementById("和音-9_Gb").play();}
function コード10()
{document.getElementById("和音-10_G").play();}
function コード11()
{document.getElementById("和音-11_Ab").play();}
function コード12()
{document.getElementById("和音-12_A").play();}
</script>


<script>
function 答え1(){alert("残念, そのコード・ネームは違います.");}
function 答え2(){alert("残念, そのコード・ネームは違います.");}
function 答え3(){alert("残念, そのコード・ネームは違います.");}
function 答え4(){alert("残念, そのコード・ネームは違います.");}
function 答え5(){alert("残念, そのコード・ネームは違います.");}
function 答え6(){alert("残念, そのコード・ネームは違います.");}
function 答え7(){alert("残念, そのコード・ネームは違います.");}
function 答え8(){alert("残念, そのコード・ネームは違います.");}
function 答え9(){alert("残念, そのコード・ネームは違います.");}
function 答え10(){alert("残念, そのコード・ネームは違います.");}
//function 答え11(){alert("残念, そのコード・ネームは違います.");}
function 答え12(){alert("残念, そのコード・ネームは違います.");}
</script>

　　sample_STUDY_html_017_E サンプル・ダウンロード

← Contents

STUDY_html_017_E.html

　　← Contents

　　STUDY_html_017_E.html