Comment ajouter des questions par glisser-déposer et correspondantes aux quiz en ligne

Comment ajouter des questions glisser-déposer aux questions de réponse en ligne

Dans l'éducation moderne, la réponse aux questions en ligne est devenue une méthode d'enseignement couramment utilisée. Afin d'améliorer la participation et la capacité de réflexion des étudiants, nous pouvons ajouter des questions par glisser-déposer et correspondantes au processus de réponse en ligne, afin que les étudiants puissent participer et réfléchir plus activement pendant le processus de réponse. Cet article expliquera comment utiliser HTML, CSS et JavaScript pour implémenter le glisser-déposer et la correspondance de questions.

1. Implémentation du glisser-déposer de questions

Le glisser-sujet signifie faire glisser les options de question vers la position correspondante. Nous pouvons utiliser l’API Drag and Drop de HTML5 pour obtenir cette fonctionnalité. Tout d’abord, nous devons créer la source du glisser et la cible du glisser en HTML. Par exemple :

<!-- 拖拽源 -->
<div draggable="true">
  这是问题的选项一
</div>

<!-- 拖拽目标 -->
<div ondrop="drop(event)" ondragover="allowDrop(event)">
  这是问题的答案一
</div>

Parmi eux, draggable="true" signifie que cet élément peut être glissé, ondrop et ondragover sont les fonctions de gestion d'événements requises pour la cible du glisser. Voici le code JavaScript correspondant :

function allowDrop(event) {
  event.preventDefault(); // 阻止浏览器默认处理拖拽事件
}

function drag(event) {
  event.dataTransfer.setData("text", event.target.innerHTML); // 将拖拽元素的数据保存到dataTransfer对象中
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text"); // 获取拖拽元素的数据
  event.target.innerHTML = data; // 将数据放置到拖拽目标中
}

De cette façon, lorsque les élèves font glisser la source de déplacement vers la cible de déplacement, la cible de déplacement affichera le contenu de la source de déplacement. De cette façon, nous pouvons glisser et déposer les options de questions.

2. Mise en œuvre de la correspondance de questions

La correspondance de sujets signifie faire correspondre les questions et les réponses. Nous pouvons utiliser HTML et JavaScript pour réaliser cette fonctionnalité. Tout d’abord, nous devons créer une liste de questions et de réponses. Par exemple :

<ul id="questions">
  <li draggable="true" ondragstart="drag(event)">问题一</li>
  <li draggable="true" ondragstart="drag(event)">问题二</li>
  ...
</ul>

<ul id="answers">
  <li ondrop="drop(event)" ondragover="allowDrop(event)">答案一</li>
  <li ondrop="drop(event)" ondragover="allowDrop(event)">答案二</li>
  ...
</ul>

Ensuite, nous devons écrire du code JavaScript pour gérer les événements de glisser et la logique de correspondance :

function allowDrop(event) {
  event.preventDefault();
}

function drag(event) {
  event.dataTransfer.setData("text", event.target.innerHTML);
}

function drop(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData("text");

  if (event.target.parentNode.id === "answers") {
    // 将答案放置到问题下面
    var question = document.createElement("li");
    question.innerHTML = data;
    question.draggable = true;
    question.ondragstart = drag;
    event.target.appendChild(question);
  } else if (event.target.parentNode.id === "questions") {
    // 将问题放置到答案下面
    var answer = document.createElement("li");
    answer.innerHTML = data;
    answer.ondrop = drop;
    answer.ondragover = allowDrop;
    event.target.appendChild(answer);
  }
}

Grâce au code ci-dessus, nous pouvons réaliser la fonction de correspondance de questions en faisant correspondre les questions et les réponses.

Résumé

En utilisant HTML, CSS et JavaScript, nous pouvons ajouter des questions par glisser-déposer et correspondantes aux questions à réponse en ligne, améliorant ainsi la participation et les capacités de réflexion des étudiants. Des exemples de code spécifiques sont donnés ci-dessus. Il vous suffit d'apporter les modifications correspondantes en fonction de vos besoins pour réaliser différents types de questions glisser-déposer. J'espère que cet article vous sera utile.

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!