设置 .draggable 还原按元素 ID 还原

Question

好吧，我不知道这是否可能，但看起来应该。

我有一堆数学表达式(3+2.2 5.2+2.3...(和一堆答案，都在可拖动的"卡片"中。它们都是可拖动的，并且有一列，学生将在其中放下试图匹配表达式和答案的卡片。

所以我需要验证答案是否正确，如果是这样，则禁用可拖动和可放置，如果不是，两张卡都必须从 revert false 更改为 true。当前正在丢弃的卡在ui.draggable.draggable('option', 'revert', false);上工作正常，但即使使用其他卡 ID，我也无法将恢复值更改为 true ($(saveID).draggable('option', 'revert', false); (。

每个卡和可放置插槽都有一个数据集，卡数据和 id 保存在一个数组中。

可丢弃项设置为分别接受表达式卡和答案卡中的任何div，并且 drop 中有一个函数可以验证。

这足以理解问题吗？ ：x

Answer 1

下面是一个示例，该示例还执行数学运算以确定答案。聪明的应试者可能会查看源代码，以了解代码中是否隐藏了一组答案。

.HTML

<div class="ui-widget questions">
  <div class="ui-widget-header">
    1. Math
  </div>
  <div class="ui-widget-content">
    <h5>Question</h5>
    <div class="card addend">
      3
    </div>
    <div class="card operator plus">
      +
    </div>
    <div class="card addend">
      2.2
    </div>
    <div class="card operator equal">
      =
    </div>
    <div class="card unanswered">
      &nbsp;
    </div>
    <h5>Answers</h5>
    <div class="card answer">
      4.5
    </div>
    <div class="card answer">
      3.2
    </div>
    <div class="card answer">
      5.2
    </div>
    <div class="card answer">
      5.5
    </div>
  </div>
  <div class="ui-widget-header">
    2. Math
  </div>
  <div class="ui-widget-content">
    <h5>Question</h5>
    <div class="card addend">
      5.2
    </div>
    <div class="card operator plus">
      +
    </div>
    <div class="card addend">
      2.3
    </div>
    <div class="card operator equal">
      =
    </div>
    <div class="card unanswered">
      &nbsp;
    </div>
    <h5>Answers</h5>
    <div class="card answer">
      6.5
    </div>
    <div class="card answer">
      8.2
    </div>
    <div class="card answer">
      7.2
    </div>
    <div class="card answer">
      7.5
    </div>
  </div>
</div>

JavaScript

function checkAnswer(a1, a2, op, answer) {
  console.log(a1, op, a2, "=", answer);
  var sum;
  var ops = {
    "+": function(a, b) {
      return a + b;
    },
    "-": function(a, b) {
      return a - b;
    },
    "*": function(a, b) {
      return a * b;
    },
    "/": function(a, b) {
      return a / b;
    }
  }
  sum = ops[op](a1, a2);
  console.log(sum);
  return (sum == answer);
}
$(function() {
  $(".answer").draggable({
    revert: true,
    containment: "parent"
  });
  $(".unanswered").droppable({
    accept: ".answer",
    drop: function(event, ui) {
      var q = $(this).parent();
      var add1 = parseFloat(q.find(".addend").eq(0).html());
      var add2 = parseFloat(q.find(".addend").eq(1).html());
      var op1 = q.find(".operator").eq(0).html().trim();
      var ans = parseFloat(ui.draggable.html());
      var success = checkAnswer(add1, add2, op1, ans);
      if (success) {
        q.find(".unanswered").html(ans).toggleClass("unanswered answered");
        q.find(".answer").draggable("destroy").css({
          background: "#eee",
          color: "#ccc"
        });
      } else {
        return false;
      }
    }
  });
});

工作示例：https://jsfiddle.net/Twisty/prc8tzw5/

这里true还原，您可以看到在 drop 中，如果答案正确，它会将其附加到卡片中。它还禁用了答案上的可拖动，以便用户知道他们已经完成了问题。