使用jQuery检查单选按钮的值并更改CSS类

Question

I'm working on a 100 question multiple choice quiz (it displays 20 questions on five tabs). It's fine if folks can see the answers with the page source - this is just practice.

What I currently have is a php array (currently with only 5 "test" questions) that displays the row with the question, four radio buttons and a submit button. The idea is the user reads the question, selects an answer and submits. If the answer is right, the radio button appears green. If it is wrong, the radio button turns red and the user tries again.

Here is the main portion of my PHP code:

<?php
$set = array();

$set[] = array('q'=>'Question1','qurl'=>'001','ans'=>'zhidao','a'=>'zhidao','b'=>'zhidou','c'=>'zhedao','d'=>'zhedau');
$set[] = array('q'=>'Question2','qurl'=>'002','ans'=>'dajia','a'=>'dazha','b'=>'dajia','c'=>'taqia','d'=>'tazha');
$set[] = array('q'=>'Question3','qurl'=>'003','ans'=>'boduo','a'=>'bodou','b'=>'buoduo','c'=>'boduo','d'=>'buodo');
$set[] = array('q'=>'Question4','qurl'=>'004','ans'=>'wanhuan','a'=>'wanchuan','b'=>'wanhuan','c'=>'wanchun','d'=>'wachuan');
$set[] = array('q'=>'Question5','qurl'=>'005','ans'=>'zhangkou','a'=>'zhongkou','b'=>'zhangko','c'=>'zhangkuo','d'=>'zhangkou');

shuffle($set);
?>

   <form>
                <table>
                                                                                <tr class="q0">                     
                        <td><td><a class="question" href="#">Question goes here</a></td></td>
                        <td><input class="radiostyle" type="radio" name="answers" value ="zhidao" /> zhidao</td>
                        <td><input class="radiostyle" type="radio" name="answers" value ="zhidou" /> zhidou</td>
                        <td><input class="radiostyle" type="radio" name="answers" value ="zhedao" /> zhedao</td>
                        <td><input class="radiostyle" type="radio" name="answers" value ="zhedau" /> zhedau</td>
                        <td><input class="submit submit-0" type="submit" value="Submit" /></td>
                    </tr>

Here is my jQuery:

function checkAnswer(set) {
if (set == 2) { /* if this is question set 2 out of the 5 kinds of questions */
        $('#questions .submit').click(function(e){
            var q = $(this).attr('class').split(' ')[1].split('-')[1];
            $('#questions .q'+q+' input').removeClass('radiowrong');
            var ans = $("input[@name=answers]:checked").val();
            if (ans == jset[q]['ans']) {
                $('#questions .q'+q+' .radiostyle').addClass('radioright');
                alert('correct!');}
            else {
                $('#questions .q'+q+' .radiostyle').addClass('radiowrong');}

            e.preventDefault();
        });
    }
}

Now, I have not worked a lot with jQuery so please consider me a beginner. If my code looks inefficient, my apologies. I have two main questions about my code:

First, I'm having a hard time getting my checkAnswer function to work correctly. I inserted an alert to see if my if logic is correct, but I have not been successful. Any suggestions on how I can get this to work?

Second, how can I modify my jQuery so I can properly change the class of the radio button? Again, I'm looking to make the radio button green if the user selects the correct answers and red if they are wrong.

(Please know: If there is an easier way to show the user if they are either right or wrong-like changing the text color of the answer they select-I'm all ears. Really anything will suffice.)

If I need to provide more information, please let me know.

Many many thanks.

Answer 1

First of all, this is a working example of the solution - jsfiddle.net/avrelian/hrnDG/2/ .

Below is a simplified version of your markup. You may see that I am using label tag here. It is more user-friendly, since a user can simply click the label to check the radio button. Besides, label is much simpler to style (eg, on Mac OS). I am using "right" and "wrong" classes to mark appropriate answer elements.

<form>
<table>
<tr class="q1">                       
    <td><a class="question" href="#">What is my favorite language?</a></td>
    <td>
        <input class="radiostyle wrong" type="radio" name="answers" value="Java" id="answers_1_Java" />
        <label for="answers_1_Java">Java</label></td>
    <td>
        <input class="radiostyle right" type="radio" name="answers" value="JavaScript" id="answers_1_JavaScript" />
        <label for="answers_1_JavaScript">JavaScript</label></td>
    <td>
        <input class="radiostyle wrong" type="radio" name="answers" value="Ruby" id="answers_1_Ruby" />
        <label for="answers_1_Ruby">Ruby</label></td>
    <td>
        <input class="radiostyle wrong" type="radio" name="answers" value="C#" id="answers_1_C#" />
        <label for="answers_1_C#">C#</label></td>
    <td><input class="submit submit-1" type="submit" value="Submit" /></td>
    <td></td></tr></table></form>​

Let us extract presentation logic into CSS.

input.right.checked + label {
    color: green;
}

input.wrong.checked + label {
    color: red;
}

And, finally, let us set a handler for submit button.

$('.submit').click(function() {
    $(this).closest('tr')
        .find('[name="answers"]')
            .removeClass('checked')
        .filter(':checked')
            .addClass('checked');
    return false;
});​

NB: The solution can be even easier with CSS3 :checked pseudo-class, since you have no need in submit buttons. Please, see example - jsfiddle.net/avrelian/hrnDG .

input.right:checked + label {
    color: green;
}

input.wrong:checked + label {
    color: red;
}