Color Me Red or Green 2

bsquared18 · Feb 2, 2003

I'm using the code below as a template for multiple-choice test items. To tailor each test item, "comment 1" etc. will be manually replaced with a message that says either, your choice is right or your choice is wrong, or words to that effect.

What code do I have to add to a comment line to make these comment words arial, bold. and colored? Say, for example, arial, bold, and green? (Instead of the vanilla black text that it now has.)

Thanks!

Bill B.

________________________________________________________

<input type=hidden name=questions value=5 />
<input name="comment0" type=hidden value="comment 1" />
<input name="comment1" type=hidden value="comment 2" />
<input name="comment2" type=hidden value="comment 3" />
<input name="comment3" type=hidden value="comment 4" />
<input name="comment4" type=hidden value="comment 5" />
<input name="answer" type="radio" value="0" />choice 1<br />
<input name="answer" type="radio" value="1" />choice 2 <br />
<input name="answer" type="radio" value="2" />choice 3<br />
<input name="answer" type="radio" value="3" />choice 4<br />
<input name="answer" type="radio" value="4" />choice 5<br />
<br>

<input name="upDateBut" type=button
value="Check Your Answer" onClick="update(this.form)" /></p><p>
<textarea name="Response" rows="6" cols="40"
wrap="virtual"></textarea><br /></p>
</form>

Targol · Feb 3, 2003

I don't understand : you want to change font for hidden fields ??? Water is not bad as long as it stays out human body ;-)

harmmeijer · Feb 3, 2003

Since the textarea is named response I assume you want to set the fontcolor of this textarea. For the following script to work you have to give the textarea an ID (in this case Response):

document.getElementById('Response').style.color="green";
document.getElementById('Response').style.color="red";

bsquared18 · Feb 3, 2003

Sorry, I didn't make my explanation clear: Below is the entire code, with a sample question, "In what month does Christmas fall?" included.

In this example, value="3" (Dec.) is correct and the other choices are incorrect. What I'm aiming for, if it's possible, is that when someone (in this case) clicks on the value="3" radio button and then clicks on "check your answer" that the message they get ("That's right!&quot

would be in GREEN. On the other hand, if they click one of the other radio buttons, the message ("No. Try again.&quot

would be in RED.

If there is a solution, please be specific as to where I should put what, since I have limited programming experience.

Thanks!

Bill B.

________________________________________________

<html>
<head>
<title>JavaScript Multichoice Question</title>
</head>
<body>


<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>



<h2>Item N</h2>

<p>In what month does Christmas fall?</p>

<form>

<input type=hidden name=questions value=5 />
<input name="comment0" type=hidden value="No. Try again." />
<input name="comment1" type=hidden value="No. Try again." />
<input name="comment2" type=hidden value="No. Try again." />
<input name="comment3" type=hidden value="That's right!" />
<input name="comment4" type=hidden value="No. Try again." />
<input name="answer" type="radio" value="0" />Sept.<br />
<input name="answer" type="radio" value="1" />Oct.<br />
<input name="answer" type="radio" value="2" />Nov.<br />
<input name="answer" type="radio" value="3" />Dec.<br />
<input name="answer" type="radio" value="4" />Jan.<br />
<br>

<input name="upDateBut" type=button
value="Check Your Answer" onClick="update(this.form)" /></p><p>
<textarea name="Response" rows="6" cols="40"
wrap="virtual"></textarea><br /></p>
</form>
<br>

<A HREF="xxxx.html"><FONT FACE="arial" SIZE="3" COLOR="#7C0019" onmouseover="this.style.color='#FF796D'"
onmouseout="this.style.color='#7C0019'">
NEXT ITEM</FONT></A>

</body>
</html>

Targol · Feb 3, 2003

Add this at the end of your "update" function :

Code:

...
.
form.Response.value = msg
if (msg..charAt(0) == &quot;N&quot;)
  form.Response.style.color=&quot;red&quot;;
else
  form.Response.style.color=&quot;green&quot;;

Water is not bad as long as it stays out human body ;-)

bsquared18 · Feb 3, 2003

Targol,

Sorry to be such a dummy, but when I tried placing your code in various locations, I kept getting error messages. Could you indicate exactly where in my code your code should be placed?

Much appreciated,

Bill B.

Targol · Feb 3, 2003

Code:

function update(form)
{
    var msg = &quot;&quot;
    var cherce = getrad(form.answer, form.questions.value)
    if(cherce == null)
    {msg = &quot;You need to select one of the choices.&quot;}
    else {
    if(cherce == &quot;1&quot;)
    {
    msg = form.comment1.value
    } else {
        if(cherce == &quot;2&quot;)
        {
        msg = form.comment2.value
        } else {
            if(cherce == &quot;3&quot;)
            {
            msg = form.comment3.value
            } else {
                if(cherce == &quot;4&quot;)
                {
                msg = form.comment4.value
                } else {
                    if(cherce == &quot;0&quot;)
                    {
                    msg = form.comment0.value
                    }
                }
            }
        }
    }
    }
form.Response.value = msg
if (msg..charAt(0) == &quot;N&quot;)
  form.Response.style.color=&quot;red&quot;;
else
  form.Response.style.color=&quot;green&quot;;

}

If that doesn't work give me the line and text of the error Water is not bad as long as it stays out human body ;-)

bsquared18 · Feb 3, 2003

Targol,

I found the problem: The line

if (msg..charAt(0) == "N&quot

Had two dots after "msg." When I removed one dot, there were no error messages.

So, now all the comments are green. Definitely a step forward! But how do I get the fourth comment to be green and the other three to be red?

Bill B.

Targol · Feb 3, 2003

replace :

Code:

if (msg.charAt(0) == &quot;N&quot;)

by :

Code:

if (msg.indexOf(&quot;Try again&quot;) != -1)

Sorry, I made a mistake on the charAt method. it returns a Char and therefore can never be equals to a String like "N". Water is not bad as long as it stays out human body ;-)

bsquared18 · Feb 3, 2003

Targol,

Excellent! Thanks for sticking with me. You definitely know your stuff.

Bill B.

Targol · Feb 3, 2003

A little star for me ???? Water is not bad as long as it stays out human body ;-)

bsquared18 · Feb 3, 2003

Now that we've got the colors, the problem is that they are very faded. Is there a way to specify Arial font, size=3, bold, for example? If not, c'est la vie.

Bill B.

bsquared18 · Feb 3, 2003

Sorry, Targol. I usually do that but it slipped my mind.

BB

Targol · Feb 3, 2003

you can do it applying a style to your textarea. This example puts your font in arial bold :

Code:

textarea name=&quot;Response&quot; rows=&quot;6&quot; cols=&quot;40&quot;
wrap=&quot;virtual&quot; style=&quot;font-family : Arial; font-weight : bold;&quot;></textarea>

Note : instead of using the litteral values for the colors ("red" and "green&quot

, you can use rgb values that you can tune this way (always on the same example) :

Code:

form.Response.style.color=&quot;#

RRGGBB

Code:

&quot;;

Where :
- RR is red channel value in hexa from 00 to FF.
- GG is green channel value in hexa from 00 to FF.
- BB is blue channel value in hexa from 00 to FF. Water is not bad as long as it stays out human body ;-)

harmmeijer · Feb 3, 2003

If there are stars to be erned then here are the parts you should change:
replace:
<textarea name="Response" rows="6" cols="40"
wrap="virtual"></textarea>
with:
<label id='Response'> </label>

and:
form.Response.value = msg
if (msg..charAt(0) == "N&quot

form.Response.style.color="red";
else
form.Response.style.color="green";
with:
if (msg.indexOf("Try again&quot

!= -1)
document.getElementById('Response').innerHTML="<font style='color:green'>"+msg+"</font>";
else
document.getElementById('Response').innerHTML="<font style='color:red'>"+msg+"</font>";

bsquared18 · Feb 3, 2003

Cool! Wish I could give you two stars!

Bill B.

Targol · Feb 3, 2003

Hey, harmmeijer, don't take it bad. I know it's bad to claim but that's a thing I do for others too. (I posted many times in threads replying "give a star to the man" to posts like "I love you, you're my god, you saved my life". This site has provided a "client satisfaction rating" of all persons answering to threads, so why not to use it ? Water is not bad as long as it stays out human body ;-)

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Color Me Red or Green 2

bsquared18

Technical User

Targol

Technical User

harmmeijer

Programmer

bsquared18

Technical User

Targol

Technical User

bsquared18

Technical User

Targol

Technical User

bsquared18

Technical User

Targol

Technical User

bsquared18

Technical User

Targol

Technical User

bsquared18

Technical User

bsquared18

Technical User

Targol

Technical User

harmmeijer

Programmer

bsquared18

Technical User

Targol

Technical User

Similar threads

Part and Inventory Search

Sponsor