So fügen Sie Drag-and-Drop- und passende Fragen zu Online-Tests hinzu

So fügen Sie Drag-and-Match-Fragen zur Online-Beantwortung von Fragen hinzu

In der modernen Bildung ist die Online-Beantwortung von Fragen zu einer häufig verwendeten Lehrmethode geworden. Um die Teilnahme- und Denkfähigkeit der Schüler zu verbessern, können wir Drag-and-Drop- und Matching-Fragen zum Online-Antwortprozess hinzufügen, sodass die Schüler während des Antwortprozesses aktiver teilnehmen und nachdenken können. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und JavaScript Drag-and-Drop und den Abgleich von Fragen implementieren.

1. Implementierung des Fragenziehens

Themenziehen bedeutet, dass die Fragenoptionen an die entsprechende Position gezogen werden. Wir können die Drag-and-Drop-API von HTML5 verwenden, um diese Funktionalität zu erreichen. Zuerst müssen wir die Drag-Quelle und das Drag-Ziel in HTML erstellen. Zum Beispiel:

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

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

Draggable = „true“ bedeutet, dass dieses Element gezogen werden kann. Ondrop und Ondragover sind die für das Drag-Ziel erforderlichen Ereignisbehandlungsfunktionen. Das Folgende ist der entsprechende JavaScript-Code:

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; // 将数据放置到拖拽目标中
}

Wenn Schüler also die Drag-Quelle auf das Drag-Ziel ziehen, zeigt das Drag-Ziel den Inhalt der Drag-Quelle an. Auf diese Weise können wir Frageoptionen per Drag & Drop verschieben.

2. Umsetzung des Fragen-Matchings

Themen-Matching bedeutet Matching von Fragen und Antworten. Wir können HTML und JavaScript verwenden, um diese Funktionalität zu erreichen. Zuerst müssen wir eine Liste mit Fragen und Antworten erstellen. Zum Beispiel:

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

Dann müssen wir JavaScript-Code schreiben, um Drag-Ereignisse und die Matching-Logik zu verarbeiten:

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

Durch den obigen Code können wir die Frage-Matching-Funktion erreichen, indem wir Fragen und Antworten abgleichen.

Zusammenfassung

Durch die Verwendung von HTML, CSS und JavaScript können wir den Online-Antwortfragen Drag-and-Drop- und Matching-Fragen hinzufügen und so die Teilnahme- und Denkfähigkeiten der Schüler verbessern. Oben finden Sie spezifische Codebeispiele. Sie müssen lediglich entsprechende Änderungen entsprechend Ihren Anforderungen vornehmen, um verschiedene Arten von Drag-and-Match-Fragen zu realisieren. Ich hoffe, dieser Artikel ist hilfreich für Sie.

Das obige ist der detaillierte Inhalt vonSo fügen Sie Drag-and-Drop- und passende Fragen zu Online-Tests hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!