PDA

View Full Version : Revealing images using onSubmit

cidgreen
10-08-2002, 11:02 AM
Hello, my first post - I hope it doesn't show me up as too much of a simpleton..

My aim is to have input boxes on a page of my site, in a type of quiz, where the user types the answer into a text box and submits it. Simplistically, it is to guess the identity of an image, and thus if they enter the correct answer I want the image (previously hidden or replaced with a ? or something like that) to be revealed. If the wrong answer is given, I guess I need some kind of message to pop up and say so.

e.g. a picture of a dog is hidden, someone types in 'dog' into the input box and the image is revealed.

I have been scouring the web all morning looking for clues - I have found onSubmit which I think may be the key to it using the FORM command, but I cannot seem to find a way to have the image revealed rather than a link to another page being activated when the correct answer is submitted.

Could anybody either let me know how I could alter the example I have found on this page...

http://www.idocs.com/tags/forms/_FORM_onSubmit.html

...or perhaps point me in the direction of another site which explains better how to sort this type of thing out?

I do hope someone can help and that my first post hasn't been too much of a 'please do it for me' type of thing. Any help or direction at all will be most gratefully received - I'll buy you a pint!

Or post you one anyway...

Many thanks in advance,
Chris.
glenngv
10-08-2002, 11:15 AM
simple code for you to start with:


<html>
<head>
<script language="javascript">
var pic2guess = "dog";
function check(){
frm = document.f;
if (pic2guess.toLowerCase()==frm.t.value){
alert("Correct");
document.images["pic"].src = pic2guess + ".gif";
}
else {
alert("Wrong. Please try again.");
frm.t.focus();
}
}
</script>
</head>
<body>
<form name="f">
Guess the image:<br>
<img name="pic" src=""><br>
<input type="text" name="t"><br>
<input type="button" value="Guess" onclick="check()">
</form>
</body>
</html>
cidgreen
10-08-2002, 11:21 AM
Thanks glenngv, that's brilliant.

If I have say "questionmark.jpg" as the image SRC, is there a way I can then get it to change to "dog.jpg" if the text entered into the box is correct?

If you (or anyone) could help me out with that last bit I'll be laughing, and my first foray into your excellent forum will have been a roaring success!

Oh and glenngv, let me have your postal address so I can get this ice cold Guinness off to you.......

Thanks,
Chris.
glenngv
10-08-2002, 11:24 AM
<html>
<head>
<script language="javascript">
var pic2guess = "dog";
function check(){
frm = document.f;
if (pic2guess.toLowerCase()==frm.t.value){
alert("Correct");
document.images["pic"].src = pic2guess + ".jpg";
}
else {
alert("Wrong. Please try again.");
frm.t.focus();
}
}
</script>
</head>
<body>
<form name="f">
Guess the image:<br>
<img name="pic" src="questionmark.jpg"><br>
<input type="text" name="t"><br>
<input type="button" value="Guess" onclick="check()">
</form>
</body>
</html>
cidgreen
10-08-2002, 12:06 PM
Thanks again.

I have been playing around with your code, but I cannot seem to get it so that there is more than one image on the page to guess. I need to get it so that there are multiple images to guess on the page - about 50 in a ll I think there are - and that each one correctly guessed changes image, but the others remain as the ? or whatever.

Is that possible or am I trying to do something that can't be done?

This is how I tried it:

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

<html>
<body>
<script language="javascript">
var pic1guess = "dog";
function check(){
frm = document.f;
if (pic1guess.toLowerCase()==frm.t.value){
alert("Correct");
document.images["pic"].src = pic1guess + ".jpg";
}
else {
alert("Wrong. Please try again.");
frm.t.focus();
}
}
</script>

<form name="f">
Guess the image:<br>
<img name="pic" src="questionmark.jpg"><br>
<input type="text" name="t"><br>
<input type="button" value="Guess" onclick="check()">
</form>

<script language="javascript">
var pic2guess = "cow";
function check(){
frm = document.f;
if (pic2guess.toLowerCase()==frm.t.value){
alert("Correct");
document.images["pic"].src = pic2guess + ".jpg";
}
else {
alert("Wrong. Please try again.");
frm.t.focus();
}
}
</script>

<form name="f">
Guess the image:<br>
<img name="pic" src="questionmark.jpg"><br>
<input type="text" name="t"><br>
<input type="button" value="Guess" onclick="check()">
</form>

</body>
</html>


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

But it's refusing to contemplate working. Is there a way it can be done?

Thanks,
Chris.
cidgreen
10-08-2002, 12:50 PM
Sorry, I was being a bit of a berk there, I've managed to sort it out myself by giving funtions different names and so on.

But one final thing I need help with - in the sample code it has a toLowerCase line which seems to mean only the exact, lower case answer is accepted.

Is there a way to alter it so that either 'dog' or 'Dog', or 'DOG' for that matter, would be accepted as correct?

Thanks again,
Chris.
Roy Sinclair
10-08-2002, 03:00 PM
Change the line to check the lower case versions of both:


if (pic2guess.toLowerCase()==frm.t.value.toLowerCase){
cidgreen
10-08-2002, 03:03 PM
Ahhh I'd fiddled it and sort of got it working but in a rather ridiculous way, and that makes it a whole lot easier, and the file smaller at that.

Thanks very much,
Chris.