1

こんにちは私はこれを行うための適切な方法を理解しようとするのに苦労していますが、ここに行きます。私には3つの質問があり、それぞれに正しい答えがあります。

<div class="question">
    <h2>Question 1</h2>
    <p>Which picture has Anna?</p>
    <ul>
        <li><input type="radio" id="q1_a" name="q1"><label for="q1_a">A</label></li>
        <li><input type="radio" id="q1_b" name="q1"><label for="q1_b">B</label></li>
        <li><input type="radio" id="q1_c" name="q1"><label for="q1_c">C</label></li>
        <li><input type="radio" id="q1_d" name="q1"><label for="q1_d">D</label></li>
    </ul>
    <p class="answer"></p>
</div>

<div class="question">
    <h2>Question 2</h2>
    <p>Person?</p>
    <ul>
        <li><input type="radio" id="q2_a" name="q2"><label for="q2_a">A</label></li>
        <li><input type="radio" id="q2_b" name="q2"><label for="q2_b">B</label></li>
        <li><input type="radio" id="q2_c" name="q2"><label for="q2_c">C</label></li>
        <li><input type="radio" id="q2_d" name="q2"><label for="q2_d">D</label></li>
    </ul>
    <p class="answer"></p>
</div>

<div class="question">
    <h2>Question 3</h2>
    <p>Alligator?</p>
    <ul>
        <li><input type="radio" id="q3_a" name="q3"><label for="q3_a">A</label></li>
        <li><input type="radio" id="q3_b" name="q3"><label for="q3_b">B</label></li>
        <li><input type="radio" id="q3_c" name="q3"><label for="q3_c">C</label></li>
        <li><input type="radio" id="q3_d" name="q3"><label for="q3_d">D</label></li>
    </ul>
    <p class="answer"></p>
</div>

回答のセットごとに、2つの配列を1つの大きな配列に結合しています。

var incorrect = [
    "Hmmm, are you sure about that?",
    "Almost! Try again.",
    "Give it another shot.",
    "Nice try. Just not quite nice enough.",
    "Not this time.",
    "You might want to check your answer.",
    "Try again!",
    "Oops! Pick again.",
    "So close! Choose again.",
    "D'oh! Choose again.",
    "Keep trying!"
];

var correct =[
    {id:"q1_b",text:"Hi answer",link:"www.yahoo.com"},
    {id:"q2_b",text:"Another good answer!",link:"www.google.com"},
    {id:"q3_b",text:"This is the best answer. ",link:"www.msn.com"}
];

var answers = [];
i = 0;

answers[i] = [incorrect[10],correct[i++],incorrect[0],incorrect[5]];
answers[i] = [incorrect[9],correct[i++],incorrect[0]];
answers[i] = [incorrect[0],correct[i++],incorrect[2]];

Answers配列は両方の配列を組み合わせて、残りの質問の正解と正解のリストを提供します。私がやろうとしているのは、回答の配列を質問の各セットにマップして、各配列を使用する必要がないようにすることです。これが2つであることを考えると、どのように行うのかよくわかりません。 1つの異なるアレイ。現在、ラジオボタンごとにこれらの線に沿って何かがあります。

$('input[type=radio]').click(function(){
    if($(this).attr("checked")){
        var answertext = $(this).closest('div').find('.answer'),
            id = $(this).attr('id'),

        if (id == answers[correct[0]['id']]){
            answertext.html('<span class="green">'+answers[correct[0]['text']]+'</span>');
        } else {
            answertext.html('<span class="red">'+answers[incorrect[0]]+'</span>');
        }

    }
});

if thenステートメント以外のものを使用する必要がありますか？正しい方向へのプッシュは大歓迎です。

編集：間違った配列を編集しました、それはテキストを持っていました、それはそうではありません、正しい答えだけがテキストを取得します。編集：質問の言い換え。

4

1 に答える 1

1

同僚の助けを借りて答えを解くことができました。私は各divにnumattrを追加することから始めました：D

<div class="question" num="1">
<h2>Question 1</h2>
<p>Which picture has Anna?</p>
<ul>
    <li><input type="radio" id="q1_a" name="q1"><label for="q1_a">A</label></li>
    <li><input type="radio" id="q1_b" name="q1"><label for="q1_b">B</label></li>
    <li><input type="radio" id="q1_c" name="q1"><label for="q1_c">C</label></li>
    <li><input type="radio" id="q1_d" name="q1"><label for="q1_d">D</label></li>
</ul>
<p class="answer"></p>
</div>

<div class="question" num="2">
<h2>Question 2</h2>
<p>Person?</p>
<ul>
    <li><input type="radio" id="q2_a" name="q2"><label for="q2_a">A</label></li>
    <li><input type="radio" id="q2_b" name="q2"><label for="q2_b">B</label></li>
    <li><input type="radio" id="q2_c" name="q2"><label for="q2_c">C</label></li>
    <li><input type="radio" id="q2_d" name="q2"><label for="q2_d">D</label></li>
</ul>
<p class="answer"></p>
</div>

<div class="question" num="3">
<h2>Question 3</h2>
<p>Alligator?</p>
<ul>
    <li><input type="radio" id="q3_a" name="q3"><label for="q3_a">A</label></li>
    <li><input type="radio" id="q3_b" name="q3"><label for="q3_b">B</label></li>
    <li><input type="radio" id="q3_c" name="q3"><label for="q3_c">C</label></li>
    <li><input type="radio" id="q3_d" name="q3"><label for="q3_d">D</label></li>
</ul>
<p class="answer"></p>
</div>

次に、これを作成してインデックスと番号を取得しました。 

el = $(this).parent().index();
q = $(this).parent().parent().parent().attr("num");
resp = answers[q][el];

また、正しい配列を更新して、単純にしました。

var correct =[
{text:"Hi answer"},
{text:"Another good answer!"},
{text:"This is the best answer."}
];

回答の配列と不正解は同じままです。

ただし、注意：質問に複数の回答がある場合、各行のi++の変更が機能しないような反復を使用します。その場合、answers配列は次のように記述する必要があります。

answers[i++] = [incorrect[10],correct[0],incorrect[0],incorrect[5]];
answers[i++] = [incorrect[9],correct[1],incorrect[0]];
answers[i++] = [incorrect[0],correct[2],incorrect[2]];

最後に、ラジオボタンのクリックイベントを次のように更新しました。

$('input[type=radio]').click(function(){
if($(this).attr("checked")){
    var answer = $(this).closest('div').find('.answer'),
        id = $(this).attr('id'),

        el_number = $(this).parent().index();
    q_number = $(this).parent().parent().parent().attr("num");
    resp = answers[q_number][el_number];



    answer.html('<span>' + (resp["text"] != null) ? resp["text"] : resp + '</span>');

}
});

これは機能しているように見えました。：D

于 2013-02-19T16:24:24.333 に答える