Checking value of radio buttons with jQuery and changing CSS class
<p>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.</p>

<p>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.</p>

<p>Here is the main portion of my PHP code:</p>

<pre><code>&lt;?php
$set = array();

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

shuffle($set);
?&gt;

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

<p>Here is my jQuery:</p>

<pre><code>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();
        });
    }
}
</code></pre>

<p>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:</p>

<p>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?</p>

<p>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.  </p>

<p><strong>(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.)</strong></p>

<p>If I need to provide more information, please let me know.</p>

<p>Many many thanks.</p>
