온라인 답변 질문에 오류 프롬프트 기능을 구현하는 방법

온라인 답변 문제에서 오류 프롬프트 기능을 구현하는 방법

온라인 답변 문제는 현대 교육에서 중요한 부분이 되었으며 학생들을 위한 시험과 시험은 인터넷 기술을 통해 구현됩니다. 그리고 객관식 문제에서도 학생들은 여전히 ​​문제를 틀릴 수 있습니다. 학생들이 오류를 더 잘 이해하고 수정할 수 있도록 프로그래밍 기술을 사용하여 오류 프롬프트 기능을 추가할 수 있습니다. 이 기사에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!