SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : Popup Surveys : Defining a Survey

The entire survey is generated through script. We designed the survey to be easily changes with minimal code updating. Below is the complete client-side script for displaying the survey window. To force the display of the survey to occur as soon as the page starts downloading, include this script in the HEAD section of your page.

<SCRIPT language="JavaScript1.1">
<!--
  // The question should have a unique id
  var questionID = "q1"  

  // Check if the survey question has been asked
  var asked = document.cookie.indexOf(questionID)

  if (asked==-1) {
    // Initialize Survey Information
   
    // Page Title - Displayed in title bar and as page header
    var pageTitle="InsideDHTML Quick Survey"
    // Question to ask
    var pageQuestion="How often do you visit InsideDHTML?"
    // An array for answers
    var pageAnswers = new Array()
    // Each answer consists of the response string for the surver
    // and the text to display
    pageAnswers[0] = new Array("firstTime","My First Visit")
    pageAnswers[1] = new Array("EveryDay","Every Day")
    pageAnswers[2] = new Array("CoupleDays","Couple of times a week")
    pageAnswers[3] = new Array("EveryWeek","Every Week")
    pageAnswers[4] = new Array("CoupleWeeks","Every couple of weeks")
    pageAnswers[5] = new Array("CoupleMonths","Every couple of months")
    // The defaultAnswer represents the index of the default response
    var defaultAnswer = 1

    // The following code generates the survey

    // This function is inserted into the survey page. It submits the results,
    // stores the cookie representing the survey, and closes the survey window.
    var w = window.open("","Survey","top=0,left=0,width=260,height=250")
    var d = w.document
    var s= ""
    d.open()
    s+="<TITLE>" + pageTitle + "</TITLE>"
    s+="<BODY BGCOLOR=black TEXT=white>"

    // The path to the server-side script must be specified in the 
    // form's action attribute.
    s+="<FORM method=\"POST\" ACTION=\"submit.asp\"><FONT FACE=\"geneva, arial, sans-serif\" COLOR=yellow SIZE=+1><B>"
    s+=pageTitle + "</B></FONT><BR>"
    s+="<FONT FACE=\"geneva, arial, sans-serif\">l;<B>" + pageQuestion + "</B></FONT<"
    s+="<TABLE>"
    for (var i=0; i < pageAnswers.length; i++) {
      s+="<TR><TD VALIGN=TOP>"
      s+= "<INPUT TYPE=\"radio\" NAME=\"answer\" VALUE=\"" + pageAnswers[i][0] + "\"" + ((defaultAnswer==i) ? "checked" : "") + "></TD><TD>"
      s+= "<FONT FACE=\"geneva, arial, sans-serif\" SIZE=-1>" + pageAnswers[i][1] + "</FONT></TD>l;</TR>"
    } 
    s+="</TABLE><INPUT TYPE=\"SUBMIT\" VALUE=\"Submit\">"
    s+="<INPUT TYPE=\"hidden\" NAME=\"questionID\" VALUE=\"" + questionID + "\"></FORM>"
    d.write(s)
    d.close()
  }
// -->
</SCRIPT>

In this example, we only provide one question. You can easily extend this script to have multiple questions with the current survey selected randomly through script. To ensure the client tracks the survey correctly, make sure that each survey question has a unique ID. We leave this enhancement as an exercise for you (feel free to post your solutions or comments in our the discussion forums).

Next we take you through the server script used to store the results and to return the appropriate cookie.