Need a script that tells the user if what they have written in a text box is correct. [Archive]

PDA

Click to See Complete Forum and Search --> : Need a script that tells the user if what they have written in a text box is correct.

anagoge

06-23-2004, 08:45 PM

I'm wanting to compile a quiz which will have a lot of text boxes. In these text boxes, the user must type a specific word or number of words and they must get the correct answer to recieve a tick by that checkbox. Preceeding the text box will of course be a question.

Since i'm a complete newbie when it comes to Javascript, I wasn't even sure what to look under on any Javascript related websites.

So, to clarify, I need a script that will tell the user whether what they have written in a text box is correct.

Thanks.

Neil

Nedals

06-23-2004, 08:53 PM

A simple approach...

1. Get the text-box value
box_text = documents.form_name.text_box_name.value

2. Now compare it to the expected value
if (box_text == 'A line of text') { // NOTE the '=='
alert("You're right")
} else {
alert("Try Again")
}

anagoge

06-23-2004, 09:03 PM

Ok thanks for that, but can you type it exactly how it would look in a script as i'm not sure how to set it up.

<script language="JavaScript" type="text/javascript">

That's the only line of it that I know I have to add :D...I bet that's wrong too.

Sorry to be a pain, but you'll have to really spell it out for me otherwise I haven't got a clue when it comes to Javascript.

Oh, and even if I do manage to figure that part out, how to I tie it to a 'Submit' button?

Again, apologies. I know I must sound very silly.

Nedals

06-23-2004, 09:17 PM

<html><head><title>Untitled</title>
<script type="text/javascript">

</script>
</head>

<body>
<form name="theform">
<textarea name="thebox" cols=30 rows=3></textarea>
<input type="button" value="check it" onclick="return check_text()">
</form>
</body>
</html>

anagoge

06-23-2004, 09:21 PM

Thanks, that helps me more. Much appreciated. *adds forum to favourites, just incase*

One more question, since there is going to be around 60 text boxes, do I have to do that script 60 times or is there an easier way?

Oh, and another question. Since there will be a fair number of text boxes, is there any way to put a mark by each text box to show the user which one they've got right and which one they've got wrong, rather than an overall 'You got some wrong' or 'You got some right'? Thanks again.

Nedals

06-23-2004, 10:57 PM

Now you're pushing it. :) :)
I'll give you a small script for 2 text boxes and you can fill in the rest. This is far from perfect but it's a starting point.

<html><head><title>Untitled</title>
<script type="text/javascript">

</script>
</head>

<body>
<form name="theform">

<textarea name="thebox0" cols=30 rows=2 onchange="return check_text(0)"></textarea>
<input name="chk0" type="checkbox"><br>
<textarea name="thebox1" cols=30 rows=2 onchange="return check_text(1)"></textarea>
<input name="chk1" type="checkbox"><br>
</form>
</body>
</html>

anagoge

06-24-2004, 12:31 PM

Thanks for your help. I've made the quiz now. Couldn't of done it without you.

Click (http://www.openme.co.uk/bb5/quiz.htm) should you wish to see it. I doubt you'll be able to fill it in though, unless you're a Big Brother (UK) fan hehe.

anagoge

06-24-2004, 12:57 PM

Oh dear, i'm back.

Is there any function I can use to add an 'or'?

For example, if the user writes 'Apple' or 'apple' it will still be correct.

Thanks again.

Pittimann

06-24-2004, 01:04 PM

Hi!

Or is '||':
if (box_text == 'A line of text'||box_text == 'a line of text') {

But if you just want to allow upper or lower case for your answers, you can make your stuff like this:

if (box_text.toLowerCase() == answers[no].toLowerCase())

This will compare the user input all set to lower case with your array value all set to lower case.

Cheers - Pit

anagoge

06-24-2004, 01:10 PM

Thanks for your help, Pittimann, but how do I add || to

'Answer to question',
'And to Another'
);

Also, perhaps a better example is if the user wanted to enter 'Tom', but an acceptable answer would also be 'Thomas'. How would I do that?

Pittimann

06-24-2004, 01:14 PM

Hi!

The or (||) goes into the if statement like in my example.

You should use the toLowerCase stuff:

if (box_text.toLowerCase() == answers[no].toLowerCase()){
var chkbox = 'chk' + no;
document.theform[chkbox].checked = true;
alert("You're right")
} else {
alert("Try Again")
}
return true;

Cheers - Pit

anagoge

06-24-2004, 01:18 PM

I understand that that will help with uppercase or lowercase, but what if it's a completely different word for each answer?

For example, the first answer to the quiz is 'Andrew', however, what could also be acceptable is Andy. I tried 'Andrew'||'Andy' but that didn't work.

Pittimann

06-24-2004, 01:26 PM

Hi!

Oops - didn't expect that due to your example. For that you will need an array with more than one dimension. I am quite busy now and can't write a reasonable example for that but if nobody tells you, I will get back to your thread later...

Cheers - Pit

Nedals

06-24-2004, 05:33 PM

// This is an array that will contain all your answers in order.
// There are now 2 and 3 possible answers
var answers = new Array(
['Answer11','answer12'],
['Answer21','answer22','answer23']
);

// this should be the only function you need
function check_text(no) {
var boxname = 'thebox' + no; // get the box name
// Note the toLowerCase() moved to this line (Pit's addition)
var box_text = document.theform[boxname].value.toLowerCase();

// This line has been edited to allow 2 possible answers.
// add '|| (....[no][2]))' to allow more possibilities
if ((box_text == answers[no][0].toLowerCase()) || (box_text == answers[no][1].toLowerCase())) {
var chkbox = 'chk' + no;
document.theform[chkbox].checked = true;
} else {
var chkbox = 'chk' + no;
document.theform[chkbox].checked = false;
}
return true;
}

Just a thought..
It's very easy to view the source code to get the answer. If you move the 'answers' array to an external .js file, it will make it a LITTLE more difficult to find.