Bagaimana untuk melaksanakan fungsi gesaan ralat dalam menjawab soalan dalam talian

Cara melaksanakan fungsi gesaan ralat dalam menjawab soalan dalam talian

Soalan menjawab dalam talian telah menjadi bahagian penting dalam pendidikan moden, dan ujian serta peperiksaan untuk pelajar dilaksanakan melalui teknologi Internet. Dan walaupun dalam soalan aneka pilihan, pelajar mungkin masih mendapat soalan yang salah. Untuk membantu pelajar lebih memahami dan membetulkan ralat, kami boleh menggunakan teknologi pengaturcaraan untuk menambah fungsi gesaan ralat. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan JavaScript untuk mencapai fungsi ini, dan memberikan contoh kod khusus.

Pertama, kami memerlukan borang HTML untuk memaparkan soalan dan pilihan, dan menambah pendengar acara untuk setiap pilihan untuk mencetus gesaan ralat apabila pelajar menjawab. Berikut ialah contoh struktur HTML yang mudah:

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

Seterusnya, kita boleh menggunakan gaya CSS untuk menentukan penampilan dan kesan animasi gesaan ralat untuk menarik perhatian pelajar. Contoh kod CSS berikut menunjukkan cara menambah sempadan merah pada mesej ralat dan melaksanakan animasi pudar mudah:

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

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

Dalam JavaScript, kami boleh menambah pendengar acara klik pada butang hantar supaya apabila butang hantar diklik Semak pelajar menjawab semasa anda pergi dan menambah atau mengalih keluar mesej ralat berdasarkan keputusan.

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

Dalam kod di atas, kami mula-mula lulus kelas querySelector方法找到选择题的父级元素，并为其添加或移除error untuk mencetuskan kesan gesaan ralat yang ditakrifkan dalam CSS. Jawapan yang betul dinilai dengan menyemak nilai pilihan yang dipilih.

Ringkasnya, dengan menggunakan HTML, CSS dan JavaScript, kami boleh melaksanakan fungsi gesaan ralat dengan mudah dalam menjawab soalan dalam talian. Contoh kod yang disediakan di atas boleh digunakan sebagai titik permulaan dan boleh diubah suai dan dilanjutkan mengikut keperluan untuk menampung logik pengesahan soalan dan jawapan yang berbeza. Saya harap artikel ini membantu anda melaksanakan ciri ini!

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi gesaan ralat dalam menjawab soalan dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!