[thelist] javascript form manipulation poser

Thu Aug 30 06:57:50 CDT 2001

Thanks to the help of several people on this list, I am within touching
distance of achieving my objective which is to successfully create an online
multiple choice quiz spanning several web pages using JavaScript to keep
track of the answers and direct the user accordingly at the end of the test.

I'm at the stage now where I think I've managed to code the pages to
successfully store the answers and pass them onto the next page but I'm at a
loss as to how I can retrieve and manipulate the data from a previous page.
In other words, how do I reference form elements on page 2 that were passed
as hidden on page 1?

To illustrate this further, I'm pasting my code below:

Any help is always greatly appreciated.

Web Page 1 - the first 3 questions

<html><head>
<title>Capital City Test</title>
</head>
<body>
<center><h2>Capital City Test</h2></center>
<form name="page1" method="get" action="page2.htm">
 <p><b>1. What is the capital of Hungary?</b>
<p><input type="radio" name="q1" value="Bucharest">Bucharest
<br><input type="radio" name="q1" value="Sofia">Sofia
<br><input type="radio" name="q1" value="Prague">Prague
<br><input type="radio" name="q1" value="Budapest">Budapest
<br><input type="radio" name="q1" value="Tirana">Tirana
<p><b>2. What is the capital of Chile?</b>
<p><input type="radio" name="q2" value="Montevideo">Montevideo
<br><input type="radio" name="q2" value="Santiago">Santiago
<br><input type="radio" name="q2" value="Caracas">Caracas
<br><input type="radio" name="q2" value="Lima">Lima
<br><input type="radio" name="q2" value="Havana">Havana
<p><b>3. What is the capital of Syria?</b>
<p><input type="radio" name="q3" value="Damascus">Damascus
<br><input type="radio" name="q3" value="Amman">Amman
<br><input type="radio" name="q3" value="Riyad">Riyad
<br><input type="radio" name="q3" value="Beirut">Beirut
<br><input type="radio" name="q3" value="Ankara">Ankara

<p><center><input type="submit" value="Continue"></center>
</form>
</body>
</html>

Page 2 - next 3 questions & first three answers

<html><head>
<title>page2.html</title>
<script language="javascript">

function getArgs(){
   var args = new Object();
   var query = location.search.substring(1);     // Get query string
   var pairs = query.split("&");                 // Split at ampersand
   search_array = query.split("&");     
   for (var i=0; i < pairs.length; i++){
       var pos = pairs[i].indexOf('=');          // Look for "name=value"
       if (pos == -1) continue;                  // If not found, skip
       var argname = pairs[i].substring(0,pos);  // Extract the name
       var value = pairs[i].substring(pos+1);    // Extract the value
       args[argname] = unescape(value);          // Store as a decoded value
   }
   return args;                                  // Return the object
}

</script>
</head>
<body onLoad="getArgs();">
<center><h2>Capital City Test - Page 2</h2></center>
<form name="page1answers" method="get" action="page3.htm">

 <!-- answers from page 1 -->
 <input type="hidden" name="a1" value="args[0]">
 <input type="hidden" name="a2" value="args[1]">
 <input type="hidden" name="a3" value="args[2]">

<form name="page2" method="get" action="page3.htm">
 <p><b>4. What is the capital of Mongolia?</b>
<p><input type="radio" name="q4" value="Ouga Dougou">Ouga Dougou
<br><input type="radio" name="q4" value="Phmon Phen">Phmon Phen
<br><input type="radio" name="q4" value="Ulam Bator">Ulam Bator
<br><input type="radio" name="q4" value="Nicosia">Nicosia
<br><input type="radio" name="q4" value="Beijing">Beijing
<p><b>5. What is the capital of Iceland?</b>
<p><input type="radio" name="q5" value="Helsinki">Helsinki
<br><input type="radio" name="q5" value="Oslo">Oslo
<br><input type="radio" name="q5" value="Stockholm">Stockholm
<br><input type="radio" name="q5" value="Copenhagen">Copenhagen
<br><input type="radio" name="q5" value="Rejkavik">Rejkavik
<p><b>6. What is the capital of New Zealand?</b>
<p><input type="radio" name="q6" value="Canberra">Canberra
<br><input type="radio" name="q6" value="Port Talbot">Port Talbot
<br><input type="radio" name="q6" value="Cape Town">Cape Town
<br><input type="radio" name="q6" value="Wellington">Wellington
<br><input type="radio" name="q6" value="Aukland">Aukland

<p><center><input type="submit" value="Continue"></center>
</form>
</form>
</body>
</html>

page 3 - test results (not yet complete)

<html><head>
<title>page2.html</title>
<script language="javascript">

function getArgs(){
   var args = new Object();
   var query = location.search.substring(1);     // Get query string
   var pairs = query.split("&");                 // Split at ampersand
   search_array = query.split("&");     
   for (var i=0; i < pairs.length; i++){
       var pos = pairs[i].indexOf('=');          // Look for "name=value"
       if (pos == -1) continue;                  // If not found, skip
       var argname = pairs[i].substring(0,pos);  // Extract the name
       var value = pairs[i].substring(pos+1);    // Extract the value
       args[argname] = unescape(value);          // Store as a decoded value
   }
   return args;                                  // Return the object
}

</script>
</head>
<body onLoad="getArgs();">
<form name="page2answers" method="get" action="page3.htm">

<input type="hidden" name="a4" value="args[0]">
 <input type="hidden" name="a5" value="args[1]">
 <input type="hidden" name="a6" value="args[2]">
</form> 
<center><h2>Capital City Test Results</h2></center>
<p>Your answers were as follows:<p>
<script>
document.write(document.page1answers.a1);
</script>
<p>You scored x out of 6.
<p>You got the following answers wrong.
<p>Click <a href="page1.htm"> here</a> to retake the test.
</center>
</body>
</html>

Regards 
Albie Attias 
IT Manager 
Eurosimm specialise in Memory, Hard Drives, Options & Solutions for Major
Branded Systems 
Compaq / IBM / HP / Toshiba / Western Digital / Maxtor / Fujitsu / Hitachi /
Seagate / Quantum 
E-Mail:albie at eurosimm.com
Web: http://www.eurosimm.com
Tel : +44 (0) 1706 360000
Fax : +44 (0) 1706 620000 
AOL IM : AAEUROSIMM 