Click here to Skip to main content
15,894,720 members
Articles / Programming Languages / XML

Generic web based survey system using XML, XSL, HTML, and JavaScript

Rate me:
Please Sign up or sign in to vote.
1.80/5 (5 votes)
17 Oct 2006CPOL2 min read 36K   688   13  
A generic web based survey system.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
  <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
   <xsl:template match="/">
  <html>
		<head> </head>
		<h2 align="center"> <xsl:value-of select="/survey/surveytypes/surveytype/surveyname"/> </h2>
  <body Onload="onload()">
  <form method="post" action="" ID="Form1">
  <xsl:text disable-output-escaping="yes"><![CDATA[
  <script language="JavaScript" type="text/javascript">
  var pre, post;
  var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
  var xmlObj;
  var root;
  var nTotalQuestions = 0;
  

  function loadXML(xmlFile) 
  { 
	xmlDoc.async="false"; 
	xmlDoc.load(xmlFile); 
	xmlObj=xmlDoc.documentElement; 
	root = xmlObj.getElementsByTagName('questions')[0];
  }
  
  function onload()
  {
	loadXML("SampleSurveys.xml");
	
	var items = root.getElementsByTagName("question");
	for (var i = 0 ; i < items.length ; i++) {
		var item = items[i];
		var questiondesc = item.getElementsByTagName("qid")[0].text;
		var parentquestion = item.getElementsByTagName("parentquestion")[0].text;
		if ( parentquestion == '' )
			showdivDisplay("DIV" + questiondesc);
	}  
	
  }
    
  function BrowserType()
  {
     if (document.layers){
        //Netscape 4 specific code
        browser = 'NN4'
        pre = 'document.' ;
        post = '';
     }
     if (document.getElementById){
        //Netscape 6 specific code
        browser = 'NN6'
        pre = 'document.getElementById("';
        post = '")';
     }
     if (document.all){
        //IE4+ specific code
        browser = 'IE4+'
        pre = 'document.all.';
        post = '';
     }
  }

 function getElementValue(formElement, name, val)
 {
    if(formElement.length != null) var type = formElement[0].type;
    if((typeof(type) == 'undefined') || (type == 0)) var type = formElement.type;
    switch(type)
    {
      case 'undefined': return;
    	 case 'radio':
    	   /*
    	   var formElements = document.getElementsByName(name);
    		 for(var x=0; x < formElements.length; x++)
    		   if (formElements[x].checked == true)
    			   return formElements[x].value;
			*/
			
			 var myArray1 = new Array();
			 
	    	 var formElements = document.getElementsByName(name);
    		 for(var x=0; x < formElements.length; x++)
    		 {
    		   if (formElements[x].checked == true)
    				myArray1[myArray1.length] = formElement[x].value
    		 }
    	     return myArray1;	
    	     	
    	 case 'select-multiple':
    		 var myArray = new Array();
    		 for(var x=0; x < formElement.length; x++)
    		   if(formElement[x].selected == true)
    			   myArray[myArray.length] = formElement[x].value;
    			 return myArray;
    	 case 'checkbox':
    		 var myArray = new Array();
	    	 var formElements = document.getElementsByName(name);
    		 for(var x=0; x < formElements.length; x++)
    		 {
    		   if (formElements[x].checked == true)
    				myArray[myArray.length] = formElement[x].value
    		 }
    	     return myArray;
    	 default: return formElement.value;
    }
  }

  function FindItem(name, val)
  {
    BrowserType();
//    alert(name);
    if (browser == 'IE4+')
      return getElementValue(document.forms[0].item(name), name, val);
  	 else
    {
      for (i = 0; i < document.forms[0].length; i++) {
        if (document.forms[0].elements[i].name == name)
        {
          return getElementValue(document.forms[0].elements[i], name, val);
        }
  	   }
   }
  }    


  function showdivDisplay(item)
  {
     var mydiv = document.getElementById(item);
     mydiv.style.visibility="";
     mydiv.style.display="";
  }
  
  function hidedivDisplay(item)
  {
     var mydiv = document.getElementById(item);
     mydiv.style.visibility="";
     mydiv.style.display="none";
  }

  function Control_Click(fieldname)
  {
	var currentfield = fieldname.name;
	var currentquestion = currentfield.substring(7,currentfield.length);
	var querypath = "question[@qid='" + currentquestion + "']";
	var item ;
	var qid;
	var parentquestion ;
	
	var items = root.getElementsByTagName(querypath);
	if ( items != null && items.length == 1)
	{
		//alert("question found");
		item = items[0];
		querypath = "question[@parentquestion='" + currentquestion + "' and @valuecondition='" + FindItem(fieldname.name) +  "']";
		var items = root.getElementsByTagName(querypath);
		//alert(querypath);
		if ( items != null && items.length >= 1 )
		{
			//alert("next question found");

			var nextquestion = currentquestion * 1;
			nextquestion++;
			var strdiv ;
			for(var i=nextquestion; i<= nTotalQuestions; i++)
			{
				strdiv = "DIV" + i;
				hidedivDisplay(strdiv);
			}
			for(var j=0;j< items.length;j++)
			{
				item = items[j];
				qid = item.getElementsByTagName("@qid")[0].text;
				showdivDisplay("DIV" + qid);
			}
		}
		else
		{
			//alert("next question not found");
			/*
			var nextquestion = currentquestion * 1;
			nextquestion++;
			var strdiv ;
			
			for(var i=nextquestion; i<= nTotalQuestions; i++)
			{
				strdiv = "DIV" + i;
				hidedivDisplay(strdiv);
			}*/
		}
	}


  }

  function submit_click()
  {
	var strtemp = '', str = '', strresult = '' , x , stranswers ='';
	
	for(i=1; i< nTotalQuestions+1; i++)
	{
		str = FindItem('CONTROL' + i);
		strtemp = i + ' [ ' + str;
		strresult = strresult + strtemp;
		
		if ( str == "Other" )
		{	
			str = FindItem('CONTROL' + i + 'other');
			strresult = strresult + '->' + str;
		}
		strresult += ']\r\n';		
	}
	alert(strresult);
  }
  
  function submit_xml_click()
  {
	var strtemp = '', str = '', strresult = '' , x , stranswers ='';

	for(i=1; i< nTotalQuestions+1; i++)
	{
		str = FindItem('CONTROL' + i);
		strtemp = '\t<qid>' + i + '</qid>' + '\r\n' + '\t<answers>\r\n\t\t\t<answer>' + str;
		strresult = strresult + strtemp;
		if ( str == "Other" )
		{	
			str = FindItem('CONTROL' + i + 'other');
			strtemp = '<other>' + ' Other - ' + str +  '</other>';
			strresult = strresult + str;
		}
		strresult += '</answer>\r\n\t</answers>' + '\r\n' ;
	}
	alert(strresult);
  }


  
  </script>]]></xsl:text>
  <script language="Javascript">
	nTotalQuestions=<xsl:value-of select="count(/survey/surveytypes/surveytype/questions/question)"/> 
  </script>
	<table>
			<div style="align:left;width:100%;margin-left:5%">
				<xsl:for-each select="/survey/surveytypes/surveytype/questions/*">
						<xsl:variable name="qidvar" select="qid"/>
						
						<xsl:element name="div" >
							<xsl:attribute name="id"><xsl:text>DIV</xsl:text><xsl:value-of select="$qidvar"/></xsl:attribute>
							<xsl:attribute name="name"><xsl:text>DIV</xsl:text><xsl:value-of select="$qidvar"/></xsl:attribute>
							<xsl:attribute name="style"><xsl:text>display:none</xsl:text></xsl:attribute>
						
							<table width="90%" style="margin-left:5%">
							<tr>
									<td width="40%"  valign="top"><FONT face="Arial, Helvetica, sans-serif" size="2"> <xsl:value-of select="questiondesc"/></FONT></td>
									<!-- Text box, number -->
									<xsl:if test="typeid = 1 ">
										<td > 
											<xsl:element name="input">
												<xsl:attribute name="type">textbox</xsl:attribute>
												<xsl:attribute name="name"><xsl:text>CONTROL</xsl:text><xsl:value-of select="$qidvar"/></xsl:attribute>
												<xsl:attribute name="value"></xsl:attribute>
											</xsl:element>
										</td>
									</xsl:if>
									<!-- Text box, text -->
									<xsl:if test="typeid = 2 ">
										<td> 
											<xsl:element name="input">
												<xsl:attribute name="type">textbox</xsl:attribute>
												<xsl:attribute name="name"><xsl:text>CONTROL</xsl:text><xsl:value-of select="$qidvar"/></xsl:attribute>
												<xsl:attribute name="value"></xsl:attribute>
											</xsl:element>
										</td>
									</xsl:if>
									<!-- Text box, multiline -->
									<xsl:if test="typeid = 3">
										<td> 
											<xsl:element name="textarea">
												<xsl:attribute name="name"><xsl:text>CONTROL</xsl:text><xsl:value-of select="$qidvar"/></xsl:attribute>
												<xsl:attribute name="rows">4</xsl:attribute>
												<xsl:attribute name="cols">34</xsl:attribute>
												<xsl:attribute name="wrap">SOFT</xsl:attribute>
												<xsl:value-of select="''" disable-output-escaping="yes"/>
											</xsl:element>
										</td>
									</xsl:if>		
									<xsl:if test="typeid = 4">
										<td>
												<xsl:for-each select="./choices/choice">
														<xsl:element name="input">
															<xsl:attribute name="type">checkbox</xsl:attribute>
															<xsl:attribute name="name"><xsl:text>CONTROL</xsl:text><xsl:value-of select="$qidvar"/></xsl:attribute>
															<xsl:attribute name="value"><xsl:value-of select="node()"/></xsl:attribute>
															<xsl:attribute name="onClick">javascript:Control_Click(this)</xsl:attribute>
															<xsl:value-of select="node()"/>
														</xsl:element>
														<br/>
												</xsl:for-each>	
										</td>
									</xsl:if>
									<xsl:if test="typeid = 6">
										<td> 
												<xsl:for-each select="./choices/choice">
														<xsl:element name="input">
															<xsl:attribute name="type">radio</xsl:attribute>
															<xsl:attribute name="name"><xsl:text>CONTROL</xsl:text><xsl:value-of select="$qidvar"/></xsl:attribute>
															<xsl:attribute name="value"><xsl:value-of select="node()"/></xsl:attribute>
															<xsl:attribute name="onClick">javascript:Control_Click(this)</xsl:attribute>
															<xsl:value-of select="node()"/>
														</xsl:element>
														<br/>
												</xsl:for-each>	
										</td>
									</xsl:if>
									<xsl:if test="typeid = 7">
										<td> 
												<xsl:for-each select="./choices/choice">
														<xsl:element name="input">
															<xsl:attribute name="type">radio</xsl:attribute>
															<xsl:attribute name="name"><xsl:text>CONTROL</xsl:text><xsl:value-of select="$qidvar"/></xsl:attribute>
															<xsl:attribute name="value"><xsl:value-of select="node()"/></xsl:attribute>
															<xsl:attribute name="onClick">javascript:Control_Click(this)</xsl:attribute>
															<xsl:if test="node()!='Other'">
																<xsl:value-of select="node()"/>
															</xsl:if>
															
															<xsl:if test="node()='Other'">
																<xsl:value-of select="concat(node(),'     ')"/>
																<xsl:element name="input">
																		<xsl:attribute name="type">textbox</xsl:attribute>
																		<xsl:attribute name="name"><xsl:text>CONTROL</xsl:text><xsl:value-of select="$qidvar"/>other</xsl:attribute>
																		<xsl:value-of select="''"/>
																</xsl:element>
															</xsl:if>
														</xsl:element>
														<br/>
												</xsl:for-each>	
										</td>
									</xsl:if>			
									<xsl:if test="typeid = 8 ">
										<td > 
											<xsl:element name="input">
												<xsl:attribute name="type">hidden</xsl:attribute>
												<xsl:attribute name="name"><xsl:text>CONTROL</xsl:text><xsl:value-of select="$qidvar"/></xsl:attribute>
												<xsl:attribute name="value"></xsl:attribute>
											</xsl:element>
										</td>
									</xsl:if>									
								</tr>
								</table>
							</xsl:element>
						</xsl:for-each>
				</div>
			</table>
			<table>
				<tr></tr>
				<tr></tr>
				<tr></tr>
				<tr></tr>
				<tr></tr>
				<tr></tr>
				<tr>
					<td></td>
					<td width="100%" align="center"> 
							<INPUT id="Submit" type="button" value="Submit" name="Submit" onclick="submit_click()"/>
							<INPUT id="Submit1" type="button" value="SubmitXML" name="SubmitXML" onclick="submit_xml_click()"/>
					</td>
				</tr>
			</table>
	</form>
  </body>
  </html>
  </xsl:template>
</xsl:stylesheet>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions