Question

Please see my jsfiddle with what I’m currently working with.

I would like to add an extra td after the submit button when the user presses submit. If the user selected the wrong answer, I want this td to read “Incorrect, try again”. If they are correct, I would like the td to read “Correct!”.

Now, I believe this line of code will do the trick (assuming the td in my html has a class “newtd”).

$('td.newtd').html("<span class='green'>Correct!</span>");

OR

$('td.newtd').html("<span class='red'>Incorrect, try again.</span>");

The problem I have is figuring out what modifications I need to make to my current code to get this to work. Would it be best to create an if statement checking the current class of the input? If the question is right, print the new td?

Many thanks.

Answer 1

jsFiddle Demo

Well first off you need to have that td with a class of newtd in your html (or you could just remove it (if it’s there) and append it each time, whatever works for you.

As for the IF, you can toggle the different text like so.

var correct = $('input[type="radio"]:checked').hasClass('right');

var str = '<span class="' + (correct ? 'green' : 'red') + '">' + 
        (correct ? 'Correct!' : 'Incorrect, try again.')
        + '</span>';

$('td.newtd').html(str);