Ideas Behind the Coding of the Trivia Quiz

We've taken a brief look at the final version of the trivia quiz in action and will be looking at the actual code in later chapters, but it's worthwhile to consider the guiding principles behind its design and programming.

One of the most important ideas is code reuse. We save time and effort by making use of the same code again and again. Quite often in a web application, you'll find that you need to do the same thing over and over again. For example, we'll need to make repeated use of the code that checks whether a question has been answered correctly. You could make as many copies of the code as you need, and add this code to your page wherever you need it. However, this makes maintaining the code difficult, because if you need to correct an error or to add a new feature, you will need to make the change to the code in lots of different places. Once the code for a web application grows from a few lines in one page to many lines over a number of pages, it's quite difficult to actually keep track of the places where you have copied the code. So, with reuse in mind, the trivia quiz keeps all the important code that will need to be used a number of times in one place.

The same ideas go for any data you use. For example, in the trivia quiz we keep track of the number of questions that have been answered, and update this information in as few places as possible.

Sometimes you have no choice but to put important code in more than one place, for example, when you need information that can only be obtained in a particular circumstance. However, if you can keep it in one place, you'll find doing so makes coding more efficient.

In the trivia quiz, I've also tried to split the code into specific functions. We will be looking at JavaScript functions in detail in Chapter 3. In our trivia quiz, the function that provides us with a randomly selected question for our web page to display is in one place, regardless of whether this is a multiple-choice question or a purely text-based question. By doing this, we're not only just writing code once, but we're also making life easier for ourselves by keeping code that provides the same service or function in one place. As you'll see later in the book, the code for creating these different question types is very different, but at least putting it in the same logical place makes it easy to find.

When creating your own web-based applications, you might find it useful to break the larger concept, here a trivia quiz, into smaller ideas. Breaking it down makes writing the code a lot easier. Rather than sitting down with a blank screen and thinking, "Right, now I must write a trivia quiz," you can think, "Right, now I must write some code to create a question." I find this technique makes coding a lot less scary and easier to get started on. This method of splitting the requirements of a piece of code into smaller and more manageable parts is often referred to as "divide and conquer."

Let's use the trivia quiz as an example. Our trivia quiz application needs to do the following things:

• Ask a question.

• Retrieve and check the answer provided by the user to see if it's correct.

• Keep track of how many questions have been asked.

• Keep track of how many questions the user has answered correctly.

• Keep track of the time remaining if it's a timed quiz, and stop the quiz when the time is up.

• Show a final summary of the number of correct answers given out of the number answered.

These are the core ingredients for the trivia quiz. You may want to do other things, such as keep track of the number of user visits, but these are really external to the functionality of the trivia quiz.

Once you've broken the whole concept into various logical areas, it's sometimes worth using the "divide and conquer" technique again to break down the sub-areas into smaller chunks, particularly if the sub-area is quite complex or involved. As an example, let's take the "Ask a question" item from the preceding list.

Asking a question will involve the following:

• Retrieving the question data from where it's stored, for example from a database.

• Processing the data and converting it to a form that can be presented to the user. Here we need to create HTML to be displayed in a web page. How we process the data depends on the question style: multiple choice or text-based.

• Displaying the question for the user to answer.

As we build up the trivia quiz over the course of the book, we'll look at its design and some of the tricks and tactics that are used in more depth. We'll also break down each function as we come to it, to make it clear what needs to be done.

What Functionality Do We Add and Where?

How do we build up the functionality needed in the trivia quiz? The following list should give you an idea of what we add and in which chapter.

In Chapter 2, we start the quiz off by defining the multiple-choice questions that will be asked. We do this using something called an array, which is also introduced in that chapter.

In Chapter 3, where we talk about functions in more detail, we add a function to the code that will check to see whether the user has entered the correct answer.

After a couple of chapters of theory, in Chapter 6 we get the quiz into its first "usable" state. We display the questions to the user, and allow the user to answer these questions.

In Chapter 7, we enhance the quiz by turning it into what is called a "multi-frame application." We add a button that the user can click to start the quiz, and specify that the quiz must finish after all the questions have been asked, rather than the questions being repeated indefinitely.

In Chapter 8 we add the text-based questions to the quiz. These must be treated slightly differently from multiple-choice questions, both in how they are displayed to the user and in how the user's answers are checked. As we saw earlier, the quiz will accept a number of different correct answers for these questions.

In Chapter 9, we allow the user to choose the number of questions that he or she wishes to answer, and also whether he or she wants to have a time limit for the quiz. If users choose to impose a time limit upon themselves, we count down the time in the status bar of the window and inform them when their time is up.

In Chapter 11, we will store information about the user's previous results, using cookies, which are introduced in that chapter. This enables us to give the user a running average score at the end of the quiz.

In Chapter 16, the quiz goes server-side! We move a lot of the processing of the quiz so that it occurs on the server before the page is sent to the user. We use the server to store information about the number of questions and time limit that the user has chosen, so that these values can be displayed to the user as the default values the next time he or she starts the quiz.

In Chapter 17, we change the quiz so that it gets its questions and answers from a database, making it easier to add and modify questions.