|
|
In our made-up school Center Park, I imagine that the students want to know their score on a test as soon as possible, and that the teachers get tired of constantly being asked if the tests are graded yet. Because of this situation, we decided it would be a good idea to grade the test automatically when it is submitted, and then display the results to the test-taker immediately. Fortunately for us, JavaScript is perfectly suited for this functionality—but first I have to figure out how to get the form date from one page to another.
In the previous section, we had the form submitting to a separate page called Grader.html. This sends each form field to the Grader.html in the form name=value through the URL string. Unfortunately, we can not determine beforehand in which order the form fields will appear within the URL string, so we have to develop a way to get the name=value pairs out in any order. Fortunately, we remembered that we had this exact problem when working with cookie files, so we modified the getCookieValue() function for the URL string.
function getFormValue( name ) { var c = location.href.split( "?" )[1]; var begin = c.indexOf( name ); if( begin < 0 ) return( "" ); begin += name.length + 1; var end = c.indexOf( "&", begin ); if( end == -1 ) end = c.length; return( unescape( c.slice( begin, end ) ) ); }
Instead of looking in the cookie file for name=value pairs, this function searches the URL string for the desired information using the ampersand (&) as a delimiter. With the problem of retrieving the question answers from the previous page solved, all we have to do is check the given answers against the correct answers and generate a score.
Here is the complete source for the Grader.html page:
<html>
<head>
<title>Center Park Test Grader</title>
<script language="JavaScript">
<!--
var total = 0, correct = 0;
function getFormValue( name )
{
var c = location.href.split( "?" )[1];
var begin = c.indexOf( name );
if( begin < 0 ) return( "" );
begin += name.length + 1;
var end = c.indexOf( "&", begin );
if( end == -1 ) end = c.length;
return( unescape( c.slice( begin, end ) ) );
}
// -->
</script>
</head>
<body>
<b><font size="5">Computer Science 101 Midterm Test</font> </b>
<br><br>
<font face="Courier">
All the questions are <b>compulsory</b>.
Please read the questions <i>carefully</i> before answering.
Do not spend too much time on any one question.
You have 30 minutes to complete the test. Good Luck!
</font>
<br><br>
<form>
<table width="100%" cellpadding="2" cellspacing="2">
<tr>
<td>1)</td>
<td>
<font face="Courier">
Imagine there was no precedence for arithmetic operators.
Assuming left associativity for all operators, what is the value
of the expression 5-3*4/2+6 ?
</font>
</td>
</tr>
<tr>
<td>Answer</td>
<td><b>10</b>
<script language="JavaScript">
<!--
if( parseInt( getFormValue( "Q1" ) ) == 10 )
{
document.write( "<font color='red'><b>CORRECT!</b></font>" );
correct++
}
else
{
document.write( "<font color='red'><b>Wrong</b></font> " +
"You answered: " + getFormValue( "Q1" ) );
}
total++;
// -->
</script>
</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td>2)</td>
<td>
<font face="Courier">
What HTML tag must all JavaScript functions be nested in ie:
HTML, BODY, TABLE?
</font>
</td>
</tr>
<tr>
<td>Answer</td>
<td><b>SCRIPT</b>
<script language="JavaScript">
<!--
if( getFormValue( "Q2" ).toUpperCase() == "SCRIPT" )
{
document.write( "<font color='red'><b>CORRECT!</b></font>" );
correct++
}
else
{
document.write( "<font color='red'><b>Wrong</b></font> " +
"You answered: " + getFormValue( "Q1" ) );
}
total++;
// -->
</script>
</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td>3)</td>
<td>
<font face="Courier">
What event is spawned after a user has selected text or HTML
elements on a Web page?
</font>
</td>
</tr>
<tr>
<td>Answer</td>
<td><b>OnSelect</b>
<script language="JavaScript">
<!--
if( getFormValue( "Q3" ).toUpperCase() == "ONSELECT" )
{
document.write( "<font color='red'><b>CORRECT!</b></font>" );
correct++
}
else
{
document.write( "<font color='red'><b>Wrong</b></font> " +
"You answered: " + getFormValue( "Q3" ) );
}
total++;
// -->
</script>
</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td>4)</td>
<td>
<font face="Courier">
What type of variable scoping does JavaScript use?
</font>
</td>
</tr>
<tr>
<td>Answer</td>
<td><b>Static</b>
<script language="JavaScript">
<!-
if( getFormValue( "Q4" ).toUpperCase() == "STATIC" )
{
document.write( "<font color='red'><b>CORRECT!</b></font>" );
correct++
}
else
{
document.write( "<font color='red'><b>Wrong</b></font> " +
"You answered: " + getFormValue( "Q4" ) );
}
total++;
// -->
</script>
</td>
</tr>
<tr><td> </td><td> </td></tr>
<tr>
<td>5)</td>
<td>
<font face="Courier">
What relational operator is used to determine if two variables
of the same type are not equal to each other?
</font>
</td>
</tr>
<tr>
<td>Answer</td>
<td><b>!=</b>
<script language="JavaScript">
<!-
if( getFormValue( "Q5" ) == "!=" )
{
document.write( "<font color='red'><b>CORRECT!</b></font>" );
correct++
}
else
{
document.write( "<font color="red"><b>Wrong</b></font> " +
"You answered: " + getFormValue( "Q5" ) );
}
total++;
// -->
</script>
</td>
</tr>
</table>
</form>
<br><br>
<script language="JavaScript">
<!-
document.write( "<font color='red'><b>You got " + correct +
" correct out of " + total +
" questions. Your score is " +
(correct/total*100) + "%</b></font>" );
// -->
</script>
</body>
</html>
|
|