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

Question

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

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

用户单击" 我想要提示"右侧的按钮。

从我到目前为止发现，Mathjax，Raphael JavaScript Library和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是一个提示数组，或者更确切地说，divs包含调用称为 showHint()的函数的呼叫。数组中的项目数与剩下的提示数相同。
2. 代码在此数组中获取第一个div，并将其分配给变量a。
3. 计算了已经使用/剩下多少个提示。
4. DIV a被附加到Workarea内的带有ID hintsarea的空div。
5. 执行DIV a中的JavaScript：showHint()。
6. showHint()执行构成提示并为数字和符号添加颜色的其他计算。

Mathjax用于此格式。如果您使用开发人员工具检查DOM，则可以看到每个数字和符号都由多个跨度包围，动态创建，以控制位置和样式。

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

顺便说一句，当点击提示按钮时，还有一个XHR请求发送到服务器，但这似乎不会影响用户功能。它只是将统计数据发送回可汗学院，我认为它们用于监视和改进该功能。