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").clickまたはの出現箇所を検索しまし$('#hint').clickた。3つありますが、必要なものは次のとおりです。

... $("#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ヒントの配列、または という関数への呼び出しを含む divshowHint()です。配列内のアイテムの数は、残りのヒントの数と同じです。
  2. このコードは、この配列の最初の div を取得し、それを variable に割り当てますa。
  3. 使用された/残っているヒントの数が計算されます。
  4. divは、ワークエリア内のaid を持つ空の div に追加されます。hintsarea
  5. div 内の JavaScriptaが実行されます: showHint().
  6. showHint()ヒントを構成する追加の計算を行い、数字と記号に色を追加します。

この書式設定には MathJax が使用されます。開発者ツールで DOM を調べると、位置とスタイルを制御するために、各数字と記号が動的に作成された複数のスパンで囲まれていることがわかります。

ラファエルに関しては、この場合、合計で水平線を引くためにのみ使用されます。ただし、他の質問については、ドラッグできる画像やオブジェクトを描画するために使用されると思います。

ちなみに、ヒントボタンがクリックされたときにサーバーに送信される XHR リクエストもありますが、これはユーザーの機能には影響しないようです。機能の監視と改善に使用すると思われる統計をカーン アカデミーに送り返すだけです。

于 2012-11-12T02:36:39.797 に答える