Jaa

Creating a Quiz Web application using SharePoint designer - Part 3

  • Artikkeli

Welcome to part 3 of this article. We will now begin to build our ShowQuestion.ASPX page, as this is where most of the hard work is done I have split this into two sections. We will be working with the parameters passed from our Default.ASPX page to display the correct question from the correct quiz.

 

Creating the ShowQuestion.aspx

 

We now have our default.aspx page that displays a list of available Quizzes. When the user clicks on the title of a Quiz we jump to the ShowQuestion.aspx page and we pass three parameters via a query string.

Here is an example of the whole URL the default.aspx creates:

http:/server/quiz/ShowQuestion.aspx?Title=Capital%20cities&Question=1&of=3&Session=2009-04-08T01:32:24ZUsername

 

And here is a reminder of the values we are passing in that string

Paramter

Description

Title

Exam Title

Question

The number of the question to display

Of

The total number of questions in the exam

Session

Unique session ID for the attempt at the quiz

 

The ShowAnswer.aspx page is where most of the work for the application is done. The page will display the question itself (fields taken from the Questions list) and populate fields in the Answers DVWP. It will also accept an answer from the user and create items in the Answers list.

Our ShowQuestion.aspx page will consist of two Data View Web Parts (DVWP) one with the Question list as its data source and one with the Answers list as its data source. We will pass values from the query string into the data views and will also pass values from one web part to another (taking fields from the Question table and loading them into the Answers table) – lots to get stuck into here!

In SharePoint designer open up your site and then open your ShowQuestion.aspx page (which we created earlier but is currently blank). You should see a blank form in front of you. To give yourself some room to work click into the form and press return several times to make some space.

Next we are going to create two Web Part Zones, effectively two placeholders for where our DVWP’s will be dropped. To do this, from the top menu select: Insert | SharePoint Controls | Web part Zone.

Do this twice so that you have two Zones on your screen. Currently they will be shown as “Zone1” and “Zone2” so let’s give them more friendly names.

Right click on the Zone and select Web Zone Properties

· Change the name of the First web part to “Questions”

· De-select the three checkboxes to disable users from interacting with the web part

· Do the same for the second Web Zone calling it “Answers”

 

You should now have two rectangular Web Part Zones, one on top of the other.

 

 

Configuring the Questions DVWP

 

The uppermost Web Part Zone will display our Question using a Data View Web Part (DVWP). Click on the Web Part Zone and from the top menu select Data View | Insert a Data view.

You r Web Part Zone will change to reflect that it contains the beginnings of a DVWP (it will show “Click a data source...”). We need to link this to the Questions table and select our fields, to do this:

 

1. In the top right task pane Click on the Data Source Library tab

2. You will see our three SharePoint lists available (Quiz, Questions and Answers)

3. Click on the Questions list and select Show Data

4. You should now be able to see all the fields available in the Questions list

 

 

 

5. Using Control & Click select the following fields from the list: QuestionNumber, Question, AnswerA, AnswerB, AnswerC, AnswerD

6. Click on the Insert Selected Fields button and select Single Item View

 

You should now see your DVWP populated with the Question number, the Question and the four possible answers. Like this:

 

 

This all looks great but at the moment it is just showing the very first question available in the Questions list. We want the view to know which Quiz it is running and also display the correct question number.

To do this we are going to use the Title and Question values that we passed across in the query string.

Passing values from our Query string into our web part

 

To make our DVWP display the correct Quiz and Question number, do the following:

1. Click on the On Object User Interface (OOUI) button for the web part

 

 

You will see a whole lot of options for configuring the DVWP – this web part is very powerful. The DVWP can connect to all manner of data sources (not just lists) and has powerful functionality to display the data in many ways.

 

2.  Click the Filter option

3. Click on the shaded bar entitled Click here to add a new Clause

4. In the Field name drop down box, scroll down and select Quiz

5. In the Values column, select Create a new parameter

6. For the name, enter “Quiz”

7. For the parameter source, choose “Query String”

8. For the Query String Variable enter “Title”

9. For the default value enter the name of your test quiz*

 

*If you have created a Quiz list item for testing put the name of it as the default value so that you will be able to see data in the SharePoint designer view

 

You don’t need to enter a default value but if you don’t then when you are working in the designer you may not see any data displayed as the Quiz Title is only created when you click on the hyperlink.

 

The above steps have filtered the DVWP to only show questions from the Quiz whose title was passed in the Query string. We passed the value of Title from the query string into a parameter of the DVWP called Quiz.

So, we have the name of the Quiz in the Query string stored as title=Quiz Name and each Question has a field with the name of the Quiz it belongs to (Quiz). We just set up a filter to only display questions where the two fields match. I.e. only show questions from the Quiz we have chosen.

Next we want to add another filter to show the Question number that matches the Question number contained in the Query string.

In the Query string we have a value question=1 and in the Questions table we have a field name Question number. We want to add another filter so that only the Question that corresponds to the question number will be showed. I.e. If in the query string we have question=18 then show the Question list item where the Question number field is 18.

Hopefully, you can guess the steps we need to do this:

1.  In the Filter section of the Web Part parameters click the “Click here to add an new clause...”

2. Set the “Field name” to QuestionNumber

3. In the value section, select “Create a new parameter”

