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.xml file, 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.
<asp:Panel id = "pnlPreviouslyCompleted" Visible = "false" runat = "server">
Thank you for taking our survey.
</asp:Panel>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
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 if statement
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 <asp:Panel> whose id is phSurvey will be
made visible. If the survey is not "displayable", the <asp:Panel> with idphPeviouslyCompleted 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.
Update the survey.xml file with the following XML markup:
<p>Thank you for taking the time to read my article on 4GuysFromRolla.Com. The survey you are
viewing was created for demo purposes. Hopefully, it will give you an idea of how flexible
the WebSurvey control is.</p>
<p>As you can see, this page contains no questions, it serves as nothing more than an Intro
or "filler" page. You can place anything you want in this section, including HTML (as long
as it is well-formed with regards to XML.</p>
<p>Ok, enough intro. To get started with the survey, simply click the Next button.</p>
</Separator>
</Group>
<Group id = "grp_PersonalInfo" backimage = "back.gif" nextimage = "next.gif">
<Separator><b>Page 1 of 2: Personal Information</b></Separator>
<Question id = "FName" type = "shortans" cols = "30" required = "true">
<Statement><b>First Name:</b></Statement>
</Question>
<Question id = "LName" type = "shortans" cols = "30" required = "true">
<Statement><b>Last Name:</b></Statement>
</Question>
<Question id = "Email" type = "shortans" cols = "30" required = "true">
<Statement><b>Email Address:</b></Statement>
</Question>
</Group>
<Group id = "grp_Favorites" backimage = "back.gif" nextimage = "finish.gif">
<Separator><b>Page 2 of 2: Your Favorite Stuff</b></Separator>
<Question id = "FavFoods" type = "mcms" required = "false">
<Statement><b>Favorite Foods (Ctrl + Click to Multiple Select):</b></Statement>
<Responses>
<Response>Green Eggs and Ham</Response>
<Response>Beer</Response>
<Response>Pizza</Response>
<Response>Sushi</Response>
<Response>Steak</Response>
<Response>Crabs</Response>
</Responses>
</Question>
<Question id = "Description" type = "essay" cols = "30" rows = "4" required = "false">
<Statement><b>Tell us about yourself:</b></Statement>
</Question>
</Group>
</WebSurvey>
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 <Group>
tag doesn't actually contain any questions, it only contains one simple <Separator> tag.
The <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.
The second <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
changed the nextimage attribute to next.gif instead of finish.gif, since
this <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.
The third <Group> tag gets a little more interesting. Here was have a
<Question> of type mcss (multiple choice, single selection). It's fairly obvious,
but mcss questions have a predefined set of responses. Take a look at the Favorite Color question.
Each <Response> element within the <Responses> element represents one possible
answer. 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, cols and rows,
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
comments.
The screenshots below show the updated WebSurvey in action...
The answers.xml File
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 AnswersFile property.
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 questionId attribute 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.
Conclusion
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.xml file 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 sstchur@yahoo.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.
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