Patent Abstract:
A client-side computer-implemented system and method for performing validations across multiple control elements on a web-based form. The form includes an array of web-based control elements for acquiring responses from a user. Trans-control element rules contain validation rules that are based upon state information from a plurality of the web-based control elements. A control element handler modifies a property of a control element within the array after using the trans-control element rules to examine the state information contained within the array.

Full Description:
BACKGROUND  
         [0001]    1. Technical Field  
           [0002]    The present invention is generally directed to web-based interfaces, and more particularly to web-based form validations.  
           [0003]    2. Description of the Related Art  
           [0004]    Organizations have used many methods to gather data about individual preferences and opinions. One method of gathering data about a particular subject from multiple individuals is to present the group of individuals with a survey form. An example of this type of form would be a census form where the person completing the form fills in the appropriate response on a computer sheet, which is then optically scanned into a computer system. The computer system then compiles the data and can perform some statistical procedures to provide the organization taking the survey with additional information.  
           [0005]    The widespread adoption of personal computers and the introduction of the Internet made the process of conducting a survey far more cost-effective because the organization can present the survey forms through a web-based form. A web-based form can be completed on-line and the results compiled much more quickly and efficiently. However, a web-based form suffers from data quality issues. For example, the responder to a web-based survey form may rank two responses with the same number or may fail to complete questions and thus the data quality of the web-based survey form is diminished.  
         SUMMARY OF THE INVENTION  
         [0006]    In accordance with the teachings disclosed herein, a client-side computer-implemented system and method are provided for performing validations across multiple control elements on a web-based form. The form includes an array of web-based control elements for acquiring responses from a user. Trans-control element rules contain validation rules that are based upon state information from a plurality of the web-based control elements. A control element handler modifies a property of a control element within the array after using the trans-control element rules to examine the state information contained within the array. 
       
    
    
     BRIEF DESCRIPTION OF THE DRAWINGS  
       [0007]    The present invention satisfies the general needs noted above and provides many advantages, as will become apparent from the following description when read in conjunction with the accompanying drawings, wherein:  
         [0008]    [0008]FIG. 1 is a block diagram that depicts a server providing to a client a web-based form;  
         [0009]    [0009]FIG. 2 is a block diagram that depicts client-side software and computer components utilized with a radio button array;  
         [0010]    [0010]FIG. 3 is a block diagram that depicts the effect of a radio button&#39;s state upon the states of other radio buttons;  
         [0011]    [0011]FIG. 4 is a block diagram that depicts the effect of a radio button&#39;s state upon display regions;  
         [0012]    FIGS.  5 - 12  are displays of a radio button array used in an example of radio buttons&#39; states affecting aspects of the array;  
         [0013]    [0013]FIG. 13 is a flowchart that depicts operational steps for client-side processing of a radio button array;  
         [0014]    FIGS.  14 - 17  are displays of radio button arrays used in an example that shows data values associated with the client-side manipulation of a radio button array; and  
         [0015]    [0015]FIG. 18 is a block diagram that depicts the altering of auditory or other visual characteristics based upon use of an array of control elements. 
     
    
     DETAILED DESCRIPTION  
       [0016]    [0016]FIG. 1 depicts a web-based form  30  being provided to a client computer  32  from a server  34 . To obtain the web-based form  30 , the client computer  32  provides a request  36  for content over the Internet  38  to the web server  34 . The web server  34  furnishes the web-based form  30  in its response  40 . The web-based form  30  contains a radio button array  42  which a user  44  may manipulate in order to indicate the user&#39;s responses to inquiries posed on the web-based form  30 .  
         [0017]    The server  34  also provides in its response  40  a radio button array handler  46  to operate on the client computer  32 . Based upon a user&#39;s selection of a radio button value, the radio button array handler  46  may affect values in one or more other radio buttons within the array  42 . For example, the web-based form  30  may be asking the user  44  to rank five products from one to five, with one representing the highest ranked product. The user  44  inadvertently attempts to enter the same ranking number for two products. The radio button array handler  46  detects this and alters the value of the other relevant radio button on the web-based form  30  so that the inconsistency is corrected.  
         [0018]    As shown in FIG. 2, the radio button array handler  46  examines the states ( 100 ,  102 ,  104 ) of multiple radio buttons ( 110 ,  112 ,  114 ) in order to determine whether any button modification action is required. Trans-radio button rules  120  guide the radio button array handler  46  as to what actions are to be taken and upon which conditions. Trans-radio button rules  120  are directed to performing radio button validations based upon states ( 100 ,  102 ,  104 ) of multiple radio buttons ( 110 ,  112 ,  114 ). The radio buttons ( 110 ,  112 ,  114 ) may also include their own internal self validations ( 130 ,  132 ,  132 ), such as two values may not be specified for a radio button.  
         [0019]    [0019]FIG. 3 depicts that through the trans-radio button rules  120 , the radio button array handler  46  allows the state of a radio button (e.g.,  110 ) to affect the states of one or more other radio buttons (e.g.,  112 ,  114 ). For example, the trans-radio button rules  120  may indicate that radio buttons may not have the same value.  
         [0020]    The checking of the conditions and any resultant actions via the trans-radio button rules  120  occur on-the-fly, such as when the user attempts to enter a radio button&#39;s value. It should be understood that the terms first, second, and Nth with respect to the buttons ( 110 ,  112 ,  114 ) shown in FIG. 3 are not reflective of a button&#39;s position within the radio button array  42 . As an example, the first radio button  110  may occupy the second position within the array  42  and may affect the state of the button occupying the first position as well as the button occupying the third position within the array  42 . Moreover, the terms first, second, and Nth do not refer to the order in which a user  44  selects values within the array  42 . Rather, the terms refer to any individual radio button appearing within the array without regard to position or selection order.  
         [0021]    It should be further understood that the radio button array handler  46  may affect more than the values of radio buttons ( 110 ,  112 ,  114 ). As shown in FIG. 4, the radio button array handler  46  may modify display regions ( 150 ,  152 ,  154 ) associated with the radio buttons ( 110 ,  112 ,  114 ). For example, the display regions of each selection may be tinted so as to keep the user aware of the current selections, and to encourage the user to complete the web-based form  30 . While this is useful for any number of radio buttons on an array, the utility of this visual feedback grows when the size of the array exceeds 3×3 items.  
         [0022]    The state of the radio button  110  may affect not only a display region  150  associated with the radio button  110 , but display regions (e.g.,  152 ,  154 ) associated with other radio buttons as well as possibly other display regions  160  on the web-based form  30 . As an illustration if a user enters duplicate ranking scores within an array, the display regions of both radio buttons may have its color attributes modified so as to highlight that an inconsistency has arisen for these radio buttons.  
         [0023]    FIGS.  5 - 12  show an exemplary scenario wherein a user selects values via a radio button array. With reference to FIG. 5, a radio button array  200  contains a grouping  202  of five control elements: Alpha radio button  210 , Beta radio button  212 , Gamma radio button  214 , Delta radio button  216 , and Epsilon radio button  218 . The array  200  contains a textual description at  230  that asks the user to “Please rank all the choices, using ‘1’ as your top choice.” In this example, the user manipulates the Beta radio button  212  so that the value of one is indicated. The radio button display region  240  is tinted to emphasize that this radio button&#39;s value has been entered. It should be understood that all or a portion of the display region  240  may be tinted or otherwise modified based upon the state of the radio button.  
         [0024]    [0024]FIG. 6 shows that the user has next manipulated the Delta radio button  216  so that the value of two is indicated. The Delta radio button display region  242  is tinted to emphasize that this radio button&#39;s value has been entered.  
         [0025]    Delta  216  is re-selected as the third choice as shown in FIG. 7. Because radio buttons in this example automatically self-validate within themselves, no intervention is required by the radio button array handler, and the background color of the Delta radio button control element  242  is not changed.  
         [0026]    The user makes Epsilon  218  the second choice as shown in FIG. 8 and makes Gamma  214  the fourth choice as shown in FIG. 9. If the user makes the Alpha control element  210  the fourth choice, the radio button array handler automatically de-selects button  4  under the Gamma option  214  and clears the background color of Gamma  214  as shown in FIG. 10. Finally, the user selects Gamma  214  as the fifth choice, and the form is complete as shown in FIG. 11.  
         [0027]    As noted above in relation to visual feedback, the background color of completed selections is altered in real-time so that the background color of the question&#39;s stem and response match. This makes button de-selection immediately obvious, and helps the user keep track of what is left to select. It further provides the additional benefit of creating a subtle visual incentive for the user to complete the web-based form as shown in FIG. 12.  
         [0028]    [0028]FIG. 13 is a flowchart that depicts operational steps for client-side processing of a radio button array. Start block  300  indicates that when a radio button has been selected by a user, the location and the value are read at data block  302  from the radio button element. Process block  304  compares the current location and value to the data stored in the array. If decision block  306  determines that based upon the comparison the location and value were not used before (i.e., these items are not already found in the array), then process block  308  stores the current location and value in the array before processing continues at process block  314 .  
         [0029]    However if the location and value were used before as determined by decision block  306 , the previous value for the current location in the array is cleared at process block  310 . Process block  312  then clears the highlighting at the previous location. Processing continues at process block  308  which stores the current location and value in the array before processing continues at process block  314 . At process block  314 , the current location is highlighted before processing for this iteration ends at block  316 .  
         [0030]    It should be noted that the operations contained in the flowchart of FIG. 13 are exemplary and may be altered to suit the situation at hand. For example, process block  310  may be altered to indicate to the user that the value has been previously entered and that the user should select a different value for the current radio button element.  
         [0031]    The operations described in the flowchart of FIG. 13 are illustrated through the interface displays of FIGS.  14 - 17 . FIGS.  14 - 17  are displays of a radio button array  200  that shows the control element&#39;s data values and color values associated with the manipulation of the radio button arrays. In the scenario of FIGS.  14 - 17 , three button selections are made. The third selection overrides the first one and triggers a reset of the first array value and style attribute. For each button selection in the sequence, the changes to the q1_value[ ] array and style.backgroundColor attributes are shown at their corresponding locations.  
         [0032]    In the sequence shown in FIG. 14, the values of q1_option[ ] and q1_value[ ] are displayed within the web-based survey form, as well as the values of the five style.backgroundcolor attributes. For example for the Alpha radio button  210 , the q1_option[ ] and q1_value[ ] are displayed at  400  and  402  respectively within the web-based survey form, as well as the value of the style.backgroundColor attribute at  404 . These values and the values shown for the other radio buttons in FIG. 14 represent the initial state of the web-based form.  
         [0033]    In the display of FIG. 15, the value “3” is selected for the Beta control element  212 . The data array and color variables are modified to reflect this selection:  
                                                   q1_value[1]=3           q1_beta_tag.style.backgroundColor=‘#eed’                      
 
         [0034]    (where ‘#eed’ is in hex RGB format and represents a color value equivalent to light brown)  
         [0035]    In the display of FIG. 16, the value “1” is selected for the Gamma control element  214 . The data array and color variables are modified to reflect this selection:  
                                                   q1_value[1]=3           q1_beta_tag.style.backgroundColor=‘#eed’           q1_value[2]=1           q1_gamma_tag.style.backgroundColor=‘#eed’                      
 
         [0036]    In the display of FIG. 17, the value “3” is selected for the Delta control element  216 . The data array and color variables are modified to reflect this selection:  
         [0037]    q1_value[1]=0 (note: this effectively clears the data value)  
         [0038]    q1_beta_tag.style.backgroundColor=” (note: this effectively clears the background color)  
                                                   q1_value[2]=1           q1_gamma_tag.style.backgroundColor=‘#eed’           q1_value[3]=3           q1_delta_tag.style.backgroundColor=‘#eed’                      
 
         [0039]    To implement the web-based system and method described herein, any of a number of client-side processing implementations may be used, such as ActiveX controls, downloadable applets, or Javascript programs. For example in a Javascript implementation, names may be assigned to several elements of the survey form. A name attribute and value are assigned to the form, as well as to each of the button input elements. The names enable the Javascript programming to process the form.  
         [0040]    The button input elements may have a name value that includes a question identifier followed by an underscore (   ) and the name of that choice. In the current example, the form name is survey, the question is q1, and the input element names are q1_alpha, q1_beta, q1_gamma, q1_delta, and q1_epsilon. An onclick event may also be added to each input element, and it calls a valchk( ) function which is described below.  
         [0041]    To store button values for validation comparison, a pair of Javascript arrays may be used for each question. The arrays keep track of which values (1-5) have been selected for which option (alpha-epsilon).  
         [0042]    The string “_option” is appended to the question name for the option array, and the string “_value” is appended to the question name for the value array. For example, the array statements to record q1 options and values are shown below:  
                                                   &lt;script type=“text/javascript” language=“javascript”&gt;&lt;!--           q1_option=new Array(‘alpha’,‘beta’,‘gamma’,‘delta’,‘epsilon’);           q1_value=new Array(0,0,0,0,);           //--&gt;&lt;/script&gt;                      
 
         [0043]    The valchk( ) function is invoked whenever a button is clicked, and it uses these arrays to perform validation. It does the following in this example:  
         [0044]    1. Creates a variable named qname to keep track of which question is begin validated. The value of qname is derived by extracting the text string preceding the underscore (   ) in the input button element&#39;s name. For example, the button named q1_delta yields an qname of q1.  
         [0045]    2. Determines the number of elements in the question&#39;s option array.  
         [0046]    3. For every element in the question&#39;s option array, the following is performed:  
         [0047]    a. If the array element&#39;s value matches the current button value, the earlier button is unchecked.  
         [0048]    b. The previous array element value is set to 0.  
         [0049]    c. The array value corresponding to the current button equal is set to the button value.  
         [0050]    In view of this description, the client side Javascript program may resemble the following in order to process the example discussed above:  
                                                                                                                                                       &lt;script type=“text/javascript” language=“javascript”&gt;&lt;!--           q1_option=new Array(‘alpha’,‘beta’,‘gamma’,‘delta’,‘epsilon’):           q1_value=new Array(0,0,0,0,0);           function valchk(button){           function valchk(button){                var qname=button.name.substr(0,button.name.indexOf(‘_’));           var imax=eval(qname+‘_option.length’);           for(i=0;i&lt;imax;i++){                if(eval(qname+‘_value’)[i]==button.value){                document.survey[qname+‘_’+                eval(qname+‘_option’)[i]][button.value-                1].checked=0;                eval(qname+‘_value’)[i]=0;}                if(eval(qname+‘_option’)[i]==                button.name.substr(button.name.lastIndexOf(‘_’)+1))                eval(qname+‘_value’)[i]=button.value;}}                //--&gt;&lt;/script&gt;                      
 
         [0051]    With respect to the visual feedback described in the example above, each table cell may be given an id attribute whose value includes the question name, followed by an underscore (   ), followed by the option name, followed by_tag. As an illustration, the table cell containing the option Alpha may be assigned id=“q1_alpha_tag”. Additional Javascript code for use on the client-side may perform the following in order to provide visual feedback:  
         [0052]    1. Define a background color for selected options.  
         [0053]    2. Within the valchk( ) function, if a previous button has been de-selected, then  
         [0054]    a. Test whether the browser supports the document.getElementById method.  
         [0055]    b. Using the option array to look up its name, clear the background color of the table cell containing the previously selected option.  
         [0056]    3. After setting the button array to the current value,  
         [0057]    a. Test whether the browser supports the document.getElementById method.  
         [0058]    b. Using the current button&#39;s name to determine the option, set the background color of the table cell containing the option to the value defined by chktag.  
         [0059]    While examples have been used to disclose the invention, including the best mode, and also to enable any person skilled in the art to make and use the invention, the patentable scope of the invention is defined by the claims, and may include other examples that occur to those skilled in the art. As an example of the wide scope of the invention, FIG. 18 illustrates that many different properties may be affected based upon the state of multiple control elements. For example, visual properties other than tinting may be used as shown at  500 , such as modifying the text size, text bolding, text italics, or thickness of the control element&#39;s border. Auditory properties  500  may also be affected, such as a buzzer being emitted from the user&#39;s computer upon the control elements being in a particular state.  
         [0060]    Still further to show the wide scope of the invention, different types of grouped-together control elements other than radio buttons may be used, such as checklist box controls elements ( 510 ,  512 ,  514 ) located within a checklist box array  516 . A control element array handler (e.g., checklist box array handler  520 ) may examine the states ( 530 ,  532 ,  534 ) of multiple checklist box control elements ( 510 ,  512 ,  514 ) in order to determine whether any modification action is required. Trans-control element rules (e.g., Trans-checklist box rules  540 ) guide the handler  520  as to what actions are to be taken and upon which conditions. The rules  540  are directed to performing checklist box validations based upon states ( 530 ,  532 ,  534 ) of multiple checklist box control elements ( 510 ,  512 ,  514 ). It should also be noted that the server computer system may provide the rules and handler over many different types of networks, such as an internet network, or a company&#39;s intranet network, or a local area network.

Technology Classification (CPC): 6