4. Give the name as “QuestionNumber”

5. Set the source as “Query” string

6. Set the Query string variable as “Question”

7. Set the default value as “1”

This gives us a new Parameter QuestionNumber which holds the value of the Question from the query string.

With both your filters configured it should look like this:

 

We are passing the query string parameters Title and Question and filtering the view of the Questions table depending on their value.

Save the page and let’s go and test everything works okay.

To test, try this:

1. Go your default.aspx in your browser

2. Hover over each of the Quiz titles (hopefully you have added a couple of Quizzes for testing) and notice how the hyperlink changes to reflect the change in the Title parameter

3. Click on one of the Quiz titles

4. Your ShowQuestion.aspx should now display the first question from the correct Quiz

5. Manually edit the URL in your browser and change the value of Question=1 to Question=2

6. Your page should now display the next question

7. Hit “back” a couple of times on your browser to get back to your default.aspx page

8. Choose another quiz and make sure that the Question shows up correctly

 

Quick summary

 

In part two we built a customised hyperlink that passes parameters via a query string to the ShowQuestion.ASPX page. The page then filters a Data View Web Part depending on those values.

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

Comments

  • Anonymous
    January 01, 2003
    I have followed through the end of this part. I did the test try, and I am not getting the second question of my quizes to display.I changed the Url to show Questions=2&Of=2 instead of the original Questions=1&Of=2, but question 1 still displayed. I went back into the "Question Number" filter in SharePoint Designer, and changed the defalt to "2", and saved. When I went back into my browser I found that it would desplay question 2, but again it would only show question 2. Any suggestions?

  • Anonymous
    January 01, 2003
    I redid everything again, and it's all working fine now.  Never mind!  Thanks!

  • Anonymous
    January 01, 2003
    How do we create the Quizz ? I did not find any indormation on how to accomplish this can anyone give me the link ?

  • Anonymous
    January 01, 2003
    I have followed the instructions and my first quiz and all of its questions are showing just fine.  I put in a second test quiz as well and when I highlight over it in my browser it definitely is referring to the correct quiz.  However, when I click on it it takes me to question number 1 on the first quiz.  Any ideas?

  • Anonymous
    January 01, 2003
    Hi There, I suspect that your filter parameter and your query parameter names don't match (and so wouldn't work).  Note that it is "Question" and not "Questions". HTH, Bren

  • Anonymous
    January 01, 2003
    I took the (s) out of questions in the query, and double checked it in the filter. That fixed it! Thank you.

  • Anonymous
    August 09, 2010
    This has been giving me grief for a couple of days. Everything works swimmingly in this quiz app. The only issue I have is not every question in my quiz has the same number of answers to choose from. So I've been trying to block out the identifying answer letter when the value of the answer field is null. I thought this should work fine: <xsl:if test="@AnswerE!=''"><b>E:</b></xsl:if&gt; But the answer identfier "E:" still appears on every question regardless of whether there's an answer E: or not. Can anyone tell me what I'm doing wrong? Once I have this nailed, I'll need to think about how to limit the number of choices on the drop-down answer list to the appropriate number of choices, as well ...

  • Anonymous
    August 10, 2010
    I also tried: <xsl:if test="@AnswerE"><b>E:</b></xsl:if&gt; figuring that if @AnswerE isn't defined, then the boolean value would be False. But that didn't work either. Now I'm really puzzled ...

  • Anonymous
    August 12, 2010
    The comment has been removed

  • Anonymous
    April 11, 2011
    My DVWP populated with the Question number, the Question and the four possible answers. But, the question and answers all start with <div class=ExternalClass Then a string of numbers, the question, and ends in </div>. What could I have done wrong?

  • Anonymous
    March 04, 2012
    I have tried to get this to work with SP2010 but most of the stuff in this tutorial isn't in sp2010 so I can't figure it out. The Title variable is blank, it doesn't know what "of" is.. wish they refreshed this tutorial for SP2010!

  • Anonymous
    October 17, 2012
    Everything going fine, but can't get quiz name on ShowQuestions.aspx. Can any one help? I have Russian version of SP server 2010, and on ShowQuestions.aspx i can see "without_name" instead of name of my quiz.

  • Anonymous
    October 24, 2012
    I've been working on this for a week and I cannot get the quiz to go to the next question.  I looked up at the URL and for some reason, the URL is not giving the option of question 1 of 10, or however many number of questions I have, it ends with ShowQuestions.aspx.   How can I fix this?  Ideas?  I'm using SP designer 2010.  Followed each step as closely as possible. Thank you!

  • Anonymous
    August 19, 2013
    Hi All, Hoping someone can help - on part 2 ... I can't get anything to show up in the ShowQuestion.aspx part - why wouldn't anything be flowing through?  What can I try? Many thx!!

  • Anonymous
    January 15, 2015
    Using SP2010. Everything works up until I filer for the Question number. I can set the filter for Question number 1 and it works but as soon as I specify the parameter it crashes and says the server returned a non-specific error when trying to get data from the data source. If I try to display the page I get Exception from HRESULT: 0x80131904. Any idea what I am missing?

  • Anonymous
    February 27, 2015
    Hi George, I am getting exactly the same problem as you. Did you manage to find and correct the problem?