i probably could have used a 'less generic' subject line. also, the
code you send would help in a way, but it is essentially the same as
what i have (without creating a function and making the text field
readonly). Thanks for the help.
You may find the following more useful. It attaches the
onclick when the page loads and gets the answers from an array
rather than hard coded into the controls. Your answers can be
in a separate file, making it a little more difficult to cheat
(but not by much).
Messages are written to a span rather than text inputs, text
inputs are simpler to clear on reset but not very tidy. Be
careful with use of innerHTML - if you start to do too much with
it, it's probably best to revert to DOM methods.
Play.
<body onload="initForm('Quiz');">
...
<script type="text/javascript">
// Answer array. For simplicity, first (zero) value is empty
var answers = [,'a','c','d'];
// May also be written as (this may be easier to read):
/*
var answers = new Array();
answers[1] = 'a';
answers[2] = 'c';
answers[3] = 'd';
*/
function checkAnswer(e){
// Get a reference to the event
var e = e || window.event;
// Get the element clicked on
var a = e.target || e.srcElement;
// Setup some variables
if (document.getElementById) {
var msgSpot = document.getElementById(a.name + 'msg');
} else if (document.all) {
var msgSpot = document.all(a.name + 'msg');
}
// Setup answer messages
var okMsg = '<span style="color: blue;'
+ 'font-weight: bold;">Correct!</span>';
var errMsg = '<span style="color: red;'
+ 'font-weight: bold;">Sorry,that is incorrect.</span>';
// Get the question number from the element name
var qNum = a.name.split('-')[1];
// Check answer with answers array
if (a.value == answers[qNum]) {
msgSpot.innerHTML = okMsg;
} else {
msgSpot.innerHTML = errMsg;
}
}
// Attaches onclick to radio buttons in form
function initForm(f){
var radioButs = document.forms[f].elements;
var i = radioButs.length;
for (; i>=0; --i ) {
if ( radioButs
&& radioButs.type.toLowerCase() == 'radio'){
radioButs.onclick = checkAnswer;
}
}
}
// Resets answer text when reset is clicked
function resetAnswerText(f){
var defMsg = '<i>select an answer</i>';
var radioButs = f.elements;
var i = radioButs.length;
var oButName;
for (; i>=0; --i ) {
if ( radioButs
&& radioButs.type.toLowerCase() == 'radio'){
butName1 = radioButs.name
if ( oButName != radioButs.name) {
oButName = radioButs.name;
if (document.getElementById) {
var msgSpot =
document.getElementById(oButName + 'msg');
} else if (document.all) {
var msgSpot =
document.all(oButName + 'msg');
}
msgSpot.innerHTML = defMsg;
}
}
}
}
</script>
<form action="" name="Quiz">
<p>Question 1:<br>
<input name="Q-1" value='a' type="radio"> 28"<br>
<input name="Q-1" value='b' type="radio"> 30"<br>
<input name="Q-1" value='c' type="radio"> 32"<br>
<input name="Q-1" value='d' type="radio"> 40"<br>
<span id="Q-1msg"><i>select an answer</i></span></p>
<p>Question 2:<br>
<input name="Q-2" value='a' type="radio"> Fe<br>
<input name="Q-2" value='b' type="radio"> Fi<br>
<input name="Q-2" value='c' type="radio"> Fo<br>
<input name="Q-2" value='d' type="radio"> Fum<br>
<span id="Q-2msg"><i>select an answer</i></span></p>
<p>Question 3:<br>
<input name="Q-3" value='a' type="radio"> He<br>
<input name="Q-3" value='b' type="radio"> She<br>
<input name="Q-3" value='c' type="radio"> It<br>
<input name="Q-3" value='d' type="radio"> Blit<br>
<span id="Q-3msg"><i>select an answer</i></span></p>
<input type="reset" value="Clear all answers" onclick="
resetAnswerText(this.form);
">
</form>