Click here to Skip to main content
13,349,539 members (50,014 online)
Click here to Skip to main content
Add your own
alternative version


13 bookmarked
Posted 17 Oct 2006

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

, 17 Oct 2006
Rate this:
Please Sign up or sign in to vote.
A generic web based survey system.


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.


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" ?>
      <surveyname> Demo Survey </surveyname>
                  <question qid="1" >
                  <questiondesc>Q1) Enter some free text</questiondesc>
            <question qid="2" parentquestion="3" valuecondition="Yes">
                  <questiondesc>Q2) Select any of the choices</questiondesc>

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

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.


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.


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


About the Author

Web Developer
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

QuestionNeed sample project for this article Pin
satish1nov25-Mar-12 23:29
membersatish1nov25-Mar-12 23:29 
GeneralFreelance Pin
Member 30448412-Jan-11 4:11
memberMember 30448412-Jan-11 4:11 
Generaldo you have an example of adding a dropdown list menu? [modified] Pin
xzone920-Apr-07 14:19
memberxzone920-Apr-07 14:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.180111.1 | Last Updated 17 Oct 2006
Article Copyright 2006 by venkrm
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid