When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article

ASP ASP.NET ASP FAQs Message Board Feedback
 
Print this Page!
Published: Wednesday, June 16, 2004

Web-Based Surveys Made Easy, Part 2

By Steve Stchur


  • Read Part 1

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

    <%@ Register TagPrefix = "sstchur" Namespace = "sstchur.web.survey" Assembly = "sstchur.web.survey" %>
    <%@ Page Language = "C#" %>

    <html>
      <head>
        <script runat = "server">
          public void Page_Load(object server, EventArgs e)
          {
            if (ws.PreviouslyCompleted) {
              pnlPreviouslyCompleted.Visible = true;
              pnlSurvey.Visible = false;
            } else {
              pnlSurvey.Visible = true;
              pnlPreviouslyCompleted.Visible = false;
            }
          }
        </script>
        
        <style type = "text/css">
          body, table, td
          {
            font-family: arial;
            font-size: 12px;
            color: #336699;
          }
        </style>
      </head>
      
      <body bgcolor = "#ffffff">
        
        <table border = 0 cellpadding = 0 cellspacing = 0 width = 100% height = 100%>
          <tr valign = "top" align = "center">
            <td width = 100% height = 100%>
      
              <table border = 0 cellpadding = 10 cellspacing = 0 width = 500 style = "border: solid 1px #000000;">
                <tr valign = "top" align = "left">
                  <td>
                    <br/>
                    <p align = "center"><h3>WebSurvey Demo</h3></p>
              
                    <asp:Panel id = "pnlSurvey" Visible = "false" runat = "server">
                      <form runat = "server">
                        <sstchur:WebSurvey id = "ws"
                                           SurveyFile = "survey.xml"
                                           AnswersFile = "answers.xml"
                                           runat = "server"/>
                      </form>                    
                    </asp:Panel>
                    
                    <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 id 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. Update the survey.xml file with the following XML markup:

    <?xml version = "1.0"?>

    <WebSurvey redirecturl = "websurvey.aspx" allowrepeats = "false" cookiename = "WS:Survey1">
      <Group id = "grp_Intro" nextimage = "next.gif">
        <Separator>
          <p><b>WebSurvey Introduction</b></p>
          
          <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 = "FavColor" type = "mcss" layout = "vertical" required = "true">
          <Statement><b>Favorite Color:</b></Statement>
          <Responses>
            <Response>Red</Response>
            <Response>Blue</Response>
            <Response>Green</Response>
          </Responses>
        </Question>
        
        <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.

    Happy Programming!

  • By Steve Stchur


    Attachments:


  • Download the survey control
  • Download the a complete ASP.NET example application using the WebSurvey control


  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article