How do I create a math question generator using JavaScript?

user_14886627 0
Viewed 155

I am basically trying to create a website that incorporates a math question generator (for grade 2 or 3 students) and when I run the code it gives me everything: the question, the check button, the output area, but whenever I put in the actual answer it always seems to tell me the answer is wrong, can someone please help me with this?

I am putting this code on a website that I have on WordPress as well.

Here is the code:

<!DOCTYPE HTML> 
<html lang="en">

<body>
<div id="11question"></div>
<input id="answer">
<button id="check" onclick="check()">Check</button>
</body>


<script>
num5 = 500;
num6 = 500;

var operations = {
'+': function (num5, num6) {return num5 + num6;},
'-': function (num5, num6) {return num5 - num6;},
'x': function (num5, num6) {return num5 * num6;}
}
operations = ['+','-','x'][Math.min(Math.floor(Math.random()*3))];
accans= num5 + operations +  num6;
num5 = Math.floor(Math.random() * 10) + 1;
num6 = Math.floor(Math.random() * 10) + 1;
operations = ['+','-','x'][Math.min(Math.floor(Math.random()*3))];
accans= num5 + operations +  num6;
document.getElementById("11question").innerHTML = num5 + operations + num6;

function newquestion() {
    document.getElementById('answer').value = "";
    document.getElementById('answer').style.backgroundColor = "white";
    num5 = 500;
    num6 = 500;
    var operations = {
    '+': function (num5, num6) {return num5 + num6;},
    '-': function (num5, num6) {return num5 - num6;},
    'x': function (num5, num6) {return num5 * num6;}
    }
operations = ['+','-','x'][Math.min(Math.floor(Math.random()*3))];
    accans= num5 + operations +  num6;


    num5 = Math.floor(Math.random() * 10) + 1;
    num6 = Math.floor(Math.random() * 10) + 1;
    operations = ['+','-','x'][Math.min(Math.floor(Math.random()*3))];
    accans= num5 + operations + num6;


document.getElementById("11question").innerHTML = num5 + operations  + num6;
}


function check() {
    answer = document.getElementById('answer').value;
    if (accans == answer) {
        document.getElementById('answer').style.backgroundColor = "green";
        setTimeout(newquestion, 1500);
    }
    else if (accans != answer) {
        document.getElementById('answer').style.backgroundColor = "red";
        setTimeout(newquestion, 1500);
    }
}
</script>
</html>
html javascript
2 Answers

I've rewritten the code between the <script> tags so it does what you want and it's below. Here are the main things you were doing wrong:

  1. You used the variable name operations to mean two different things: the object containing the three calculation functions, and the single operation chosen for the given calculation. I've now given the latter the name operationChosen so they are not overwriting each other.

  2. You were not using the functions you had defined in the operations object to calculate the correct answer (accans). I've changed the calculation so it works now, using the newly defined operationChosen.

  3. There's quite a lot of repetition. I've deleted a lot of lines that were doing the same thing. This includes that you can call newquestion() yourself at the start instead of writing the code creating a new question twice.

  4. You were needlessly giving num5 and num6 initial values.

Working code:

var operations = {
  '+': function (num5, num6) {return num5 + num6;},
  '-': function (num5, num6) {return num5 - num6;},
  'x': function (num5, num6) {return num5 * num6;}
}
var accans

newquestion()

function newquestion() {
    document.getElementById('answer').value = "";
    document.getElementById('answer').style.backgroundColor = "white";
    var num5 = Math.floor(Math.random() * 10) + 1;
    var num6 = Math.floor(Math.random() * 10) + 1;
    var operationChosen = ['+','-','x'][Math.min(Math.floor(Math.random()*3))];
    accans = operations[ operationChosen ]( num5, num6 )
    document.getElementById("11question").innerHTML = num5 + operationChosen + num6;
}

function check() {
    answer = document.getElementById('answer').value;
    if (accans == answer) {
        document.getElementById('answer').style.backgroundColor = "green";
        setTimeout(newquestion, 1500);
    }
    else if (accans != answer) {
        document.getElementById('answer').style.backgroundColor = "red";
        setTimeout(newquestion, 1500);
    }
}
user_109284390 

var num1, num2, operator
const operations={
  "+":["+",(n,m)=>(n*1)+(m*1)], //*1 to prevent 1+1=11
  "-":["-",(n,m)=>n-m],
  "*":["x",(n,m)=>n*m]
}
const o=Object.keys(operations)

function newQuestion(){
  document.getElementById('answer').style.backgroundColor=""
  num1=Math.ceil(Math.random()*10)
  num2=Math.ceil(Math.random()*10)
  operator=o[Math.floor(Math.random()*o.length)]
  document.getElementById('11question').innerText=num1+operator+num2
}

function check(){
  var answer=document.getElementById('answer')
  if(operations[operator][1](num1,num2)==answer.value){answer.style.backgroundColor = "green"}
  else{answer.style.backgroundColor = "red"}
  setTimeout(newQuestion,1500)
}

newQuestion()
<!DOCTYPE HTML> 
<html lang="en">

<body>
<div id="11question"></div>
<input id="answer" type="number">
<button id="check" onclick="check()">Check</button>
</body>

</html>

user_106972130
Related