...

View Full Version : How to get a random number created in a textbox or label



pbracing33b
03-18-2012, 05:17 AM
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.

Old Pedant
03-18-2012, 05:35 AM
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.

pbracing33b
03-18-2012, 05:56 AM
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.

Old Pedant
03-18-2012, 07:01 AM
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.

pbracing33b
03-19-2012, 03:32 AM
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.


<!--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>

felgall
03-19-2012, 03:37 AM
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.

pbracing33b
03-19-2012, 03:40 AM
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.

pbracing33b
03-19-2012, 03:44 AM
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!

Old Pedant
03-19-2012, 03:48 AM
And I think you need to clean up the HTML on the page first.

What possible reason is there for all this HTML:


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.

Old Pedant
03-19-2012, 03:50 AM
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.

Old Pedant
03-19-2012, 04:06 AM
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:


function RandomInt(low, high)
{
return low + Math.floor(Math.random() * (high-low+1) );

}

pbracing33b
03-19-2012, 05:47 AM
And I think you need to clean up the HTML on the page first. What possible reason is there for all this HTML:
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:

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


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
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.

pbracing33b
03-19-2012, 05:56 AM
And I think you need to clean up the HTML on the page first. What possible reason is there for all this HTML:
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.

Old Pedant
03-19-2012, 06:08 AM
To hide something you just put it inside a <div> with the appropriate style. Eaxmple:


<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:


document.getElementById("setup").style.display = "none";
document.getElementById("quiz").style.display = "block";

Old Pedant
03-19-2012, 06:15 AM
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:


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:


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.

pbracing33b
03-19-2012, 08:12 AM
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.

<!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>

Old Pedant
03-19-2012, 08:21 AM
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.

Old Pedant
03-19-2012, 08:22 AM
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.

pbracing33b
03-19-2012, 03:11 PM
Made a statement in error.

pbracing33b
03-21-2012, 01:55 AM
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.:eek:

xelawho
03-21-2012, 02:07 AM
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

webdev1958
03-21-2012, 02:25 AM
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 :rolleyes:.

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 :thumbsup:

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.

pbracing33b
03-21-2012, 02:51 AM
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.

Old Pedant
03-21-2012, 02:54 AM
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.)

pbracing33b
03-21-2012, 03:03 AM
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.

