Jerry said:
We have a 10-question quiz for kids, each question being a yes or no
answer using radio selections. I'd like to keep a current total of
yes's and no's at the bottom of the quiz (if the user selects yes to
question 1, the total of yes's increases by 1). I've been searching for
a while but I'm not sure I'm searching with the right keywords. Can
anyone direct me to a source I can review to learn how to do this?
The stuff below should help. Note that for a set of radios, there is
debate over whether one should always be checked. If you don't make one
checked, user agents (browsers in this case) are left to their own
devices to decide whether to check one by default or not:
<URL:
http://www.w3.org/TR/html4/interact/forms.html#radio >
If one is to be checked by default, you will have to either:
1. make all the 'yes' or 'no' buttons checked by default
2. have a 3rd 'no answer' button that is checked by default
3. use yes/no checkboxes with script to only have one checked
4. use a single checkbox with checked for yes
None of the above is particularly nice, so I've used yes/no radio
buttons - be aware that some UAs may take matters into their own hands.
The following has been tested in Firefox and IE, neither of which will
check one by default.
The update function needs to run when the page loads or re-loads, when a
radio button is checked and also when the form is reset - hence is has
been added in three places.
You can add as many questions as you like, as long as they are in the
table they will be included in the total.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Play Quiz</title>
<style type="text/css">
body {
font-family: arial, sans-serif;
}
table {
border-collapse: collapse;
}
th {
padding: 5px 0 2px 5px;
border-top: 1px solid #aaa;
border-bottom: 1px solid #aaa;
text-align: left;
}
#questions td{
padding: 10px 0 2px 5px;
border-bottom: 1px solid #aaa;
}
</style>
<script type="text/javascript">
function updateButCount(e)
{
// Get event from W3C or IE event model
var e = e || window.event;
// Test that appropriate features are supported
if ( !document.getElementsByTagName
|| !document.getElementById
) return;
// Initialise variable for keeping count
var butCount = {yes:0, no:0, num:0};
var butSummary = 'Answers cleared';
// Event may have come from load, click or reset
// If event was from 'reset', skip counting yes/no
if (e && 'reset' != e.type){
// Get a collection of the inputs inside x
var x = document.getElementById('quizDiv');
var rButs = x.getElementsByTagName('input');
var temp;
// Loop over all the inputs
for (var i=0, len=rButs.length; i<len; ++i){
temp = rButs
;
// If the input is a radio button
if ('radio' == temp.type ) {
// Add one to the count of radio buttons
butCount.num += 1;
// If the button is checked
if (temp.checked){
// Add one to butCount.yes or butCount.no as appropriate
butCount[temp.value] += 1;
}
}
}
// Build the summary string - divide butCount.num by two
// to get the number of questions
butSummary = 'You have answered ' + (butCount.yes + butCount.no)
+ ' of ' + (butCount.num/2) + ' questions';
}
// Write the totals for yes and no and the summary to the page
document.getElementById('yeses').innerHTML = butCount.yes;
document.getElementById('nos').innerHTML = butCount.no;
document.getElementById('summary').innerHTML = butSummary;
}
</script>
</head><body onload="updateButCount(event);">
<!-- Add an onreset event to the form to run updateButCount
when the reset button is clicked -->
<form action="" name="quizForm"
onreset="updateButCount(event);">
<!-- Add an onclick event the table holding all the radios that
runs updateButCount whenever anything inside is clicked -->
<table id="quizDiv" onclick="updateButCount(event);">
<colgroup span="2" width="40">
<colgroup span="1" width="400">
<thead>
<tr><th>Yes</th><th>No</th><th>Question</th></tr>
</thead>
<!-- Layout the quiz -->
<tbody id="questions">
<tr>
<td><input type="radio" name="Q1" value="yes"></td>
<td><input type="radio" name="Q1" value="no"></td>
<td>Question 1:<br>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua</td>
</tr><tr>
<td><input type="radio" name="Q2" value="yes"></td>
<td><input type="radio" name="Q2" value="no"></td>
<td>Question 2:<br>Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</td>
</tr><tr>
<td><input type="radio" name="Q3" value="yes"></td>
<td><input type="radio" name="Q3" value="no"></td>
<td>Question 3:<br>Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</td>
</tr><tr>
<td><input type="radio" name="Q4" value="yes"></td>
<td><input type="radio" name="Q4" value="no"></td>
<td>Question 4:<br> Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.</td>
</tr>
<tr>
<!-- Add some elements with IDs for writing counts to -->
<td id="yeses"></td>
<td id="nos"></td>
<td colspan="3" id="summary"></td>
</tr>
<tr>
<td colspan="2" align="center" style="text-align: left;">
<input type="reset" value="Clear"></td>
<td style="text-align: right;">
<input type="submit" value="Submit answers"></td>
</tr>
</tbody>
</table>
</form>
</body></html>