Math Quiz-Let the user set the minimum value and maximum value of the random numbers


#1

Hey Guys, I’m creating a Math quiz, the instruction on how the math quiz is supposed to be like is in the link below, I’m having trouble with level 4 (Let the user set the minimum value and maximum value of the random numbers). I also have my program on the google docs. Please help me out as soon as possible.

Link for instruction


A cool game I made
#2

Suggest you move your code to a more public workspace that does not require users to log into their Google account. repl.it comes to mind.

// caching direct references to Math methods

const random = Math.random;
const floor = Math.floor;

var user, min, max;

// prompt for input

user = prompt("Enter space separated MIN and MAX values:");
user = user.split(' ');
min = +user[0]
max = +user[1]

There is not a lot to go on in the instructions such as expected range of random values. 1 to 10, 1 to 100, 1 to 1000, …? Your program will likely have arbitrary limits on these values.

In the above we could write it into a loop so that only a valid pair of values are returned. Some validation points…

  1. inputs must be parsable as numbers. +n will give NaN if n is not a number.
  2. inputs should be integers, but we can recast them if needs be.
  3. inputs should be in order from min to max, but we can swap them if needs be.
  4. inputs must be positive, and greater than zero (perhaps). It’s fudging the data but we could use Math.abs() to enforce this, then apply point 3, above.
  5. inputs must be within the arbitrary range.

The loop would continue to run while any of the above conditions is not met, and would break once inputs are determined to be valid. The above is merely a skeleton of basic logic, without validation.


#4

Hey, I really don’t get what you mean, here’s a link to my Program. Can you make the changes and sent it to me. I’m a visual learner so I need to see it. Thanks


#5

Wow! An awful lot going on here…

<button onclick="q1Check(number1, number2, document.getElementById('q1Input').value)  + q2Check(number3, number4, document.getElementById('q2Input').value) + q3Check(number5, number6, document.getElementById('q3Input').value) + q4Check(number7, number8, document.getElementById('q4Input').value) + q5Check(number9, number10, document.getElementById('q5Input').value)">Check Answer</button>

Your DOM script will be able to carry the load and reduce this to a simple callback. It should not be in the HTML document to this extent. That is totally obtrusive.

var number1 = Math.floor(Math.random() * 10) + 1; number2 = Math.floor(Math.random() * 10) + 1; 

You’re using functions, so use them how they are meant to be used. ONE function, many variable calls. Do you see the repetition in your code? The only change is the name of the variable. Put all that code inside a single function and use a control to step through the questions.

We would appear to be allowing the user to set the range within which they wish to test themselves. That removes point 5 from my above list.

Before we begin, the user is given this step to follow so we can isolate the operation to a single function and leave only two values in a global object.

const random = Math.random;
const floor = Math.floor;
const abs = Math.abs;
var user, min, max;

function range() {
  while (true) {
    var user = prompt("Enter space separated MIN and MAX values:").split(' ');
    if (user.length !== 2) { continue; }
    user[0] = abs(+user[0]);
    user[1] = abs(+user[1]);
    if (isNaN(user[0]) || isNaN(user[1])) { continue; }
    break;
  }
  var temp = user[0];
  if (user[1] < user[0]) {
    user[0] = user[1];
    user[1] = temp;
  }
  return user;
}
user = range();
min = user[0]
max = user[1]

This is all theoretical, mind. I wrote it right here and haven’t tested it yet. See what you get from it.

 > user = range();
<- > (2) [40, 100]
 > min = user[0]
<- 40
 > max = user[1]
<- 100
 > floor(random() * (max - min) + min)
<- 61
 > floor(random() * (max - min) + min)
<- 78

#6

I’m not sure where to put your function in my program?


#7

The code above is meant to run in the console, so wouldn’t be plugged into yours. However, we can adapt it to your document so it behaves as expected.

Make this the first row of your table…

<tr>
  <td> 
    <p>MIN:MAX</p>
  </td> 
  <td> 
    <input type="text" id="lower-limit" size="5">
  </td> 
  <td> 
    <input type="text" id="upper-limit" size="5"> 
  </td> 
</tr> 

I’ve commented out original code that I did not wish to overwrite, but which was substituted.

const random = Math.random;
const floor = Math.floor;
const abs = Math.abs;
var min, max, temp;
const min_field = document.querySelector('#lower-limit');
const max_field = document.querySelector('#upper-limit');
min = abs(+min_field.value);
max = abs(+max_field.value);
temp = min;
if (max < min) {
  min = max;
  max = temp;
}
const get_term = () => floor(random() * ((max || 10) - (min || 1)) + min || 1)
var number1 = get_term(); 
var number2 = get_term(); 
//var number1 = Math.floor(Math.random() * 10) + 1; 
//number2 = Math.floor(Math.random() * 10) + 1; 
document.getElementById("q1").innerHTML = number1 + " +  " + number2 + " = "; 
function q1Check(n1, n2, a1) {
 if (n1 + n2 == a1) {
  document.getElementById('c1').innerHTML = "<span style=' background-color: #7FFF00;'>Correct</span>"
 } else {
  document.getElementById('c1').innerHTML = "<span style=' background-color: red; color:white;'>Not Correct</span>"	
 }	
} 

