Mapping jquery array to radio buttons

Question

Hi I'm having difficulty trying to figure out the proper way to do this, but here goes. I have 3 questions, each of which has a right answer.

<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>

I have two arrays combined into one big array for each set of answers.

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]];

The answers array combines both arrays, giving a list of the correct answers as well as the correct wrong answers for the rest of the question. What i'm trying to do is, map the answer arrays to each of the sets of questions so I don't have to use each of the arrays, and i'm not quite sure how i would do that, given how it's two different arrays in one. right now I have something along these lines for each of the radio buttons:

$('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>');
        }

    }
});

Should I be using something besides the if then statements? Any push in the right direction would be greatly appreciated.

EDIT: Edited the incorrect array, it had text, which doesn't, only correct answers get text. EDIT: Re-wording question.

Answer 1

I was able to solve my answer with some help from a coworker. I started by adding a num attr to each of the divs :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>

Then I created this to grab the index and the number.

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

I also updated the correct array to make it simpler:

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

The answers array and incorrect stay the same.

But a note: using the iteration such as it is where i++ changes for each row doesn't work if a question has more than one answer. If it does the answers array needs to be written like this:

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]];

Finally I updated the click event on radio buttons like so:

$('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>');

}
});

This appeared to work. :D