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:
Name of List |
Used for |
Used by |
Quiz |
Stores details of the Quiz itself (Title, pass mark, number of questions) |
Default.aspx |
Questions |
Stores each question, its multiple choice options and the correct answer |
ShowQuestion.aspx |
Answers |
The application uses this list to store the answer the user chooses |
ShowQuestion.aspx ShowResults.aspx |
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 |
Type |
Multiple lines of text |
|
Number – also tick the “percentage” box |
|
Number |
Create the Questions list
Field Name |
Type |
Lookup; Link the lookup field to the Title of the Quiz list. |
|
QuesionNumber |
Number |
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
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
Field Name |
Type |
Single line of text |
|
Choice – Add options for A, B, C and D |
|
Single line of text |
|
Single line of text |
|
Number |
|
Single line of text |
|
Calculated - add the following formula: =IF(AnswerGiven=CorrectAnswer,1,0)
|
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.aspxAnonymous
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 removedAnonymous
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? ThanksAnonymous
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, johnyAnonymous
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 answerAnonymous
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 possibleAnonymous
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 helpAnonymous
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 removedAnonymous
December 07, 2011
The comment has been removedAnonymous
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.comAnonymous
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 foundationAnonymous
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 removedAnonymous
August 17, 2013
i want to make a quiz with vb.net where the questions are in databaseAnonymous
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. ThanksAnonymous
June 19, 2014
Where can I get the modifications to SP2010 of this quiz. ThanksAnonymous
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.TAnonymous
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 2010Anonymous
June 24, 2015
The comment has been removedAnonymous
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?