Windows Systems Administrator Jupitermedia US-CT-Darien Post A Job | Post A Resume

A Beginners Guide to Creating Quiz and Feedback Forms
By Marc Draco

---

If you're new to ASP and HTML and you want to make your website that little bit more personal this might be the place to start.

I first started mucking around with ASP because a friend of mine paid in excess of $2000 for a website and it was a mess. It was a hash of lousy design and didn't do a thing for his image: as it stands now, only you can be the judge.

This article describes how to create on-line quizes and parse response forms without benefit of a database or the CDO to perform the email - more on that later. If you want a really cool database-based quiz, you should read Ryan S.'s great article on creating On-Line Quizes, but if you like it low-down quick and dirty, then here's the place you should be! A real-life version can be seen working at: http://www.nima99.co.uk/quiz.asp. Just don't shoot me - I did write the questions! For the sake of example, we'll stick to something simple with just three variations on the questionaire and a self-marking quiz with three questions.

The orginal uses tables to format the text but that clutters the listings, which are more important here. There are three different inputs a textbox, a radio group and a dropdown list. In real-life you can use checkboxes and even multiple selctions depending on what your form needs to do. For speed, I design everything using FrontPage Express or Netscape Composer (they're free and I'm cheap) and add the code using David Wier's superb ASP Express. This ecclectic approach will be frowned upon by purists but it allows for very fast development.

The crucial factor to to making any form based upon this approach is in naming the objects. Each entry must be "named" in numerical sequence; ideally starting from 1. The end-user doesn't see this so it won't matter to them, but the parser relies on it. I.e. all the objects in Entryfield 1 are named "1"; Entryfield 2, "2" and so on. You'll see this in action in Listing 1.

I should probably mention at this point that it is possible to use a MailTo: method as part of the form rather than passing it to an ASP script:

<form action="mailto:someone@somewhere" method="POST">

There are a couple of problems with this approach. Not least that you have to use POST (GET doesn't work). But in any case the data that is attached to the email gets scrambled so badly even the humble space is replaced by "+". Although that's not difficult to overcome, Netscape and Explorer both warn the user they are sending form contents by email with a painful modal request. Awww poo.

SKINNING CATS
As with most things, there is more than one way to skin this cat, so I've provided three possible solutions to cope with varying needs. The simplest solution relies on you knowing how many questions there are on the form. This might sound obvious, but it's possible (as in my case) that some other willing soul is designing the form and uploading the HTML without going through you first. It's also possible that you have more than one form that you want parsed by the same code.

In reality reusable code like this should be Included where needed. (If you don't know how to use the Include directive try this great tutorial on 4Guys.) So let's look at a really simple example, Listing 2 and Listing 3.

Most of the code in Listing 3 should be fairly obvious as it relies on the fact that we know how many questions are involved (three in our example) so we set a variable to that; OK, for purists, it's a constant. Next we'll pluck the player's name from the form; since this is not a question we don't assign it a number and if nothing's supplied, we give it a simple default. If it was really important that you had that information, a simple popup should suffice and there are several articles on 4Guys discussing form validation and popup warnings.

Next up, we use For...Next to loop through the answers: this is the clever bit since the loop's iteration is used to pluck the appropriate answer from the form data:

Ans=(Request(Cstr(Quest)))

Now we're going to email those results back to the webmaster. Now I gather there is some contention regarding the implementaion of mailto: on early browsers and several people have (rightly) noted that there are oinks out there who:

(a) Can't be bothered to set their email application correctly - so MailTo: doesn't work;
(b) Don't have a newer browser with MailTo: support;
(c) Can't spell thier own email;
(d) All of the above.

Problems (a) and (b) can be circumvented with the optional Collaborative Data Object, which can be used to send an email without going through a client's own email applet. There's a smashing article on 4Guys which discusses it in more depth but I haven't used it here simply because the server hosting this example doesn't have the required SMTP installed yet (see the article Sending Emails in ASP Using CDO for more information on using CDO)! However, the code presented here should convert to the CDO in minutes. Problems (c) and (d) are always going to be around and those users would be better off sticking with pen and paper.

Constructing the actual hyperlink is worth study since it takes place over several lines of code. The first generates the hyperlink proper with the recipient's address plus the optional body tag. Then, a For...Next loop steps through the form data again and generates the body of the email. Finally a bit of straight HTML closes the tag and cleans up. Done in this way, we have to separate each line of the answers with a delimiter (\) because the tag does not support multiple lines. However, this is easier to read at the other end than a form-based attachment and the user doesn't get pestered with a modal alert about security.

CAT SKINNING Part Deux:
Now how about the really enthusiastic guy who desperately wants to design a news form? The sort of bloke I'm faced with. Now, because we're having problems with file permissions at the host, he has to design the thing in native HTML and upload it with FTP. (At least it saves me a job of converting a raw questionaire text into HTML using ASP!)

Two different solutions come to mind that may suit different situations. The first is uses a delimiter in the form.htm file after the last question, thus:

<input type="hidden" name="4" value=":">

Now our decoder code looks more like Listing 4. A similar loop and test would be added to the hyperlink construction later.

However, this is a little clumsy since ASP already allows us to count the number of fields in a form using For...Each...Next construct as Listing 5 shows. Using this it is possible to count the number of items on a form; any field or button counts as an item. Most forms will have at least two extra items that you won't need to include in the count: the Submit and Reset buttons; the example also has a text field. In order to allow for these, the constant Extras should be set equal to the number of items to ignore.

Two B, Or Not Two B
In editing the first draft of this article, Scott Mitchell suggested it would be better to separate the "post it off" quiz found at NIMA Karate to a self-test quiz complete with marking. The NIMA quiz is an unusual one because judges wanted to see essay-like answers rather than multiple choice that simple computer logic allows. After spending an entire morning chuntering about self-important editors (only kidding, Scott ;-]) I came up with a novel solution that will fit most purposes. This is a fun, self-marking quiz form parser that like the more advanced examples earlier will serve one or more forms with different (albeit, multiple choice) questions. Listing 6 shows an example of a typical form - radio and dropdown groups can be used interchangeably, but for quizes, design rules dictate you should stick to one or the other; and frankly, radio buttons are probably best.

What's important to note here is the way in which the answers are tucked in the form along with the questions! For example:

<input type="hidden" name="1a" value="AWindows NT">

Now I can just imagine you thinking that I've gone quite mad: but wait - this is a fun quiz and no one would be looking at the source unless they wanted to cheat. In itself, that would be pointless since the quiz will correct you at the end anyway. Once again, in order for this parser to work, the inputs must be named correctly. Hidden inputs (which don't have to follow the questions, by the way) must be named as shown. That is: answer 1 is 1a, answer 2 is 2a and so on. The format of the value part for each is in two parts. A single character represents the correct option (A, B, C, etc.) followed immediately by a text version of the correct answer - which could be a short explanatory paragraph if required, e.g.:

