Creating a javascript function that can check different kinds of arithmetic based on select menu opt-CodePudding

I am creating a math game with javascript that asks the user to solve basic math problems based on their chosen select menu option. The user will enter their answer using an input field and when the enter key is pressed a function is called that checks wether or not the answer is correct.

I am having trouble creating a function that can check the different kinds of arithmetic when the enter key is pressed. So far I have only managed to create a check function that can check a single kind of arithmetic.

The basics of the game are this:

the user selects wether to do addition, subtraction, multiplication, or division, then presses the "start" button and the first question is generated of their chosen operation
when the enter key is pressed if the users input is correct, the score is incremented by 1, and a new question of the same kind of arithmetic is generated, if not they are asked to try again.

let gameMenu = document.getElementById('game-menu');
let gameCard = document.getElementById('game-card');
let x = document.getElementById("num1");
let y = document.getElementById("num2");
let displayOperator = document.getElementById('display-operator');
let score = 0;

let answer = document.getElementById('user-answer');
answer.addEventListener('keyup', function(e) {
  if (e.key === 'Enter') {
    check();
  }
});

function start() {
  let opt = document.getElementById('opt');
  let selOpt = opt.options[opt.selectedIndex].value;

  if (selOpt == " ") {
    doAddition();
  }

  if (selOpt == "-") {
    doSubtraction();
  }

  if (selOpt == "*") {
    doMultiplication();
  }

  if (selOpt == "/") {
    doDivision();
  }
}

function doAddition() {
  displayOperator.innerHTML = "&plus;"
  x.innerHTML = Math.floor(Math.random() * 5   1);
  y.innerHTML = Math.floor(Math.random() * 5   1);
}

function doSubtraction() {
  displayOperator.innerHTML = "&minus;"
  x.innerHTML = Math.floor(Math.random() * 5   1);
  y.innerHTML = Math.floor(Math.random() * 5   1);
}

function doMultiplication() {
  displayOperator.innerHTML = "&times;"
  x.innerHTML = Math.floor(Math.random() * 5   1);
  y.innerHTML = Math.floor(Math.random() * 5   1);
}

function doDivision() {
  displayOperator.innerHTML = "&divide;"
  x.innerHTML = Math.floor(Math.random() * 5   1);
  y.innerHTML = Math.floor(Math.random() * 5   1);
}

function check() {
  let x = parseInt(document.getElementById("num1").innerHTML);
  let y = parseInt(document.getElementById("num2").innerHTML);
  let tryAgain = document.getElementById("try-again");
  let answer = parseInt(document.getElementById("user-answer").value);
  if (answer === x   y) {
    score  ;
    document.getElementById("score").innerHTML = score;
  } else {
    tryAgain.innerHTML = "incorrect, try again";
    preventDefault();
  }
  document.getElementById("user-answer").value = "";
  doAddition();
}

#question {
  display: flex;
  flex-direction: row;
}

<!DOCTYPE html>

<head>
</head>

<body>
  <div id="game-menu">
    <p>game menu</p>
    <select id="opt">
      <option value=" ">Addition</option>
      <option value="-">Subtraction</option>
      <option value="*">Multiplication</option>
      <option value="/">Division</option>
    </select>
    <button onclick="start()">START</button>
  </div>
  <div id="game-card">
    <div id="question">
      <p id="num1"></p>
      <p id="display-operator"></p>
      <p id="num2"></p>
    </div>
    <p id="try-again"></p>
    <input id="user-answer">
    <p id="score">score</p>
  </div>
</body>

This is the current code that I have.

I have separate functions for each type of arithmetic and plan on modifying the Math.floor(Math.random()*5 1) in the doSubtraction() and doDivision() functions to prevent negative answers and avoid division questions that aren't evenly divisible.

The problem I'm facing now is that I am not clear on how to make the check() function account for what the user chose from the select menu. I've included (answer === x y) and doAddition() in the check() function to show how it works, but I cant figure out how to make it check for the proper arithmetic based on the select menu that was chosen, and then call back to the same type of function that was chosen.

I'm pretty new to javascript and appreciate the help and any constructive criticism too. Thanks.

CodePudding user response：

You should probably already store the correct answer once you decide on which arithmetic you are going to ask, and pass it to the check function. Then you'll only have to check if the user's answer is the same as the correct one.

CodePudding user response：

Get the value of the dropdown the same way you do it in start(), then use similar if/else if statements to check the result.

At the end of check() call start() again to generate a new question using the same select option.

You need to clear tryAgain when the user enters a correct answer.

let gameMenu = document.getElementById('game-menu');
let gameCard = document.getElementById('game-card');
let x = document.getElementById("num1");
let y = document.getElementById("num2");
let displayOperator = document.getElementById('display-operator');
let score = 0;

let answer = document.getElementById('user-answer');
answer.addEventListener('keyup', function(e) {
  if (e.key === 'Enter') {
    check();
  }
});

function start() {
  let opt = document.getElementById('opt');
  let selOpt = opt.options[opt.selectedIndex].value;

  if (selOpt == " ") {
    doAddition();
  }

  if (selOpt == "-") {
    doSubtraction();
  }

  if (selOpt == "*") {
    doMultiplication();
  }

  if (selOpt == "/") {
    doDivision();
  }
}

function doAddition() {
  displayOperator.innerHTML = "&plus;"
  x.innerHTML = Math.floor(Math.random() * 5   1);
  y.innerHTML = Math.floor(Math.random() * 5   1);
}

function doSubtraction() {
  displayOperator.innerHTML = "&minus;"
  x.innerHTML = Math.floor(Math.random() * 5   1);
  y.innerHTML = Math.floor(Math.random() * 5   1);
}

function doMultiplication() {
  displayOperator.innerHTML = "&times;"
  x.innerHTML = Math.floor(Math.random() * 5   1);
  y.innerHTML = Math.floor(Math.random() * 5   1);
}

function doDivision() {
  displayOperator.innerHTML = "&divide;"
  x.innerHTML = Math.floor(Math.random() * 5   1);
  y.innerHTML = Math.floor(Math.random() * 5   1);
}

function check() {
  let x = parseInt(document.getElementById("num1").innerHTML);
  let y = parseInt(document.getElementById("num2").innerHTML);
  let tryAgain = document.getElementById("try-again");
  let answer = parseInt(document.getElementById("user-answer").value);
    let selOpt = document.getElementById('opt').value;
    let correctAnswer;
    switch (selOpt) {
      case ' ': correctAnswer = x   y; break;
      case '-': correctAnswer = x - y; break;
      case '*': correctAnswer = x * y; break;
      case '/': correctAnswer = Math.floor(x / y); break;
    }

  if (answer === correctAnswer) {
    score  ;
    document.getElementById("score").innerHTML = score;
    tryAgain.innerHTML = '';
  } else {
    tryAgain.innerHTML = "incorrect, try again";
  }
  document.getElementById("user-answer").value = "";
  start();
}

#question {
  display: flex;
  flex-direction: row;
}

<!DOCTYPE html>

<head>
</head>

<body>
  <div id="game-menu">
    <p>game menu</p>
    <select id="opt">
      <option value=" ">Addition</option>
      <option value="-">Subtraction</option>
      <option value="*">Multiplication</option>
      <option value="/">Division</option>
    </select>
    <button onclick="start()">START</button>
  </div>
  <div id="game-card">
    <div id="question">
      <p id="num1"></p>
      <p id="display-operator"></p>
      <p id="num2"></p>
    </div>
    <p id="try-again"></p>
    <input id="user-answer">
    <p id="score">score</p>
  </div>
</body>