可汗学院的提示功能是如何编码的

Question

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

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

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

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

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

非常感谢任何指针/线索/提示或示例代码。

Answer 1

方法

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

您可以在单击事件上设置断点，然后单击提示按钮，然后查看您在 JavaScript 中的最终位置。不过，在这种情况下，我查看了提示按钮的 id（它只是 hint），并且因为我们知道该站点正在使用 jQuery，所以搜索了 $("#hint").click 或 $('#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 并将其分配给变量 a。
3. 计算已使用/剩余的提示数。
4. div a 被附加到工作区中 ID 为 hintsarea 的空 div。
5. div a 中的 JavaScript 被执行：showHint()。
6. showHint() 执行构成提示的额外计算，并为数字和符号添加颜色。

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

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

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