三角形の面積のドリルを作成しました。
a x b x 1 /2 の公式で計算できるようになっています。
掛け算のクイズに１/2かけるだけなんですけど。
今回はソースに詳しい説明をコメントで入れてみました。
手間がかかりましたのでもうあまりしないかもしれません。
サンプルはこちら
三角形の面積
ソースは下記
ーーーーーーーーーーーーーーーーーーーーーーー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="jq/jquery-1.10.2.min.js"></script>
<title>三角形の面積の面積</title>
<meta name="keywords" content="ゲーム,三角形,面積,イーラーニング,クイズ">
<meta name="description" content="三角形の面積の問題（ドリル・クイズ）などができるHPです。JAVASCRIPTで作製しています。">
</head>
<script type="text/javascript"><!--
myHit = 0; // 正解数
myNowCnt = 0; // 現在の問題の数
myLastCnt = 10; // 出題する問題の数
var myy1,myy2; //辺a、辺bの変数を宣言
var qqaa=new Array(); //辺aを収納する配列を宣言
var qqbb=new Array(); //辺bを収納する配列を宣言
var qqcc=new Array(); //正解か不正解かを収納する配列を宣言
var qqdd=new Array(); //正答を収納する配列を宣言
var aaaa=new Array(); //利用者が入力した答えを収納する配列を宣言
function mySet(){
myy1 = Math.floor(Math.random()*9)+1; //辺aの数値をランダムに作成
myy2 = Math.floor(Math.random()*9)+1; //辺bの数値をランダムに作成
document.getElementById('atoi').innerHTML = "a="+myy1+"cm";
//htmlの<div id="atoi"></div>のところに”a=＜辺aの数値＞cm”が入る
document.getElementById('btoi').innerHTML = "b="+myy2+"cm";
//htmlの<div id="btoi"></div>のところに”b=＜辺bの数値＞cm”が入る
document.myForm.myFormA1.value = ""; // 数値
//htmlの<form name="myForm"><input name="myFormA1">のところの数値を空にする
}
// 入力した答えが正解か不正解かを判定する関数 (答えを入力して、[OK]ボタンを押した時の処理)
function myCheck(){
myA1 = eval(document.myForm.myFormA1.value);
// 入力された 三角形の面積の答え を取得し変数myA1に代入
ayy1 = myy1 * myy2 /2; // 三角形の面積の答えを計算
if ( ayy1 == myA1 ){ // 答えと入力した値は等しいか(正解か)?
myHit++; //正解なら変数myHitに1を加える
document.getElementById('ytr001').innerHTML = ("あたり！ すばらしいヽ(*⌒∇⌒)ﾉ ");
//htmlの<div id="ytr001"></div>のところに"あたり！ すばらしいヽ(*⌒∇⌒)ﾉ "が入る
qqcc.push("○");
//配列qqccに("○")が入る
}else{
document.getElementById('ytr001').innerHTML = ("はずれ！ (´+д+｀) こたえは"+ayy1+"です !");
//htmlの<div id="ytr001"></div>のところに"はずれ！ (´+д+｀) こたえは"+ayy1+"です !"が入る
qqcc.push("×");
//配列qqccに("×")が入る
}
qqaa.push(myy1);
//配列qqaaに変数myy1の値(辺aの値)が入る
qqbb.push(myy2);
//配列qqbbに変数myy2の値(辺bの値)が入る
aaaa.push(myA1);
//配列aaaaに変数myA1の値(利用者が入力した答え)が入る
qqdd.push(ayy1);
//配列qqddに変数ayy1の値(正答)が入る
mySet(); // 次の問題をセット
if (myNowCnt==myLastCnt-1){ // 問題終わった？
myScore = myHit*10; // 得点＝正答数×１０
document.getElementById('ytr002').innerHTML =("問題終了です。"+myLastCnt+"問中"+myHit+"問正解。点数は"+myScore+"点です。");
//htmlの<div id="ytr002"></div>のところに入る
myNowCnt=0; // 現在の問題数の変数（myNowCnt）のリセット
myHit=0; // 正解数の変数（myHit）のリセット
var hantei =""; //成績のhtml文を入れる変数(hantei)の宣言
var seitou = document.getElementById('kaitou');
//htmlの<div id="kaitou"></div>のところに入れる変数(seitou)の宣言
hantei +="<table border=1><tr><td>辺a</td><td>辺b</td><td>あなたの答え</td><td>判定</td><td>正答</td></tr>"
//成績の見出し部分のhtmlを変数hanteiに追加する
for (i = 0; i < 10; i = i +1){
hantei += "<tr><td>";
hantei += qqaa[i];
//for文で配列qqaa[0]～qqaa[9]までを変数hanteiに追加する
hantei += "cm</td><td>";
hantei += qqbb[i];
//for文で配列qqbb[0]～qqbb[9]までを変数hanteiに追加する
hantei += "cm</td><td>";
hantei += aaaa[i];
//for文で配列aaaa[0]～aaaa[9]までを変数hanteiに追加する
hantei += "cm²</td><td>";
hantei += qqcc[i];
//for文で配列qqcc[0]～qqcc[9]までを変数hanteiに追加する
hantei += "</td><td>";
hantei += qqdd[i];
//for文で配列qqdd[0]～qqdd[9]までを変数hanteiに追加する
hantei += "cm²</td></tr>";
}
hantei +="</table>"
seitou.innerHTML = hantei;
//変数seitouのinnerHTMLに変数hanteiを入れる
////htmlの<div id="kaitou"></div>のところに変数hanteiが入る
qqaa=[];
qqbb=[];
qqcc=[];
qqdd=[];
aaaa=[];
//配列qqaa,qqbb,qqcc,qqdd,aaaaのリセット
}else{ // 次の問題へ
myNowCnt++;
//問題数の変数（myNowCnt）に1を加える
document.getElementById('ytr002').innerHTML =(+myNowCnt+"問中"+myHit+"問正解。");
//htmlの<div id="ytr002"></div>のところに入る
}
}
// --></script>
<body>
<h1>三角形の面積</h1>
<!-- 三角形の問題フォームを設置 -->
さて、もんだいです。次の三角形の面積を求めてください。
<br>
<IMG SRC="ga/sankaku.jpg" WIDTH=300>
//三角形の画像を表示
<br>
<div id="atoi"></div>
//辺aを表示
<div id="btoi"></div>
//辺bを表示
<form name="myForm">
面積<input type="text" size="3" name="myFormA1">cm²
<input type="button" value="ＯＫ" onclick="myCheck()">
</form>
<div id="ytr001"></div>
//正解・不正解を表示
<div id="ytr002"></div>
//問題数・正解数を表示
<div id="kaitou"></div>
//１０問終わった後に成績表を表示
<script type="text/javascript"><!--
mySet(); // 初回の問題をフォームへセット
// --></script>
<br>
<a href="http://tasarotoste.zouri.jp/">TOPへ</a>
//TOPへのリンク
<br>
<br><br>
</body>
</html>
