Comment implémenter la fonction d'invite d'erreur dans les réponses aux questions en ligne

Comment implémenter la fonction d'invite d'erreur dans les réponses aux questions en ligne

Les réponses aux questions en ligne sont devenues une partie importante de l'éducation moderne, et les tests et examens pour les étudiants sont mis en œuvre grâce à la technologie Internet. Et même dans les questions à choix multiples, les élèves peuvent toujours se tromper de question. Afin d'aider les étudiants à mieux comprendre et corriger les erreurs, nous pouvons utiliser la technologie de programmation pour ajouter une fonction d'invite d'erreur. Cet article expliquera comment utiliser HTML, CSS et JavaScript pour réaliser cette fonction et fournira des exemples de code spécifiques.

Tout d'abord, nous avons besoin d'un formulaire HTML pour afficher les questions et les options, et d'ajouter un écouteur d'événement pour chaque option afin de déclencher une invite d'erreur lorsque les étudiants répondent. Voici un exemple simple de structure 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>

Ensuite, nous pouvons utiliser des styles CSS pour définir l'apparence et les effets d'animation des invites d'erreur afin d'attirer l'attention des étudiants. L'exemple de code CSS suivant montre comment ajouter une bordure rouge au message d'erreur et implémenter une simple animation de fondu :

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

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

En JavaScript, nous pouvons ajouter un écouteur d'événement de clic au bouton de soumission afin que lorsque vous cliquez sur le bouton de soumission, vérifiez l'étudiant répondez au fur et à mesure et ajoutez ou supprimez des messages d’erreur en fonction des résultats.

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

Dans le code ci-dessus, nous passons d'abord la classe querySelector方法找到选择题的父级元素，并为其添加或移除error pour déclencher l'effet d'invite d'erreur défini en CSS. La bonne réponse est jugée en vérifiant la valeur de l'option sélectionnée.

Pour résumer, en utilisant HTML, CSS et JavaScript, nous pouvons facilement implémenter la fonction d'invite d'erreur dans les réponses aux questions en ligne. Les exemples de code fournis ci-dessus peuvent être utilisés comme point de départ et peuvent être modifiés et étendus si nécessaire pour s'adapter à différentes logiques de vérification des questions et réponses. J'espère que cet article vous aidera à implémenter cette fonctionnalité !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!