Trivia Quiz Goes Server-Side

Let's use some of the knowledge just gained about sessions and session variables to alter the trivia quiz, so that it remembers user selections.

Figure 16-40 is the start page for the trivia quiz, where the user selects the number of questions to answer and in what time limit. If the user changes the default values, completes the quiz, and then asks to restart the quiz, we want to return to this page with the options the user selected previously; at present the default values are shown each time. The users can change previous selections if they wish, and if they do so, these changes will be noted the next time they restart the quiz. Although not a major innovation of interface design, it does make the quiz just that little bit more user-friendly.

Figure 16-40

To accomplish the changes, we will do the following:

Create a virtual directory for our trivia quiz website.
Create a global.asa file for our new virtual directory and use the Session_OnStart event to initialize session variables.
Change the QuizPage.htm to QuizPage.asp so that we can add server-side JavaScript. This page will be altered to show the user's selected time limit and number of questions as selected in the select lists.
Create a new page, NoteUserSelections.asp, that will be posted to at the start of the quiz from QuizPage.asp and will store the user's selected number of questions and time limit in session variables.
Update any as links or references to QuizPage.htm, which has become QuizPage.asp. In fact, it's just TriviaQuiz.htm and GlobalFunctions.htm that need changing.

Before we make any changes to the trivia quiz's code, we need to make the directory containing the trivia quiz web shared, so that visitors to our web server can view it. The easiest way to do this is to make the directory containing the trivia quiz a virtual directory and give it the alias TriviaQuiz. We can do this either from Windows Explorer by right-clicking the directory and selecting Properties, then web sharing, or we can use the Advanced tab in the IIS console. (See the section "Managing IIS under Windows XP" earlier in this chapter for details on how to do this.)

Now that we've set up the virtual directory, we can create a global.asa file using any text editor, containing the following code. Save this into the TriviaQuiz directory.

<script runat=Server language=JavaScript>
function Session_OnStart()
{
   Session("NoQsToAsk") = 3;
   Session("TimeLimit") = -1;
}
</script>

We have connected some code to the Session_OnStart event. We created two session variables, NoQsToAsk and TimeLimit, and gave them initial values of 3 and -1. These two session variables will be used to determine the number of questions and time limit that the user selected in the drop-down lists on the QuizPage.htm page.

We next need to change QuizPage.htm from a static HTML file to an ASP file so that we can insert server-side scripting. Load the page into Notepad or any HTML editor, and then resave it with the .asp extension.

We then need to set the default server-side scripting language for the page by adding a directive to the very top line of the page.

<%@ language = JavaScript%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<META HTTP-EQUIV="expires" CONTENT="Mon, 1 Jan 1980 00:00:00 GMT">
<script language=JavaScript>

Note that we have also added a <meta> tag. This is because we want to make sure that QuizPage.asp is reloaded from the server each time it is navigated to, rather than being reloaded from the browser's cache. If the browser did reload from its cache, the server-side script would not be run and the select lists would not be updated.

Our next task is to alter the <form> tag's attributes and the definition of the select controls.

<form name="frmQuiz" method="post" action="NoteUserSelections.asp">
<P>
Number of Questions <br>
<select name=cboNoQuestions size=1>
   <option value=3>3
   <option value=5
   <%
      if (Session("NoQsToAsk") == 5)
      {
         Response.Write(" SELECTED ");
      }
   %>
   >5
</select>
</P>
<P>
Time Limit <br>
<select name=cboTimeLimit size=1>
   <option value=-1>No Time Limit
   <option value=60
   <%
      if (Session("TimeLimit") == 60)
      {
         Response.Write(" SELECTED ");
      }
   %>
   >1 Minute
   <option value=180
   <%
      if (Session("TimeLimit") == 180)
      {
         Response.Write(" SELECTED ");
      }
   %>
   >3 Minutes
   <option value=300
   <%
      if (Session("TimeLimit") == 300)
      {
         Response.Write(" SELECTED ");
      }
   %>
   >5 Minutes
</select>

We've altered the <form> by adding a method attribute, which determines how information from the form is sent to the server. Additionally, the action attribute has been added, which determines where the form will be submitted. We want it submitted to the NoteUserSelections.asp page, which we will need to create shortly.

Within the form, to alter which option is selected in the select controls, we need to insert a selected attribute into the relevant <option> tag. We use server-side script to do this.

