Web-Based Surveys Made Easy, Part 2By Steve Stchur
In Part 1 we looked at an overview of the Web survey control and the format of the survey XML file. In this second and final part we'll see a real-world example of using the survey control.
An Example Survey
To demonstrate the survey XML file, let's look at a complete, multi-page survey example. Before we look at the updated
survey.xmlfile, I took a moment to gussy up the ASP.NET Web page's HTML syntax, which improves the appearance of the survey results. I used a bit of CSS and some tables for positioning.
The updated HTML contains some tables and CSS to pretty up the appearance a bit, but the most important thing to
notice is the C# additions made to the
Page_Load event handler. I've added an
which checks to see if the survey is "displayable" (the property
PreviouslyCompleted is a Boolean value
which returns true if the survey can be displayed, and false otherwise). If the survey is "displayable" (i.e.
the user had not yet taken it), the
phSurvey will be
made visible. If the survey is not "displayable", the
phPeviouslyCompleted is made visible.
While we've made some significant changes to the user interface, our survey is still rather devoid of content.
Let's add a intro page to the survey, a few more questions, and while we're at it, I'll introduce a few new tags.
survey.xml file with the following XML markup:
While the survey file has grown quite a bit, don't feel overwhelmed, it's still pretty simple. The first thing to
notice is that I've added two new
<Group> tags, giving us a total of three. This means that our
survey will span three pages. However, one thing you may find interesting is that the first
tag doesn't actually contain any questions, it only contains one simple
<Separator> element is very powerful and is one of the features that allows for extreme
customization of the WebSuvey Control. You can place a
<Separator> essentially anywhere in the
XML file, and within the
<Separator>, you can place all kinds of HTML to help spice up your
survey. I haven't done anything earth-shattering in my example. Just a few short sentences explaining that
page one is an intro page, but it gives you an idea of what's possible.
<Group> tag has been altered a bit from our earlier example. First off, I added a
backimage attribute so that the user can return to the intro page if he desires. Secondly, I
nextimage attribute to
next.gif instead of
<Group> tag no longer represents the last page of the survey.
|Some of you might be wondering if you can use traditional buttons instead of image buttons. Unfortunately, the answer is no. It is something I am considering implementing, but for the time being, you'll need to create at least one GIF or JPEG image to represent your buttons. These images can reside anywhere, as long as you use a relative path to refer to them in the XML file.|
I've also added two new questions to this group. One asks for the user's last name, and the other requests his email address. Since both of these questions are short answer questions, which we've already covered, they don't require much explanation.
<Group> tag gets a little more interesting. Here was have a
<Question> of type
mcss (multiple choice, single selection). It's fairly obvious,
mcss questions have a predefined set of responses. Take a look at the Favorite Color question.
<Response> element within the
<Responses> element represents one possible
mcss questions are always displayed using radio buttons.
The next question, a
mcms (multiple choice, multiple selection) question, functions in much the same
was as the
mcss question, only users are allow to select multiple answers by using Ctrl + Click.
Questions of type
mcms are displayed using a ListBox Control.
The last question is an essay question, and take two simple attributes,
which define the width and height of the TextArea. It's pretty self-explanatory. Essays questions offer the user
a TextArea in which to type long responses. They are a perfect choice for allow the user to provide additional
The screenshots below show the updated WebSurvey in action...
A survey isn't much good without any answers. When a user completes a survey, the results are stored in an XML-formatted file as specified via the WebSurvey's
AnswersFileproperty. The file's structure is pretty simple. Every time someone completes the survey, you get a new
<AnswerSet>element appended to the file. Within each
<AnswerSet>element you will see various
<Answer>tags. These are the tags that represent the answers to the survey. Each
<Answer>tag will have an
questionIdattribute with it, so you know which question it refers to. A screenshot of the answers XML file is shown to the right.
At first glace, it might seem like this is a rather clumsy way to collect the answers to the survey. And I must admit myself, that if you have an extremely extensive survey with thousands of respondants, it is. However, the most important thing to keep in mind here, is that all of the data is kept in tact using this method. Therefore, a savvy programmer could quite easily write a script that extracts the data from the XML file and writes it to a database. Or, as I have often done myself, you could simply write a script that uses XQuery to directly query the data from the XML file. To see a quick and dirty example of what you can accomplish using XQuery, take a look at my Favorite Colors Poll.
This has been a rather whirlwind tour of the WebSurvey Control. We covered how to use the control in an ASP.NET Web page and how to create the
websurvey.xmlfile that goes with it. If you have any questions or comments, or are having trouble implementing WebSurvey on your site, please don't hesitate to drop me a line at email@example.com. I check my email pretty regularly, so I should get back to you quickly.
That about wraps it up for this article. If you're wondering how I wrote this control, you'll have to wait till next time. Though I won't give you the source code outright, I will touch on the concepts I used to create this monster. And if you're so inclined, it should give you sufficient knowledge create a WebSurvey Control of your own. Additionally, a future article will look at working with the data in the Answers XML file in more detail.