Google Answers Logo
View Question
 
Q: Changing font colors for unanswered questions ( Answered,   0 Comments )
Question  
Subject: Changing font colors for unanswered questions
Category: Computers > Internet
Asked by: ssenderowitz-ga
List Price: $2.00		 Posted: 01 Aug 2002 11:23 PDT
Expires: 31 Aug 2002 11:23 PDT
Question ID: 48116 
I have an HTML/JSP page that displays a questionnaire, most of the
questions have an array of 5 radio buttons and the use has to select
one, currently I have a Jscript to verify if all questions are
answered, if not it will alert the user that not all questions have
been answered. How can a make it that the unanswered questions show
with a RED font to identify what questions have not been answered???

A small example would help since im new to the whole concept.

Thank You
Request for Question Clarification by j_philipp-ga on 01 Aug 2002 11:44 PDT 
Hello Ssenderowitz,

Which browsers are you trying to target?
If you're happy with e.g. just Internet Explorer 5+, I could give you
a working answer using JScript (IExplorer's implementation of
ECMAScript/ JavaScript).
If you want to have the effect be working in all browsers, you need to
do it server-side. In this case, since you are already using Java
Server Pages, I suggest to script the output, and use a separate CSS
class for unfinished answers.

Thanks.
Clarification of Question by ssenderowitz-ga on 01 Aug 2002 12:21 PDT 
Yes im using IE5, that example would be nice.

Thank you
Answer  
Subject: Re: Changing font colors for unanswered questions
Answered By: j_philipp-ga on 01 Aug 2002 13:42 PDT
 
Hello Ssenderowitz,

Below is a sample HTML file to illustrate how to dynamically change
text to red in Internet Explorer 5+:

------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Sample</title>
    <script type="text/javascript"><!--
    function textColor(id, rgb)
    {
        if (document.all)
        {
            var s = "document.all." + id + ".style.";
            s +="color=\"" + rgb + "\"";
            eval(s);
        }
    }
    // --></script>
</head>
<body onload="textColor('sentence1', 'rgb(255,0,0)')">

<p id="sentence1">This is sentence 1</p>
<p id="sentence2">This is sentence 2</p>

</body>
</html>

------

All you need to do for your own page now is to insert IDs into a
wrapping element of all text for each question/ answer set of your
document. Then you can call the function "textColor" (see the "onload"
event of the body element in above sample) to turn specific text into
red.

Hope this helps!
Request for Answer Clarification by ssenderowitz-ga on 01 Aug 2002 15:12 PDT 
First thank you for your help. for some reason i cant get mine to work
please look at my code and see if you can help me.
find where it says 
// the folowwing label should get red
you will see what im doing that label should become red if not
answered.
teh script is on top of teh lage.

thank you so much
Request for Answer Clarification by ssenderowitz-ga on 01 Aug 2002 15:12 PDT 
<%@ page language="java" import="java.sql.*"
errorPage="err_page.jsp"%>
<%
   boolean validEmail = false;
%>
<SCRIPT LANGUAGE="JavaScript">
function verifyAnswers() 
{
   i = 0;
   flag = 0;
        
   while (i < document.questionnaire.rCounter.value)
   {
      eval("var n = document.questionnaire.qName[" + i + "].value") 
      eval("var s = document.questionnaire.qDesc[" + i + "].value")
      
      r1 = eval ("document.questionnaire." + n + "[0].checked")
      r2 = eval ("document.questionnaire." + n + "[1].checked")
      r3 = eval ("document.questionnaire." + n + "[2].checked")
      r4 = eval ("document.questionnaire." + n + "[3].checked")
      r5 = eval ("document.questionnaire." + n + "[4].checked")
       
      if ((r1 == true) || (r2 == true) || (r3 == true) || (r4 == true)
|| (r5 == true))
      {
         //flag = 0;  
      }
      else
      {
         flag = 1;
         //alert(s);
         eval("document.questionnaire." + s + "[" + i +
"].style.color=\"red\"")
      }
      i++;
   } // end while
  
   if(flag == 1)
   {
     
      // s = eval("document.questionnaire." + id + "[" + i +
"].style.color=\"" + rgb + "\"");
             
            
      alert("Please answer all questions.");
      return false;
   }
   else
   {
      return true;
   }
}

</script>

