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

• Download source code - 3.82 KB

Introduction

Web based surveys are very commonly used to collect information from a variety of users and do analysis based on the data. This article discusses how can we design a generic survey application.

About this Article

The article explains how we can design a generic survey system using which we can ask questions, collect information, and do analysis of the data from the survey. Any survey application has the following:

• Ask a set of questions
• Dynamic branching
• Collecting answers
• Analysis of data

This article covers only the front-end part of how to collect information from the user.

Design

The design of the application is generic so that future changes to questions / answers / the logic of branching are very easy.

• Configuration: XML is used for configuration
• Display: XSL is used to render HTML based on XSL
• Events: JavaScript handles all the events and submitting of survey data

Configuration - XML

The XML structure stores the questions list, dependency between questions, type of answer to get, and also the details of what kind of control to display like checkbox/radio/textbox. Please refer to the XML below:

<?xml version="1.0" encoding="utf-8" ?>
<survey>
  <surveytypes>
    <surveytype>
      <surveyname> Demo Survey </surveyname>
            <questions>
                  <question qid="1" >
                  <qid>1</qid>
                  <questiondesc>Q1) Enter some free text</questiondesc>
                  <typeid>2</typeid>
            </question> 
            <question qid="2" parentquestion="3" valuecondition="Yes">
                  <qid>2</qid>
                  <questiondesc>Q2) Select any of the choices</questiondesc>
                  <typeid>6</typeid>
                  <choices>
                        <choice>Choice1</choice>
                        <choice>Choice2</choice>
                        <choice>Choice3</choice>
                  </choices>
            </question>
         </surveytype>
    </surveytypes>
</survey>

The important things to note here are:

• The attribute "parentquestion" sets the dependency
• The attribute "valuecondition" specifies on what condition the question should be displayed
• The element "typeid" specifies the type of control

Control Types Supported are

The following are the different types of controls supported for getting answers:

• Numeric open ended text
• Text open ended text
• Text open ended multiline
• Multiple choice
• Multiple choice with other options
• Multiple choice (single selection)

Please refer to the XML for the list of the complete types and their respective type IDs.

Display - XSL

The XSL "generate-surveyform.xslt" reads the XML questions and creates controls based on the type ID. It creates a DIV tag for each question so that it can handle the dynamic branching by hiding the DIV tag for the respective question. It uses the following XSL tags to create controls:

<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>

Events - JavaScript

As we all know, JavaScript is the core of Internet, and it is very difficult to build a real time web page without JavaScript. I use JavaScript for loading the XML and getting all the questions list. I use XPATH to navigate between different nodes to identify the questions to display, interact with the events of the control, and also to finally submit all the answers for the questions.

Conclusion

There is always scope for improvement for this application as it is for any other application. I hope this may be useful for someone who need to build a generic web based survey system.