Click here to Skip to main content
12,354,330 members (68,621 online)
Click here to Skip to main content

Stats

26.2K views
615 downloads
12 bookmarked
Posted

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

, 17 Oct 2006 CPOL
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)

Share

About the Author

venkrm
Web Developer
United States United States
No Biography provided

You may also be interested in...

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160621.1 | Last Updated 17 Oct 2006
Article Copyright 2006 by venkrm
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid