<html>
<head>
<title>Abakada HTML Demo: Forms Samples</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<script language="JavaScript">
var opt=new Array ( )
opt [ 0 ] =0; opt [ 1 ] =1; opt [ 2 ] =1; opt [ 3 ] =0; opt [ 4 ] =0;
opt [ 5 ] =1; opt [ 6 ] =0; opt [ 7 ] =0; opt [ 8 ] =1; opt [ 9 ] =1;
var nCorrect=5;
var nTries=0;
function chkChoices ( ) {
nTries ++;
var nRight=0;
var nWrong=0;
for ( var i=0;i<document.theForm.inventions.length;i ++ ) {
if ( ( document.theForm.inventions [ i ].checked ) && ( opt [ i ] ==1 ) ) {
nRight ++; }
if ( ( document.theForm.inventions [ i ].checked ) && ( opt [ i ] ==0 ) ) {
nWrong ++; }
}
if ( ( nRight<nCorrect ) || ( nWrong>0 ) ) {
if ( nRight<1 ) {
alert ( "You have 0 correct and " + nWrong + " incorrect answers." ); }
else {
alert ( "You have " + nRight + " correct and " + nWrong + " incorrect answers." ); }
}
if ( ( nRight==nCorrect ) && ( nWrong==0 ) ) {
if ( nTries==1 ) {
alert ( "Congratulations, you got them all right on the first try!" ); }
else{
alert ( "Congratulations. It took you " + nTries + " tries to get the correct answers." ); }
}
}
//-->
</script>
</head>
<body>
<!-- #include virtual="~/shared/top.inc" -->
<div class="header"><h2>Abakada HTML Demo: INPUT Checkbox Sample</h2></div>
<hr size=1 width=92%>
<p>This example demonstrates the use of the <b>INPUT Checkbox</b> control to allow a user to select multiple choices. </p>
<div class="back" style="background: #344">
<form name=theForm><h5>Select the inventions that were created before 1500 A.D.</h5>
<p class="small"><b>HINT: There are 5</b></p>
<table width=88%>
<tbody>
<tr>
<td><input id=oInvent1 name=inventions type=checkbox></td>
<td><label for=oInvent1>F-16 "Falcon" ( vehicle ) </label></td>
<td><input id=oInvent2 name=inventions type=checkbox></td>
<td><label for=oInvent2>Stirrups ( tool ) </label></td></tr>
<tr>
<td><input id=oInvent3 name=inventions type=checkbox></td>
<td><label for=oInvent3>Crop Rotation ( science ) </label></td>
<td><input id=oInvent4 name=inventions type=checkbox></td>
<td><label for=oInvent4>Gravity</label></td></tr>
<tr>
<td><input id=oInvent5 name=inventions type=checkbox></td>
<td><label for=oInvent5>Wheellock Musket ( weapon ) </label></td>
<td><input id=oInvent6 name=inventions type=checkbox></td>
<td><label for=oInvent6>Flintlock Musket ( weapon ) </label></td></tr>
<tr>
<td><input id=oInvent7 name=inventions type=checkbox></td>
<td><label for=oInvent7>M-1 Rifle ( weapon ) </label></td>
<td><input id=oInvent8 name=inventions type=checkbox></td>
<td><label for=oInvent8>E = MC<sup>2</sup> ( science ) </label></td></tr>
<tr>
<td><input id=oInvent9 name=inventions type=checkbox></td>
<td><label for=oInvent9>Scissors ( tool ) </label></td>
<td><input id=oInvent10 name=inventions type=checkbox></td> <td><label for=oInvent10>Gunpowder ( tool/weapon ) </label></td></tr></tbody></table>
<p class="small"><input onclick=chkChoices ( ) type=button value="Check Answers"></p></form></div><br>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>