random fill

[techyworld]

Hello people, I need an idea with u. I need to draw a grid 10 by 10 and then randomnly fill it with numbers, operators + - and =. then user will need to swap number or operator or equal sign to make matches like this 2+3 = 5. It can be horizontal match or vertical matches. I need to do it in javascript. Can someone give me an idea how i can proceed? only idea not code. My point is i need to fill the grid randonmly and make sure that there is some matches in the grid in the wrong order like this : 2 3 + = 5. Then user will be able to swap the + to make a match.

[Taywin]

You need to decide whether the grid is pre-draw or not. If it is pre-draw (inside HTML), then you could use the element's ID to manipulate the value inside. For example, you draw your grid using table, so each cell (td) may be given an ID/name as row+"-"+column (i.e. row 1, column 5 would be "1-5"). Because you know the total row number (from 1 to 10), use that to iterate through the grid and obtain each value inside it (innerHTML). If you don't want to use innerHTML, you could add an input field inside each table cell instead and move the ID/name from the td to input tag instead.

The issue will be at assigning random numbers. Per your requirement, you will need to ensure that the equation can be balanced before those values are placed inside the grid. I don't know how long or how many numbers would be involved in this requirement. I am talking about each equation. I am guessing you have 10 equations (one per row), but then I don't understand why you need 10 on each line. The are going to be at most only 5 needed if you are going to display 2 + 3 = 5.

[techyworld]

the equation also will be random. it can contain 3 or more. minimum =3. The remaining will be filled with random numbers n operators.

[McLaren]

first create those equations randomly.
Lets say 1+2 = 3
2+3 = 5
3+3= 6

you have now all characters: [1+2=32+3=53+3=6]
so those are necesarry. Put them in the table at random places. And then fill in left places with random chars.

[Taywin]

As SPeed_FANat1c said, you need to create your equations randomly and must ensure that your equation is balanced. If you have a pre-drawn table (as I mentioned in my previous post), you then can process as follows...

1.For each row of the table, create a balancable equation. A simple way is to randomize operator & operands in order from left to right. You need at least 2 operands and 1 operator, and you can have up to 4 operands and 3 operators. You need to leave 2 slots for equal sign and the result. (This is why I said 10 slots per row is odd because you will never get an even number of slots filled.) An idea of a random equation function is below. The function does not compute the result of the equation because the caller should do it. This is just a suggestion but you do not need to use it at all. If you want each operand to be unique, you need to tweak it. You could implement your own in order to adapt to your own data structure.

/*****
 * Return an integer array size of 3 up to 7. All even indices (including 0)
 * are operands and all odd indices are operator. The operands are integer.
 * The operators are also integer (1 is addition and 0 is subtraction).
 */
function getRandomEquation() {
  // at least 2 and at most 4 operands
  var totalOperands = Math.floor(Math.random()*3)+2;
  // operator number is always one less than operand number
  // so array length is equal to totalOperands + (totalOperands-1)
  var result = new Array((2*totalOperands)-1);

  // iterate through the array to fill in
  for (var pos=0; pos<result.length; pos++) {
    if ((pos%2)==0) {  // even index, operand
      result[pos] = Math.floor(Math.random()*10)  // random value from 0 up to 9
    }
    else {  // odd index, operator
      result[pos] = Math.floor(Math.random()*2);  // either 0 or 1
    }
  }
  return result;  // done
}  // getRandomEquation

2.Once you get an equation (in this case is an array), compute the total and save it in a variable to be used later. You could go through the array and compute the result from left to right (index 0 up to the lenght of array-1). Also, just don't forget the operator in each odd index.
3.Randomly place each element of the array in the pre-drawn table slot. What you could do is to shuffle the elements in the given array. Now your elements are in random locations in itself. Therefore, you can place each element 1 by 1 into the table using a simple loop to go through from left to right.

/*****
 * Return a shuffle elements of a given array 1,000 times if the object is
 * an array.
 */
function shuffle(arr) {
  if (arr && (arr instanceof Array)) {
    var idx1, idx2, tmp;  // declare variables
    for (var i=0; i<1000; i++) {  // swap randomly for 1,000 times
      idx1 = Math.floor(Math.random()*arr.length);
      idx2 = Math.floor(Math.random()*arr.length);
      tmp = arr[idx1];
      arr[idx1] = arr[idx2];
      arr[idx2] = tmp;
    }
  }
  return arr;
}  // shuffle

3.Place an equal sign to the next slot in the table.
4.Place the result which is saved in a variable in #2 in the next slot in the table.

Hope this help.

[Taywin]

I just realized, after thinking about this requirement, that the application you are talking about (randomly place operands & operators) is not that useful at all if you use only addition & subtraction as operators. Why? Because both operands have the same precedence. As a result, the order can be anything as long as an operator is placed between 2 operands.

//i.e.
3 + 5 + 7 - 4 - 9 + 2 = 4
5 + 3 + 7 - 4 - 9 + 2 = 4
7 - 9 + 5 - 4 + 3 + 2 = 4

Therefore, it needs a different operator (i.e. multiplication) in order to make it more useful. You could enforce a rule that the computation is from left to right and there is no arithmatic precedence involved.

//i.e.
3 + 5 * 2 - 9 = 7   // => 8 * 2 - 9, => 16 - 9, => 7
3 * 2 - 9 + 5 = 2   // => 6 - 9 + 5 => -3 + 5 => 2

[techyworld]

@Taywin. Thanks for your ideas mate. Actually precedence is not a problem. See the grid below:

2 4 + = 6 4 0 1 - +
- + 3 5 0 1 = + 3 4
0 1 4 8 3 9 3 2 4 3
= 5 + + 3 1 3 0 9 1
9 = 5 6 8 7 2 4 - +

As you can see above, on the first row, you have 2 4 + = 6. we can swap 4 n + to obtain a match. (2 + 4 =6). Second column also we have 4 + 1 5 =, which can be swapped to 4 +1 =5.The grid above contain only 2 matches and the remaining is random.I want everything random such a way that I won't even know how many matches I will obtain.But it should contain at least 2 matches. So when we obtain a match, it will remove it from the grid and replace it by another numbers or operators (do not need to be a match, completely random).

[Taywin]

Oh I see. So it is similar to picking out operators & operands from the grid, and they will be taken away. So you don't need to ensure that there is any balance equations in the grid.

One question, do you have to concern about there should always at least one possible equation in the grid after some matches? Theoretically, there is a chance that there will be no match after you run it for a while. Though, the chance seems to be slim and may not be your major concern right now.

[techyworld]

yes it can happen. after some time there can be no matches in the grid.

[Taywin]

Just a suggestion for your random function. Let's talk about character types in the grid. There can be 3 types -- operand (0~9), operator (+, -), and equal symbol. You would want operand & operator to appear more than equal symbol, and you may give the equal chance between operand & operator. So the random chance, from a total of 100%, could be 40% for operand, 40% for operator, and 20% for equal symbol. A way to create probability in random is below.

var rand = Math.floor(Math.random()*10)  // result in 0~9
if (rand<4) {  // 0~3, operand
  return Math.floor(Math.random()*10);  // return one of 0~9
}
else if (rand<8) {  // 4~7, operator
  if (Math.floor(Math.random()*2 == 0) {  // either 0 or 1, but result in 0
    return "-";
  }
  else {  // it is either or for the random condition above, so if not that, it is this
    return "+";
  }
}
else {  // 8 or 9, equal symbol
  return "=";
}