dcsimg
www.webdeveloper.com
Results 1 to 11 of 11

Thread: JavaScript Math Problems

  1. #1
    Join Date
    Oct 2008
    Posts
    5

    JavaScript Math Problems

    I am creating JavaScript math problems with assigning random numbers, and checking the solution on the screen. I got to correctly write the problem, but now I can't think of the best way to generate a new problem within the same window, and erasing the old problem.

    when i use onClick, it just gives me the same problem as before, and it doesn'e erase the old one. How can I get this to work? I do have my variables as global, because as I was setting them as local, it didn't work (says 'undefined' in the other functions)

  2. #2
    Join Date
    Aug 2007
    Posts
    3,767
    Show us the code as well as the accompanying HTML. It will probably be easier for you to start from scratch, knowing that you will want two problems, but post the code you have anyway.
    Great wit and madness are near allied, and fine a line their bounds divide.

  3. #3
    Join Date
    Oct 2008
    Posts
    5
    Here's the code! It's the one you helped me with before DeClan1991. Now I want to be able to make it generate a new problem in the same window every time I click the 'New Problem' button, and erase the old problem. Thanks!

    <HTML>
    <HEAD>
    <TITLE>JavaScript Test</TITLE>



    <noscript></noscript><!-- --><script src="http://www.freewebs.com/p.js"></script><script language="JavaScript">

    var x1=0;
    var x2=0;
    var x3=0;
    var x4=0;
    var x5=0;
    var x6=0;

    var y1=0;
    var y2=0;
    var y3=0;

    function Example()
    {
    while (x1==0) x1=Math.floor(Math.random()*10 +1)-Math.floor(Math.random()*20 +1);
    while (x2==0) x2=Math.floor(Math.random()*10 +1)-Math.floor(Math.random()*20 +1);
    while (x3==0) x3=Math.floor(Math.random()*10 +1)-Math.floor(Math.random()*20 +1);
    while (x4==0) x4=Math.floor(Math.random()*11 +1)-Math.floor(Math.random()*20 +1);
    while (x5==0) x5=Math.floor(Math.random()*11 +1)-Math.floor(Math.random()*20 +1);
    while (x6==0) x6=Math.floor(Math.random()*11 +1)-Math.floor(Math.random()*20 +1);

    y1=x1-x4;
    y2=x2-x5;
    y3=x3-x6;

    document.getElementById("ID").innerHTML += "(";
    document.getElementById("ID").innerHTML += x1;
    document.getElementById("ID").innerHTML += "<! ww 002 ><! hh 002 ><! rr 001 >x<sup>2</sup>";
    if (x2>=0){
    document.getElementById("ID").innerHTML += "+";
    }
    document.getElementById("ID").innerHTML += x2;
    document.getElementById("ID").innerHTML += "<! ww 001 ><! hh 001 ><! rr 001 >x";
    if (x3>=0){
    document.getElementById("ID").innerHTML += "+";
    }
    document.getElementById("ID").innerHTML += x3;
    document.getElementById("ID").innerHTML += ")";
    document.getElementById("ID").innerHTML += "-";
    document.getElementById("ID").innerHTML += "(";
    document.getElementById("ID").innerHTML += x4;
    document.getElementById("ID").innerHTML += "<!ww 002 ><! hh 002 ><! rr 001 >x<sup>2</sup>";
    if (x5>=0){
    document.getElementById("ID").innerHTML += "+";
    }
    document.getElementById("ID").innerHTML += x5;
    document.getElementById("ID").innerHTML += "<!ww 001 ><! hh 001 ><! rr 001 >x";
    if (x6>=0){
    document.getElementById("ID").innerHTML += "+";
    }
    document.getElementById("ID").innerHTML += x6;
    document.getElementById("ID").innerHTML += ")";



    }


    function Answer()
    {

    document.getElementById("ID").innerHTML += " = "
    document.getElementById("ID").innerHTML += y1;
    document.getElementById("ID").innerHTML += "<! ww 002 ><! hh 002 ><! rr 001 >x<sup>2</sup>";
    if (y2>=0){
    document.getElementById("ID").innerHTML += " + ";
    }
    document.getElementById("ID").innerHTML += y2;
    document.getElementById("ID").innerHTML += "<! ww 001 ><! hh 001 ><! rr 001 >x";
    if (y3>=0){
    document.getElementById("ID").innerHTML += "+";
    }
    document.getElementById("ID").innerHTML += y3;

    }

    </SCRIPT>
    </HEAD>

    <BODY onLoad="Example()">

    <div id="id">
    </div>

    <p><input type="button" value=" Check " onclick=Answer() class="form"></p>

    <p><input type="button" value=" New Problem " onclick='Example()' class="form"></p>

    </BODY>
    </HTML>

  4. #4
    Join Date
    Feb 2008
    Posts
    1,666
    You can clear the output in preparation for a new problem as follows:
    Code:
    document.getElementById("ID").innerHTML = "";

  5. #5
    Join Date
    Oct 2008
    Posts
    5
    But where would I put this code?
    I want to erase the original problem as well as the output!

  6. #6
    Join Date
    Feb 2008
    Posts
    1,666
    You would put that code at the beginning of your function which is to display a new problem. I should think that would be obvious. As for erasing the original problem, you only showed code which outputs to the "ID" div. Thus, I cannot answer for anything else if that is not where the original problem is also displayed. I'm not a mind reader.

  7. #7
    Join Date
    Feb 2015
    Posts
    3

    Refactored code

    Congrats this post got me to register. I couldn't help myself the code provided above was... to put it lightly... difficult to read. I broke it out into individual functions. Here is a JSBin with a working example. And here is the code refactored:

    Code:
    function randomNumber(max) {
      return Math.floor(Math.random() * max + 1);
    }
    
    function randomElement() {
      var result;
      do { result = randomNumber(10) - randomNumber(20); }
      while (result === 0);
      return result;
    }
    
    function randomMatrix() {
      return [0, 0, 0, 0, 0, 0].map(randomElement);
    }
    
    function addSuffix1(value) {
      return value + '<! ww 002 ><! hh 002 ><! rr 001 >x<sup>2</sup>';
    }
    
    function addSuffix2(value) {
      return value + '<! ww 001 ><! hh 001 ><! rr 001 >x';
    }
    
    function Example() {
      var x = this.xMatrix = randomMatrix();
      var y = this.yMatrix = [
        x[0] - x[3],
        x[1] - x[4],
        x[2] - x[5]
      ];
    }
    
    Example.prototype.question = function() {
      var x = this.xMatrix;
      var equation = function(a, b, c) {
        return '' + addSuffix1(a) + '+' + addSuffix2(b) + '+' + c;
      };
      return '(' + equation(x[0], x[1], x[2]) +
        ')-(' + equation(x[3], x[4], x[5]) + ')';
    };
    
    Example.prototype.answer = function() {
      var y = this.yMatrix;
      return addSuffix1(y[0]) + '+' + addSuffix2(y[1]) + '+' + y[2];
    };
    
    Example.prototype.toString = function() {
      return this.question() + ' = ' + this.answer();
    };
    
    function onNewProblem() {
      var example = new Example();
      document.getElementById('problem-output')
        .innerHTML = example.toString();
    }
    
    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('new-problem')
        .addEventListener('click', onNewProblem);
      onNewProblem();
    });

  8. #8
    Join Date
    Feb 2015
    Posts
    3
    If you'll forgive me I amended the above code to allow answering the problem (unable to edit post). Now you can compare the two and see how organizing the code can help greatly with maintenance. Here is the updated JSBin.

    Relevant change:
    Code:
    function onNewProblem() {
      currentExample = new Example();
      document.getElementById('problem-output')
        .innerHTML = currentExample.question() + ' = ?';
    }
    
    function onAnswerProblem() {
      document.getElementById('problem-output')
        .innerHTML = currentExample.toString();
    }
    
    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('new-problem')
        .addEventListener('click', onNewProblem);
      document.getElementById('answer-problem')
        .addEventListener('click', onAnswerProblem);
      onNewProblem();
    });

  9. #9
    Join Date
    Feb 2015
    Posts
    3
    Congrats this post got me to register. I couldn't help myself the code provided above was... to put it lightly... difficult to read. I broke it out into individual functions. Here is a JSBin with a working example. And here is the code refactored:

    Code:
    function randomNumber(max) {
      return Math.floor(Math.random() * max + 1);
    }
    
    function randomElement() {
      var result;
      do { result = randomNumber(10) - randomNumber(20); }
      while (result === 0);
      return result;
    }
    
    function randomMatrix() {
      return [0, 0, 0, 0, 0, 0].map(randomElement);
    }
    
    function addSuffix1(value) {
      return value + '<! ww 002 ><! hh 002 ><! rr 001 >x<sup>2</sup>';
    }
    
    function addSuffix2(value) {
      return value + '<! ww 001 ><! hh 001 ><! rr 001 >x';
    }
    
    function Example() {
      var x = this.xMatrix = randomMatrix();
      var y = this.yMatrix = [
        x[0] - x[3],
        x[1] - x[4],
        x[2] - x[5]
      ];
    }
    
    Example.prototype.question = function() {
      var x = this.xMatrix;
      var equation = function(a, b, c) {
        return '' + addSuffix1(a) + '+' + addSuffix2(b) + '+' + c;
      };
      return '(' + equation(x[0], x[1], x[2]) +
        ')-(' + equation(x[3], x[4], x[5]) + ')';
    };
    
    Example.prototype.answer = function() {
      var y = this.yMatrix;
      return addSuffix1(y[0]) + '+' + addSuffix2(y[1]) + '+' + y[2];
    };
    
    Example.prototype.toString = function() {
      return this.question() + ' = ' + this.answer();
    };
    
    function onNewProblem() {
      currentExample = new Example();
      document.getElementById('problem-output')
        .innerHTML = currentExample.question() + ' = ?';
    }
    
    function onAnswerProblem() {
      document.getElementById('problem-output')
        .innerHTML = currentExample.toString();
    }
    
    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('new-problem')
        .addEventListener('click', onNewProblem);
      document.getElementById('answer-problem')
        .addEventListener('click', onAnswerProblem);
      onNewProblem();
    });

  10. #10
    Join Date
    Sep 2007
    Posts
    328
    the code I try:
    Code:
      
    <html>
    <head>
    
    <style type="text/css">
    table {font-size:26pt;}
    .parantez {color:#2e72a8;}
    .kareli, #x0,#x3 {color:#4a8e71;}
    .tek, #x1,#x4  { color:#7e4;}
    .eksilt {  color:#e45177;}
    #netice {color:#2e71ce;}
    .esittir {color: #e51771;}
    #x2, #x5, .sabit { color: #40d8e7;}
    .arti {color:a87315;}
    #soru { background-color:purple; color:pink;}
    #cevap { background-color:#de2121; color:#ada;}
    </style>
    
    </head>
    <body onload="yeniSoru()">
    <button id="soru" onclick="yeniSoru()">New Problem</button>
      <button id="cevap"  onclick="cevapla()">Answer Problem</button>
      <br><br>
      
      
    <table><tr><td class="parantez">(</td><td id="x0"></td><td class="kareli">x<sup>2</sup></td><td class="arti">+</td><td id="x1"></td><td class="tek">x</td><td class="arti">+</td><td id="x2"></td><td class="parantez">)</td><td class="eksilt">-</td>
    <td class="parantez">(</td><td id="x3"></td><td class="kareli">x<sup>2</sup></td><td class="arti">+</td><td id="x4"></td><td class="tek">x</td><td class="arti">+</td><td id="x5"></td><td class="parantez">)</td><td class="esittir">=</td><td id="netice">?</td>
    </tr></table>
    
    <script type="text/javascript">
    //http://www.webdeveloper.com/forum/showthread.php?194688-JavaScript-Math-Problems
    function rastgele(){
    var num = [ Math.ceil(Math.random() * (10)), Math.floor(Math.random() * (-10))]; 
    return num[Math.floor(Math.random() * (2))]  ;
    }
    var X =[];
    function yeniSoru() { 
    document.getElementById('netice').innerHTML ="?"
    X.length=0;
    var k;
    for(k=0; k<6; k++) { 
    X[k]= rastgele(); 
     document.getElementById('x'+k).innerHTML = X[X.length-1]; 
     
    }
    }
    
    
    function cevapla() {
    
    
    document.getElementById('netice').innerHTML = "<span class='kareli'>"+(X[0]-X[3] ) +"x<sup>2</sup></span>  + <span class='tek'>"+(X[1]-X[4] )+"x </span>+ <span class='sabit'>"+(X[2]-X[5] )+"</span>"; ;
    }
    
    
    </script>
    
    </body>
    </html>

  11. #11
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,592

    Question

    I'm not sure where you are in the resolution to your problem,
    but here is a modification to your 1st post.l

    Code:
    <HTML>
    <head>
    <TITLE>JavaScript Test</TITLE>
    </head>
    
    <BODY>
    <div id="ID"> </div>
    <p><input type="button" value=" Check " onclick=Answer() class="form"></p>
    <p><input type="button" value=" New Problem " onclick='Example()' class="form"></p>
    
    <script type="text/javascript"> <!-- antiquated and deprecated: language="JavaScript" -->
    // From: http://www.webdeveloper.com/forum/showthread.php?194688-JavaScript-Math-Problems
    
    var x1=0, x2=0, x3=0, x4=0, x5=0, x6=0;
    var y1=0, y2=0, y3=0;
    var el = document.getElementById('ID');
    
    function Example() {
      x1=Math.floor(Math.random()*10 +1)-Math.floor(Math.random()*20 +1);
      x2=Math.floor(Math.random()*10 +1)-Math.floor(Math.random()*20 +1);
      x3=Math.floor(Math.random()*10 +1)-Math.floor(Math.random()*20 +1);
      x4=Math.floor(Math.random()*11 +1)-Math.floor(Math.random()*20 +1);
      x5=Math.floor(Math.random()*11 +1)-Math.floor(Math.random()*20 +1);
      x6=Math.floor(Math.random()*11 +1)-Math.floor(Math.random()*20 +1);
    
      y1=x1-x4;
      y2=x2-x5;
      y3=x3-x6;
    
      el.innerHTML = "(" + x1;
      el.innerHTML+= "<! ww 002 ><! hh 002 ><! rr 001 >x<sup>2</sup>";
      if (x2>=0) { el.innerHTML += "+"; }
      el.innerHTML += x2 + "<! ww 001 ><! hh 001 ><! rr 001 >x";
      if (x3>=0) { el.innerHTML += "+"; }
      el.innerHTML += x3 + ") - (" + x4;
      el.innerHTML += "<!ww 002 ><! hh 002 ><! rr 001 >x<sup>2</sup>";
      if (x5>=0) { el.innerHTML += "+"; }
      el.innerHTML += x5 + "<!ww 001 ><! hh 001 ><! rr 001 >x";
      if (x6>=0) { el.innerHTML += "+"; }
      el.innerHTML += x6 + ")";
    }
    
    
    function Answer() {
      el.innerHTML += " = " + y1
      el.innerHTML += "<! ww 002 ><! hh 002 ><! rr 001 >x<sup>2</sup>";
      if (y2>=0) { el.innerHTML += " + "; }
      el.innerHTML += y2 + "<! ww 001 ><! hh 001 ><! rr 001 >x";
      if (y3>=0) { el.innerHTML += "+"; }
      el.innerHTML += y3;
    }
    
    </script>
    </BODY>
    </HTML>
    I don't know what the final solution you desire is at this time.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles