汗学院的Hint功能如何编码

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是一个提示数组，或者更确切地说是包含对名为showHint()的函数的调用的div。数组中的项目数与剩余的提示数相同。
2. 代码获取此数组中的第一个div并将其分配给变量a。
3. 计算了剩余的提示数量。
4. div a附加到工作区内ID为hintsarea的空div。
5. div a中的JavaScript已执行：showHint()。
6. showHint()执行构成提示的其他计算，并为数字和符号添加颜色。

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

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

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