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.
Page 2 of 3 FirstFirst 123 LastLast
Results 16 to 30 of 36
  1. #16
    New Coder
    Join Date
    Mar 2012
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok I have made a bunch of changes and now I can't seem to get my numbers to show up at all in my "number1" and "number2" when the user selects a grade
    so I can't seem to get my random numbers to work now, I don't know what I changed or how it happened I haved looked over it for about an hour or more. Also I would love to try and do one operation at a time. But our teacher doesn't like to give us easy stuff to do. We have to be able to do all operations in a single mode, ie add, subtract, divide and multiply. So thats why I had checkboxes instead of radio buttons.
    I mean we are all beginning programmers and he expects us to do these types of problems in one or two days, literally! If I were an experience programmer I could see it being done in a few hours, like half of the class is struggling literally.
    Code:
    <!DOCTYPE html>
    <!--Phil Blair-->
    <!--blair-phil-Flash Math-PracticeMode.html-->
    <!--Homework #4-->
    <!--March 18, 2012-->
    
    <!-- Flash Math Practice exam -->
    <html>
       <head>
          <meta charset = "utf-8"/>
          <title>Flash Math Practice Mode</title>
    	  <script type="text/javascript">
    	  function startFlashMath()
    	  {
    		Keypad = document.getElementByID("Keypad");
    		txtarea = document.getElementById("txtarea");
    		operation = document.getElementById("operation");
    		firstGrade = document.getElementById("1st grade");
    		secondGrade = document.getElementById("2nd grade");
    		thirdGrade = document.getElementById("3rd grade");
    		problemsFive = document.getElementById("5");
    		problemsTen = document.getElementById("10");
    		problemsFifteen = document.getElementById("15");
    		problemsTwenty = document.getElementById("20");
    		problemsTwentyFive = document.getElementById("25");
    		problemsThirty = document.getElementById("30");
    	  }
    	  function numPressed()
    	  {
    	  
    	  }
    	  function Add(a,b)
    	  {
    		
    		return a+b;
    	  }
    	  function Multiply(a,b)
    	  {
    		window.alert("This is the Multiply function");
    		return a*b;
    	  }
    	  function Divide(a,b)
    	  {
    		window.alert("This is the Divide function");
    		return a/b;
    	  }
    	  function Subtraction(a,b)
    	  {
    		window.alert("This is the Subtraction function");
    		return a-b;
    	  }
    	  function RandomInt(c,d)
    	  {
    		return Math.floor(c+Math.random()*d);
    			
    	  }
    	 
    		
    		var FKeyPad = document.Keypad;
    		var txtArea1 = document.txtarea;
    		var FlagNewNum = false;
    		//var digit = Math.floor(Math.random()*10)
    		var a = RandomInt(0,9);
    		var b = RandomInt(1,9);
    		//var operation = RandomInt(1,9);
    		var message = document.getElementById("txtarea");
    		var add = a + b;
    		var subtract = a-b;
    		var divide = a/b;
    		var multiply = a*b;
    		var c = Math.floor(Math.random()*100);
    		var d = Math.floor(Math.random()*100);
    		var e = Math.floor(Math.random()*1000);
    		var f = Math.floor(Math.random()*1000);
    		//testing
    		
    		function num()
    		{
    			if(document.Kepad.number1)
    			{
    				RandomInt(0,9);
    			}
    		}
    		function Add()
    		{
    			if(document.Keypad.add.checked)
    			{
    				
    				document.getElementById('number1').value += a;
    				document.getElementById('number2').value += b;
    			}
    		}
    		function Subtract()
    		{
    			if(document.Keypad.subtract.checked)
    			{
    				document.getElementById('number1').value += a;
    				document.getElementById('number2').value += b;
    			}
    		}
    		function Multiply()
    		{
    			if(document.Keypad.multiply.checked)
    			{
    				document.getElementById('number1').value += a;
    				document.getElementById('number2').value += b;
    			}
    		}
    		function Divide()
    		{
    			if(document.Keypad.divide.checked)
    			{
    				document.getElementById('number1').value += a;
    				document.getElementById('number2').value += b;
    			}
    		}
    		function firstGrade()
    		{
    			if (document.getElementById('1st grade').checked)
    			{
    				document.getElementById('number1').value += a;
    				document.getElementById('number2').value += b;
    			}
    		}
    		function secondGrade()
    		{
    			if (document.getElementById('2nd grade').checked)
    			{
    				document.getElementById('number1').value += c;
    				document.getElementById('number2').value += d;
    			}
    		}
    		function thirdGrade()
    		{
    			if (document.getElementById('3rd grade').checked)
    			{
    				document.getElementById('number1').value += e;
    				document.getElementById('number2').value += f;
    			}
    		}
    		function checkAns(grade)
    		{
    			var answer = document.getElementById(grade+'number1').value + document.getElementById(grade+'number2').value
    			
    			if (answer == document.getElementById('txtarea'+grade).value)
    			{
    			alert("well done!")
    			} 
    			else
    			{
    			alert("try again!")
    			}
    		}
    		
    
    			document.getElementById("oneA").value=Math.floor(Math.random()*11);
    			document.getElementById("oneB").value=Math.floor(Math.random()*11);
    			document.getElementById("twoA").value=Math.floor(Math.random()*101);
    			document.getElementById("twoB").value=Math.floor(Math.random()*101);
    			document.getElementById("threeA").value=Math.floor(Math.random()*1001);
    			document.getElementById("threeB").value=Math.floor(Math.random()*1001);
    		function problemsSelected()
    		{
    			var five = document.Keypad.five.checked;
    			var ten = document.Keypad.ten.checked;
    			var fifteen = document.Keypad.fifteen.checked;
    			var twenty = document.Keypad.twenty.checked;
    			var twenty-five = document.Keypad.twenty-five.checked;
    			var thirty = document.Keypad.thirty.checked;
    			
    			if (five >= 5)
    			{
    				
    			}
    		}
    	  </script>
    	</head>
       <body bgcolor="sky blue">
       
    		<p align="center">Welcome to Practice mode of Flash Math!</p>
    	<form name="Keypad" action="" method="post" onsubmit="return false">
    		<div align="center" width="140" height="30">
    			<div>
    				<p align="center"><label>Your current Math Problem:</label><br><input type="text" name="number1" id="number1" readonly="readonly" /> <br>
    				<!--<textarea rows="4" cols="8" readonly="readonly"></textarea>--><input type="text" name="number2" id="number2" readonly="readonly"/>
    				<br><label>Please enter your answer here:</label><br><input type="text" name="txtareaMath" id="txtarea" size="25"/></p>
    			<div>
    				<p align="center"><label>Please select an operation:</label><input type="checkbox" name="add" value="add" id="add" checked="checked"/>Add<input type="checkbox" name="subtract" value="subtract" id="subtract"/>Subtract<input type="checkbox" name="multiply" value="multiply" id="multiply" />Multiply<input type="checkbox" name="divide" value="divide" id="divide" />Divide</p>
    			<div>
    				<label>Please select a grade level:</label>
    				<input type="radio" name="grade" id="1st grade" value="First Grade" checked="checked" onclick="firstGrade()"/>First Grade <input type="radio" name="grade" id="2nd grade" value="Second Grade" onclick="secondGrade()"/>Second Grade <input type="radio" name="grade" id="3rd grade" value="Third Grade" onclick="thirdGrade()"/>Third Grade
    			<div>
    				<label>Please select the number of problems:</label>
    				<input type="radio" name="amount" id="5" value="five" checked="checked"/>5<input type="radio" name="amount" id="10" value="ten"/>10<input type="radio" name="amount" id="15" value="fifteen"/>15<input type="radio" name="amount" id="20" value="twenty"/>20<input type="radio" name="amount" id="25" value="twenty-five"/>25<input type="radio" name="amount" id="30" value="thirty"/>30
    			<div>
    				<input type="button" name="submit" id="submit" value="submit" onclick="checkAns('txtarea')"/><input type="reset"/><br>
    				<tr><input type="image"  src="Button1.gif" alt="Calculator Button #1" onclick="document.getElementById('txtarea').value += '1'"/>&nbsp; <input type="image"  src="Button2.gif" alt="Calculator Button #2" onclick="document.getElementById('txtarea').value += '2'"/>&nbsp; <input type="image"  src="Button3.gif" alt="Calculator Button #3"onclick="document.getElementById('txtarea').value += '3'"/><div>
    			<div>
    				<input type="image"  src="Button4.gif" alt="Calculator Button #4"onclick="document.getElementById('txtarea').value += '4'"/>&nbsp; <input type="image"  src="Button5.gif" alt="Calculator Button #5" onclick="document.getElementById('txtarea').value += '5'"/>&nbsp; <input type="image"  src="Button6.gif" alt="Calculator Button #6" onclick="document.getElementById('txtarea').value += '6'"/>
    			<div>
    				<input type="image"  src="Button7.gif" alt="Calculator Button #7" onclick="document.getElementById('txtarea').value += '7'"/>&nbsp; <input type="image"  src="Button8.gif" alt="Calculator Button #8" onclick="document.getElementById('txtarea').value += '8'"/>&nbsp; <input type="image"  src="Button9.gif" alt="Calculator Button #9" onclick="document.getElementById('txtarea').value += '9'"/>
    			<div>
    				<input type="image"  src="Button0.gif" alt="Calculator Button #0" onclick="document.getElementById('txtarea').value += '0'"/>
    	
    			
    			</div>
    				
        </form>
       </body>
      
       
          
    
         
    </html>

  2. #17
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,422 Times in 4,387 Posts
    You have to fix your JavaScript errors before your code will run.

    I recommend using a Chrome browser and then choosing tool icon=>tools=>javascript console.

    Firebug isn't as helpful about finding some JS errors as Chrome's debugger is.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  3. #18
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,422 Times in 4,387 Posts
    But it's disappointing to see that you haven't really change the fundamental structure of your code.

    You really need to pretty much toss out most of that JS code and start over.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  4. #19
    New Coder
    Join Date
    Mar 2012
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Made a statement in error.

  5. #20
    New Coder
    Join Date
    Mar 2012
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I want to know can I use a label to show the operator, and based on what the user selects how would I show the function. Also the user can pick all functions so how would I automatically change the function based upon whether add, subtract, multiply, or divide is chosen. I am thinking of doing a switch and case or maybe just a case function, as far as changing the function automatically, idk. I don't have a clue.

  6. #21
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,980
    Thanks
    56
    Thanked 557 Times in 554 Posts
    it seems weird to me that you use checkboxes to select the operator - that would seem to be a perfect place to use radio buttons...

    remember that both checkboxes and radio buttons have an onclick attribute which can be used to fire a function as soon as the user selects them

  7. #22
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    [ot]

    Quote Originally Posted by pbracing33b View Post
    I really don't know where to start bc I am sure there is lots of problems, so I am just going to list it, I have problems with java script and then implementing javascript into the html.
    It appears you have fallen into the same bad habit as many other noobies by coding your whole application from go to whoa without any, or very little, testing along the way. When they finish coding they find, lo and behold, their code doesn't work the way they expect.. Surprise, surprise .

    After scratching their heads and bums for a while trying to fix the many problems, they eventually throw their arms up in the air and go looking for a forum like this to hopefully untangle their code for them.

    So what's a better way to code I hear you ask

    Well, the way I go about it is to code in small chunks. When creating a function, first make sure the function is reached when it is called and any passed parameters are received correctly. This can be done by a quick and simple alert(). If the function will need multiple loops or calculations, code 1 at a time and make sure each loop or calculation is working correctly (with alert()s or a debugger) before moving on to the next loop or calculation. There is no point in moving on if the current loop or calculation is not working correctly.

    If you code in small chunks, then at the most you will have only 1 or 2 bugs to fix at any time and you will be debugging only a small piece of code rather than a whole script, which is obviously easier to do.

    Using this concept/technique will result in having a properly working script when you get to the end of the code.

    [/ot]
    Last edited by webdev1958; 03-21-2012 at 01:47 AM.

  8. #23
    New Coder
    Join Date
    Mar 2012
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    it seems weird to me that you use checkboxes to select the operator - that would seem to be a perfect place to use radio buttons...

    remember that both checkboxes and radio buttons have an onclick attribute which can be used to fire a function as soon as the user selects them
    I would love to do this but our teacher wants us to have the user to be able to select all the operations, and I agree it would be much easier, but our teachers don't believe in doing things the easy way. So thats why about 3/4 of the class is literally failing.

  9. #24
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,422 Times in 4,387 Posts
    Good advice, WebDev.

    I will only add that, for HTML pages, I like to always make sure the HTML of the page is correct before I even start on the JavaScript coding. There is little point in writing a function to handle the onclick of a button if the HTML for the button is bogus. (Are there exceptions, as when you use JS to create page elements? Sure. But treat them as that.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  10. #25
    New Coder
    Join Date
    Mar 2012
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by pbracing33b View Post
    I would love to do this but our teacher wants us to have the user to be able to select all the operations, and I agree it would be much easier, but our teachers don't believe in doing things the easy way. So thats why about 3/4 of the class is literally failing.
    btw I am not one of the students that is failing but both of his classes are extremely hard. It could be done a lot easier. Instead of giving us small projects to do each week, they like to give us huge assignments and expect us to get them done typically anywhere from 2-7 days. This is fine if you don't work, or have other obligations, but I am an older student and my time is limited Plus before I came to this school I've always had 4.0's and 3.5's. The teacher doesn't help us a whole lot either, he acts like if we ask questions to him on our own time he doesn't want to take the time to help us out. Bc of these reasons I am transferring to another school in the fall. Cause if a teacher doesn't want to take the time to help a student or do the things that they ought to be doing then the school isn't worth going to, no matter how much it costs.

    Mods I am sorry I got way off topic. But this is the reason I came to this forum is to get help. I'm not looking for people to do my work for me, but I would like to be pointed in a direction in which to go and find what I need to do to my code. And as far as my homework goes I did what I could do b4 I came to this forum for help.

  11. #26
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by pbracing33b View Post
    .....but I would like to be pointed in a direction in which to go and find what I need to do to my code......
    In case you haven't seen it, this post might give you some food for thought

    [ot]

    Quote Originally Posted by Old Pedant View Post
    I will only add that, for HTML pages, I like to always make sure the HTML of the page is correct before I even start on the JavaScript coding. There is little point in writing a function to handle the onclick of a button if the HTML for the button is bogus.
    yep, of course. Totally agree and I do the same . The html is the "foundation" and the javascript sits on top to provide functionality and/or enhanced user experience.

    [/ot]

  12. #27
    New Coder
    Join Date
    Mar 2012
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by webdev1958 View Post
    In case you haven't seen it, this post might give you some food for thought

    [ot]



    yep, of course. Totally agree and I do the same . The html is the "foundation" and the javascript sits on top to provide functionality and/or enhanced user experience.

    [/ot]
    So tell me how does this help?????????????????????????????? I've always done my html first cause that is easy to do, then I do my javascript. But again this doesn't help my current project. Sitting here and criticizing the things that I should have done is irrelevant if there is no tangible help, saying I should have done this or that doesn't matter right now. I've got to get this done, so if you want to help then help. I can't go back and change everything right now. I have one day to get this done. What is the point of forums if no one is willing to help? All I did was ask a question about a label, and I've only gotten one post relevant to that post. I wasn't asking for a lecture, on what I should have done, it doesn't matter now. Are there people willing to help me with this bc sitting here and telling that I should have done it in small sections isn't helping at all. So is there a legitimate way to take a label and based upon the user's selection to tell whether it is a add symbol, subtract symbol, etc, and how to get them to automatically change when the selects all of the options????????????????????????????????????????????????????????????????????????????????????????????? ???????????????????????????????????????????????????????

  13. #28
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by pbracing33b View Post
    So tell me how does this help?
    That's why I put it in [ot] tags.

    It might not help now but it might help you or whoever else might be reading about your problems in the future (remembering that anyone in the universe with access to the www can read this thread)

    If it doesn't help in this case, then so be it. But your short deadline and stuff up do not justify an emergency on my part and to drop helping anyone else to help you.

    Like Old Pedant said:
    Quote Originally Posted by Old Pedant View Post
    But it's disappointing to see that you haven't really change the fundamental structure of your code.

    You really need to pretty much toss out most of that JS code and start over.
    If that's not an option for you at this late stage and being so close to your deadline, then so be it.
    Last edited by webdev1958; 03-21-2012 at 03:12 AM.

  14. #29
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,422 Times in 4,387 Posts
    Here. My version of an answer. It kind of cheats, because it uses eval( ) to get the answer to the problem. But that only happens once per answer, so the very minor performance hit will be unnoticed.

    And, yes, I'm doing homework for you. (See, WebDev?) There's just no point in you banging your head against the wall of the muck you had before.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    <style type="text/css">
    div#problems span {
        background-color: lightblue;
        color: blue;
    }
    </style>
    
    <script type="text/javascript">
    // global variables
    var operations = [];
    var lownum = 0;
    var highnum = 9;
    var problemCount = 5;
    var answerCount = 0;
    var okay = 0;
    var oops = 0;
    var finished = false;
    
    function rbValue( rbgroup )
    {
        for ( var r = 0; r < rbgroup.length; ++r )
        {
            if ( rbgroup[r].checked ) return Number( rbgroup[r].value );
        }
        return 0;
    }
    
    function startPractice(form)
    {
        if ( form.add.checked ) operations.push("+");
        if ( form.subtract.checked ) operations.push("-");
        if ( form.multiply.checked ) operations.push("*");
        if ( form.divide.checked ) operations.push("/");
        if ( operations.length == 0 )
        {
            alert("You must choose at least one operation!");
            return;
        }
        switch ( rbValue( form.grade ) )
        {
            case 1: lownum = 0; highnum = 9; break;
            case 2: lownum = 10; highnum = 99; break;
            case 3: lownum = 100; highnum = 999; break;
        }
        problemCount = rbValue( form.amount );
    
        document.getElementById("choices").style.display = "none";
        document.getElementById("problems").style.display = "block";
    
    
        doQuestion();
    }
    
    function randomInt( low, high )
    {
        return low + Math.floor( Math.random() * ( high - low + 1 ) );
    }
    
    function doQuestion( )
    {
        if ( ++answerCount > problemCount )
        {
            alert("Congratulations.  You completed the practice.");
            finished = true;
            return;
        }
        var v1 = randomInt(lownum,highnum);
        var v2 = randomInt(lownum,highnum);
        var op = operations[ Math.floor( Math.random() * operations.length ) ];
        if ( op == "/" ) 
        {
            var v1 = v1 * v2; // make sure division problems are possible!
        }
        document.getElementById("problem").innerHTML = " " + v1 + " " + op + " " + v2 + " ";
        document.getElementById("answer").innerHTML = "  ";
    }         
    
    function entry( btn )
    {
        if ( finished ) return; // ignore buttons after quiz is done
        var form = btn.form;
        var value = btn.value;
        var ans = document.getElementById("answer");
        if ( value == "C" )
        {
            ans.innerHTML = "  ";
            return;
        }
        if ( value == "E" )
        {
            checkAnswer(form);
            return;
        }
        var sofar = ans.innerHTML.replace(/[^\d]/g,"");
        ans.innerHTML = " " + sofar + value + " ";
    }
    
    function checkAnswer(form)
    {
        var ans = document.getElementById("answer").innerHTML.replace(" ","");
        var prob = document.getElementById("problem").innerHTML.replace(" ","");
        var right = eval(prob);
        if ( right == Number(ans) )
        {
            alert("Correct!");
            ++okay;
            document.getElementById("correct").innerHTML = " " + okay + " ";
        } else {
            alert("No, the correct answer was " + right);
            ++oops;
            document.getElementById("wrong").innerHTML = " " + oops + " ";
        }
        doQuestion();
    }
    </script>
    </head>
    <body bgcolor="sky blue">
    <form name="Keypad" action="" method="post" onsubmit="return false">
    <p align="center">Welcome to Practice mode of Flash Math!</p>
    <div id="choices" style="text-align: center;" align="center">
        Please select one or more operations:
            <label><input type="checkbox" name="add" checked="checked">Add</label>
            <label><input type="checkbox" name="subtract">Subtract</label>
            <label><input type="checkbox" name="multiply">Multiply</label>
            <label><input type="checkbox" name="divide">Divide</label>
    <br/>
        Please select a grade level:
    	<label><input type="radio" name="grade" value="1" checked="checked"/>First Grade</label>
    	<label><input type="radio" name="grade" value="2" />Second Grade</label>
    	<label><input type="radio" name="grade" value="3" />Third Grade</label>
    <br/>
        Please select the number of problems:
            <label><input type="radio" name="amount" value="5" checked="checked"/>5</label>
            <label><input type="radio" name="amount" value="10" checked="checked"/>10</label>
            <label><input type="radio" name="amount" value="15" checked="checked"/>15</label>
            <label><input type="radio" name="amount" value="20" checked="checked"/>20</label>
            <label><input type="radio" name="amount" value="25" checked="checked"/>25</label>
            <label><input type="radio" name="amount" value="30" checked="checked"/>30</label>
    <br/>
        <input type="button" value="Start the practice" onclick="startPractice(this.form);"/>
    <br/><br/>
    </div>
    
    <div id="problems" style="text-align: center; display: none;" align="center">
        <div style="font-size: large;">
            Problem number <span id="number">1</span>:
            <br/>
            What is the value of <span id="problem">0 + 0</span>&nbsp;?
            <br/><br/>
            Your answer: <span id="answer">  </span>
            <br/><br/>
            You have answered <span id="correct">0</span> questions correctly.
            <br/>
            You have answered <span id="wrong">0</span> questions wrong.
        </div>
    <br/><br/>
    <hr/>
    Use these buttons to enter your answer:
    <br/>
        <input type="button" value="1" onclick="entry(this)"/>
        <input type="button" value="2" onclick="entry(this)"/>
        <input type="button" value="3" onclick="entry(this)"/>
    <br/>
        <input type="button" value="4" onclick="entry(this)"/>
        <input type="button" value="5" onclick="entry(this)"/>
        <input type="button" value="6" onclick="entry(this)"/>
    <br/>
        <input type="button" value="7" onclick="entry(this)"/>
        <input type="button" value="8" onclick="entry(this)"/>
        <input type="button" value="9" onclick="entry(this)"/>
    <br/>
        <input type="button" value="C" onclick="entry(this)"/>
        <input type="button" value="0" onclick="entry(this)"/>
        <input type="button" value="E" onclick="entry(this)"/>
    <br/>
    <i>Button C clears your answer.<br/>
    Button E enters your answer and checks if it is correct.</i>
    </div>
    </form>
    </body>
    </html>
    Last edited by Old Pedant; 03-21-2012 at 03:20 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  15. #30
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,901
    Thanks
    79
    Thanked 4,422 Times in 4,387 Posts
    You have to hit refresh to take another quiz with that code, but it wouldn't be hard at all to change that, if it matters.

    Oh, what the heck. Here.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    <style type="text/css">
    div#problems span {
        background-color: lightblue;
        color: blue;
    }
    </style>
    
    <script type="text/javascript">
    // global variables
    var operations = [];
    var lownum = 0;
    var highnum = 9;
    var problemCount = 5;
    var answerCount = 0;
    var okay = 0;
    var oops = 0;
    var finished = false;
    
    function rbValue( rbgroup )
    {
        for ( var r = 0; r < rbgroup.length; ++r )
        {
            if ( rbgroup[r].checked ) return Number( rbgroup[r].value );
        }
        return 0;
    }
    
    function startPractice(form)
    {
        // reset needed globals
        operations = [];
        finished = false;
        okay = 0;
        oops = 0;
        answerCount = 0;
        // (others are reset in code that follows:)
        // and display
        document.getElementById("correct").innerHTML = " 0 ";
        document.getElementById("wrong").innerHTML = " 0 ";
    
    
        // find which operators we will use
        if ( form.add.checked ) operations.push("+");
        if ( form.subtract.checked ) operations.push("-");
        if ( form.multiply.checked ) operations.push("*");
        if ( form.divide.checked ) operations.push("/");
        if ( operations.length == 0 )
        {
            alert("You must choose at least one operation!");
            return;
        }
        // grade level determines range of possible numbers
        switch ( rbValue( form.grade ) )
        {
            case 1: lownum = 0; highnum = 9; break;
            case 2: lownum = 10; highnum = 99; break;
            case 3: lownum = 100; highnum = 999; break;
        }
        // and just believe the amount choice
        problemCount = rbValue( form.amount );
    
        document.getElementById("choices").style.display = "none";
        document.getElementById("problems").style.display = "block";
    
    
        doQuestion();
    }
    
    function randomInt( low, high )
    {
        return low + Math.floor( Math.random() * ( high - low + 1 ) );
    }
    
    function doQuestion( )
    {
        if ( ++answerCount > problemCount )
        {
            alert("Congratulations.  You completed the practice.");
            finished = true;
            document.getElementById("again").style.visibility = "visible";
            return;
        }
        document.getElementById("number").innerHTML = answerCount;
    
        var v1 = randomInt(lownum,highnum);
        var v2 = randomInt(lownum,highnum);
        var op = operations[ Math.floor( Math.random() * operations.length ) ];
        if ( op == "/" ) 
        {
            var v1 = v1 * v2; // make sure division problems are possible!
        } else if ( op == "-" ) {
            if ( v2 > v1 ) // make sure no negative answers in subtract
            { 
                var temp = v1; v1 = v2; v2 = temp; 
            }
        }
        document.getElementById("problem").innerHTML = " " + v1 + " " + op + " " + v2 + " ";
        document.getElementById("answer").innerHTML = "  ";
    }         
    
    function entry( btn )
    {
        if ( finished ) return; // ignore buttons after quiz is done
        var form = btn.form;
        var value = btn.value;
        var ans = document.getElementById("answer");
        if ( value == "C" )
        {
            ans.innerHTML = "  ";
            return;
        }
        if ( value == "E" )
        {
            checkAnswer(form);
            return;
        }
        var sofar = ans.innerHTML.replace(/[^\d]/g,"");
        ans.innerHTML = " " + sofar + value + " ";
    }
    
    function checkAnswer(form)
    {
        var ans = document.getElementById("answer").innerHTML.replace(" ","");
        var prob = document.getElementById("problem").innerHTML.replace(" ","");
        var right = eval(prob);
        if ( right == Number(ans) )
        {
            alert("Correct!");
            ++okay;
            document.getElementById("correct").innerHTML = " " + okay + " ";
        } else {
            alert("No, the correct answer was " + right);
            ++oops;
            document.getElementById("wrong").innerHTML = " " + oops + " ";
        }
        doQuestion();
    }
    
    function playAgain( )
    {
        document.getElementById("again").style.visibility = "hidden";
        document.getElementById("choices").style.display = "block";
        document.getElementById("problems").style.display = "none";
    }
    
    </script>
    </head>
    <body bgcolor="sky blue">
    <form name="Keypad" action="" method="post" onsubmit="return false">
    <p align="center">Welcome to Practice mode of Flash Math!</p>
    <div id="choices" style="text-align: center;" align="center">
        Please select one or more operations:
            <label><input type="checkbox" name="add" checked="checked">Add</label>
            <label><input type="checkbox" name="subtract">Subtract</label>
            <label><input type="checkbox" name="multiply">Multiply</label>
            <label><input type="checkbox" name="divide">Divide</label>
    <br/>
        Please select a grade level:
    	<label><input type="radio" name="grade" value="1" checked="checked"/>First Grade</label>
    	<label><input type="radio" name="grade" value="2" />Second Grade</label>
    	<label><input type="radio" name="grade" value="3" />Third Grade</label>
    <br/>
        Please select the number of problems:
            <label><input type="radio" name="amount" value="5" checked="checked"/>5</label>
            <label><input type="radio" name="amount" value="10" checked="checked"/>10</label>
            <label><input type="radio" name="amount" value="15" checked="checked"/>15</label>
            <label><input type="radio" name="amount" value="20" checked="checked"/>20</label>
            <label><input type="radio" name="amount" value="25" checked="checked"/>25</label>
            <label><input type="radio" name="amount" value="30" checked="checked"/>30</label>
    <br/>
        <input type="button" value="Start the practice" onclick="startPractice(this.form);"/>
    <br/><br/>
    </div>
    
    <div id="problems" style="text-align: center; display: none;" align="center">
        <div style="font-size: large;">
            Problem number <span id="number">1</span>:
            <br/>
            What is the value of <span id="problem">0 + 0</span>&nbsp;?
            <br/><br/>
            Your answer: <span id="answer">  </span>
            <br/><br/>
            You have answered <span id="correct">0</span> questions correctly.
            <br/>
            You have answered <span id="wrong">0</span> questions wrong.
            <br/>
            <input id="again" type="button" style="visibility: hidden;"
                   value="Do another set of problems" onclick="playAgain()"/>
        </div>
    <br/><br/>
    <hr/>
    Use these buttons to enter your answer:
    <br/>
        <input type="button" value="1" onclick="entry(this)"/>
        <input type="button" value="2" onclick="entry(this)"/>
        <input type="button" value="3" onclick="entry(this)"/>
    <br/>
        <input type="button" value="4" onclick="entry(this)"/>
        <input type="button" value="5" onclick="entry(this)"/>
        <input type="button" value="6" onclick="entry(this)"/>
    <br/>
        <input type="button" value="7" onclick="entry(this)"/>
        <input type="button" value="8" onclick="entry(this)"/>
        <input type="button" value="9" onclick="entry(this)"/>
    <br/>
        <input type="button" value="C" onclick="entry(this)"/>
        <input type="button" value="0" onclick="entry(this)"/>
        <input type="button" value="E" onclick="entry(this)"/>
    <br/>
    <i>Button C clears your answer.<br/>
    Button E enters your answer and checks if it is correct.</i>
    </div>
    </form>
    </body>
    </html>
    Last edited by Old Pedant; 03-21-2012 at 03:36 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


 
Page 2 of 3 FirstFirst 123 LastLast

Posting Permissions

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