•
•
•
•

JavaScript

JavaScript is one of the tools we use to develop complex interactive survey applications.

JavaScript is a programming language that is embedded into HTML documents. It controls the rendering of the HTML document and can be used to enhance the functionality of the questionnaire elements. JavaScript can be used for:

  • Data Validation
  • Dynamic Generation of Questionnaire Elements
  • Formatting
Much of our work involves the implementation of customized JavaScripts to support your survey needs. This enables us to develop dynamic and interactive web forms that create a functional and intuitive experience for your survey participants.

Some of the examples below show how JavaScript can be used in questionnaires.

Data Validation: Range Checking

If you need values to be entered into a text box and want to restrict the range of acceptable values, the JavaScript code below will restrict the value entered and will only accept numbers from 0 to 5. 

<Form>
   <input type=text size=2
      onBlur="this.value=(isNaN(this.value))?0:(this.value<0)?0:(this.value>5)?5:this.value;">
</Form>
Enter a values between 0 and 5 in the boxes below. See what happens if you enter a different value.

Data Validation: Value Distribution

If you use an Ipsative Scale (one where the respondent allocates a fixed number of points to several boxes), the JavaScript code below will restrict the total number of points entered to 100. 

function ComputeTotal(i) {
  var GTotal;
  eval('document.dataform.CS'+i+'Total.value=\'\'')
  eval('GTotal=1*(document.dataform.CS'+i+'A.value)')
  eval('GTotal+=(1*document.dataform.CS'+i+'B.value)')
  eval('GTotal+=(1*document.dataform.CS'+i+'C.value)')
  eval('GTotal+=(1*document.dataform.CS'+i+'D.value)')
  eval('document.dataform.CS'+i+'GTotal.value=GTotal')
  if(GTotal==100) {
    eval('document.dataform.CS'+i+'Total.value=100')
  }
}
These questions relate to your work organization. Each of these items contains four descriptions of organizations. Please distribute 100 points among the four descriptions depending on how similar the description is to your organization. None of the descriptions is any better than the others; they are just different. For each question, use all 100 points.

Organizational Character (Please distribute 100 points among the four boxes below. Give more points to the statements you feel better describe the organization.)
Organization A is a very personal place. It is a lot like an extended family. People seem to share a lot of themselves.
Organization B is a very dynamic and entrepreneurial place. People are willing to stick their necks out and take risks.
Organization C is a very formalized and structured place. Formal procedures generally govern what people do.
Organization D is very production oriented. A major concern is with getting the job done. People aren't very personally involved.

Data Validation: Email Address Syntax

If you need accurate values to be entered into email address fields, the JavaScript code below will check the data entered. 

<Form>
   <input type=text size=40
      onBlur="filter=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9])+$/;
if(!filter.test(this.value)) {alert('Invalid email syntax.');Form.EmailAddress.focus();}">
</Form>
Enter an email address in the box below.
See what happens if you enter an incorrect value.

Dynamic Generation of Questionnaire Elements

What if you had several locations and each location had a variety of departments. And you want to restrict the employees to selecting only the departments at their location. How could you do that in HTML? You could use conditional branching (offered by some of our competitors). But that would require more than one page for your questionnaire. What if you wanted the questionnaire to be on one page and still maintain this functionality. How could you do it in just one HTML page? Answer: JavaScript.

JavaScript can be used to dynamically generate questionnaire elements in real-time directly on the questionnaire as it is
being completed by the participants.

Click here or here for a demonstration.

Add commas to a number

If your questionnaire requires a dollar amount (such as base salary or operating budget), you may want to have the number formatted with commas to enhance the accuracy of the data collected. This can easily be performed using a function similar to the one shown below: 

function insert(MyValue) {
   var re = /(-?\d+)(\d{3})/
   var num = MyValue
   while (re.test(num)) {
      num = num.replace(re,"$1,$2")
   }
   return MyValue
}
Enter numbers in the boxes below.
Notice how the numbers are fomatted with commas once you move to the next field.

Try it with decimals, dollar signs, other characters.

Remove commas from a number

For Example: 

function remove(form) {
   var re = /,/g
   form.plainOutput.value = form.commaInput.value.replace(re,"")
}

Interactive Shading

Internet Explorer allows for interactive shading of form elements. Just move the mouse over the elements below for an example.

First Name Last Name
Music Sport Travel
For Example 

clr=new Array('yellow','white','silver');
function highlight(state) {
   element=event.srcElement;
   if(element.tagName=='INPUT') {
      etype=element.type;
      if((etype=='submit' || etype=='reset') && state==1) state=2;
      element.style.backgroundColor=clr[state];
      element.focus();
   }
}

Conditional Enabling of Items

Internet Explorer allows you to select certain items to be enabled or disabled. Just answer the items below for an example.

Example 1:
Do you own a printer? Yes No
Example 2:
Do you own a printer? Yes No
Additional Resources are at: http://developer.irt.org/script/script.htm