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

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

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

Description

Multiple lines of text

PassMark

Number – also tick the “percentage” box

NumberOfQuestions

Number

Create the Questions list

Field Name

Type

Quiz

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

QuesionNumber

Number

Question

Multiple lines of text – enhanced text*

AnswerA

Multiple lines of text – enhanced text*

AnswerB

Multiple lines of text – enhanced text*

AnswerC

Multiple lines of text – enhanced text*

AnswerD

Multiple lines of text – enhanced text*

CorrectAnswer

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

Type

Title

Single line of text

AnswerGiven

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

CorrectAnswer

Single line of text

Exam

Single line of text

QuestionNumber

Number

SessionID

Single line of text

MarkAnswer

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