CSS Style Javascript

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>

I could be way off (I don't see it in the edits), but didn't your original question say that you wanted to change the styling of the text in the alert boxes? — James Hill
– James Hill, Commented Mar 23, 2012 at 12:31
At first yes, but i used the "reltext" to display my correct / try again images, Thanks again for your help !!! — Ma9ic
– Ma9ic, Commented Mar 27, 2012 at 13:01
In the future, use this question as an example of what not to do. Changing your question so drastically after the fact is confusing and a bit inconsiderate to those who have tried to help. It's confusing because the right answer is no longer right (like my answer with 6 upvotes), and it's inconsiderate because you rob people of having the correct answer by changing the questions. — James Hill
– James Hill, Commented Mar 27, 2012 at 13:05

James Hill · Accepted Answer · 2012-03-21 14:41:11Z

6

You may not style the contents of an alert box with JavaScript (or anything else for that matter).

A good alternative would be using a framework like jQuery UI and use modal dialogs instead of JS alerts. Here's a link to jQuery UI's dialogs: http://jqueryui.com/demos/dialog/

answered Mar 21, 2012 at 14:41

James Hill

62.2k22 gold badges150 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ma9ic Over a year ago

i was hoping i could of just used, somthing like, <h1>reltext[1] = "TRY AGAIN - 0/5 This would mean that there was no diggers with a telescopic jib."</h1>

James Hill Over a year ago

@Ma9ic, unfortunately, this is not possible.

Ma9ic Over a year ago

great thxs ! No wonder i couldnt find out how to do it ! in the var rel could i display a image instead?

James Hill Over a year ago

Sure! Since the relText is rendering on the page, you can put any valid HTML in it. So, `<img src='...' /> would be fine.

Ma9ic Over a year ago

Thanks for all your help ! reltext[1] = "<h1>TRY AGAIN - 0/5 This would mean that there was no diggers with a telescopic jib.</h1>" This worked !

CaptainBli · Accepted Answer · 2012-03-21 15:09:56Z

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.

Valerio · Accepted Answer · 2012-03-21 14:58:03Z

1

To solve the issue the simplest way in my opinion is to make 2 div styles

Ex:

div.correct{ 
    background-color: green;
}

div.wrong{
    background-color: red;
}

make the reltext a multidimensional array, containing either the correct/wrong information, ex:

reltext[1][0] = "correct"
reltext[1][1] = "CORRECT - That answer is correct"
reltext[2][0] = "wrong"
reltext[2][1] = "WRONG - This is wrong!"
reltext[3][0] = "wrong"
reltext[3][1] = "WRONG - BLaBlah.."

and modify the function like:

function getAnswer(ans, rel) {
document.getElementById("para").innerHTML = reltext[rel][1];
document.getElementById("para").className = reltext[rel][0];

answered Mar 21, 2012 at 14:58

Valerio

2,6004 gold badges26 silver badges34 bronze badges

Collectives™ on Stack Overflow

CSS Style Javascript

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related