We’re pointing in a different direction, now, away from the duplication in the remainder of the code, which is still functional in my working version. The next objective will be to cycle through the input fields and filter them through the above code. That will become our earlier alluded, callback. Everything below this point will be eventually removed.


#8

We’re at a point now where we don’t know if you are making any progress with this problem and must assume you are, as have we.

addition_quiz.html
<!DOCTYPE html> 
<html lang="en"> 
<head>
<meta charset="UTF-8">
<title>Addition Quiz</title> 
<style>
body { font-size: 100%; }
h1 { font-size: 1.2rem; }
p { margin: 0; }
.correct { background-color: #7FFF00; }
.incorrect { color: white; background-color: red; }
.s { display: none; }
</style>
</head> 
<body> 
  <h1>Addition Quiz</h1> 
<table> 
  <caption>Give a solution to each expression</caption>
  <colgroup>
    <col width="75"> 
    <col width="75"> 
    <col width="100"> 
  </colgroup>
  <thead><tr>
    <td><p>MIN:MAX</p></td>
    <td><input id="lower-limit" size="5"></td> 
    <td><input id="upper-limit" size="5"></td> 
  </tr></thead>
  <tbody>
  <tr> 
    <td><p class="q"></p></td> 
    <td>
      <input class="r" size="5">
      <input class="s" size="5">
    </td> 
    <td><p class="t"></p></td> 
  </tr> 
  <tr> 
    <td><p class="q"></p></td> 
    <td>
      <input class="r" size="5">
      <input class="s" size="5">
    </td> 
    <td><p class="t"></p></td> 
  </tr> 
  <tr> 
    <td><p class="q"></p></td> 
    <td> 
      <input class="r" size="5">
      <input class="s" size="5">
    </td> 
    <td><p class="t"></p></td> 
  </tr> 
  <tr> 
    <td><p class="q"></p></td> 
    <td>
      <input class="r" size="5">
      <input class="s" size="5">
    </td> 
    <td><p class="t"></p></td> 
  </tr> 
  <tr> 
    <td><p class="q"></p></td> 
    <td>
      <input class="r" size="5">
      <input class="s" size="5">
    </td> 
    <td><p class="t"></p></td> 
  </tr> 
  </tbody>
</table> 
<button id="u">Check Answer</button>
<button id="v">Reload page</button>
<script>
const random = Math.random, floor = Math.floor, abs = Math.abs;
const min_field = document.querySelector('#lower-limit');
const max_field = document.querySelector('#upper-limit');
const questions = document.querySelectorAll('.q');
const responses = document.querySelectorAll('.r');
const solutions = document.querySelectorAll('.s');
const corrected = document.querySelectorAll('.t');
const checkresp = document.querySelector('#u');
const locreload = document.querySelector('#v');
const check_responses = () => {
  responses.forEach((x, i) => {
    if (x.value === solutions[i].value) {
      corrected[i].innerHTML = '<span class="correct">Correct</span>'
    } else {
      corrected[i].innerHTML = '<span class="incorrect">Not Correct</span>'
    }
  });
};
const main = () => {
  const get_term = () => floor(random() * (max + 1 - min) + min); 
  var min, max, addend_a, addend_b; 
  responses.forEach(x => {
    x.value = '';
  });
  if (+min_field.value) {
    min = abs(+min_field.value);
  } else {
    min = 1;
    min_field.value = min;
  }
  if (+max_field.value) {
    max = abs(+max_field.value);
  } else {
    max = 10;
    max_field.value = max;
  }
  if (max < min) {
    let temp = min;
    min = max;
    max = temp;
  }
  questions.forEach((x, i) => {
    addend_a = get_term();
    addend_b = get_term();
    x.textContent = `${addend_a} + ${addend_b} =`;
    solutions[i].value = addend_a + addend_b;
  });
};
const restart = () => location.reload();
checkresp.onclick = check_responses;
locreload.onclick = restart;
window.onload = main;
</script>
</body>
</html>
Realtime screenshot

additionn_quiz

Remember I did say that I had a proof of concept working within your code? This is the extrapolation of that. We’re working with a single code base on the entire data spectrum. All with a single callback.

Addition Quiz Framework

I didn’t promise not to throw out the baby with the bathwater, which it would seem I have done, on the face of it. But, we got rid of all the id attributes in the HTML and have a robust cache of DOM tree nodes, all with just a few lines of code. Much preferred to the spaghetti variety.


#9

Okay, we went off in another direction. It wasn’t to belittle your code model. Far from it. We used your code model but made it a simple reusable function so how ever many questions there are won’t matter. They all filter through this function.

I was frank from the beginning that a simple solution was my goal to solve your problem.

I’m not really keen on the page reload scheme, though. We have so many items cached that have no need of refreshing. They give us an environment that should be explored. Sometimes all we need to do is update page elements.


#10

Thank you so much, this helped me out alot