javascript - この以前のスクリプトの回答をターゲット ページに適応させるにはどうすればよいですか?

Question

ブラウザが質問に対する正しい答えを緑色で強調表示できるようにしたい. 正しいアイデアと思われる回答
を見つけました(Greasemonkey で特定のラジオ ボタンを自動的に選択するにはどうすればよいですか?)が、それを使用するのに十分な JavaScript を知りません。

私の HTML コードはこのフィドルに示されています。

望ましい出力例は次のようになります。

その他の答えを自分の状況にどのように適応させるのですか?

Answer 1

var questionTxt =および行はvar ansForThisQ =、ターゲット ページの特定の HTML に合わせて調整する必要があります。

同様に、ループ内のコードansForThisQ.each (...も調整する必要があります。

サンプル HTML の構造は次のとおりです。

<div class="soru-content">
    <div class="point" style="margin-right:0px">
        <span><img src="IMG_URL"/></span>
    </div>
    <div class="soru">
        <p>How many countries will participate in the games?</p>
        <ul>
            <li><a href="ANS_URL1"><span>12</span></a></li>
            <li><a href="ANS_URL2"><span>204</span></a></li>
            <li><a href="ANS_URL3"><span>552</span></a></li>
            <li><a href="ANS_URL4"><span>715</span></a></li>
        </ul>
    </div>
</div>

適応されたスクリプト コードは次のようになります。

var answerKey   = [
      { q: "How many countries will participate in the games?", a: "204" }
    , { q: "when do olympics start in london", a: "July 27" }
    // etc.
];

//--- Loop through the question(s) on the page and answer then if possible.
var questionTxt = $("div.soru-content div.soru p");

questionTxt.each ( function () {
    var bFoundAnswer    = false;
    var answerTxt       = getAnswer (this.textContent);
    if (answerTxt) {
        //--- We have the answer text, now find the matching radio button and select it.
        var ansForThisQ     = $(this).parent ().find ("ul a span");

        ansForThisQ.each ( function () {
            var zRegExp     = new RegExp (answerTxt, 'i');
            if (zRegExp.test (this.textContent) ) {
                bFoundAnswer    = true;
                $(this).css     ("background", "lime");
                return false;   // End loop
            }
        } );
    }
    else {
        alert ("I don't know how to answer: '" + this.textContent + "'");
        $(this).css ("background", "pink");
    }
    if ( answerTxt  &&  ! bFoundAnswer) {
        alert ("The page does not have the specified answer for the question: '" + this.textContent + "'");
        $(this).css ("background", "pink");
    }
} );

function getAnswer (questionText) {
    for (var J = answerKey.length - 1;  J >= 0;  --J) {
        var zRegExp = new RegExp (answerKey[J].q, 'i');

        if (zRegExp.test (questionText) )
            return answerKey[J].a;
    }
    return null;
}

更新された Fiddleを参照してください。

jQuery セレクターの詳細については、ドキュメントのこの部分を参照してください。