Question

Im Making a question for a website and would like the the correct / try again messages in the var reltext to be different colours ie green for correct and red for wrong and maybe a small png beside each.

any ideas ?

<form name = "Q1">
  <p>A local construction company has purchased 5 brand new diggers. Two of them have a telescopic jib. If a driver chooses a digger to use at random what is the probability it will have a telescopic jib?<br>

    0/5 
  <input name = "rad1" type = "radio" class="radio" onclick = "getAnswer('1a', '1')">
    1/5 
  <input name = "rad1" type = "radio" class="radio" onclick = "getAnswer('1b', '2')">
    2/5 
  <input name = "rad1" type = "radio" class="radio" onclick = "getAnswer('1c', '3')">
    3/5 
  <input name = "rad1" type = "radio" class="radio" onclick = "getAnswer('1d','4')">
  <br><br>
  </p>
<div id = "para"><div>
</form>

<script type = "text/javascript">
var reltext = [];
reltext[1] = "TRY AGAIN - 0/5 This would mean that there was no diggers with a telescopic jib." 
reltext[2] = "TRY AGAIN - 1/5 This would mean that there was only 1 digger with a telescopic jib"
reltext[3] = "CORRECT - 2/5 This would mean that there was 2 diggers with a telescopic jib" 
reltext[4] = "TRY AGAIN - 3/5 This would mean that there was 3 diggers with a telescopic jib."

function getAnswer(ans, rel) {
document.getElementById("para").innerHTML = reltext[rel];
if (ans == "1c") {alert ("Correct - Well done!")}
else {alert ("Incorrect - Try again")}
}

</script>

Answer 1

You could do this several ways.
1. You could replace your reltext with the following:

reltext[1] = "<div style='background-color:#dd0000;'>TRY AGAIN - 0/5 This would mean that there was no diggers with a telescopic jib.</div>"
reltext[2] = "<div style='background-color:#dd0000;'>TRY AGAIN - 1/5 This would mean that there was only 1 digger with a telescopic jib</div>"
reltext[3] = "<div style='background-color:#00dd00;'>CORRECT - 2/5 This would mean that there was 2 diggers with a telescopic jib</div>" 
reltext[4] = "<div style='background-color:#dd0000;'>TRY AGAIN - 3/5 This would mean that there was 3 diggers with a telescopic jib.</div>"

2. Or you could setup a style for the div with id="para". Something like:

<style type="text/css">
.classWrong { bakcground-color: #dd0000; }
.classRight { background-color: #00dd00; }
</style>

and then in your script section change the function to set the style:

function getAnswer(ans, rel) {
    document.getElementById("para").innerHTML = reltext[rel];
    if (ans == "1c") {
        document.getElementById("para").className = "classRight";}
        alert ("Correct - Well done!");
    else {
        document.getElementById("para").className = "classWrong";}
        alert ("Incorrect - Try again")}
    }

3. As far as adding images to the response just add in an img element to your reltext. maybe like:

reltext[1] = "<div style='background-color:#dd0000;'>TRY AGAIN - 0/5 This would mean that there was no diggers with a telescopic jib.<img src='images/Wrong.png' /></div>"

reltext[3] = "<div style='background-color:#00dd00;'>CORRECT - 2/5 This would mean that there was 2 diggers with a telescopic jib<img src='images/Right.png' /></div>" 

There are many other ways to do this but I thought I would just have a go at it.