拖放问题 II

Question

我需要澄清拖放（测验类型模块）。已经问过同样的问题，但这次是即兴版本。

我正在使用 jqueryUI 创建测验类型的问题。当我将正确答案（第三个）拖放到可放置区域并单击检查时，它应该变成绿色并显示一个勾号。其余选项，它应该变成红色并显示错误的符号。现在它正在部分工作。 谁能帮我解决这个问题？

我的代码-https://codepen.io/vimalraj86/pen/zYGoPag

我的逻辑：

JQUERY 用户界面： 如果 { 将 c 拖放到可放置区域。 在可放置区域“.正确”上添加类 别的{ 将可放置区域上的类添加为“.wrong” } }

JQUERY： 如果#droppable hasClass() 正确，则显示#tick。 否则显示#wrong。

$(function() {

  $("div[id^='draggable']").draggable();
  $("#droppable").droppable({
    drop: function(event, ui) {
      if (ui.draggable.text().trim() == "C") {
        $(this).addClass("ui-state-green")

      } else {
        $(this).addClass("ui-state-red")
      }
    }
  });
});

$(document).ready(function(){
  $("check").click(function(){
    $(this).show();
  });
});

Answer 1

考虑下面的代码。

$(function() {
  function checkAnswer(e) {
    var a = $(".answered .ui-widget-content");
    if (a.length == 1 && a.text().trim() == "C") {
      $(".answered").removeClass("ui-state-red").addClass("ui-state-green");
    } else {
      $(".answered").removeClass("ui-state-green").addClass("ui-state-red");
    }
  }

  function resetQuestion() {
    $(".ui-widget-header").removeClass("answered ui-state-red ui-state-green");
    $(".ui-widget-header .ui-widget-content").each(function(i, el) {
      var i = parseInt($(el).attr("id").slice(-1));
      var me = $(el).detach();
      console.log(i, me);
      if (i == 0) {
        me.prependTo($(".answers"));
      } else {
        me.insertAfter($(".answers").children().eq((i - 1)));
      }
    });
  }

  $("[id^='draggable']").draggable({
    revert: "invalid"
  });
  $("#droppable").droppable({
    drop: function(event, ui) {
      ui.draggable.detach().css({
        left: "",
        top: ""
      }).appendTo($(this));
      $(this).addClass("answered");
      $(".buttons").show();
    }
  });

  $("#check").click(checkAnswer);
  $("#reset").click(resetQuestion);
});

#draggable-0,
#draggable-1,
#draggable-2,
#draggable-3 {
  width: 100px;
  height: 100px;
  padding: 0.5em;
  margin: 10px 10px 10px 0;
  border: 1px solid #ccc;
  background: #fff;
  float: left;
}

hr {
  float: left;
  width: 100%;
  background: #ccc;
}

#droppable {
  width: 400px;
  height: 150px;
  padding: 0.5em;
  float: left;
  margin: 10px;
  border: 1px solid #ccc;
  background: #fff;
}

#droppable.ui-state-green {
  background: green;
}

#droppable.ui-state-red {
  background: #ff0000;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <div id="droppable" class="ui-widget-header"></div>
  <hr/>
  <div class="answers">
    <div id="draggable-0" class="ui-widget-content">
      <p>A</p>
    </div>
    <div id="draggable-1" class="ui-widget-content">
      <p>B</p>
    </div>
    <div id="draggable-2" class="ui-widget-content">
      <p>C</p>
    </div>
    <div id="draggable-3" class="ui-widget-content">
      <p>D</p>
    </div>
  </div>
  <div class="buttons" style="display: none;">
    <button id="reset" href="">reset</button>
    <button id="check" href="">check</button>
  </div>
</div>

下面是这段代码背后的逻辑：

• 用户将图块从答案拖到字段中
• 出现重置和检查按钮
• 用户可以单击重置或单击
  • 重置将清除所有颜色并将图块按顺序移回
  • 检查将指示字段中的图块是否正确

最好尝试将可重复的脚本移动到函数中，以便它们可以经常使用。

对于 Droppable，在 drop 中，您需要执行更多步骤以确保可拖动对象现在是可放置对象的子对象。