온라인 퀴즈에 드래그 앤 드롭 및 매칭 질문을 추가하는 방법

온라인 답변 질문에 드래그 앤 매치 질문을 추가하는 방법

현대 교육에서 온라인 답변 질문은 일반적으로 사용되는 교육 방법이 되었습니다. 학생들의 참여와 사고력을 향상시키기 위해 온라인 답변 과정에 드래그 앤 드롭과 매칭 질문을 추가하여 학생들이 답변 과정에서 보다 적극적으로 참여하고 생각할 수 있도록 할 수 있습니다. 이 기사에서는 HTML, CSS 및 JavaScript를 사용하여 드래그 앤 드롭 및 질문 매칭을 구현하는 방법을 소개합니다.

1. 질문 드래그 구현

주제 드래그는 질문 옵션을 해당 위치로 드래그하는 것을 의미합니다. 이 기능을 구현하려면 HTML5의 Drag and Drop 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!