Bagaimana untuk menambah soalan seret dan lepas dan sepadan pada kuiz dalam talian

Cara menambah soalan menyeret dan memadankan kepada soalan menjawab dalam talian

Dalam pendidikan moden, soalan menjawab dalam talian telah menjadi kaedah pengajaran yang biasa digunakan. Bagi meningkatkan penyertaan dan keupayaan berfikir pelajar, kami boleh menambah soalan seret dan lepas dan padan pada proses menjawab dalam talian, supaya pelajar boleh mengambil bahagian dan berfikir dengan lebih aktif semasa proses menjawab. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan JavaScript untuk melaksanakan drag-and-drop dan padanan soalan.

1. Pelaksanaan penyeretan soalan

Seretan topik bermaksud menyeret pilihan soalan ke kedudukan yang sepadan. Kami boleh menggunakan API Seret dan Lepas HTML5 untuk mencapai fungsi ini. Pertama, kita perlu mencipta sumber seret dan sasaran seret dalam HTML. Contohnya:

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

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

Antaranya, draggable="true" bermaksud elemen ini boleh diseret, ondrop dan ondragover adalah fungsi pengendalian acara yang diperlukan untuk sasaran seretan. Berikut ialah kod JavaScript yang sepadan:

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

Dengan cara ini, apabila pelajar menyeret sumber seret ke sasaran seret, sasaran seret akan memaparkan kandungan sumber seretan. Dengan cara ini, kita boleh seret dan lepaskan pilihan soalan.

2. Pelaksanaan padanan soalan

Padanan topik bermaksud padanan soalan dan jawapan. Kita boleh menggunakan HTML dan JavaScript untuk mencapai fungsi ini. Pertama, kita perlu membuat senarai soalan dan jawapan. Contohnya:

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

Kemudian, kita perlu menulis kod JavaScript untuk mengendalikan peristiwa seretan dan logik yang sepadan:

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

Melalui kod di atas, kita boleh mencapai fungsi pemadanan soalan dengan memadankan soalan dan jawapan.

Ringkasan

Dengan menggunakan HTML, CSS dan JavaScript, kami boleh menambah soalan drag-and-drop dan padanan pada soalan jawapan dalam talian, dengan itu meningkatkan penyertaan dan kemahiran berfikir pelajar. Contoh kod khusus diberikan di atas Anda hanya perlu membuat pengubahsuaian yang sepadan mengikut keperluan anda untuk merealisasikan pelbagai jenis soalan seret dan padan. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci Bagaimana untuk menambah soalan seret dan lepas dan sepadan pada kuiz dalam talian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!