javascript question

[LNM]

I am trying to create a survey type form where multiple choice answers
are selected (radios) and I am using an onclick event to update a text
box with 'correct', etc. I am using the onFocus(this.bl ur) so that a
user is unable to change the text that is written to that text field
(they are must be correct before submitting the form). I am wanting
to use a hidden field that will update the same way as the text fields
do (simply because i think it will look better), but am having trouble
setting this up. any help would be appreciated!

[Randy Webb]

Re: javascript question

LNM wrote:
[color=blue]
> I am trying to create a survey type form where multiple choice answers
> are selected (radios) and I am using an onclick event to update a text
> box with 'correct', etc. I am using the onFocus(this.bl ur) so that a
> user is unable to change the text that is written to that text field
> (they are must be correct before submitting the form). I am wanting
> to use a hidden field that will update the same way as the text fields
> do (simply because i think it will look better), but am having trouble
> setting this up. any help would be appreciated![/color]

<input type="hidden".. ...>
instead of:
<input type="text".... ..>

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Answer:It destroys the order of the conversation
Question: Why?
Answer: Top-Posting.
Question: Whats the most annoying thing on Usenet?

[budda.con@gmail.com]

Re: javascript question

I did try just changing the fields to hidden, but it didn't seem to
work.
This is what I started with:
<p><input name="Q1" type="radio" onClick="(form. answer1.value=' Sorry,
that is incorrect.')">& nbsp;&nbsp;28&q uot;</p>
<p><input name="Q1" type="radio"
onClick="(form. answer1.value=' Sorry, that is
incorrect.')">& nbsp;&nbsp;30&q uot;</p>
<p><input name="Q1" type="radio"
onClick="(form. answer1.value=' Correct!')">&nb sp;&nbsp;32&quo t;</p>
<p><input name="Q1" type="radio"
onClick="(form. answer1.value=' Sorry, that is
incorrect.')">& nbsp;&nbsp;40&q uot;</p>
<p><input name="answer1" type="text" size="20"
onFocus="this.b lur()"></p>

....and this is what I've tried (using hidden):
<p><input name="Q1" type="radio" onClick="(form. answer1.value=' Sorry,
that is incorrect.')">& nbsp;&nbsp;28&q uot;</p>
<p><input name="Q1" type="radio"
onClick="(form. answer1.value=' Sorry, that is
incorrect.')">& nbsp;&nbsp;30&q uot;</p>
<p><input name="Q1" type="radio"
onClick="(form. answer1.value=' Correct!')">&nb sp;&nbsp;32&quo t;</p>
<p><input name="Q1" type="radio"
onClick="(form. answer1.value=' Sorry, that is
incorrect.')">& nbsp;&nbsp;40&q uot;</p>
<p><input name="answer1" type="hidden"
size="20"></p>

Any thoughts on why the hidden won't work?

PS-thanks for the reply

[McKirahan]

Re: javascript question

"LNM" <budda.con@gmai l.com> wrote in message
news:196659b3.0 502211433.5afb2 987@posting.goo gle.com...[color=blue]
> I am trying to create a survey type form where multiple choice answers
> are selected (radios) and I am using an onclick event to update a text
> box with 'correct', etc. I am using the onFocus(this.bl ur) so that a
> user is unable to change the text that is written to that text field
> (they are must be correct before submitting the form). I am wanting
> to use a hidden field that will update the same way as the text fields
> do (simply because i think it will look better), but am having trouble
> setting this up. any help would be appreciated![/color]


Please start a new thread for your question instead of appending it to
someone else's.

[McKirahan]

Re: javascript question

"McKirahan" <News@McKirahan .com> wrote in message
news:mOOdnQS2Ea 3V8IffRVn-sw@comcast.com. ..[color=blue]
> "LNM" <budda.con@gmai l.com> wrote in message
> news:196659b3.0 502211433.5afb2 987@posting.goo gle.com...[color=green]
> > I am trying to create a survey type form where multiple choice answers
> > are selected (radios) and I am using an onclick event to update a text
> > box with 'correct', etc. I am using the onFocus(this.bl ur) so that a
> > user is unable to change the text that is written to that text field
> > (they are must be correct before submitting the form). I am wanting
> > to use a hidden field that will update the same way as the text fields
> > do (simply because i think it will look better), but am having trouble
> > setting this up. any help would be appreciated![/color]
>
>
> Please start a new thread for your question instead of appending it to
> someone else's.[/color]


Will this help?

<html>
<head>
<title>Correct. htm</title>
<script type="text/javascript">
function check(form,ques ) {
form.A1.value = "Incorrect" ;
for (var i=0; i<form.Q1.lengt h; i++) {
if (form.Q1[i].checked && form.Q1[i].value == 1) {
form.A1.value = "Correct";
}
}
}
</script>
</head>
<body>
<form>
<b>Questions. </b>
<hr>
<b>1. &nbsp; What is 1 + 1?<br>
&nbsp; <input name="Q1" type="radio" value="1"
onClick="check( this.form,'A1') "> 2
&nbsp; <input name="Q1" type="radio" value="0"
onClick="check( this.form,'A1') "> 3
&nbsp; <input name="Q1" type="radio" value="0"
onClick="check( this.form,'A1') "> 11
&nbsp; <input type="text" name="A1" readonly
style="backgrou nd-color:#EFEFEF">
<hr>
<input type="reset" value="Reset Form">
</form>
</body>
</html>

