單頁HTML 自出題指定範圍內兩個數值的加減乘練習

時間 2020-07-11

標籤單頁 html 出題指定範圍內兩個數值加減練習欄目 HTML 简体版

原文原文鏈接

預期效果：html

自定義指定範圍內的兩個數的加減乘出題，便於小學生進行加減乘法運算練習。ios

預期功能：dom

1.實現兩個數值的加減乘運算練習；ide

2.能夠選擇加減乘運算；spa

3.能夠指定本輪題目數量；rest

4.能夠自定義每一個數值的取值範圍；code

5.容許結果輸入時，從右到左的輸入；【須要勾選大數倒序輸入】orm

（以便於多位數加法時，從低位到高位的依次計算）htm

6.統計正確率及用時秒數；blog

效果圖示例以下：

代碼以下：

<!DOCTYPE html>
<html>
 <head> 
  <title>Math</title> 
  <script>
var currentIndex = 0; var totalCount = 0; var rightCount = 0; var numAStart = 0; var numAEnd = 10; var numBStart = 0; var numBEnd = 10; var opType = "+"; var usedSeconds = 0; var startTime = 0; var tempNumA = 0; var tempNumB = 0; var tempAnswer = 0; var isRTL = false; function fnStart(){ document.getElementById("divSetting").style.display = "none"; document.getElementById("divQuestionAnswer").style.display = "block"; usedSeconds = 0; currentIndex = 0; numAStart = document.getElementById('txtNumAStart').value; numAEnd = document.getElementById("txtNumAEnd").value; numBStart = document.getElementById("txtNumBStart").value; numBEnd = document.getElementById("txtNumBEnd").value; totalCount = document.getElementById("txtQuestionsCount").value; rightCount = 0; var radios = document.getElementsByName("radOperationType"); for(var i=0;i<radios.length;i++){ if(radios[i].checked == true){ opType = radios[i].value; break; } } startTime = new Date().getTime() ; if( document.getElementById("chkIsRTL").checked ){ isRTL = true; document.getElementById("txtNumAnswer").style.display="none"; document.getElementById("txtNumAnswerRTL").style.display="block"; } else { isRTL = false; document.getElementById("txtNumAnswer").style.display="block"; document.getElementById("txtNumAnswerRTL").style.display="none"; } fnCreateQuestion(); } function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + Math.floor(min); } function fnCreateQuestion(){ if(currentIndex < totalCount){ currentIndex = currentIndex + 1; tempNumA = getRndInteger(numAStart,numAEnd); tempNumB = getRndInteger(numBStart,numBEnd); if(opType == "+"){ tempAnswer = tempNumA + tempNumB; } else if(opType == "-"){ if(tempNumA < tempNumB){ var tempN = tempNumA; tempNumA = tempNumB; tempNumB = tempN; } tempAnswer = tempNumA - tempNumB; } else if(opType == "x"){ tempAnswer = tempNumA * tempNumB; }if(opType == "÷"){ tempAnswer = tempNumA / tempNumB; } document.getElementById("divQuestionIndex").innerText = currentIndex + "."; document.getElementById("divNumA").innerText = tempNumA; document.getElementById("divNumB").innerText = tempNumB; document.getElementById("divOp").innerText = opType; if(isRTL){ document.getElementById("txtNumAnswerRTL").value = ""; document.getElementById("txtNumAnswerRTL").focus(); } else { document.getElementById("txtNumAnswer").value = ""; document.getElementById("txtNumAnswer").focus(); } } else { //all finish
 fnEnd(); } } function fnNext() { var tempInputAnswer = document.getElementById("txtNumAnswer").value; if(isRTL){ tempInputAnswer = document.getElementById("txtNumAnswerRTL").value; var arr=tempInputAnswer.split(""); var rever=arr.reverse(); tempInputAnswer = rever.join(""); } if(tempInputAnswer == tempAnswer){ rightCount = rightCount + 1; } else { } fnCreateQuestion(); } function fnAfterInputAnswer(event){ if(event.keyCode==13) { fnNext(); } } function fnEnd(){ var endTime =  new Date().getTime() ; var tempSeconds = Math.floor( (endTime - startTime)/1000 ) ; 
        
        var reportInfo = "題目數量: " + totalCount; reportInfo += "<br>\r\n正確數量: " + rightCount; reportInfo += "<br>\r\n用時秒數: " + tempSeconds; reportInfo += "<br>\r\n" ; reportInfo += "<br>\r\n分數： <span style='color:red'>" + Math.floor(( rightCount * 100 / totalCount)) + "%</span>"; document.getElementById("divResult").innerHTML = reportInfo; document.getElementById("divSetting").style.display = "none"; document.getElementById("divQuestionAnswer").style.display = "none"; document.getElementById("divResultReport").style.display = "block"; } function fnReStart(){ document.getElementById("divSetting").style.display = "block"; document.getElementById("divQuestionAnswer").style.display = "none"; document.getElementById("divResultReport").style.display = "none"; } </script> 
 </head> 
 <body> 
  <form> 
  
  
   <div id="divSetting" style="display:block; width:325px; padding:5px;border:1px solid green;"> 數字A 範圍: <br /> 
    <input type="text" id="txtNumAStart" value="0" style="width:80px;" /> - <input type="text" id="txtNumAEnd" value="10" style="width:80px;" /> 
    <br /> 數字B 範圍: <br /> 
    <input type="text" id="txtNumBStart" value="0" style="width:80px;" /> - <input type="text" id="txtNumBEnd" value="10" style="width:80px;" /> 
    <br /> 運算符: <br /> 
    <input type="radio" name="radOperationType" value="+" checked="" /> 
    <span>加法+</span> 
    <input type="radio" name="radOperationType" value="-" /> 
    <span>減法-</span> 
    <input type="radio" name="radOperationType" value="x" /> 
    <span>乘法x</span> 
    <input type="radio" name="radOperationType" value="&divide;" /> 
    <span>除法&divide;</span> 
    <br /> 題目數量: <br /> 
    <input type="text" id="txtQuestionsCount" value="10" style="width:80px;" /> 
    <br /> 單題限時: <br /> 
    <input type="text" id="txtSingleLimitSeconds" value="10" style="width:80px;" />(秒） <br /> 
    <input type="checkbox" id="chkIsRTL" name="chkIsRTL" value="" />大數倒序輸入 <br /> 
    <br /> 
    <input type="button" onclick="fnStart()" id="btnStart" value="start 開始" style="margin-left:100px; font-size:30px;" /> 
   </div> 
   
   
   <div id="divQuestionAnswer" style="display:none;width:325px; padding:5px;border:1px solid green;"> 
    <div id="divQuestionIndex"> 1. </div> 
    <table style="font-size:36pt; letter-spacing:8px; width:100px; background-color:gray;"> 
     <tbody> 
      <tr> 
       <td style="width:60px;"> </td> 
       <td style="width:100px"></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td> 
        <div id="divNumA" style="text-align:right; background-color:gray; width:200px;"> 0 </div> </td> 
      </tr> 
      <tr> 
       <td> 
        <div id="divOp" style="background-color:gray; display:inline;"> + </div> </td> 
       <td> 
        <div id="divNumB" style="background-color:gray;text-align:right;width:200px;"> 0 </div> </td> 
      </tr> 
      <tr> 
       <td colspan="2"> 
        <div id="divHr" style=" height:10px;"> 
         <hr /> 
        </div> </td> 
      </tr> 
      <tr> 
       <td colspan="2" style="text-align:right"> <input type="text" id="txtNumAnswer" onkeyup="fnAfterInputAnswer(event)" style=" height:40px;font-size:36pt;text-align:right;letter-spacing:8px;width:310px;" value="" /> <input type="text" id="txtNumAnswerRTL" onkeyup="fnAfterInputAnswer(event)" style=" height:40px;font-size:36pt;text-align:right;letter-spacing:8px;width:310px;direction: rtl;unicode-bidi: bidi-override;" value="" /> </td> 
      </tr> 
      <tr> 
       <td colspan="2"> <input type="button" onclick="fnEnd()" id="btnEnd" value="完成" /> <input type="button" onclick="fnNext()" id="btnEnd" value=" Enter下一題 " style="margin-left:20px; font-size:30px;" /> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
   
   
   <div id="divResultReport" style="display:none;width:325px; padding:5px;border:1px solid green;"> 
    <div id="divResult"> 
    </div> 
    <br /> 
    <input type="button" onclick="fnReStart()" id="btnReStart" value="restart 從新開始" style="margin-left:50px; font-size:30px;" /> 
    <br>
    <br>
    <div style="text-align:center">
        <a href="http://www.cnblogs.com/freeliver54" target="_blank">edit by freeliver54</a>
    </div>
   </div> 
   
   
  </form>  
 </body>
</html>