JavaScript實現一個線上做題測試網頁
阿新 • • 發佈：2019-02-03
很簡單的一個需求,看一下完成的效果圖;
接下來是程式碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>text online</title> <meta http-equiv="content-type" content="txt/html; charset=utf-8" /> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <script language="javascript"> function two_char(n) { return n >= 10 ? n : "0" + n; } function time_fun() { var sec=0; setInterval(function () { sec++; var date = new Date(0, 0) date.setSeconds(sec); var h = date.getHours(), m = date.getMinutes(), s = date.getSeconds(); document.getElementById("mytime").innerText = two_char(h) + ":" + two_char(m) + ":" + two_char(s); }, 1000); } function main(){ var questionArray = new Array("Q1","Q2","Q3","Q4","Q5"); var resultArray = new Array(); var rightArray = new Array(); //aryAns[]是從後端返回的陣列,當點選交卷的時候,向後端請求正確答案的陣列,賦值給aryAns[]即可; var aryAns = new Array(4,3,4,3,2); //建立儲存正確答案的陣列 for (var i = 0; i < questionArray.length; i++) { if (Name(questionArray[i])!=10) { resultArray[i] = Name(questionArray[i]); }else{ alert("第"+(i+1)+"題,您未作答!!"); return false; } } var right_number= 0;//計算答對的題數； for (var i = 0; i < questionArray.length; i++) { if (aryAns[i]==resultArray[i]) { right_number++; rightArray[i] = 1; }else{ rightArray[i] = 0; } } var right_question = " "; var error_question = " "; for (var i = 0; i < rightArray.length; i++) { if (rightArray[i] ==1 ) { right_question += i+1+","; }else{ error_question += i+1+","; } } var time=document.getElementById("mytime").innerHTML; document.getElementById("right_number").innerText = right_number; document.getElementById("time").innerText = time; if (right_question!=" ") { document.getElementById("right_question").innerText = right_question; } if (error_question!=" ") { document.getElementById("error_question").innerText = error_question; } }; function Name(name) { var temp = document.getElementsByName(name); var intHot = 9; for(var i=0;i<temp.length;i++) { if(temp[i].checked) intHot = temp[i].value; } if (intHot==9) { return 10; } return intHot; }; </script> <body onload="time_fun()" style="padding:80px; "> <center> <font size="6" color="green"><b>線上檢測</b></font> <h1>測試已開始 請開始作答 <span id="mytime">00:00:00</span></h1> </center><br> <hr> <!-- 下面表單將以post的方法，將資料傳遞給Text --> <!-- 第一道題 --> <p>1.在某次稅務檢查後，四個工商管理人員各自做出了結論。<br> 甲說;”所有個體戶都沒納稅。”。乙說：”服裝個體戶陳老闆沒納稅。”<br> 丙說：”個體戶不都沒稅”，丁說：”有的個體戶沒稅”<br> 如果四個人中只有一個斷定屬實，那麼以下哪項是真的？（）</p> <p> <input type="radio" name="Q1" value="1">丁斷定屬實，但陳老闆納了稅。<br> <input type="radio" name="Q1" value="2">甲斷定屬實，陳老闆沒有納稅。<br> <input type="radio" name="Q1" value="3">乙斷定屬實，陳老闆沒有納稅。<br> <input type="radio" name="Q1" value="4">丙斷定屬實，但陳老闆沒有納稅。<br> <!-- D --> </p> <p>2.有A,B,C三個學生，一個出生在北京，一個出生在上海，一個出生在廣州。<br> 他們中一個學物理專業，一個學數學專業，一個學計算機。<br> 其中（1）A不是學物理的，B不是學計算機的；（2）學物理的不出生在上海；<br> （3）學計算機的出生在北京；（4）B不出生在廣州。請根據上述條件，判斷A的專業（）。</p> <p> <input type="radio" name="Q2" value="1">物理<br> <input type="radio" name="Q2" value="2">數學<br> <input type="radio" name="Q2" value="3">計算機<br> <!-- C --> <input type="radio" name="Q2" value="4">3種都有可能<br> </p> <p>3.杜麗去巴西出差，結果面板變黑了。<br> 杜麗去泰國出差，結果面板也變黑了。<br> 杜麗去新加坡出差，結果面板也變黑了。<br> 由此可知，杜麗一出差就會變黑。<br> 下面哪一個選項是對上述推理的恰當評價？</p> <p> <input type="radio" name="Q3" value="1">沒道理，因為可能杜麗面板本來就很黑<br> <input type="radio" name="Q3" value="2">有道理，上述推理採用了求同法找因果關係<br> <input type="radio" name="Q3" value="3">有道理，三次出差無一例外的都變黑，很能說明問題<br> <input type="radio" name="Q3" value="4">沒道理，三次出差的地點都在熱帶，強烈光照是杜麗變黑我的主要原因<br> <!-- D --> </p> <p>4.一個長方體形狀的盒子長、寬、高分別為20釐米、8釐米和2釐米。<br> 現在要用一張紙將其六個面完全包裹起來，要求從紙上剪下的部分不得用作貼補<br> 請問這張紙的大小可能是下列哪一個?( )</p> <p> <input type="radio" name="Q4" value="1">長25cm，寬17cm<br> <input type="radio" name="Q4" value="2">長26cm，寬14cm<br> <input type="radio" name="Q4" value="3">長24cm，寬21cm<br> <!-- C --> <input type="radio" name="Q4" value="4">長24cm，寬14cm<br> </p> <p>5.找規律 1, 32, 81, 64, 25, ( ), 1</p> <p> <input type="radio" name="Q5" value="1">5 <input type="radio" name="Q5" value="2">6 <!-- B --> <input type="radio" name="Q5" value="3">10 <input type="radio" name="Q5" value="4">12 </p> <button onclick="javascript:main();">交卷</button> <h3> 五道題中您一共答對了<font color="red"><span id="right_number"></font>題， 花了<font color="red"><span id="time"></span></font>秒 <br> 正確的題目有:<span id="right_question" style="color:red"></span> <br> 錯誤的題目有:<span id="error_question" style="color:red"></span> </h3> </body> </html>
妥了