For the second <option> tag of the cboNoQuestions control, we insert a server-side if statement that checks the value of the session variable NoQsToAsk. If it's 5, we write out a selected attribute to the <option> tag, so that when the page is sent to the client browser it reads <option value=5 selected>, causing the browser to make this option the default, rather than the first <option> in the list, which is the normal default.

We do the same thing for the cboTimeLimit select control. In each of the <option> tags, except the first because this is selected by default, we check the value of the TimeLimit session variable using an if statement. If it is the same as the value of that <option> tag, we write the selected attribute to the page.

Before we leave the page, we need to alter the function cmdStartQuiz_onclick(), which is connected to the Start Quiz button in the QuizPage.asp page.

function cmdStartQuiz_onclick()
{
   var cboNoQuestions = document.frmQuiz.cboNoQuestions;
   var noQuestions = cboNoQuestions.options[cboNoQuestions.selectedIndex].value
   var cboTimeLimit = document.frmQuiz.cboTimeLimit;
   var timeLimit = cboTimeLimit.options[cboTimeLimit.selectedIndex].value
   window.top.fraTopFrame.fraGlobalFunctions.resetQuiz(noQuestions,timeLimit);
   document.frmQuiz.submit();
}

We've deleted the following line:

window.location.href = "AskQuestion.htm";

Instead we added document.frmQuiz.submit();. This submits the form; the form submission now kicks off the start of the quiz.

That completes the changes for this page, so make sure to resave it.

We now need to create the page NoteUserSelections.asp, to which the values of the frmQuiz form in QuizPage.asp are submitted. These values are used to update the session variables NoQsToAsk and TimeLimit.

<%@ language = JavaScript%>
<%
   Session("NoQsToAsk") = parseInt(Request.Form("cboNoQuestions"));
   Session("TimeLimit") = parseInt(Request.Form("cboTimeLimit"));
   Response.Redirect("AskQuestion.htm");
%>

Save the page as NoteUserSelections.asp in the same directory as the other trivia quiz pages.

In this page, we first define the default script language for the page as JavaScript. Then we set the session variables NoQsToAsk and TimeLimit to the values passed by the form submitted. Finally, we redirect the user to the AskQuestion.htm page so that the quiz can start.

The remaining changes that we need to make to the quiz merely reflect the change in the QuizPage's extension from .htm to .asp.

First, the main TriviaQuiz.htm page needs to have the SRC attribute for the fraQuizPage frame changed.

<html>
<head>
<title>Wrox Online Trivia Quiz</title>
</head>
<frameset rows="120,*" border="0">
<frame src="TopFrame.htm" name="fraTopFrame">
<frame src="QuizPage.asp" name="fraQuizPage">
</frameset>
</html>

Save the page; then load the GlobalFunctions.htm page, which also requires one change within the getQuestion() function. The change is to the code at the very end of the function, just before the return value is given. If an HTML editor supports Find and Replace, it's easy to just do a find on QuizPage.htm and replace it with QuizPage.asp.

      questionHTML = questionHTML + "<BR>This brings your average todate to " +
         currentAvgScore + "%"
      questionHTML = questionHTML + "<P><input type=button " +
         "value='Reset Stats' " +
         "onclick=\"window.top.fraTopFrame.fraGlobalFunctions.setCookie" +
         "('previousNoAsked', 0,'','1 Jan 1970')\" " +
         "name=buttonReset>"
      questionHTML = questionHTML + "<P><input type=button " +
         "value='Restart Quiz' " +
         "onclick=\"window.location.replace('quizpage.asp')\" " +
         "name=buttonRestart>"
   }
   return questionHTML;
}

Resave the page.

That completes the changes to the trivia quiz for this chapter. Try it out by running the quiz with non-default settings. When we restart the quiz, these settings should be displayed in the select lists as selected options.

In the next chapter, we'll store the questions in a database, and then see how easy it is to access the database with server-side script and build our HTML based on its information.

Microsoft's ASP.NET

ASP.NET is the next generation of Microsoft's Active Server Page (ASP). ASP.NET is different from ASP in two important ways: it supports code written in a number of different languages like C++, Visual Basic, JavaScript, and Perl, and it features server controls that can separate the code from the content. It's a huge topic and while many of the principles in ASP have been carried over to ASP.NET, it's still quite a big leap in terms of programming and deserves a book of its own. You can find out more about it on www.asp.net.