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 1 of 3 123 LastLast
Results 1 to 15 of 36
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts

    How to get a random number created in a textbox or label

    Hello,

    I have a coding project that I am working on, and I have gotten stumped. Basically win the page loads I want to show random numbers in two textboxes or labels, I would prefer labels. What this is going to be used for is...it is suppose to be for a math learning tool for first, second and third graders. Also another question is that I am suppose to give them digits based upon their grade level. So for first grade 1+1=2 second grade 2 digits, third 3 digits but can have a four digit answer. Plus it can't have negative numbers, nor have remainders for division. Also I don't want to use buttons if at all possible I want the numbers to load automatically.

    I know this is a loaded question and I have worked tons on it, for me its trying to get the last few things to work together that's giving me trouble. If you would like to see sections of my code please ask cause it is tons as of right now. Thanks for your help.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    The sentence "I am suppose to give them ..." is a dead giveaway that this is a homework assignment.

    Which means you need to see Rule 1.5 on this page:
    http://www.codingforums.com/rules.htm

    We don't DO homework for you. We *can* help with the homework. But only after you show you have made some effort to do the work.

    If you will show the code you already have written and point out to us where you are having a problem in the code, then we will probably give you hints of what to try. Don't expect a full solution, but you can get help.
    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
    New Coder
    Join Date
    Mar 2012
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    well if you want i can list the 100 some lines of code? or more I am just stumped like i said b4 in my post b4 n i've stated that ive done lots and I've also stated which area where people would like to see my codes, but you didn't mention what area of the codes you would like to see. N I did state that in my 1st post. So again if you want me to put the whole thing on here, I will, but I was asking for specific areas, I didn't want to post the whole thing, bc it would take up more than one page of a normal screen size, and lots of scrolling. I wanted to try and keep it simple.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    100 lines of code isn't excessive. Yes, show them all. It's much better than showing none.

    But do at least then tell us where in your code you think the problem 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.

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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.
    Code:
     
    <!--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");
    		button1 = document.getElementById("1");
    		button2 = document.getElementById("2");
    		button3 = document.getElementById("3");
    		button4 = document.getElementById("4");
    		button5 = document.getElementById("5");
    		button6 = document.getElementById("6");
    		button7 = document.getElementById("7");
    		button8 = document.getElementById("8");
    		button9 = document.getElementById("9");
    		button0 = document.getElementById("0");
    		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('1st grade').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">
    				<tr><input type="image" id="1" src="Button1.gif" alt="Calculator Button #1" onclick="document.getElementById('txtarea').value += '1'"/>&nbsp <input type="image" id="2" src="Button2.gif" alt="Calculator Button #2" onclick="document.getElementById('txtarea').value += '2'"/>&nbsp <input type="image" id="3" src="Button3.gif" alt="Calculator Button #3"onclick="document.getElementById('txtarea').value += '3'"/><div>
    			<div>
    				<input type="image" id="4" src="Button4.gif" alt="Calculator Button #4"onclick="document.getElementById('txtarea').value += '4'"/>&nbsp <input type="image" id="5" src="Button5.gif" alt="Calculator Button #5" onclick="document.getElementById('txtarea').value += '5'"/>&nbsp <input type="image" id="6" src="Button6.gif" alt="Calculator Button #6" onclick="document.getElementById('txtarea').value += '6'"/>
    			<div>
    				<input type="image" id="7" src="Button7.gif" alt="Calculator Button #7" onclick="document.getElementById('txtarea').value += '7'"/>&nbsp <input type="image" id="8" src="Button8.gif" alt="Calculator Button #8" onclick="document.getElementById('txtarea').value += '8'"/>&nbsp <input type="image" id="9" src="Button9.gif" alt="Calculator Button #9" onclick="document.getElementById('txtarea').value += '9'"/>
    			<div>
    				<input type="image" id="0" src="Button0.gif" alt="Calculator Button #0" onclick="document.getElementById('txtarea').value += '0'"/>
    	
    			<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" />Add<input type="checkbox" name="subtract" value="subtract" id="subtract" onclick="Subtract()"/>Subtract<input type="checkbox" name="multiply" value="multiply" id="multiply" onclick="Multiply()"/>Multiply<input type="checkbox" name="divide" value="divide" id="divide" onclick="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"/>
    			<div>
    				first grade:<input type="text" id="oneA"><input type="text" id="oneB">answer:<input type="text" id="ansone"><input type="button" value="check" onclick="checkAns('one')"/><br>
    				second grade:<input type="text" id="twoA"><input type="text" id="twoB">answer:<input type="text" id="anstwo"><input type="button" value="check" onclick="checkAns('two')"/><br>
    				third grade:<input type="text" id="threeA"><input type="text" id="threeB">answer:<input type="text" id="ansthree"><input type="button" value="check" onclick="checkAns('three')"/><br>
        </form>
       </body>
      
       
          
    
         
    </html>
    Last edited by pbracing33b; 03-19-2012 at 02:42 AM.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,634
    Thanks
    0
    Thanked 649 Times in 639 Posts
    The first problem is with document.getElementById("1"); since ids MUST always start with a letter.

    Perhaps if you fix all the ids to be valid first then the code might work a bit better.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    New Coder
    Join Date
    Mar 2012
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    btw I did get random numbers to show up in the textboxes, but now I need it to just have one set show up, and if the user selects 5 problems then I need to be able to tell the user if they got that problem right or wrong, and if it is right then go to the next problem automatically.

  • #8
    New Coder
    Join Date
    Mar 2012
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    well I am not even using those varibles so those really don't matter, if you look a little lower you see that I never even call it!

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    And I think you need to clean up the HTML on the page first.

    What possible reason is there for all this HTML:
    Code:
    first grade:<input type="text" id="oneA"><input type="text" id="oneB">answer:<input type="text" id="ansone"><input type="button" value="check" onclick="checkAns('one')"/><br>
    second grade:<input type="text" id="twoA"><input type="text" id="twoB">answer:<input type="text" id="anstwo"><input type="button" value="check" onclick="checkAns('two')"/><br>
    third grade:<input type="text" id="threeA"><input type="text" id="threeB">answer:<input type="text" id="ansthree"><input type="button" value="check" onclick="checkAns('three')"/><br>
    ???

    The correct answer will be the same no matter what the grade level.

    All that matters is that you present the student with an appropriate pair of numbers that depends on his/her grade level.

    That being said, I think your three "Please select ..." questions should be at the very top of the page. And once the test has started (have them click on a "start" button?), they should be hidden from view so they can't be changed. Hide the rest of the page until the test indeed starts.


    Finally, you are working *WAY* too hard on generating the appropriate numbers for the grade level.
    Just choose numbers from 1 (or zero) to 9 for grade 1; from 10 to 99 for grade 2; from 100 to 999 for grade 3.
    Last edited by Old Pedant; 03-19-2012 at 02:51 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.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    Quote Originally Posted by pbracing33b View Post
    well I am not even using those varibles so those really don't matter, if you look a little lower you see that I never even call it!
    Then don't give those <div>s any ID at all. It's better to have no ID than an illegal one.
    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.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    And your randomInt function is coded wrong if the intent is to get a number that ranges from the first argument to the second.

    That is, if you invoke randomInt(10,99) expecting to get numbers from 10 through and including 99, you won't, with that function. You will get numbers from 10 to 108.

    The correct code would be something like this:
    Code:
    	  function RandomInt(low, high)
    	  {
    		return low + Math.floor(Math.random() * (high-low+1) );
    			
    	  }
    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.

  • #12
    New Coder
    Join Date
    Mar 2012
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    And I think you need to clean up the HTML on the page first. What possible reason is there for all this HTML:
    Code:
     first grade:answer:second grade:answer:third grade:answer:
    ??? The correct answer will be the same no matter what the grade level. All that matters is that you present the student with an appropriate pair of numbers that depends on his/her grade level. That being said, I think your three "Please select ..." questions should be at the very top of the page. And once the test has started (have them click on a "start" button?), they should be hidden from view so they can't be changed. Hide the rest of the page until the test indeed starts. Finally, you are working *WAY* too hard on generating the appropriate numbers for the grade level. Just choose numbers from 1 (or zero) to 9 for grade 1; from 10 to 99 for grade 2; from 100 to 999 for grade 3.
    The reason for this coding was just for testing some coding that I was thinking of doing, I know that my code needs alot of cleaning, but I am still in the testing phase. But I do have couple of questions:
    Code:
    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!")
    			}
    		}
    I want to implement this code for the number1 and number2 and txtarea text boxes so if the user enters the correct answer/wrong answer they get the appropriate response.
    And yes I know I always seem to make things harder than they actually are.
    Also on this piece of code
    Code:
    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)
    			{
    				
    			}
    		}
    and the html part is
    Code:
    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>
    on this code above I want to know how am I going to make this so that when the user selects a number it automatically give the user 5 questions then stops after 5 (5,10,15 etc). Javascript does not come easy to me.

  • #13
    New Coder
    Join Date
    Mar 2012
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    And I think you need to clean up the HTML on the page first. What possible reason is there for all this HTML:
    Code:
     first grade:answer:second grade:answer:third grade:answer:
    ??? The correct answer will be the same no matter what the grade level. All that matters is that you present the student with an appropriate pair of numbers that depends on his/her grade level. That being said, I think your three "Please select ..." questions should be at the very top of the page. And once the test has started (have them click on a "start" button?), they should be hidden from view so they can't be changed. Hide the rest of the page until the test indeed starts. Finally, you are working *WAY* too hard on generating the appropriate numbers for the grade level. Just choose numbers from 1 (or zero) to 9 for grade 1; from 10 to 99 for grade 2; from 100 to 999 for grade 3.
    Also another thing is how would I hide the questions so that they couldn't be changed after the test is started, I don't have a clue on how I could do this.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    To hide something you just put it inside a <div> with the appropriate style. Eaxmple:
    Code:
    <div id="setup" style="display: block;">
    ... all the set up questions ...
    </div>
    <div id="quiz" style="display: none;">
    ... the quiz ...
    </div>
    Then, you just use JS to flip the display values:
    Code:
         document.getElementById("setup").style.display = "none";
         document.getElementById("quiz").style.display = "block";
    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
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,216
    Thanks
    75
    Thanked 4,344 Times in 4,310 Posts
    Instead of using checkboxes for the choice of operation (add, subtract, etc.) use radio buttons as you did for number of questions and grade level.

    To get checked value of one radio button from a set of them, use this code:
    Code:
    function getRadioValue( rbgroup )
    {
        for ( var b = 0; b < rbgroup.length; ++b )
        {
            var rb = rbgroup[b];
            if ( rb.checked ) return rb.value;
        }
        return null;
    }
    And then you can call it like this:
    Code:
        var chosenAmount = getRadioValue( document.Keypad.amount );
        if ( chosenAmount == null )
        {
            alert("You must choose the number of questions to ask");
        }
    You can avoid the possibility of getting null from getRadioValue by simply pre-checking one of the radio buttons. It would probably be wise to do so for this set of homework, to avoid more complex coding.
    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 1 of 3 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
    •