<input type="hidden" name="1a" value="AWindows NT Server uses ASP to enhance Web pages simply">

And if you're really enthusiastic, the tag can even contain HTML markup.

<input type="hidden" name="1a" value="AWindows <i>NT Server</i> uses <b>ASP</b> to enhance Web pages simply">

Neat eh? Before you get too carried away though, as the code stands the "explanation" is only displayed if the user selects full scoring and makes an error on that question. Ok, over to Listing 7: here's the tricky bit.

Max = (QuizLen - 3) /2 For Question = 1 To Max Answer = Request(Cstr(Question) & "a") Check = Right(Answer, Len(Answer) -1) Answer = Left(Answer,1) If Request(Cstr(Question)) = Answer Then Score = Score + 1 Else If Request(Cstr("b2")) <> "" Then Response.Write("<br><br>Your answer to question: " & Question & " is wrong.") Response.Write("The correct answer was: " & Check & "<br>") End If End If Next

Max determines the maximum score possible by taking the number of questions which is the number of items on the form, minus the three buttons (two submit and a reset) divided by two to allow for the included answers. We then loop through the answers plucking the correct answer from the form using this:

Answer = Request(Cstr(Question) & "a")

Constructs the question number + "a" - i.e. "1a" and places that "hidden" form response into Answer.

Check = Right(Answer, Len(Answer) -1)

Gets the explanatory text by selecting everything but the first character, and finally:

Answer = Left(Answer,1)

Takes just the first character from the string and places it in Answer.

The remainder of this code should be fairly self-explanatory. That concludes this discussion - if you do use it to impliement your own quiz, drop me an email so I can have a go at it.

Happy Programming!

Marc Draco has written many articles and several books on computing back in the halcyon days of the Commodore Amiga, which was very popular in his native land. He is currently seeking gainful employment...

---

Attachments:

View the code for Listing 1 in text format

View the code for Listing 2 in text format

View the code for Listing 3 in text format

View the code for Listing 4 in text format

View the code for Listing 5 in text format

View the code for Listing 6 in text format

View the code for Listing 7 in text format

Windows Internet Technology | ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article