[McKirahan]

Re: javascript question

"McKirahan" <News@McKirahan .com> wrote in message
news:mOOdnQS2Ea 3V8IffRVn-sw@comcast.com. ..[color=blue]
> "LNM" <budda.con@gmai l.com> wrote in message
> news:196659b3.0 502211433.5afb2 987@posting.goo gle.com...[color=green]
> > I am trying to create a survey type form where multiple choice answers
> > are selected (radios) and I am using an onclick event to update a text
> > box with 'correct', etc. I am using the onFocus(this.bl ur) so that a
> > user is unable to change the text that is written to that text field
> > (they are must be correct before submitting the form). I am wanting
> > to use a hidden field that will update the same way as the text fields
> > do (simply because i think it will look better), but am having trouble
> > setting this up. any help would be appreciated![/color]
>
>
> Please start a new thread for your question instead of appending it to
> someone else's.[/color]

Perhaps you did start a new thread but on 07/19/2004 "Dany" used the same
Subject line ("javascript question") and in my OE newsreader your post
showed up subordinate it to it.

[budda.con@gmail.com]

Re: javascript question

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.

[RobG]

Re: javascript question

budda.con@gmail .com wrote:[color=blue]
> 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.
>[/color]

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="initFor m('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.getEl ementById) {
var msgSpot = document.getEle mentById(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,th at 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.innerHT ML = okMsg;
} else {
msgSpot.innerHT ML = errMsg;
}
}

// Attaches onclick to radio buttons in form
function initForm(f){
var radioButs = document.forms[f].elements;
var i = radioButs.lengt h;
for (; i>=0; --i ) {
if ( radioButs[i]
&& radioButs[i].type.toLowerCa se() == 'radio'){
radioButs[i].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.lengt h;
var oButName;

for (; i>=0; --i ) {
if ( radioButs[i]
&& radioButs[i].type.toLowerCa se() == 'radio'){
butName1 = radioButs[i].name
if ( oButName != radioButs[i].name) {
oButName = radioButs[i].name;

if (document.getEl ementById) {
var msgSpot =
document.getEle mentById(oButNa me + 'msg');
} else if (document.all) {
var msgSpot =
document.all(oB utName + 'msg');
}
msgSpot.innerHT ML = defMsg;
}
}
}
}

</script>

<form action="" name="Quiz">
<p>Question 1:<br>
<input name="Q-1" value='a' type="radio">&n bsp;28&quot;<br >
<input name="Q-1" value='b' type="radio">&n bsp;30&quot;<br >
<input name="Q-1" value='c' type="radio">&n bsp;32&quot;<br >
<input name="Q-1" value='d' type="radio">&n bsp;40&quot;<br >
<span id="Q-1msg"><i>select an answer</i></span></p>

<p>Question 2:<br>
<input name="Q-2" value='a' type="radio">&n bsp;Fe<br>
<input name="Q-2" value='b' type="radio">&n bsp;Fi<br>
<input name="Q-2" value='c' type="radio">&n bsp;Fo<br>
<input name="Q-2" value='d' type="radio">&n bsp;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">&n bsp;He<br>
<input name="Q-3" value='b' type="radio">&n bsp;She<br>
<input name="Q-3" value='c' type="radio">&n bsp;It<br>
<input name="Q-3" value='d' type="radio">&n bsp;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>




--
Rob

[budda.con@gmail.com]

Re: javascript question

that is extremely helpful!!! thanks, so much!

[RobG]

Re: javascript question

budda.con@gmail .com wrote:[color=blue]
> that is extremely helpful!!! thanks, so much!
>[/color]

As an afterthought, it may be useful to use an object to hold
the answers. Change the answers array to an object:

var answers = {
Q1:'a',
Q2:'c',
Q3:'d'
};

...

Modify how the answer is referenced - delete the line with
split():

// Get the question number from the element name
// var qNum = a.name.split('-')[1]; // Remove this

And change this following line reference the object not the
array:

// Check answer with answers array
if (a.value == answers[a.name]) {

...

Then change the name of your inputs and id of the message spans
to match the answer object:

<input name="Q1" value='a' type="radio">&n bsp;28&quot;<br >
<input name="Q1" value='b' type="radio">&n bsp;30&quot;<br >
<input name="Q1" value='c' type="radio">&n bsp;32&quot;<br >
<input name="Q1" value='d' type="radio">&n bsp;40&quot;<br >
<span id="Q1msg"><i>s elect an answer</i></span></p>

...

I'm not sure whether accessing an object this way is any slower
than accessing an array, but for say 20 or 30 values it should
be insignificant.


--
Rob