webdev1958
03-21-2012, 03:14 AM
.....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 (http://www.codingforums.com/showpost.php?p=1206642&postcount=22) might give you some food for thought :)





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 :thumbsup:. The html is the "foundation" and the javascript sits on top to provide functionality and/or enhanced user experience.

pbracing33b
03-21-2012, 03:44 AM
In case you haven't seen it, this post (http://www.codingforums.com/showpost.php?p=1206642&postcount=22) might give you some food for thought :)





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


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????????????????????????????????????????????????????????????????????????????????????????????? ???????????????????????????????????????????????????????

webdev1958
03-21-2012, 03:55 AM
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:

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.

Old Pedant
03-21-2012, 04:18 AM
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.



<!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>

Old Pedant
03-21-2012, 04:21 AM
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.



<!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>

pbracing33b
03-21-2012, 05:26 AM
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.



<!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>


Thanks Old pedant, I am looking through your code now, it seems that if I can see the code I understand it, but if I have to create it, then I'm not sure what to do. N I wasn't expecting you to do my hw, this was just a 1/3 of the project, page one I have done, page two was this one and page 3 was something exactly like this, except it is suppose to be like a drill mode. Which now seeing it, Idk why I didn't think of some of the stuff to do, but I was trying to use disable and enable and that seem to work pretty well, but the other stuff I can't seem to pull out of my head, like I said if I see it, I'm fine.

N I wasn't getting hasty with you (earlier) but I get frustrated when I go to forums looking for help and I get the runaround, bc I am a new person, new to programming. I get very upset when I come to forums looking for help and I don't get it, now I do have to say that this forum has been alot more help than others that I have been to. But sometimes I think there needs to be forums for beginners cause some programmers don't have patience or lack communication skills to help new people. Some people are down right disrespectful. N look like I said b4 I try to do everything b4 I even ask for help, I look in books that I have, I look on the web, I have spent hours on this project, but needless to say I've realized something tonight and that is I shouldn't be beating myself up, bc if 3/4 of the class is failing then obviously there is a problem in which the information is being presented in the classroom, I'm not the type of person that can sit down and read a book and automatically understand what they are saying, I need instruction and I am sure that many others do as well. But I really think that we need forums for beginners bc I get frustrated, and I'm sure other people do too, but the purpose of forums should be to learn, and not sit there and criticize others abilities of what he/she can do or can't do well. I am very appreciative of the help that you have given. If I have questions about your code I will most certainly ask. Thanks again.

webdev1958
03-21-2012, 05:32 AM
....I get very upset when I come to forums looking for help and I don't get it, now I do have to say that this forum has been alot more help than others that I have been to....

Maybe if you keep in mind that most, if not all, who try to help are volunteering time, are not on the forum's payroll and most importantly are not at the beck and call of whoever floats in asking for help, you might not get upset.

Lots of people (and I'm not saying you are one of them) come into forums thinking it is a free debugging service and get upset when they find that it isn't :cool:

Good luck with your assignment :)

pbracing33b
03-21-2012, 05:58 AM
Thanks Old pedant, I am looking through your code now, it seems that if I can see the code I understand it, but if I have to create it, then I'm not sure what to do. N I wasn't expecting you to do my hw, this was just a 1/3 of the project, page one I have done, page two was this one and page 3 was something exactly like this, except it is suppose to be like a drill mode. Which now seeing it, Idk why I didn't think of some of the stuff to do, but I was trying to use disable and enable and that seem to work pretty well, but the other stuff I can't seem to pull out of my head, like I said if I see it, I'm fine.

N I wasn't getting hasty with you (earlier) but I get frustrated when I go to forums looking for help and I get the runaround, bc I am a new person, new to programming. I get very upset when I come to forums looking for help and I don't get it, now I do have to say that this forum has been alot more help than others that I have been to. But sometimes I think there needs to be forums for beginners cause some programmers don't have patience or lack communication skills to help new people. Some people are down right disrespectful. N look like I said b4 I try to do everything b4 I even ask for help, I look in books that I have, I look on the web, I have spent hours on this project, but needless to say I've realized something tonight and that is I shouldn't be beating myself up, bc if 3/4 of the class is failing then obviously there is a problem in which the information is being presented in the classroom, I'm not the type of person that can sit down and read a book and automatically understand what they are saying, I need instruction and I am sure that many others do as well. But I really think that we need forums for beginners bc I get frustrated, and I'm sure other people do too, but the purpose of forums should be to learn, and not sit there and criticize others abilities of what he/she can do or can't do well. I am very appreciative of the help that you have given. If I have questions about your code I will most certainly ask. Thanks again.

var sofar = ans.innerHTML.replace(/[^\d]/g,""); This here inside the paran. what are you doing here, I am not familiar with this, or these.

webdev1958
03-21-2012, 06:05 AM
var sofar = ans.innerHTML.replace(/[^\d]/g,""); This here inside the paran. what are you doing here, I am not familiar with this, or these.

The /[^\d]/g is a regular expression (http://www.learn-javascript-tutorial.com/RegularExpressions.cfm)

The replace() method replaces any part of a string that matches the regex pattern with the 2nd argument, in this case ""

pbracing33b
03-21-2012, 06:11 AM
The /[^\d]/g is a regular expression (http://www.learn-javascript-tutorial.com/RegularExpressions.cfm)

The replace() method replaces any part of a string that matches the regex pattern with the 2nd argument, in this case ""

Cool I didn't know that! That makes things a lot simpler to do in code. Thanks

Old Pedant
03-21-2012, 08:10 PM
And the regular expression there, /[^\d]/g can be read as:

[^\d] ==>> any character that is NOT a digit
/.../g ==>> the g on the end means "global"; in other words find *ALL* matches instead of just the first one

I was trying to put spaces into some of the output to make it look better. So then I needed to pull out those spaces in order to tack on another digit.

But now I wish I had simply used CSS to specify some padding in the <span>s. Then I wouldn't need the spaces.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum