分数の引き算です。
マイナスにならないように
事前に
A+B=Cを計算してから
C-Bを問題として出させるようにしています。
分数の分母と分子の間の横線(括線)をテーブルレイアウトにして<hr>で表示させてみました。
firefoxやcrhomeではうまく表示できていましたが
他はチェックしていないです。
サンプルは
分数の引き算
ソースは下記です。
ーーーーーーーーーーーーーーーーーー
<!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(){
rrp1 = Math.floor(Math.random()*9)+1;
rrp2 = Math.floor(Math.random()*9)+1;
rrp3 = Math.floor(Math.random()*9)+1;
rrp4 = Math.floor(Math.random()*9)+1;
var myy1,myy2,myy3,myy4,myy5,myy6;
if(rrp1 > rrp2){
myy1=rrp2;
myy2=rrp1;
}else{
myy1=rrp1;
myy2=rrp2;
}
if(rrp3 > rrp4){
myy3=rrp4;
myy4=rrp3;
}else{
myy3=rrp3;
myy4=rrp4;
}
eeq1 = (myy1 * myy4) + (myy2 * myy3); //分子
eeq2 = myy2 * myy4; //分母
e1=eeq1;
e2=eeq2;
function mon(e1,e2){
var f=e1%e2;
if(f==0){
return e2;
}else{
return mon(e2, f);
}
}
e3=mon(e1,e2);
myy5=eeq1/e3; //答え分子
myy6=eeq2/e3; //答え分母
document.myForm.myFormQ1.value = myy5; // 分子
document.myForm.myFormQ2.value = myy6; // 分母
document.myForm.myFormQ3.value = myy3; // 分子
document.myForm.myFormQ4.value = myy4; // 分母
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>
<HR>
</td>
<td>
―
</td>
<td>
<HR>
</td>
<td>
＝
</td>
<td>
<HR>
</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>
