Creating a Multiple Choice Quiz System with CGI
Now that we have created a fairly simple interface to the quiz data, let's create the first of our two programs, askquestion.pl. This program produces an HTML form which not only asks a question, but also lets the user choose an answer by clicking on the appropriate radio button.
One possible version of the program, shown in Listing 2, is fairly straightforward. It creates one instance of CGI, an object which helps us write CGI programs, and one instance of QuizQuestions, the object we created above. After instantiating these two objects, we then produce a simple HTML form containing four radio buttons that correspond to each possible answer. We then create a submit button and a reset button, and finish creating the HTML form.
However, we also create a hidden field that contains the number of the question the user is answering. This number is returned by the getQuestion and getRandomQuestion methods within QuizQuestions. If you didn't understand previously why we needed to return these values along with the questions and answers, perhaps it will be clearer now. HTTP is a stateless protocol—every request made to a server is independent of any other requests made to it. The quiz requires at least two connections to the HTTP server—one to get the question and produce a form with askquestion.pl, and a second to submit the user's response and check the answer, checkanswer.pl.
The problem is that checkanswer.pl can verify only that the user's answer is correct if it knows which question the user was asked. Since checkanswer.pl is invoked with a separate request to the HTTP server it cannot know which question was selected, unless we have some way of passing that message from the invocation askquestion.pl.
We could have used the hidden field to pass the correct answer along to checkanswer.pl, but this is a bad idea because hidden fields are hidden only from obvious view. If a user were interested in finding the correct answer, he or she would be able to look at the page's HTML source, which would quickly reveal the answer. This way, users know only which question is being asked, not which answer is correct.
Also note that the name of the quiz comes from the query string, which is passed to us in the QUERY_STRING environment variable. This lets us, as mentioned above, use the same quiz program for multiple programs. By changing the value placed in the query string, you can turn this pair of programs into many different quizzes, each with its own set of questions and answers. When we set the action attribute in the <Form> tag, we make sure that it includes not only the name of the program to which the form should be submitted, checkanswer.pl, but also the name of the quiz, which appears in the query string.
As we saw earlier, the form generated by askquestion.pl is submitted to a second CGI program, checkanswer.pl. Checkanswer.pl opens the list of questions, retrieves the question that the user was asked by retrieving the value of the questionNumber form element, which is hidden in the form, and checks the user's answer against the correct one.
If the user answers the question correctly, the program displays a “congratulations” headline along with the correct answer, and asks if the user would like another question.
If the user answers the question incorrectly, the program displays the correct answer, offers some consolation, and asks the user if he or she would like to continue.
Now you can see why you need the getQuestion and the getRandomQuestion method. With getQuestion alone, you can retrieve a question, but not a random selection from the list of questions. But if you had only getRandomQuestion, you would not be able to retrieve the question that the user had asked, and thus would not be able to check the user's answer against the correct one.
The source code for checkanswer.pl is in Listing 3. One obvious flaw of this implementation is that if the site administrator decides to modify the questions file between the time the user receives the question and when he or she submits the form, the question might be marked as wrong. That's because the programs expect the order of the questions will not be modified between the time the question is asked and when it is answered. If you were to insert a new question at the top of the file, this would turn question 1 into question 2, question 2 into question 3 and so on—which would mean that checkanswer.pl would compare the user's answer with an answer to a different question.
Note that we used Perl's eval function to get the actual text of the answer. Perhaps this is simply a personal hang-up, but I hate it when I am told that I answered incorrectly, but no one tells me what the correct answer was. We could have stored the answers in an associative array, but I decided that it would be interesting to use eval to get the value of a variable. In this case, we concatenate the string “$answer” and the value of $rightAnswer, giving us one of the four possible strings “$answerA”, “$answerB”, “$answerC” or “$answerD”. eval is handed that string and returns the value of the variable named in the string.
Practical books for the most technical people on the planet. Newly available books include:
- Agile Product Development by Ted Schmidt
- Improve Business Processes with an Enterprise Job Scheduler by Mike Diehl
- Finding Your Way: Mapping Your Network to Improve Manageability by Bill Childers
- DIY Commerce Site by Reven Lerner
Plus many more.