create random arrays in javascript

Question

I have a form that asks the user for maximum result in math drills, in order to build some drills:

<input type="text" id="maxR" placeholder="type maximum result" />
<button id="activate" onclick="makeDrills()">MAKE</button>
<p id="drill"></p>

And I want to translate all the drills options with their answers as arrays.

I need help with translating this sentence into java-script:

"While c > level add new array of theQ with the both the drill and it's result".

This is my attempts:

<script>
  function theQ(quest, ans) {  // drills constructor
    this.question = quest;
    this.answer = ans;
  }

  var a, b, c ; // arguments
  var quests = [new theQ()]; // arrays holder
  var level = document.getElementById("maxR").value; // user input

  function makeDrills() { // button pushed
    var c = a+b; // pattern of each drill
    while (c > level) { // as long result smaller then user input
      var a = Math.floor(Math.random() * 10);  // choose random number
      var b = Math.floor(Math.random() * 10); // choose another random number
      quests.push("a+b", "c");  // add the drill to the arrays holder
    }
    document.getElementById("drill").innerHTML += quests; // print drills
  }
</script>

I read similar questions and try to use their techniques but didn't succeed.

edited: This code is for educational purpose:

a,b,c are arguments on a+b=c equation. I try to make math drills generator that the kid enter maximum result and push the button and then all possible drills options will appear. I need to put all the options as arrays because I want to use the options as sort of a test.

So for now I just want to understand how to create those arrays.

Answer 1

There are several issues:

• When you create the quests array, you should not add one empty question to it. Just do quests = []

• You are calculating the sum with var c = a+b before you have the separate values of a and b. var c = a+b is not a pattern -- as you write in comments --; it actually performs the addition right there.

• level is a string (because that is what input values always are), so when you do a comparison like c > level, you are comparing with a string value, which will not have the desired outcome.

• Since your sum can never be greater than 18 (a and b are both smaller than 10), your code will run for ever if you enter a maximum value that is greater than 18. Moreover, it seems not reasonable to use this as a stop-condition. You could even get into a situation where the first sum already is greater than allowed, and you'll end up with no questions at all. Just define how many questions you want to produce, either by asking the user for that, or defining the number of times in the code (for example: 10 questions).

• You can make sure that your sum is within limits by looking how much remains after you have generated the first number. If your maximum is 10, and you generated a 6, then let your second number be a random number between 0 and 4. This way you always get valid numbers.

• "a+b" is not very useful as question, as the user does not know what a means. Instead make it dynamic and ask for a + ' + ' + b + ' = ', which will render like 6 + 3 =.

• Similarly "c" is a string, and not the result of the sum, it should be c, or why not just a+b, so you don't need the c variable.

• quests.push("a+b", "c"); is pushing two string values to the array, but you want to push a question object, so you need to use quests.push(new theQ(a + ' + ' + b + ' = ', a+b)).

• As quests is an array of objects, you should not expect that assigning that to an innerHTML property will render something useful. You should specify how the questions should be rendered. So you need to iterate over the questions, and then generate the piece of HTML you want for each question.

The code with all these corrections is below. It also has a button and code to verify the input of the answers.

function theQ(quest, ans) {  // drills constructor
    this.question = quest;
    this.answer = ans;
}

var quests = []; // array of questions

function makeDrills() { // button pushed
    var a, b; // We don't need c
    // Read the input only when button is pressed:
    var level = document.getElementById("maxR").value; // user input
    // Empty questions array
    quests = [];
    
    // Let's say we want to produce 10 questions
    while (quests.length < 10) { 
        // choose a random integer below the maximum
        a = Math.floor(Math.random() * level);  
        // choose a random integer such that sum is not greater than maximum
        b = Math.floor(Math.random() * (level-a+1));
        // Question is a dynamicly created string, answer is calculated here
        // You need to call theQ here:
        quests.push(new theQ(a + ' + ' + b + ' = ', a+b));
    }

    var container = document.getElementById("drill");
    // Set the HTML for all questions
    container.innerHTML = quests.map(function (quest, i) {
        // Add the question to the drill section, give the input element an ID 
        // that corresponds to the question number
        return quest.question + '<input placeholder="enter sum" id="answer' + i + '"><br>';
    }).join(''); // join all HTML pieces together into one string
}

function verify() {
    if (quests.length == 0) return; // Nothing to do
    // Count the number of wrong answers. Iterate over answers with reduce:
    var errorCount = quests.reduce(function (count, quest, i) {
        // Add 1 penalty if answer is incorrect
        return count + (quest.answer != document.getElementById('answer' + i).value);
    }, 0); // Atart counting from 0
    if (errorCount == 0) 
        alert('Congratulations! You answered all questions correctly.');
    else
        alert('You have entered ' + errorCount + ' wrong answer(s). Try to correct them.');
}

<input type="text" id="maxR" placeholder="type maximum sum" />
<button id="activate" onclick="makeDrills()">Generate questions</button>
<div id="drill"></div>
<button id="verify" onclick="verify()">Verify</button>

Answer 2

Your code is kinda messy. didn't fully understand the purpose of the task, but first of all organize your code better. should look something like that:

function makeDrills() { // button pushed
  var quests = []; // arrays holder
  var level = document.getElementById("maxR").value; // user input
  var a = Math.floor(Math.random() * 10);  // choose random number
  var b = Math.floor(Math.random() * 10); 
  var c = a+b; // pattern of each drill

  while (c < level) { // as long result smaller then user input
    quests.push([a+"+"+b, c]);  // add the drill to the arrays holder
    a = Math.floor(Math.random() * 10);  // choose random number
    b = Math.floor(Math.random() * 10); // choose another random number
    c = a + b
  }
  document.getElementById("drill").innerHTML = quests; // print drills
}