Hi, I'm working on an open source project for my kids and I could use some feedback/advice. My project's working title is called "Practice Math".
The idea is to randomly generate math equations for my kids to practice their math (and anyone else who finds the site useful). This is roughly what it looks like at the moment:

I've written JavaScript code to randomly generate the number values and to select an operator from an array.
The steps I need some help with are:
num1 randomOperator num2 ) and interpret them as an integer, operator, and integer (respectively);I'd appreciate any pointers here. I've gone completely blank on possible solutions.
Here is most of the code (I haven't included an event listener on the "Next" button - it isn't relevant to this question, I don't think - you can view the current code in my repo though):
const container = (document.querySelector('.container'));
const eq = document.querySelector('.equation');
let operator;
const btnNext = document.querySelector('#btn_next');
const operators = ['+', '-', '*'];
// const solutions = JSON.parse(localStorage.getItem('solutions')) || [];
// 1. Calculate random numbers
function randomNum(min, max) {
return Math.floor(Math.random() * 1000) + 1;
}
// 2. Randomly select an operator
const randomOperator = operators[Math.floor(Math.random()*operators.length)];
console.log(randomOperator);
// 4. Populate the fields with randomly generated values
function calcValues() {
const num1 = randomNum(10, 999);
const num2 = randomNum(10, 999);
eq.textContent = `
${num1} ${randomOperator} ${num2}`;
}
calcValues();
As you are using jQuery / JavaScript and if you don't want to write a complex code. Then I will suggest easiest steps for this.
Step 1: When rendering question in view: Place integerOne in one placeholder, operator in another placeholder and integerSecond in another.
Example: <div class="row" id="row-1"><span class="intOne">{integerOne}</span><span class="operator">{operator}</span><span class="intSecond">{integerSecond}</span></div>
Step 2: Bind this Div with your calculate button
Step 3: On Click of calculate button, read integers and operator from PlaceHolders and do case calculation as j has mentioned below.
This is just easiest way for solution, maybe once it start working you can polish it with more robust code.
I like j s response. Using eval would be easy, too, as said below, and I don't think you have to worry a lot about hacking on the type of site you're building :)
In JavaScript, you can use eval() for that, make e total equation in string then pass this string to eval(), like
let num1 =(Math.floor(Math.random() * 5000)).toString();
let num2 = (Math.floor(Math.random() * 5000)).toString();
let operator= ['+', '-','*','/'];
let op = operator[Math.floor(Math.random() * 3)];
let str = num1 + op + num2;
//So this string for evaluate.
let res = eval(str);// compare result with this result
Well first things first
regex would be the classic. you just define a ruleset
regex101.com/r/p5K2oL/1
since regular expressions are a common way to parse formal languages.
you split the language into tokens and you build the AST from it. in your case you just have to match the operator to a function
const methodMap = { '+': (a, b) => return Number(a) + Number(b), '-': (a, b) => return Number(a) - Number(b), '*': (a, b) => return Number(a) * Number(b), '/': (a, b) => return Number(a) / Number(b), } if (methodMap[symbol]) { operation = methodMap[symbol]; return operation(a, b); } throw Error('something meaningful')something along the line of this would be a trivial solution. as long as you stay within the single operation set.
however if you want to build more complex operations all of the sudden ordering will be important: precedence of operators :)
precedence: you basically just need to group them and execute them in order. you need to keep the correlation between operator and the operands. so you need to group the tokens.
but just to be fair ;D ... you could just skip that and use "eval" but be aware eval is evil which basically means is hackable but it will save you time :D