1. 程式人生 > >JavaScript實現一個線上做題測試網頁

JavaScript實現一個線上做題測試網頁

很簡單的一個需求,看一下完成的效果圖;



接下來是程式碼

<!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>


妥了