<html>
<head>
<title>Abakada HTML Demo: input type=checkbox Example</title>
<link rel="stylesheet" href="/abkd/shared/museo.css">
<style>
.options {
padding: 30; background: #246;
}
</style>
<script language="JavaScript">
var opts = new Array ( )
opts [ 0 ] = 0; opts [ 1 ] = 1; opts [ 2 ] = 1; opts [ 3 ] = 0; opts [ 4 ] = 0;
opts [ 5 ] = 1; opts [ 6 ] = 0; opts [ 7 ] = 0; opts [ 8 ] = 1; opts [ 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 ) && ( opts [ i ] == 1 ) ) {
nRight ++; }
if ( ( document.theForm.inventions [ i ].checked ) && ( opts [ 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>
<div class="header"><h2>Abakada HTML Demo: <b>input type=checkbox</b> Example</h2></div><hr size=1 width=92%>
<center>
<h4>This example shows how client-side script may be used<br>
to detect which checkboxes are selected from multiple choices.</h4>
<p id="msg"><b>Select the inventions that were created before 1500 A.D.</b></p>
<form name=theForm>
<table class="options">
<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"><b>HINT: There are 5</b></p>
<p><input onclick="chkChoices ( )" type=button value="Check Answers">
<input type=reset></p>
</form>
</center>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>