Go Back   Wiki NewForum > Career Forum > Tech Forum & Tutorial > HTML Forum & Tutorial

HTML Forum & Tutorial End-To-End Process HTML / XHTML / CSS

Views: 1319  
Thread Tools Rate Thread Display Modes
Old 08-09-2010, 11:34 AM
bholas bholas is offline
Award Winner
Join Date:
Apr 2010
Posts: 5,181
Default Creating questions and answers forms for your web pages

So you want to quiz your visitors? Following JavaScript code can help you to easily create Q and A forms for your web pages without using CGI scripts.
The following code will let you display a dialog box indicating whether the selected answer was correct or not. You can also make it redirect the visitor to another web page depending on the answer.
1. First, cut-and-paste the following JavaScript code on to your web page (closer to the top of the page right below the BODY tag is a good location):

Listing #1 : JavaScript code. Download chkanswr.htm (0.72 KB).

2. Insert the following HTML tags to create your quiz form (sample code shown, modify as necessary):
What is JavaScript?

onSubmit="return checkAnswer(this,'B');"

A. Another name for Java

B. A scripting language mostly for the web

C. When you use Java without compiling

Listing #2 : HTML code. Download quiz1.htm (0.37 KB).

What is JavaScript? A. Another name for Java
B. A scripting language mostly for the web
C. When you use Java without compiling

That's it! Simply keep changing the questions and answers to create more quiz forms.
Just be sure to setup the HTML tags in the following format. The NAME tag must be "cc" and there should not be any other fields named "cc". The letter specified for the VALUE tag is the ID for the answer (start with "A" and keep incrementing as in the above sample. "X" is the answer ID in the following sample code):
VALUE="X" NAME="cc">
Custom answer text
The other thing to check is the onSubmit tag for the quiz form as shown below. "Y" is the letter ID for the correct answer. This letter must be assigned to one of the answers in the quiz form.
onSubmit="return checkAnswer(this,'Y');"
Let's look at another sample quiz form. This one will redirect the visitor to correct.htm if the answer is correct or to wrong.htm otherwise. Note the two additional parameters specified in the "checkAnswer()" function:
What is JavaScript?

"return checkAnswer(this, 'C',
'correct.htm', 'wrong.htm');"

Another name for Java

When you use Java without compiling

A scripting language mostly for the web

Listing #3 : HTML code. Download quiz2.htm (0.39 KB).

Now that you know how to create a quiz form using JavaScript, want to make it a pop-quiz form? This page can help you to make your quiz forms pop-up.

Reply With Quote

website tips

New topics in HTML Forum & Tutorial

Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Forum Jump

Powered by vBulletin® Version 3.8.10
Copyright ©2000 - 2019, vBulletin Solutions, Inc.