Go Back   Wiki NewForum | Latest Entertainment News > Career Forum & Tips > Tech Forum & Tutorial > HTML Forum & Tutorial


Creating questions and answers forms for your web pages


Reply
Views: 3037  
Thread Tools Rate Thread
  #1  
Old 08-09-2010, 11:34 AM
bholas bholas is offline
Award Winner
 
Join Date: Apr 2010
Posts: 4,977
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).


Demo:
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?

onSubmit=
"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
Reply

Tags
website tips

New topics in HTML Forum & Tutorial





Powered by vBulletin® Version 3.8.10
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
WikiNewForum)