Java（oracle） 型の確認クイズ
今回は、初めのほう記事にしたJavaの「型」について、簡単なクイズ形式でプログラムを作ったので、投稿します。
//jstest.html <!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="jstest.css"> </head> <body> <h1>Javaの型について</h1> <ul> <li> <p>とても小さな整数の型の名前</p> <input type="text" id="Question1"><button id="btn1">Answer</button> </li> <li> <p>小さな整数の型の名前</p> <input type="text" id="Question2"><button id="btn2">Answer</button> </li> <li> <p>普通の整数の型の名前</p> <input type="text" id="Question3"><button id="btn3">Answer</button> </li> <li> <p>大きな整数の名前</p> <input type="text" id="Question4"><button id="btn4">Answer</button></li> <li> <p>少しあいまいでもいい小数</p> <input type="text" id="Question5"><button id="btn5">Answer</button> </li> <li> <p>普通の小数</p> <input type="text" id="Question6"><button id="btn6">Answer</button> </li> <li> <p>真偽値型</p> <input type="text" id="Question7"><button id="btn7">Answer</button> </li> <li> <p>文字型</p> <input type="text" id="Question8"><button id="btn8">Answer</button> </li> <li> <p>文字列型</p> <input type="text" id="Question9"><button id="btn9">Answer</button> </li> </ul> <script src="jstest.js"></script> </body> </html>
//jstest.css html{ color: #333333; text-align: center; } body{ width: 480px; margin-bottom: 80px; } li{ list-style: none; margin-bottom: 16px; } button{ color: #fff; background-color: #333; }
//reset.css *,*::before,*::after{box-sizing:border-box} body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0} ul[role="list"], ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth} body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5} a:not([class]){text-decoration-skip-ink:auto}img, picture{max-width:100%;display:block} input,button,textarea,select{font:inherit} @media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*, *::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important}}
//jstest.js
document.getElementById("btn1").addEventListener("click",ansCheck1);
function ansCheck1(){
let answer = document.getElementById("Question1").value;
if(answer == 'byte'){
alert('Correct');
}else{
alert('mistake... 正解はbyteです');
}
}
document.getElementById("btn2").addEventListener("click",ansCheck2);
function ansCheck2(){
let answer = document.getElementById("Question2").value;
if(answer == 'short'){
alert('Correct');
}else{
alert('mistake... 正解はshortです');
}
}
document.getElementById("btn3").addEventListener("click",ansCheck3);
function ansCheck3(){
let answer = document.getElementById("Question3").value;
if(answer == 'int'){
alert('Correct');
}else{
alert('mistake... 正解はintです');
}
}
document.getElementById("btn4").addEventListener("click",ansCheck4);
function ansCheck4(){
let answer = document.getElementById("Question4").value;
if(answer == 'Long'){
alert('Correct');
}else{
alert('mistake... 正解はLongです');
}
}
document.getElementById("btn5").addEventListener("click",ansCheck5);
function ansCheck5(){
let answer = document.getElementById("Question5").value;
if(answer == 'float'){
alert('Correct');
}else{
alert('mistake... 正解はfloatです');
}
}
document.getElementById("btn6").addEventListener("click",ansCheck6);
function ansCheck6(){
let answer = document.getElementById("Question6").value;
if(answer == 'double'){
alert('Correct');
}else{
alert('mistake... 正解はdoubleです');
}
}
document.getElementById("btn7").addEventListener("click",ansCheck7);
function ansCheck7(){
let answer = document.getElementById("Question7").value;
if(answer == 'boolean'){
alert('Correct');
}else{
alert('mistake... 正解はbooleanです');
}
}
document.getElementById("btn8").addEventListener("click",ansCheck8);
function ansCheck8(){
let answer = document.getElementById("Question8").value;
if(answer == 'char'){
alert('Correct');
}else{
alert('mistake... 正解はcharです');
}
}
document.getElementById("btn9").addEventListener("click",ansCheck9);
function ansCheck9(){
let answer = document.getElementById("Question9").value;
if(answer == 'String'){
alert('Correct');
}else{
alert('mistake... 正解はStringです');
}
}
今回の簡単なクイズは、html/css/Javascriptで作りました。 コピーして使用される場合、上記のファイルを同じ階層にまとめれば動作します。 Javaの型付けの仕様上半角英字以外での型宣言は受け付けないため、クイズも半角英字以外での入力はすべて不正解にしています。
