My current task involves dynamically generating 20 math problems. These problems need to be stored as objects in an array before being displayed. I am facing a challenge in creating 20 unique random equations as objects and then calling them into a table. Below is the progress I have made so far.
<script>
// Generate random numbers between 1-100
var randNum1 = Math.floor(Math.random() * 100) + 1;
var randNum2 = Math.floor(Math.random() * 100) + 1;
// Select a random operator
var op = ["*", "+", "/", "-"][Math.floor(Math.random() * 4)];
// Create an array of math problems objects
var problemList = [{number1: randNum1, operator: op, number2: randNum2}];
var problems, i;
// Function to display math problems in a table
var displayProblems = function (problems) {
var str = "<table class=table>";
for (i = 0; i < problems.length; i++) {
str += "<tr>";
str += "<td>" + problems[i].number1 + " " + problems[i].operator + " " + problems[i].number2 + " " + "<input type='text' class='answer' id='answer_" + i + "' /></td>";
str += "</tr>";
}
str += "</table>";
document.getElementById("mathGrid").innerHTML = str;
};
window.onload =function () {
displayProblems(problemList);
};
</script>
I have spent hours trying to solve this problem but seem to be stuck. This assignment is challenging for me as it's only my second attempt at working with JavaScript. Any assistance or guidance would be highly appreciated.
To see an example of my work in action, you can visit this JS Fiddle link.