addition quiz text box Catch-22? [Archive]

View Full Version : addition quiz text box Catch-22?

Beep

07-25-2002, 04:16 PM

New to programming of any sort. I've been self-teaching JavaScript from Andy Harris' JavaScript Programming for the Absolute Beginner. Using his examples, I created a working addition practice script that uses a prompt to ask and answer questions.

I want to make a similar script using text boxes. But my alert for userAnswer != correctAnswer ("Sorry not correct. Try again!") appears immediately on starting the script -- because the answer text box must be (?) initialized empty, yet that calls the alert as I've conditioned it.

Any suggestions on how to escape this Catch-22? Code follows (it doesn't yet supply a new problem if question is answered correctly.) Many thanks.

<html>
<head>
<title>Addition Practice</title>
</head>
<body bgcolor="#FFFFFF">
<center>
<h1>Addition Practice<br>
</h1>

<form method="POST">
<font face="Arial, Helvetica, sans-serif" size="2">
<input type = "button"
name="buttonStart"
value = "Start"
onClick = newProblem();
// runs the function newProblem()
>
</font>
</form>

<script language="JavaScript">

function newProblem()
{
var numA = 0;
var numB = 0;
numA = Math.floor(Math.random() * 100) + 1;
numB = Math.floor(Math.random() * 100) + 1;
var txtQuestion = "";
document.myForm.txtQuestion.value = + numA + " + " + numB;
var correctAnswer = numA + numB;
var userAnswer = document.myform.txtAnswer.value;

if (userAnswer == correctAnswer){
alert("Correct!!!");
} else {
alert ("Sorry not correct. Try again!");
}
}

</script>

<form name="myForm">
<input type=text
value=""
size="18"
name="txtQuestion">
=
<input type=text
value=""
size="8"
name="txtAnswer">
</form>

</center>
</body>
</html>

ShriekForth

07-25-2002, 04:52 PM

The problem you have there can be fixed a couple of ways. This is how I would go about it.

First split newProblem into two functions. newProblem will only generate a new problem, leave the portion that checks the answer in a new function called CheckAnswer.

Change the onClick of the submit button to call CheckAnswer CheckAnswer will verify the answer is correct. Using eval() you can make more complex questions, and even use other operators other than +. If the answer is correct, generate a newProblem(), and clear out the old answer. If it's not show the error, and leave it alone, I guess you could clear the answer here too.

The problem left with this situaltion is that it does not start the page with a question, luckily, we have a function that does only that now. So in the body, onLoad="newProblem()" will take care of that.

So...
<html>
<head>
<title>Addition Practice</title>
</head>
<body bgcolor="#FFFFFF" onLoad="newProblem()">
<center>
<h1>Addition Practice</h1>
<form method="POST" >
<Input type = "button" name="buttonStart" value = "Start" onClick ="CheckAnswer();" >
</form>

<form name="myForm">
<input type=text value="" size="18" name="txtQuestion"> =  <input type=text value="" size="8" name="txtAnswer">
</form>

<script language="JavaScript">
function newProblem(){
var numA = 0;
var numB = 0;
numA = Math.floor(Math.random() * 100) + 1;
numB = Math.floor(Math.random() * 100) + 1;
var txtQuestion = "";
document.myForm.txtQuestion.value = + numA + " + " + numB;
}

function CheckAnswer(){
var correctAnswer = eval(document.myForm.txtQuestion.value);
var userAnswer = document.myForm.txtAnswer.value;
if (userAnswer == correctAnswer){
alert("Correct!!!");
newProblem();
document.myForm.txtAnswer.value = "";
} else {
alert ("Sorry not correct. Try again!");
}
}
</script>
</center>
</body>
</html>

A good way to learn progamming, is cia concepts of structured, and object oriented programming. Then it becomes an issue of syntax of this language vs that. I can't think of any books on the subject, I don't think we used one in the classes I had. But a search for structured, or object oriented programming will turn up a few tutorials on the net.

ShriekForth

Beep

07-25-2002, 04:56 PM

Thanks ShriekForth -- Perhaps there is some hope for me as I had just gotten the idea to try splitting the functions but hadn't yet worked on the code. Thanks again. Beep

head8k

07-25-2002, 05:04 PM

While the above was posted, I was also working on a simailar thing. Youmight want to take a look at my code to improve your understanding:

<html>
<head>
<title>Addition Practice</title>
<script language="JavaScript">

</script>
</head>

<body onLoad="newProblem()">
<center>
<h1>Addition Practice</h1>
<form name="myForm">
<input type="text" value="" size="18" name="txtQuestion">=
<input type="text" value="" size="8" name="txtAnswer">
<input type="hidden" value="" name="correctAnswer">
<input type="button" onclick="checkAnswer(this.form)" value="check it">
</form>
</center>
</body>
</html>

Beep

07-25-2002, 05:15 PM

Thanks so much also, head8k. It's really helpful to see another way to do this, especially as I have not used anything hidden yet. Great!