How to implement the error prompt function in online answering questions

How to implement the error prompt function in online answering questions

Online answering questions has become an important part of modern education, and tests and examinations for students are implemented through Internet technology. And even in multiple-choice questions, students may still get the question wrong. In order to help students better understand and correct errors, we can use programming technology to add an error prompt function. This article will introduce how to use HTML, CSS and JavaScript to achieve this function, and provide specific code examples.

First, we need an HTML form to display the questions and options, and add an event listener for each option to trigger an error prompt when students answer. The following is a simple HTML structure example:

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

Next, we can use CSS styles to define the appearance and animation effects of error prompts to attract students' attention. The following CSS code example shows how to add a red border to the error message and implement a simple fade animation:

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

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

In JavaScript, we can add a click event listener to the submit button so that Check student answers when clicking the submit button and add or remove error messages based on the results.

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');
  }
});

In the above code, we first find the parent element of the multiple choice question through the querySelector method, and add or remove the error class to trigger the CSS The error prompt effect defined in . The correct answer is judged by checking the value of the selected option.

To sum up, by using HTML, CSS and JavaScript, we can easily implement the error prompt function in online answering questions. The code examples provided above can be used as a starting point and can be modified and extended as needed to accommodate different question and answer verification logic. I hope this article helps you implement this feature!

The above is the detailed content of How to implement the error prompt function in online answering questions. For more information, please follow other related articles on the PHP Chinese website!