Heim > Backend-Entwicklung > PHP-Tutorial > So fügen Sie Drag-and-Drop- und passende Fragen zu Online-Tests hinzu

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

PHPz
Freigeben: 2023-09-26 13:34:01
Original
1124 Leute haben es durchsucht

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>
Nach dem Login kopieren

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

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>
Nach dem Login kopieren

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);
  }
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage