オンラインでの回答の限られた時間設定質問：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;
// 制限時間を設定します，2番単位のユニット
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 + "2番";
}
// 提出する答案
function submitAnswer() {
  var answer = document.querySelector('input[name="option"]:checked').value;
  // 提出する答案的相关处理
  // ...
}
</script>

カウントダウンを表示します

応答ページに要素を追加して、残りの時間を表示します。

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

上記のコードは、残りの時間を1秒ごとに短縮し、ページのカウントダウンディスプレイをリアルタイムで更新します。

答えを送信してください

[送信]ボタンのクリックイベントでは、回答を送信する関数が呼び出され、ユーザーが選択したオプションを取得し、関連する処理を実行します。

要約します

上記の手順を通じて、オンライン応答システムで時間制限された回答機能を簡単に設定できます。ページがロードされると、カウントダウンが開始され、時間が到達した後に回答が自動的に送信され、カウントダウンもリアルタイムでページに表示されます。実際のニーズに応じて、一時停止ボタンやリセットボタンなど、より多くの関数をシステムに追加することもできます。

この記事が、オンライン応答システムを開発する際に時間制限のある回答機能を実現し、システムの公平性と標準化を改善できることを願っています。