Tuesday, April 14, 2009

Creating a Quiz Web application using SharePoint designer


Creating a Quiz Web application using SharePoint designer

Hi, my name is Brendan Clarke and I work as a partner technical specialist in SharePoint. In this five part article I will provide a step by step guide to build a simple Quiz web application using SharePoint designer.

It’s perfectly possible to build web applications without writing any custom code (as the fabulous forty application templates illustrate well) and now that SharePoint Designer is available as a free download combined with launch of SharePoint Online (BPOS) around the world it’s possible to deliver business solutions very rapidly.

Here's is a preview of the three pages that will form our completed application:

The above picture shows the Default.aspx page, the ShowQuestion.aspx and the ShowResults.aspx page


We mostly use the very powerful Data View Web Part (DVWP) to build our application and we will cover some great ways of manipulating list data, such as:

· Passing parameters from one web page to another via a query string

· Passing values from one web part to another

· Removing the (usually mandatory) Title field from list forms and views

· Using useful system variables (such as the logged in user and current date)

· Pre-loading form fields with values

· Creating a persistent session identifier to link multiple list items

· Creating custom forms and passing multiple parameters in a redirected form

· Manipulation of the HTML presentation using XSLT

The application uses three custom lists (Quiz, Questions and Answers) and three ASPX pages (default, ShowQuestion, ShowResults)

So, let’s jump in and get started. I am assuming a general knowledge of SharePoint and SharePoint Designer (SDP) so I will not describe in detail the more basic steps.

Create the lists

Firstly create a new site (or sub site) for your application (a team site or blank site template should be fine).

You then need to create three new custom lists either via the web interface (Site actions > create > lists > Custom list) or by using SharePoint designer (File | New | SharePoint Content | Custom list).

The three custom lists for the application are:

Name of List

Used for

Used by


Stores details of the Quiz itself (Title, pass mark, number of questions)



Stores each question, its multiple choice options and the correct answer



The application uses this list to store and the answer the user chooses



Below are the steps to create the fields for each list.

Create the Quiz list

You will already have a field created called "Title" which we will store the name of each Quiz, you then need to create the following additional fields in your list:

Field Name



Multiple lines of text


Number – also tick the “percentage” box



Create the Questions list

Field Name



Lookup; Link the lookup field to the Title of the Quiz list.




Multiple lines of text – enhanced text*


Multiple lines of text – enhanced text*


Multiple lines of text – enhanced text*


Multiple lines of text – enhanced text*


Multiple lines of text – enhanced text*


Choice- Add “Select”, “A”,”B”,”C” and “D” on separate lines (without the quotes)

Enter “Select” as the default value.

*By selecting these fields as “enhanced text” we can include pictures and advanced formatting in our question and answer text.

A Quick diversion: Getting rid of the Title field from our forms and views

As you can see from the table above, in this instance we don’t have any use for the Title field, which is created by default in every list. We can edit the Field name (not recommend) and change it so that is doesn’t require any information and also remove it from the default view but it still shows up in our form.

As it’s likely that other people will be creating new entries so it would be good to remove it from the form completely (note: the field will still exist which is a good thing, users just won’t see it).

Here is how to remove the Title field from our forms and the default view:

To remove the title field from our form:

1. Go to the list and choose Settings | List Settings

2. Click Advanced settings

3. Change the first entry, Allow management of content types? to Yes

4. In the “Content Types” section that has just appeared, click the Item link

5. Click the Title field and select “Hidden (will not appear on forms)

6. Change the management of content types back to “No” (steps 1-2)

To remove the title field from our list view:

1. Go to the default view for the list by clicking the list name (the page will be /lists/Questions.AllItems.aspx)

2. In the view selector box click and select Modify this view

Modify view

1. Un-tick the Title field in the display section

2. Don’t click OK yet!

Modifying the default view to group and sort our questions

Whist we are here it will be useful to make the default view of the Questions friendlier. As we may end up with several sets of questions shown in one long list it would make it hard work to use. Let’s group each set of Questions into the Quiz they belong to and also list the questions in the correct order. To do this:

1. In the “Sort” section change the “First sort by...” column to “QuestionNumber

2. Expand the “Group by” section and choose to group by the “Quiz” column

The view will now group each set of questions correctly, like this

Create the Answers list

Field Name



Single line of text


Choice – Add options for A, B, C and D


Single line of text


Single line of text




Single line of text


Calculated - add the following formula:


As you can see, the MarkAnswer uses a very simple formula, if the User’s answer matches the answer to the question (stored in the CorrectAnswer field, which is passed from the Question table) then the field is set to a ‘1’, otherwise it’s a ‘0’.

You have now created all the lists that you need. Before we move on it is worth adding a little data into the Quiz and Questions lists, so that you can make sure they are all working okay and it also gives us some data to work with when we create and test our application.

Create a new Quiz list item and then add some Questions list items - in the next part we will start to build our ASPX pages.

Posted: Tuesday, April 14, 2009 11:40 AM by brenclarke

Notes on SharePoint : Creating a Quiz Web application using SharePoint designer


Nate said...

I have the issue of the results section only counting the firts 10 rows of the answers. So if I have a quiz that has 20 Questions and I get all of them correct the webpart only gives me a 50%. Everything works great for a quiz under 10 questions but I can't find the part that is limiting the results to the first 10 questions. Please help. Thank you.

Kristina said...

I ran into the "10 rows" also. I fixed it by turning off Paging. In Sharepoint Designer 2010 you find this by clicking on the web part. In the Data View Tools tab (Green), choose the Options tab, then click the Paging button in the ribbon. Choose "Display All Items".

The Lontra said...

I really like the walkthrough here but i can't get past part 1 since i'm on Sharepoint 2010... do you have any suggestions?

Blog Archive