2

我很想知道提示机制是如何在以下 URL 中编码的，

http://www.khanacademy.org/math/arithmetic/multiplication-division/e/multiplication_3

当用户点击右侧的“我想要一个提示”按钮时。

从我目前发现的情况来看，使用了 MathJax、Raphael JavaScript Library 和 jQuery。

我的理解正确吗？如果是这样，我很想知道这一切是如何结合在一起产生美丽的交互性的，就像它在网站上所做的那样。

高度赞赏任何指针/线索/提示或示例代码。

4

1 回答 1

2

方法

代码非常庞大和复杂，但是使用浏览器内置的开发者工具，我们可以专注于点击提示按钮时发生的事情。

您可以在单击事件上放置一个断点，然后单击提示按钮并查看您在 JavaScript 中的最终位置。不过，在这种情况下，我查看了提示按钮的 id（它只是hint），并且因为我们知道该站点正在使用 jQuery，所以搜索了$("#hint").clickor的出现$('#hint').click。一共有三个，但我们想要的是这个：

... $("#hint").click(function() {
    var a = z.shift();
    if (a) {
        $(X).trigger("hintUsed"), E += 1;
        var c = z.length + " step" + (z.length === 1 ? "" : "s") + " left";
        $(this).val($(this).data("buttonText") || "I'd like another hint (" + c + ")");
        var d = $(a).parent();
        $(a).appendTo("#hintsarea").runModules(d), X.scratchpad.resize(), z.length === 0 && ($(a).addClass("final_answer"), $(X).trigger("allHintsUsed"), $(this).attr("disabled", !0));
    }
    var g = !f && e.readOnly,
        h = $("#next-question-button").is(":visible");
    !g && !h && tb("problems/" + r + "/hint", b(!1, G, "hint", (new Date).getTime()), function() {}, function() {}, "attempt_hint_queue");
}), ...

然后我们可以检查这些变量的值，进入函数等。

结果

流程是这样的：

  1. z是一个提示数组，或者更确切地说是 div，其中包含对名为showHint(). 数组中的项目数与剩余的提示数相同。
  2. 代码获取此数组中的第一个 div 并将其分配给 variable a。
  3. 计算已使用/剩余多少提示。
  4. diva附加到工作区中带有 id 的空 div hintsarea。
  5. div 中的 JavaScripta被执行：showHint().
  6. showHint()执行构成提示的附加计算并为数字和符号添加颜色。

MathJax 用于这种格式。如果您使用开发人员工具检查 DOM，您会看到每个数字和符号都包含在几个动态创建的 span 中，以控制位置和样式。

关于拉斐尔，在这种情况下，它仅用于绘制总和中的水平线。不过，对于其他问题，我认为它用于绘制可以拖动的图像和对象。

顺便说一句，当单击提示按钮时，还会向服务器发送一个 XHR 请求，但这似乎不会影响用户的功能。它只是将统计数据发送回可汗学院，我假设他们将其用于监控和改进功能。

于 2012-11-12T02:36:39.797 回答