Creating a Quiz Web application using SharePoint designer - Part 1

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

Overview

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 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:

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:

Create the Questions list

*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

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

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 at least one Quiz list item and then add some Questions list items - in the next part we will start to build our ASPX pages which will work with the lists you have just created.

[Part 1][Part 2][Part 3][Part 4][Part 5]

Comments

• Anonymous
  January 01, 2003
  PingBack from http://blogs.technet.com/brenclarke/archive/2009/04/14/creating-a-quiz-web-application-using-sharepoint-designer-part-4.aspx

• Anonymous
  January 01, 2003
  Nevermind.  Sorry, didn't realize I needed to add {@Title} to the "Text to display:" field on the Hyperlink screen.  Thanks again.

• Anonymous
  January 01, 2003
  The comment has been removed

• Anonymous
  January 01, 2003
  Hi, really nice tutorial. I have a problem with the formula for MarkAnswer: it says "The formula contains a syntax error or is not supported." Any help? Thanks

• Anonymous
  June 25, 2010
  "<xsl:variable name="HowManyCorrect" select="count(/dsQueryResponse/Rows/Row[normalize-space(@MarkAnswer)='1'])" />" How to pass the above variable value to another webpart? Please suggest me as soon as possible if you have a solution. Thanks in advance. Regards, johny

• Anonymous
  August 16, 2010
  How do I filter default.aspx page based on the user submission of questions in the portal. My requirment is once the user has taken the quiz, then that particular quiz should not be availablein default.aspx page again.

• Anonymous
  December 09, 2010
  I am using Sharepoint 2010-- how would you update your instructions to create the same quiz functionality in 2010?  

• Anonymous
  January 24, 2011
  Hi, After completion of  part-5, I  was  tried and i couldn't get the questions from 2nd question onwards tell me solution..what I will do...?

• Anonymous
  February 23, 2011
  Hi very nice post i done it as it is mentioned in the site , in the final step the Result.aspx after copy paste the XSLT code i got the same look and feel as it is in the site but after attending quiz it is not show the pecentage and the percentage with bar after hitting the button for the final answer

• Anonymous
  February 23, 2011
  Hello my issue is i want to display the result of the quiz that is Username,type if the quiz,passmark  and  with Grade 'Pass' or 'Fail'  in a seperate custom SharePoint List how is it possible

• Anonymous
  June 11, 2011
  hey  very nice post. i m having a problem with the MarkAnswer formula. after  i add the formula it does not get displayed in the column list. pl help

• Anonymous
  September 24, 2011
  hi guys will u pls tell me where to download SharePoint  please i am a beginner for it should i start with this Quiz to learn it? btw i'm  eager to learn SP I'll be thankful if u help me .

• Anonymous
  November 07, 2011
  For Norwegian users: MarkAnswer in the Answers-list: The Calculated field: =HVIS(AnswerGiven=CorrectAnswer;1;0)

• Anonymous
  December 07, 2011
  The comment has been removed

• Anonymous
  December 07, 2011
  The comment has been removed

• Anonymous
  August 17, 2012
  I have this tutorial working in 2010 foundation.  I will make edits to the tutorial can email to anyone interested. mcorisitne@seacorp.com

• Anonymous
  January 16, 2013
  I was so excited when I saw the last posting until I sent an email requesting the 2010 tutorial.  Address no longer available. Does anyone have the new 2010 tutorial they could share with me?  thanks.

• Anonymous
  March 20, 2013
  I would be interested to if someone has the changes that are required for working in a 2010 foundation

• Anonymous
  May 15, 2013
  I would also be interested in getting a 2010 tutorial if anyone can find it-- been working on this for days with no luck. Can't get past part 1! (being a newbie is hard..lol)

• Anonymous
  May 29, 2013
  Thanks BrenClarke, my quiz site is now working in full capacity. Had to do some tweaks to make it work in SP2010 but all in all, it provided a great foundation.

• Anonymous
  June 12, 2013
  @Shelly, Tim, Ninny, I haven't seen any tutorial for SP2010, however all the things you need to run it in SP2010 are included in this tutorial, the only differences would be the layout of the commands specially in SP Designer.

• Anonymous
  July 03, 2013
  Hi Mon, I got all the steps in 2010, except the last one in Part 5 in showResults page. I am not able to see the results after formatted in desired layout. The lower webpart shows blank. I had it working till those 1's and 0's of answers in the lower webpart. how did you make it work, could you please share?

• Anonymous
  July 05, 2013
  Okay, I got the problem. The cut and paste section was somewhat misleading. Figured that we have to replace only <xsl:template name="dvt_1"> template with the one given in the tutorial. However, I still have issues in the results section. The "Required Score' shows "NaN", hence the Grade also shows as Fail always. Anyone has any idea?

• Anonymous
  July 05, 2013
  Boa Tarde, Eu estou tentando fazer esse mesmo trabalho utilizando o SharePoint 2013, Porem no 2013 estou meio perdido pois com ele o SharePoint designer não me mostra o designer você tem algum material para esse tutorial em SharePoint 2013?

• Anonymous
  July 08, 2013
  The comment has been removed

• Anonymous
  August 17, 2013
  i want to make a quiz with vb.net where the questions are in database

• Anonymous
  October 28, 2013
  Has anyone found a 2010 tutorial yet?

• Anonymous
  January 28, 2014
  Anything on the 2010 yet?

• Anonymous
  April 23, 2014
  Has anyone created this quiz app in SharePoint 2010 yet?

• Anonymous
  April 23, 2014
  Hi Jayson,
  yes, we have created this Quiz in 2010 with some modifications and it works.

• Anonymous
  April 28, 2014
  Hi Rajni, can you direct me to the site. Thanks in advance! :)

• Anonymous
  June 03, 2014
  Is there a way to put pictures in as the question?

• Anonymous
  June 19, 2014
  Where can I get the modifications to SP2010 of this quiz. Thanks
  

• Anonymous
  June 19, 2014
  Where can I get the modifications to SP2010 of this quiz. Thanks
  

• Anonymous
  July 23, 2014
  Thank you for such a nice compilation!
  
  Don't forget http://www.qfeast.com is really cool if you want to create or take quizzes!

• Anonymous
  August 01, 2014
  I badly need this T.T

• Anonymous
  November 19, 2014
  Result Page shows improper result on page load first time and when we refresh it shows proper result in IE 11. But seems the problem didnt appear in IE 8,9,10.

• Anonymous
  February 13, 2015
  Rubbish...is not possible with SharePoint Designer 2013 and SharePoint Online. Can not do any of the steps in Part 2. Waste of an houR!

• Anonymous
  February 13, 2015
  Has anyone Done this using SPD 2013? Seems like everyone only wants 2010

• Anonymous
  June 24, 2015
  The comment has been removed

• Anonymous
  July 31, 2015
  Please does anyone know if this can be done in Sharepoint 2013? I have done Part 1, but do not seem to be able to do part 2 in 2013. Anyone out there that can help?

• Anonymous
  February 27, 2016
  Hi,
  Nice blog,shall we can use survey list interface and get result user wise.
  

• Anonymous
  March 01, 2016
  I am trying to do it in SharePoint 2013 also. I am getting to the same point as Kristina. Any idea where to get instructions for 2013?