<%   
   String URL = "jdbc:odbc:clientcentre_dev";
   String dbuser = "techlabadmin";
   String dbpass = "techlabadmin";
   String sEmail = request.getParameter("email");
   int rStudentID = 0;
   String rFirstName = "";
   String rMiddleName = "";
   String rLastName = "";
   String rPhoneNumber = "";
   int rCourseID = 0;
   String rCourseDate = "";
   int rInstructorID = 0;
   String rIFirstName = "";
   String rIMiddleName = "";
   String rILastName = "";
   String rIEmailAddress = "";
   String rCourseDescription = "";
   String rEmail = "";
   String iFirstName = "";
   String iMiddleName = "";
   String iLastName = "";
   String iEmail = "";
   int questionID = 0;
   String questionName = ""; 
   int questionCounter = 0;
   int radioCounter = 0;
   int i = 0;
   
        
       

		
   try 
   {
      Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
   } 
   catch (Exception e) 
   {
       System.out.println("Failed to load JDBC/ODBC driver.");
       return;
   }
   Connection cConnectSelect = null;
   Statement  sStatementSelect = null;
                                    
   try 
   {
      cConnectSelect = DriverManager.getConnection (URL, dbuser,
dbpass);
      sStatementSelect = cConnectSelect.createStatement();
   }
   catch (Exception e) 
   {
      System.err.println("problems connecting to "+URL);
   }

   try 
   {
      ResultSet resultSelect = sStatementSelect.executeQuery ("select
c.person_id, c.instructor_id, c.course_id,p.firstname, p.middlename,
p.lastname, p.primary_emailaddress, p.primary_phonenumber, 
c.course_date, d.name, e.e_firstname, e.e_middlename, e.e_lastname,
e.userid from techlabadmin.person p, techlabadmin.course_selection c,
techlabadmin.employee e, techlabadmin.course d where p.person_id =
c.person_ID and c.instructor_id = e.id and   c.course_id = d.id and
p.primary_emailaddress = " + "'" + sEmail + "'");
          
      if(resultSelect.next())
      {
         validEmail = true;
         rStudentID = resultSelect.getInt("person_id");     
         rInstructorID = resultSelect.getInt("instructor_id");
         rCourseID = resultSelect.getInt("course_id");
         rFirstName = resultSelect.getString("firstname");
         rMiddleName = resultSelect.getString("middlename");
         rLastName  = resultSelect.getString("lastname");            
         rEmail = resultSelect.getString("primary_emailaddress");
         rPhoneNumber = resultSelect.getString("primary_phonenumber");
         rCourseDate = resultSelect.getString("course_date");
         rCourseDescription = resultSelect.getString("name");
         iFirstName = resultSelect.getString("e_firstname");
         iMiddleName = resultSelect.getString("e_middlename");
         iLastName = resultSelect.getString("e_lastname");
         iEmail = resultSelect.getString("userid");
            
         resultSelect.close();
         sStatementSelect.close();
         cConnectSelect.close();
      } // end if
   } // end try
   catch (Exception e) 
   {
      e.printStackTrace(); 
   }
%>

<HTML>
 <CENTER>
  <body onload="textColor('questionname', 'rgb(255,0,0)')">
<%
   if(validEmail == true)
   {
%>
      <form method="POST" name="top" action="--WEBBOT-SELF--">
         <img border="0" src="images/top_image1.gif" width="301"
height="57"><img border="0" src="images/top_image2.jpg" width="444"
height="57"><img border="0" src="images/top_image3.gif" width="6"
height="57"></p>
         <fieldset style="width: 285; height: 51; padding: 2">
         <legend><b><font size="1"
face="Verdana">Student</font></b></legend>
         <table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="100%"
id="AutoNumber4" height="37">
          <tr>
           <td width="1%" height="13"><font size="1"
face="Verdana">Name:&nbsp;</font></td>
           <td width="153%" height="13"><font size="1" face="Verdana,
Arial, Helvetica, sans-serif"><%=rFirstName%></font><font size="1"
face="Verdana"> <%=rMiddleName%> <%=rLastName%>&nbsp;</font></td>
          </tr>
          <tr>
           <td width="22%" height="12"><font size="1"
face="Verdana">Address:&nbsp;</font></td>
           <td width="178%" height="12"><font size="1" face="Verdana,
Arial, Helvetica, sans-serif"><%=rEmail%></font><font size="1"
face="Verdana">&nbsp;</font></td>
          </tr>
          <tr>
           <td width="22%" height="12"><font size="1"
face="Verdana">Phone:&nbsp;</font></td>
           <td width="22%" height="12"><font size="1" face="Verdana,
Arial, Helvetica, sans-serif"><%=rPhoneNumber%></font><font size="1"
face="Verdana">&nbsp;</font></td>
          </tr>
         </table>
         </fieldset><font size="1"
face="Verdana">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         </font>
  
         <fieldset style="width: 285; height: 51; padding: 2">
         <legend><b><font size="1"
face="Verdana">Instructor</font></b></legend>
         <table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="100%"
id="AutoNumber5">
          <tr>
           <td width="1%"><font size="1"
face="Verdana">Name:&nbsp;</font></td>
           <td width="153%"><font size="1" face="Verdana, Arial,
Helvetica, sans-serif"><%=iFirstName%></font><font size="1"
face="Verdana"> <%=iMiddleName%> <%=iLastName%>&nbsp;</font></td>
          </tr>
          <tr>
           <td width="22%"><font size="1"
face="Verdana">Address:&nbsp;</font></td>
           <td width="178%"><font size="1" face="Verdana, Arial,
Helvetica, sans-serif"><%=iEmail%></font><font size="1"
face="Verdana">@dss-solutions.com&nbsp;</font></td>
          </tr>
          <tr>
           <td width="22%"><font size="1"
face="Verdana">Phone:&nbsp;</font></td>
           <td width="22%"><font size="1"
face="Verdana">999-999-9999&nbsp;</font></td>
          </tr>
         </table>
         </fieldset><font size="1" face="Verdana"> </font>
      </form>

      <div align="center">&nbsp;
      <table border="0" cellpadding="0" cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111" width="67%"
id="AutoNumber1">
       <tr>
        <td width="100%">
         <p align="center"><font size="2" face="Verdana">At DSS
Solutions Education Services, a significant amount of time and effort
is invested in training. Your suggestions and comments will help us
improve future courses. Please choose one of the numbers 1 to 5 to
indicate your feelings and views on the topics listed. Rate each of
the following questions on a scale of 1 to 5 with 1 being the lowest
and 5 being the highest. </font>
        </td>
       </tr>
      </table>
      </div>
      <form method="POST" name ="questionnaire"
action="answers.jsp?rCourseID=<%=rCourseID%>&rCourseDate=<%=rCourseDate%>&rInstructorID=<%=rInstructorID%>&rStudentID=<%=rStudentID%>"
onSubmit="return verifyAnswers()">
<%   
      try 
      {
          Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
      } 
      catch (Exception e) 
      {
         System.out.println("Failed to load JDBC/ODBC driver.");
         return;
      }

      Connection cQuestionGroup = null;
      Statement sQuestionGroup = null;
      
      try 
      {
         cQuestionGroup = DriverManager.getConnection (URL, dbuser,
dbpass);
         sQuestionGroup = cQuestionGroup.createStatement();
      }
      catch (Exception e) 
      {
         System.err.println("problems connecting to "+URL);
      }

      try 
      {
         ResultSet rsGroupName = sQuestionGroup.executeQuery("Select
item_name, item_id from techlabadmin.course_evaluation_questionnaire
where item_level_id = 1 order by item_sequence_id" );
         int groupCounter = 0;
         String sColor = "blue";
         
       
         while (rsGroupName.next())
         {
            String questionGroup = rsGroupName.getString("item_name");
            int questionGroupID = rsGroupName.getInt("item_id"); 
            
%> 
            
             <CENTER>
             <fieldset style="padding: 2; width:619; height:112">
<%
             if (questionGroup.compareTo("Additional Comments and
Suggestions")!=0 )
             {
%>
                <table width="100%" style="border-collapse: collapse"
bordercolor="#111111" cellpadding="0" cellspacing="0" height="11">
                 <tr>
                   <td width="75%" bordercolor="#FFFFFF" height="11"
align="left"></td>
                   <th width="5%" bordercolor="#FFFFFF" height="11"
align="left">
                     <img border="0" src="images/thumbsdown.gif"
width="25" height="19"></th>
                   <th width="5%" bordercolor="#FFFFFF" height="11"
align="left"></th>
                   <th width="5%" bordercolor="#FFFFFF" height="11"
align="left"></th>
                   <th width="5%" bordercolor="#FFFFFF" height="11"
align="left"></th>
                   <th width="5%" bordercolor="#FFFFFF" height="11"
align="left">
                     <img border="0" src="images/thumbsup.gif"
width="25" height="19"></th>
                 </tr> 
                 <tr>
                   <td width="75%" bordercolor="#FFFFFF" height="11"
align="left"></td>
                     <th width="5%" bordercolor="#FFFFFF" height="11"
align="left">
                      <div align="center"><b><font
size="2">1</font></b></div></th>
                     <th width="5%" bordercolor="#FFFFFF" height="11"
align="left">
                      <div align="center"><b><font
size="2">2</font></b></div></th>
                     <th width="5%" bordercolor="#FFFFFF" height="11"
align="left">
                      <div align="center"><b><font
size="2">3</font></b></div></th>
                     <th width="5%" bordercolor="#FFFFFF" height="11"
align="left">
                      <div align="center"><b><font
size="2">4</font></b></div></th>
                     <th width="5%" bordercolor="#FFFFFF" height="11"
align="left">
                      <div align="center"><b><font
size="2">5</font></b></div></th>
                 </tr>
                </table>
<%
             } // end if
%>                    
             <legend>&nbsp;<b><%=questionGroup%></b></legend>
<%
             Connection cQuestions = null;
             Statement sQuestions = null;
       
             try 
             {
                cQuestions = DriverManager.getConnection (URL, dbuser,
dbpass);
                sQuestions = cQuestions.createStatement();
             }
             catch (Exception e) 
             {
                System.err.println("problems connecting to "+URL);
             }
             try 
             {
                ResultSet rsQuestionName =
sQuestions.executeQuery("Select item_id, item_name from
techlabadmin.course_evaluation_questionnaire where item_level_id = 2
and parent_item_id = " + questionGroupID + "order by item_id");
            
                while (rsQuestionName.next())
                {
                   questionID = rsQuestionName.getInt("item_id");
                   questionName =
rsQuestionName.getString("item_name");
%>
                   <input type="hidden"
name="question<%=questionCounter%>" value="<%=questionID%>">
                   <input type="hidden"
name="questionName<%=questionCounter%>" value="<%=questionName%>">
<%              
                   if (questionGroup.compareTo("Additional Comments
and Suggestions")!=0 )
                   {
%>
                   <table width="100%" style="border-collapse:
collapse" bordercolor="#808080" cellpadding="0" cellspacing="0"
height="13" bordercolorlight="#808080" bordercolordark="#808080"
bgcolor="#FFFFFF">
                       <tr>
                        <td bgcolor="#E6E6E6" width="75%" height="31"
bordercolor="#808080" align="left" bordercolorlight="#000000"
bordercolordark="#000000">
<%
// the folowwing label should get red
%>                          
                          <label
name=q<%=questionID%>><%=questionName%></label></td>
                        <td width="5%" bgcolor="#E6E6E6" height="31"
bordercolor="#808080" align="center" bordercolorlight="#000000"
bordercolordark="#000000">
                         <input name=a<%=questionID%> value=1
type=radio></td>
                        <td width="5%" bgcolor="#E6E6E6" height="31"
bordercolor="#808080" align="center" bordercolorlight="#000000"
bordercolordark="#000000">
                         <input name=a<%=questionID%> value=2
type=radio></td>
                        <td width="5%" bgcolor="#E6E6E6" height="31"
bordercolor="#808080" align="center" bordercolorlight="#000000"
bordercolordark="#000000">
                         <input name=a<%=questionID%> value=3
type=radio></td>
                        <td width="5%" bgcolor="#E6E6E6" height="31"
bordercolor="#808080" align="center" bordercolorlight="#000000"
bordercolordark="#000000">
                         <input name=a<%=questionID%> value=4
type=radio></td>
                        <td width="5%" bgcolor="#E6E6E6" height="31"
bordercolor="#808080" align="center" bordercolorlight="#000000"
bordercolordark="#000000">
                         <input name=a<%=questionID%> value=5
type=radio></td>
                       </tr>
                       <input type="hidden" name="qID"
value="<%=questionID%>">
                       <input type="hidden" name="qName"
value="a<%=questionID%>">
                       <input type="hidden" name="qDesc"
value="q<%=questionID%>">
                                             
<%
                       
                       radioCounter++;           
                   } // end if
                   else
                   {
%>
                      
                      <td bgcolor="#000000" width="100%" height="21"
bordercolor="#808080" align="left"><font size="2" face="Verdana,
Arial, Helvetica, sans-serif"><%=questionName%></font></td>
                      <textarea rows="3" name=a<%=questionID%>
cols="70"></textarea></p>
<%
                   } // end else
%>
                      <tr> 
                       <td width="75%" height="1" align="left"></td>
                       <td width="1%" height="1" align="left"></td>
                       <td width="5%" height="1" align="left"></td>
                       <td width="5%" height="1" align="left"></td>
                       <td width="5%" height="1" align="left"></td>
                       <td width="5%" height="1" align="left"></td>
                       <td width="5%" height="1" align="left"></td>
                      </tr>
                   </table>
<%
                   questionCounter++;
                } //end while, questions
                 
                rsQuestionName.close();
                sQuestions.close();
                cQuestions.close();
             }  //end of try
             catch (Exception e) 
             {
                e.printStackTrace();
             }
%>
             </fieldset>          
<%
             groupCounter++;
         } // end while, Question Group
         rsGroupName.close();
         sQuestionGroup.close();
         cQuestionGroup.close();
      } //end or try

      catch (Exception e) 
     {
        e.printStackTrace();
     }
%>
     <input type="hidden" name="rCounter" value="<%=radioCounter%>">
     <p>
       <input type=submit value="Submit" name="submit">
       <input type=reset value="Clear" name="reset">
       <input type="hidden" name="totalQuestions"
value="<%=questionCounter%>">
     </p>
     </form>
<%
   } // end if
   else
   {
%>
       <form method="POST" name="bottom" action="--WEBBOT-SELF--">
        <p align="center">There is no such e-mail address in our
records, please check your e-mail address and try again. Evaluations
are only allowed on the day you attended class, if you have attended a
class earlier please call Melane Jennings at 212-713-1650.</p>
        <p>Thank You </p>
        <p align="center"><a href="javascript:history.go(-1)"
onMouseOver="self.status=document.referrer;return true">Please try
again</a></P>
       </form>
<%
       return;    
    }
%>
  </body>
 </CENTER>
</HTML>
Clarification of Answer by j_philipp-ga on 01 Aug 2002 15:56 PDT 
Hello Ssenderowitz, 

You need to assign an ID (a unique string, starting with A-Z/ a-z) to
each label you output on your page. The function stays the same as
given in the answer above. Here is the body content to illustrate the
approach:

------

<body onload="textColor('label1', 'rgb(255,0,0)')"> 

<form action=""> 
    <p>
    <label for="sentence1" id="label1">Test</label>
    <input type="text" name="sentence1"
            id="sentence1" value="This is sentence 1" />
    </p>
    <p>
    <label for="sentence2" id="label2">Test</label>
    <input type="text" name="sentence2"
            id="sentence2" value="This is sentence 1" />
    </p>
</form>

</body>

------

In the "while"-loop of your script, you already have the variable
"questionID", which you might want to reuse when constructing the
label ID.


I hope this helps.
Clarification of Answer by j_philipp-ga on 01 Aug 2002 16:01 PDT 
(To correct above clarification: the second input box should of course
read "This is sentence 2".)
Request for Answer Clarification by ssenderowitz-ga on 02 Aug 2002 04:59 PDT 
Hi,

first of all thank you for all the help.
well its still not working for me, im getting a
"java.lang.NullPointerException" in the error log of my application
server.

so here again is my situation.

i have a while loop that retrieves all questions from the datebase,
then im showing a label with the question.
"<td bgcolor="#E6E6E6" width="75%" height="31" bordercolor="#808080"  
align="left" bordercolorlight="#000000" bordercolordark="#000000">
                         <label style="color:blue"
id="q<%=questionID%>"><%=questionName%></label></td>"
as you can see teh label name is "q + the questionID". now in my
script im passing the questionID and i have another loop in the loop i
have this statement: "var s = "document.questionnaire." + m +
".style.";
            s +="color=\"" + color + "\""; 
            eval(s);"
the variavle s contains the questionID tag, when i do a out.println(s)
i get what looks the correct systax
"document.questionnaire.q2.style.color="red".

So my question is this if i have a label q2 in my questionnaire form
would eval(s) change the color?

thank you so much.
Clarification of Answer by j_philipp-ga on 02 Aug 2002 06:15 PDT 
Hello Ssenderowitz,

Instead of "document.questionnaire", use "document.all".

Hope that helps.
Request for Answer Clarification by ssenderowitz-ga on 02 Aug 2002 06:41 PDT 
Ok i figured it out.

thank you for all your help.
Clarification of Answer by j_philipp-ga on 02 Aug 2002 07:46 PDT 
I'm glad it's working, Ssenderowitz. Good luck!
Comments  
There are no comments at this time.
Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  

Google Home - Answers FAQ - Terms of Service - Privacy Policy