オンライン質問回答にエラープロンプト機能を実装する方法

オンライン質問回答にエラー プロンプト機能を実装する方法

オンライン質問回答は現代の教育の重要な部分となっており、学生向けのテストや試験は次のような方法で実施されています。インターネット技術。また、多肢選択問題であっても、生徒が質問を間違える可能性があります。学生がエラーをよりよく理解し、修正できるようにするために、プログラミング技術を使用してエラー プロンプト機能を追加できます。この記事では、HTML、CSS、JavaScript を使用してこの機能を実現する方法と、具体的なコード例を紹介します。

まず、質問と選択肢を表示する HTML フォームが必要です。また、学生が回答したときにエラー プロンプトをトリガーするために、各選択肢にイベント リスナーを追加します。以下は簡単な HTML 構造の例です:

<form>
  <p>1. 以下哪个不是一种编程语言？</p>
  <input type="radio" name="question1" value="A"> A. HTML<br>
  <input type="radio" name="question1" value="B"> B. CSS<br>
  <input type="radio" name="question1" value="C"> C. JavaScript<br>
  <input type="radio" name="question1" value="D"> D. SQL<br>
  <button type="submit">提交</button>
</form>

次に、CSS スタイルを使用して、生徒の注意を引くエラー プロンプトの外観とアニメーション効果を定義できます。次の CSS コード例は、エラー メッセージに赤い枠線を追加し、単純なフェード アニメーションを実装する方法を示しています。

.error {
  border: 2px solid red;
  animation: fade 1s infinite;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

JavaScript では、送信ボタンにクリック イベント リスナーを追加して、いつ生徒の回答を確認できるようにすることができます。送信ボタンをクリックし、結果に基づいてエラー メッセージを追加または削除します。

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单的默认提交行为

  var selectedOption = document.querySelector('input[name="question1"]:checked');

  if (selectedOption === null || selectedOption.value !== 'A') {
    selectedOption.parentElement.classList.add('error');
  } else {
    selectedOption.parentElement.classList.remove('error');
  }
});

上記のコードでは、まず querySelector メソッドを通じて多肢選択質問の親要素を検索し、error クラスを追加または削除して、 CSS で定義されたエラー プロンプト効果。正解は、選択した選択肢の値を確認することで判定されます。

要約すると、HTML、CSS、JavaScript を使用することで、オンラインでの質問回答にエラー プロンプト機能を簡単に実装できます。上記のコード例は出発点として使用でき、さまざまな質問と回答の検証ロジックに対応するために必要に応じて変更および拡張できます。この記事がこの機能の実装に役立つことを願っています。

以上がオンライン質問回答にエラープロンプト機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。