NSurvey already provides general charts displaying the results, but it uses a bar chart and I had to output pie charts as well. So, I implemented them as well.

First, I created a new page, called PieChartReport.aspx, which was empty. After this I used the same code as the BarChartReport and filled up a ChartPointCollection, which I then used to create a new PieChart, render it and send it back to the client

[csharp]
ChartEngine engine = new ChartEngine();
ChartCollection charts = new ChartCollection(engine);

engine.Size = new Size(350, 400);
engine.Charts = charts;
engine.Title = new ChartText();

if (questions.Questions[0].IsParentQuestionIdNull()) {
engine.Title.Text = Server.HtmlDecode(
Regex.Replace(questions.Questions[0].QuestionText, "<[^>]*>", " "));
} else {
String questionText = String.Format("{0} - {1}",
questions.Questions[0]["ParentQuestionText"].ToString(),
questions.Questions[0].QuestionText);
questionText = questionText.Replace(Environment.NewLine, "");
questionText = questionText.Replace("\t", "");
questionText = questionText.Replace("

", "");
questionText = questionText.Replace("

", "");
engine.Title.Text = Server.HtmlDecode(
Regex.Replace(questionText, "<[^>]*>", " "));
}

PieChart pie = new PieChart(data);
engine.Charts.Add(pie);
ChartLegend legend = new ChartLegend();
legend.Position = LegendPosition.Bottom;
engine.HasChartLegend = true;
engine.Legend = legend;
engine.GridLines = GridLines.None;
[/csharp]



Update: I used the following control by the way (which was already in NSurvey): http://www.carlosag.net/Tools/WebChart/Default.aspx

NSurvey provides charting reporting by default, but this could be enhanced by using the Country List control together with the added Belgian Regions. With this question in a survey, as a required question, every entry would have location information. Together with MapPoint a graphical overview could be made, showing additional information per country and region.

To accomplish this, I created a new administration page and edited the UINavigator and HeaderControl classes to add the new page to the menu. On this page were two dropdown lists which included the column names of a survey’s text entries. These lists were used to indicate where NSurvey stored the Country and Region questions. Together with a button that would generate the chart.



To generate the chart, all possible regions were first collected by grouping the entries and storing the unique country and regions. After this, the MapPoint FindService was instantiated and the Find method was called for each address.

[csharp]
FindServiceSoap findService = new FindServiceSoap();
if (ConfigurationSettings.AppSettings["MapPointProxy"] != String.Empty) {
findService.Proxy = this.proxyObject;
}
findService.Credentials = this.ourCredentials;
findService.PreAuthenticate = true;

FindSpecification findSpec = new FindSpecification();
findSpec.DataSourceName = "MapPoint.EU";

foreach (DictionaryEntry locationEntry in locationData) {
// key example: "West-Vlaanderen, BE"
findSpec.InputPlace = locationEntry.Key.ToString();
FindResults foundResults = findService.Find(findSpec);
if (foundResults.NumberFound > 0) {
((CustomLocation)locationEntry.Value).LatLong =
foundResults.Results[0].FoundLocation.LatLong;
}
}
[/csharp]

This gave me the LatLong of every location MapPoint had found, which I used to create an array of Location objects to be passed to the GetBestMapView method. This method returned a MapViewRepresentations object which described to view to use when calling the GetMap method. This view assured every location was on it.

[csharp]
MapViewRepresentations mapRepresentations =
renderService.GetBestMapView(myLocations, "MapPoint.EU");
ViewByHeightWidth[] myViews = new ViewByHeightWidth[1];
myViews[0] = mapRepresentations.ByHeightWidth;
[/csharp]

At this point all required location information was known, the only thing left was to define pushpins that would show up on the generated map and would be clickable.

[csharp]
Pushpin[] myPushpins = new Pushpin[foundRegions.Count];
Int32 pinCounter = 0;
foreach (DictionaryEntry foundRegion in foundRegions) {
myPushpins[pinCounter] = new Pushpin();
myPushpins[pinCounter].IconDataSource = "MapPoint.Icons";
myPushpins[pinCounter].IconName = "1"; // Red pin
Int32 nrResults = ((CustomLocation)foundRegion.Value).ResultCount;
myPushpins[pinCounter].Label = String.Format("{0} {1}",
nrResults,
(nrResults == 1) ? "result" : "results");
myPushpins[pinCounter].LatLong = (LatLong)foundRegion.Key;
myPushpins[pinCounter].ReturnsHotArea = true;
myPushpins[pinCounter].PinID =
(CustomLocation)foundRegion.Value).Location();
pinCounter++;
}
[/csharp]

To get the map, I had to call the GetMap method and supply a MapSpecification. This specification describes the size of the map, the quality, the pushpins and what MapPoint should return. Here, it will return a URL, pointing to the generated map.

[csharp]
MapSpecification mapSpec = new MapSpecification();
mapSpec.DataSourceName = "MapPoint.EU";
mapSpec.Views = myViews;
mapSpec.Options = new MapOptions();
mapSpec.Options.ReturnType = MapReturnType.ReturnUrl;
mapSpec.Options.Format = new ImageFormat();
mapSpec.Options.Format.Height = 500;
mapSpec.Options.Format.Width = 500;
mapSpec.Options.Style = MapStyle.Locator;
mapSpec.Pushpins = myPushpins;
MapImage[] mapImages = renderService.GetMap(mapSpec);
[/csharp]

After the call, MapPoint returned a MapImage object, containg the url to the map, together with information about the special areas on the map, called HotAreas. To make these areas clickable on the map, an HTML imagemap had to be generated.

[csharp]
StringBuilder imageMapName = new StringBuilder();
imageMapName.Append("");
this.imageMapHotAreas.Text = imageMapName.ToString();
mapObject.Attributes["USEMAP"] = "#" + mapObject.ID + "_Map";
[/csharp]

The result was a map, scaled to the best size to include all locations, with pushpins on it, which are clickable and point to the same page with an additional querystring.



This made it possible to visualize the results per region, and when you select a certain region, provide filtered results of that region.

One of the standard controls of NSurvey is the Country List, which provides a dropdown list of countries. Belgium is one of these countries, but when you select Belgium, it doesn’t display the possible regions for Belgium.

This is because the region information is also implemented with the subscriber model. When the country selection changes, it publishes the selected country to the Region List which then looks up the xml file of the selected country, containing the region information. The problem was that there wasn’t a region file for Belgium. So, I looked up the Belgian regions from Microsoft Passport and created the be.xml file:

[xml]



Region :



[Select Region]


Antwerpen
Antwerpen


Vlaams-Brabant
Vlaams-Brabant


Hainaut
Hainaut


Liege
Liege


Limburg
Limburg


Luxembourg
Luxembourg


Namur
Namur


Oost-Vlaanderen
Oost-Vlaanderen


Waals-Brabant
Waals-Brabant


West-Vlaanderen
West-Vlaanderen




[/xml]

As this application was going to collect feedback from Microsoft events, it had to look like it belonged to Microsoft, and it had to be designed professionally. To do this, I visited the Microsoft site, and saved the page to my dev pc. There I stripped all the content and created a template with two user controls, SiteHeader and SiteFooter.

The next step was to include the previously created SurveyListControlOverview on the Default.aspx page to provide a starting point for the user.



When they user selected a survey and clicked the button, the OverviewSurveyId property was retrieved and forwarded to the Survey.aspx page, which displayed the survey in the same layout, together with the survey title.



If an error occurs, the user gets redirected to a generic error page and an email gets dispatched to the site administrators.



A contact page was also added to provide a contact person for users having problems or questions.



The last step in creating the layout was testing if it worked the same in Internet Explorer and Mozilla Firefox. Luckily it worked the same from the first time and the layout was finished.

By default NSurvey provides different kinds of answer types. These are for example Basic Field, Rich Field, Calendar Field, Email Field, Hidden Field, Password Field, Large Field and dropdown lists which use XML files as data source. NSurvey, however, also allows you to extend on these types to create new answer types, with specific functionality.

One of the requirements of the survey was that it had to be possible for students to select their school from a list, but also have the possibility to enter it manually if it wasn’t listed. To do this, I created a School answer type.

This type was inherited from a regular Basic Field type, but was invisible by default. The special feature of this field was that it subscribed to a dropdown list which listed all available schools and an Other possibility. This meant that when the selection of the dropdown list changed, it would publish the new selection to all subscribed answers. Because of this, when the Other possibility was chosen, the field was made visible and it was possible to manually enter the school.

To do this, I had to implement the IAnswerSubscriber interface and use the following code for the ProcessPublishedAnswers method:

[csharp]
public void PublisherCreation(Object sender, AnswerItemEventArgs e) { }

public void ProcessPublishedAnswers(Object sender, AnswerItemEventArgs e) {
if (e != null && e.PostedAnswers != null && e.PostedAnswers.Count > 0) {
String selectedSchool = ((PostedAnswerData)e.PostedAnswers[0]).FieldText;
this.ShowField = selectedSchool.ToLower().Equals("other");
this.CreateChildControls();
}
} /* ProcessPublishedAnswers */
[/csharp]

I also provided a modified CreateChildControls method:

[csharp]
protected override void CreateChildControls() {
if (this.ShowField) {
if (this.ShowAnswerText) {
// This prevents the Answer title being displayed twice
if (Controls.Count > 2) {
Controls.RemoveAt(1);
Controls.RemoveAt(0);
}

if (this.ImageUrl != null && this.ImageUrl.Length != 0) {
Image selectionImage = new Image();
selectionImage.ImageUrl = this.ImageUrl;
selectionImage.ImageAlign = ImageAlign.Middle;
selectionImage.ToolTip = Text;
Controls.AddAt(0, selectionImage);
} else {
Literal literalText = new Literal();
literalText.Text = this.Text;
Controls.AddAt(0, literalText);
}

Controls.AddAt(1, new LiteralControl("
"));
}

if (this.FieldHeight > 1) {
// Creates a multi line field
_fieldTextBox.TextMode = TextBoxMode.MultiLine;
_fieldTextBox.Wrap = true;
_fieldTextBox.Columns = this.FieldWidth;
_fieldTextBox.Rows = this.FieldHeight;
} else {
_fieldTextBox.MaxLength = this.FieldLength;
_fieldTextBox.Columns = this.FieldWidth;
}

Controls.Add(_fieldTextBox);
OnAnswerPublisherCreated(new AnswerItemEventArgs(GetUserAnswers()));
} else {
Controls.Clear();
}
} /* CreateChildControls */
[/csharp]

This way, the field only got shown when the published answer equaled other, otherwise it was hidden. Another version of this was the CheckBoxField answer type. This type provided a default invisible field, which became visible after a certain checkbox was checked.

NSurvey supports matrix questions in its surveys. The only problem with this type of question was that in the reporting section of NSurvey, it listed each row of a matrix question as a possible selection, but it didn’t include which matrix it belonged to. This leaded to a very confusing list, when you have several identical matrix questions which only differentiated in the main question asked.

The solution I had in mind was to change the output from “row question” to “matrix question – row question”. To do this, I first had to modify some stored procedures to include the ParentQuestionText field. After this I traced down the places where the possible questions were added to the dropdown list and added some logic to check if it was a matrix question and concatenated the matrix question with the row question.

One of the places where I had to do this was in the BarChartReport class, which was responsible for generating charts of the rated matrix questions. In the SetQuestionData method the following piece of code could be found

[csharp]
engine.Title.Text = Server.HtmlDecode(
Regex.Replace(_dataSource.Questions[0].QuestionText, "<[^>]*>", " "));
[/csharp]

Which I changed to the following:

[csharp]
if (_dataSource.Questions[0].IsParentQuestionIdNull()) {
engine.Title.Text = Server.HtmlDecode(
Regex.Replace(_dataSource.Questions[0].QuestionText, "<[^>]*>", " "));
} else {
String questionText = String.Format("{0} - {1}",
_dataSource.Questions[0]["ParentQuestionText"].ToString(),
_dataSource.Questions[0].QuestionText);
questionText = questionText.Replace(Environment.NewLine, "");
questionText = questionText.Replace("\t", "");
questionText = questionText.Replace("

", "");
questionText = questionText.Replace("

", "");
engine.Title.Text = Server.HtmlDecode(
Regex.Replace(questionText, "<[^>]*>", " "));
}
[/csharp]

This change, together with the changed procedure because the ParentQuestionText had to be used, resulted in charts with the correct title.



The only thing left was to make sure this change also occurred in the HTML report and the questions dropdown list.

To do this I had to add the following piece of code to the GetQuestionListWithSelectableAnswers method in the DataAccess part:

[csharp]
foreach (QuestionData.QuestionsRow row in questions.Questions) {
if (!row.IsParentQuestionIdNull()) {
row.QuestionText = String.Format("{0} - {1}",
row["ParentQuestionText"].ToString(),
row.QuestionText);
}
}
[/csharp]

These changes made the matrix questions display correctly, as you can see in this picture, which represents a five-question matrix.

The first thing I noticed is the small dropdown in the admin section listing all available surveys. This would become my starting point for users, a perfect place to choose the survey they want to take.

I tracked this down to the SurveyListControl user control which I inherited to create SurveyListControlOverview. This user control removes to automatic postback when it’s in overview mode and also provides an OverviewSurveyId property to indicate the selected survey. It also displays all surveys, because it had to run in anonymous mode, without users having to log on before being able to answer. A shared password would be provided on the event, giving access to the survey.

After this, the user could select a survey from the dropdown list. The only problem was that the choices were ordered by creation date, which would become a problem in the long run when a lot of surveys would be available. To change this I added a simple ORDER BY Title in the vts_spSurveyGetList stored procedure.

At this point, I had a dropdown list with all surveys listed alphabetically to add to any aspx page I wanted.

For one of the projects I had to do, I had to create an online survey application, which would be used to gather feedback from Microsoft events. Up until then, feedback was collected by handing out a form and entering the data manually.

As I was given free choice on how to solve this problem I suggested using an existing open-source framework and extending it to meet the requirements. This suggestion was quickly approved because on one side it meant commitment from Microsoft towards open-source and on the other hand it prevented re-inventing the wheel. The project used for this solution is called NSurvey. This provides a survey framework, making it very easy to setup surveys, add questions, add users, do mailings, implement security on a survey-based level, perform statistical operations on the answers and add new functionality by extending on existing classes.



NSurvey is an ASP.NET application, written in C#, which uses a SQL Server back-end, using stored procedures, and various other layers. The installation of NSurvey went very smoothly because of an msi file, placing all files in their correct location.

I started by testing the application and learning the big structure of how it worked. During this small test round, I began thinking on how the final solution would look.