分数の足し算のドリルのようなものを
作ってみた。
答えは仮分数のままです。（帯分数にするプログラムはまだできていません。）
HPはこちら
分数の足し算
ソースは下記
ーーーーーーーーーーーーーーーーーーーーーーーーーー
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="jq/jquery-1.10.2.min.js"></script>
<title>分数の足し算</title>
</head>
<script type="text/javascript"><!--
myHit = 0;
myNowCnt = 0; // 問題を出すテーブルカウンタ
myLastCnt = 10; // 問題の数
function mySet(){
myp1 = Math.floor(Math.random()*9)+1;
myp2 = Math.floor(Math.random()*9)+1;
myp3 = Math.floor(Math.random()*9)+1;
myp4 = Math.floor(Math.random()*9)+1;
if(myp1 > myp2){
document.myForm.myFormQ1.value = myp2; // 分子
document.myForm.myFormQ2.value = myp1; // 分母
}else{
document.myForm.myFormQ1.value = myp1; // 分子
document.myForm.myFormQ2.value = myp2; // 分母
}
if(myp3 > myp4){ // 大きいほうを分母、小さいほうを分子
document.myForm.myFormQ3.value = myp4; // 分子
document.myForm.myFormQ4.value = myp3; // 分母
}else{
document.myForm.myFormQ3.value = myp3; // 分子
document.myForm.myFormQ4.value = myp4; // 分母
}
document.myForm.myFormA1.value = ""; // 分子
document.myForm.myFormA2.value = ""; // 分母
}
// 入力した答えが正解か不正解かを判定する関数 (答えを入力して、[OK]ボタンを押した時の処理)
function myCheck(){
myQ1 = eval(document.myForm.myFormQ1.value); // 左側の分子 を取得
myQ2 = eval(document.myForm.myFormQ2.value); // 左側の分母 を取得
myQ3 = eval(document.myForm.myFormQ3.value); // 右側の分子 を取得
myQ4 = eval(document.myForm.myFormQ4.value); // 右側の分母 を取得
myA1 = eval(document.myForm.myFormA1.value); // 入力された分子 を取得
myA2 = eval(document.myForm.myFormA2.value); // 入力された分母 を取得
mybbc1 = (myQ1 * myQ4) + (myQ2 * myQ3); //分子
mybbb1 = myQ2 * myQ4; //分母
p1=mybbc1;
p2=mybbb1;
function yuk(p1,p2){
var r=p1%p2;
if(r==0){
return p2;
}else{
return yuk(p2, r);
}
}
uuo=yuk(p1,p2);
bbba1=mybbc1/uuo; //答え分子
bbba2=mybbb1/uuo; //答え分母
if ( bbba1 == myA1 && bbba2 == myA2){ // 答えと入力した値は等しいか(正解か)?
myHit++;
document.ytr001.mes01.value = ("あたり！ (^_^)");
}else{
document.ytr001.mes01.value = ("はずれ ！ こたえは "+bbba1+"／ "+bbba2+"です !");
}
mySet(); // 次の問題をセット
if (myNowCnt==myLastCnt-1){ // 問題終わった？
myScore = myHit*10; // 得点計算
document.ytr002.mes02.value =("問題終了です。"+myLastCnt+"問中"+myHit+"問正解。点数は"+myScore+"点です。");
myNowCnt=0;
myHit=0;
}else{ // 次の問題へ
myNowCnt++;
document.ytr002.mes02.value =(+myNowCnt+"問中"+myHit+"問正解。");
myQues();
}
}
// -->
</script>
<body>
<!-- 割り算の問題フォームを設置 -->
<h1>分数の足し算</h1>
<form name="myForm">
さて、もんだいです。
<table>
<tr>
<td>
<input type="text" size="2" name="myFormQ1">
</td>
<td>
</td>
<td>
<input type="text" size="2" name="myFormQ3">
</td>
<td>
</td>
<td>
<input type="text" size="2" name="myFormA1">
</td>
</tr>
<tr>
<td>
―――
</td>
<td>
＋
</td>
<td>
―――
</td>
<td>
＝
</td>
<td>
―――
</td>
</tr>
<tr>
<td>
<input type="text" size="2" name="myFormQ2">
</td>
<td>
</td>
<td>
<input type="text" size="2" name="myFormQ4">
</td>
<td>
</td>
<td>
<input type="text" size="2" name="myFormA2">
</td>
</tr>
</table>
<br>
<input type="button" value="ＯＫ" onclick="myCheck()">
</form>
<form name="ytr001">
<input type="text" size="100" style="border-style:none;background-color:#FFFFFF;" name="mes01">
</form>
<form name="ytr002">
<input type="text" size="100" style="border-style:none;background-color:#FFFFFF;" name="mes02">
</form>
<script type="text/javascript"><!--
mySet(); // 初回の問題をフォームへセット
// --></script>
<br><br><br>
</body>
</html>
