Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    addition quiz text box Catch-22?

    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>

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Location
    Western US
    Posts
    169
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    Code:
    <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"> =&nbsp; <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

  • #3
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    New Coder
    Join Date
    Jun 2002
    Location
    London & Oxford
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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">
    <!--
    function newProblem(){
    numA = Math.floor(Math.random() * 100) + 1;
    numB = Math.floor(Math.random() * 100) + 1;
    document.myForm.txtQuestion.value = + numA + " + " + numB;
    var correctAnswer = numA + numB;
    document.myForm.correctAnswer.value = correctAnswer;
    document.myForm.txtAnswer.value = '';
    }

    function checkAnswer(form){
    if(form.txtAnswer.value==form.correctAnswer.value){
    alert("Correct!!!");
    newProblem();
    }
    else{
    alert("Try again!");
    }
    }
    //-->
    </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>
    As easy as 3.1415926535897932384626433832795028841

  • #5
    New to the CF scene
    Join Date
    Jul 2002
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •