ドラッグ アンド ドロップやマッチング質問をオンライン クイズに追加する方法

オンライン質問回答にドラッグ アンド マッチング質問を追加する方法

現代の教育では、オンライン質問回答が一般的に使用される教育方法になっています。学生の参加力と思考力を向上させるために、オンラインの回答プロセスにドラッグ アンド ドロップやマッチング質問を追加することで、学生が回答プロセス中により積極的に参加し、考えることができるようになります。この記事では、HTML、CSS、JavaScript を使用して、質問のドラッグ アンド ドロップとマッチングを実装する方法を紹介します。

1. 質問のドラッグ アンド ドロップの実装

トピック ドラッグとは、質問の選択肢を対応する位置にドラッグすることを意味します。この機能を実現するには、HTML5 のドラッグ アンド ドロップ API を使用できます。まず、HTML でドラッグ ソースとドラッグ ターゲットを作成する必要があります。例:

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

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

このうち、draggable="true" はこの要素がドラッグ可能であることを意味し、ondrop と ondragover はドラッグ対象に必要なイベント処理関数です。対応する JavaScript コードは次のとおりです。

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

このようにして、生徒がドラッグ ソースをドラッグ ターゲットにドラッグすると、ドラッグ ターゲットにはドラッグ ソースのコンテンツが表示されます。このようにして、質問のオプションをドラッグ アンド ドロップできます。

2. 質問マッチングの実装

トピックマッチングとは、質問と回答をマッチングすることです。 HTML と JavaScript を使用してこの機能を実現できます。まず、質問と回答のリストを作成する必要があります。例:

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

次に、ドラッグ イベントと照合ロジックを処理する JavaScript コードを記述する必要があります:

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

上記のコードを通じて、質問と回答を照合して質問を達成できます。マッチ機能。

概要

HTML、CSS、JavaScript を使用することで、オンラインの回答質問にドラッグ アンド ドロップやマッチング質問を追加できるため、学生の参加力と思考力が向上します。具体的なコード例は上に示していますが、ニーズに応じて対応する変更を加えるだけで、さまざまなタイプのドラッグ アンド マッチの質問を実現できます。この記事がお役に立てば幸いです。

以上がドラッグ アンド ドロップやマッチング質問をオンライン クイズに追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。