Arrrgggghhhh....

[snowflake]

Hey guys...

I need help with the source code below..

I would like this to be hardcoded within the html page.

When I select a couple of checkbox and hit the OK button. A pop -up message box would appear with the results. I knew something is missing but still couldn't figure out what's the problem. :*(

--------------------------------------------------------------------------------


function writeText1(form) {
var radIndex;
for (radIndex = 0; radIndex < document.form1.game.length;radIndex++)
{
if (document.form1.game[radIndex].checked != true}
{

alert ("Sorry! The answer is incorrect!")
break;
}
}
}
</script>
</UL>
<form name="form1" method="post" action="">
<INPUT TYPE=checkbox NAME="tennis" VALUE="Y">
Tennis <BR>
<INPUT TYPE=checkbox NAME="badminton" VALUE="Y">
Badminton <BR>
<INPUT TYPE=checkbox NAME="golf" VALUE="Y">
Golf <BR>
<INPUT TYPE=checkbox NAME="bowling" VALUE="Y">
Bowling <BR>
<INPUT TYPE=checkbox NAME="soccer" VALUE="Y">
Soccer
<input type="submit" name="Submit" value="Submit">
</form>

fixed to show source code

[lostinbeta]

Well lets see...

1) You have this function called "writeText1" and has a parameter called "form". I look inside that function and see no use for the parameter "form"

2) if (document.form1.game[radIndex].checked != true} You start it with a ( but end it with a } ???

3) Where do you ever call the function in the submission of your form?

4) Where are the ID tags for your form elements so that your script knows what is checked?

5) How do you know which one is right and which one is wrong?

[lostinbeta]

Ok, I came up with this....


<SCRIPT LANGUAGE="JavaScript">
<!--
function writeText1() {
//create for loop
for (var radIndex = 0; radIndex < document.form1.game.length-1; radIndex++) {
//define the form item as a variable for less writing later on
var formItem = document.form1.game[radIndex];
//create variable to store whether the user was correct or not
var ans;
//if the form item is checked and it's value tag is "tennis"
if (formItem.checked && formItem.value == "tennis") {
//set the ans variable to say it was correct
ans = "The answer is correct!";
//stop running this loop
break;
} else {
//else set the ans variable to say it was incorrect
ans = "Sorry! The answer is incorrect!";
}
};
//when for loop is finished, alert the value of the ans variable
alert(ans);
};
-->
</SCRIPT>
<FORM NAME="form1" onSubmit="writeText1()">
<INPUT TYPE="radio" NAME="game" VALUE="tennis">
Tennis <BR>
<INPUT TYPE="radio" NAME="game" VALUE="badminton">
Badminton <BR>
<INPUT TYPE="radio" NAME="game" VALUE="golf">
Golf <BR>
<INPUT TYPE="radio" NAME="game" VALUE="bowling">
Bowling <BR>
<INPUT TYPE="radio" NAME="game" VALUE="soccer">
Soccer <BR>
<INPUT TYPE="submit" NAME="Submit" VALUE="Submit">
</FORM>



And I used Radio Buttons because checkboxes allow you to select more than one answer, but radio buttons do not.

[snowflake]

Hey thanks lostinbeta for the feedback!

The source code works perfectly well but I want to select more than one answer for a question, which is why I select the checkbox.

Pls advise.

[lostinbeta]

Then use checkboxes ;)

[snowflake]

:hangover: Oh no when I change it to checkboxes and did some testing @ the browser, its doesn't seems to work.

[lostinbeta]

I just copied and pasted the above script, and changed radio to checkbox and it works fine for me :-\

[snowflake]

Okay, I have replace the radio button(s) with checkbox(es) it looks fine but I notice that if I select other sports besides tennis I'll get the incorrect answer message.

How do I insert additional sports in this if statement?

if (formItem.checked && formItem.value == "tennis")

[lostinbeta]

Hmm, I have an idea on how to do it, but Javascript is sometimes tricky, right now I am working on something else, I will get to this as soon as I can.

In the meanwhile, experiment with ways to try and solve the problem, you might stumble onto something :)

[lostinbeta]

Ok, Well I have come back, with an easier way to do it than a for loop (since that was what was throwing off the two items or more correct)


<SCRIPT LANGUAGE="JavaScript">
<!--
function writeText1() {
var ans1 = document.form1.game[0];
var ans2 = document.form1.game[2];
if (ans1.checked && ans2.checked){
alert("CORRECT ANSWER!");
} else {
alert("Nope sorry, wrong answer :(");
}
};
-->
</SCRIPT>


This makes "tennis" and "golf" the correct answers.


The checkboxes are naturally stored in array with Javascript. Arrays begin counting at 0. So item one (in this case "tennis") is at game[0], and item 3 (in this case is "golf") is at game[2].

[snowflake]

Hey lostinbeta, I like the way you display the source code...neat and straight to the point. :)

I fully understand when the...

function writeText1() {
var ans1 = document.form1.game[0];
var ans2 = document.form1.game[2];

it would checked the first three value ranging from [0] to [2].

Question : How do u create the function that could check the value randomly instead? For example : The value ranging from [0],[2] & [4]

[lostinbeta]

Originally posted by snowflake
Question : How do u create the function that could check the value randomly instead? For example : The value ranging from [0],[2] & [4]


Maybe it is just because I woke up, but I am not really understanding what you mean. Can you explain in more detail?

[snowflake]

Sorry lostinbeta :hangover:

Let me post a direct question instead. I want each checkbox to be validated when I hit the Submit button. When I check ans1 to ans2 as true, do you think I should check the remaining ans as false too?

Another question,

If the scroll down appears on the web page and it keeps going to the top whenever I hit the Submit button for each questions. Is there a way to prevent it from going to the top?

[lostinbeta]

No, there is no need to check for the others to be false. With the above script BOTH of those MUST be checked (returns the boolean value of true) for it to say it is true. All you need to check is if both of those answers are true, the false ones are just decoys so you don't have to check them.


As for that window problem, I thought you could just void(0) out the button, apparently not, I will see if I can find a solution.

[lostinbeta]

Ok, well maybe I am just being stupid or something, but I couldn't find a way to void the submit button from refreshing the page.

SO.... I created a workaround using named anchors.


First step is to put these tags RIGHT BEFORE your form...


<A NAME="form"></A>

This will server as our anchor.


Now we will manipulate the body tag of the HTML to include an onLoad handler that makes the window go to our form location...


<BODY ONLOAD="window.location='#form'">