在線答題限時設置：如何通過PHP與JavaScript實現答題計時功能

M66 2025-07-29

如何設置在線答題限時

隨著互聯網的普及，越來越多的教育機構和企業開始採用在線答題進行知識測試與選拔。為了保證答題的公平性，設置答題限時成為必要的步驟。本文將介紹如何在在線答題系統中實現答題限時功能。

答題頁面的創建

首先，創建一個包含題目、選項和提交按鈕等元素的答題頁面。以下是一個簡單的HTML結構：

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>在線答題</title>
  </head>
  <body>
    <h1>答題題目</h1>
    <form id="answerForm">
      <input type="radio" name="option" value="option1">選項1<br>
      <input type="radio" name="option" value="option2">選項2<br>
      <input type="radio" name="option" value="option3">選項3<br>
      <input type="radio" name="option" value="option4">選項4<br>
    </form>
    <button id="submitBtn">提交</button>
  </body>
</html>

添加答題限時功能

使用JavaScript來實現答題限時功能。通過設置定時器來實現倒計時，並在時間到達時自動提交答案。以下是相關的JavaScript代碼：

 <script>
// 計時器
var timer;
// 設置限時，單位為秒
var timeLimit = 60;
// 頁面加載完成後開始計時
window.onload = function() {
  startTimer();
}
// 開始計時
function startTimer() {
  timer = setInterval(function() {
    timeLimit--;
    if (timeLimit == 0) {
      clearInterval(timer);
      submitAnswer();
    }
    updateTimer();
  }, 1000);
}
// 更新計時器显示
function updateTimer() {
  document.getElementById("timer").innerHTML = "剩餘時間：" + timeLimit + "秒";
}
// 提交答案
function submitAnswer() {
  var answer = document.querySelector('input[name="option"]:checked').value;
  // 提交答案的相關處理
  // ...
}
</script>

顯示倒計時

在答題頁面中添加一個用於顯示剩餘時間的元素：

 <h2 id="timer"></h2>

以上代碼通過每秒鐘減少剩餘時間，並實時更新頁面中的倒計時顯示。

提交答案

在提交按鈕的點擊事件中，調用提交答案的函數來獲取用戶選擇的選項並進行相關處理。

總結

通過以上步驟，你可以輕鬆地在在線答題系統中設置答題限時功能。頁面加載後，倒計時將開始，時間到達後會自動提交答案，同時倒計時也會實時顯示在頁面上。根據實際需求，你還可以在系統中添加更多功能，如暫停按鈕或重置按鈕等。

希望本文能幫助你在開發在線答題系統時實現答題限時功能，提升系統的公平性與規範性！