通过元素 id 设置 .draggable 还原

Question

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

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

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

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

droppables 被设置为分别接受来自表达式卡和答案卡的任何 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，如果答案是正确的，它会附加到卡片上。它还禁用了答案的可拖动功能，以便用户知道他们已经完成了问题。