Math game JQuery/JavaScript

Question

I'm trying to make a math game in JQuery/JavaScript.

I have managed to create a code that comes up with a random X+ X+ =? math question. You have to write an answer in the box and then the code checks if the answer is right or wrong.

I want to use the same method but not just +, but -, * and / as well. I tried to change this in the code but it didn't work. Maybe someone can help me?

Here is the code:

$(function() {
    getQuestion();
});

var count = 0,    
    results = [];
function getQuestion() {
    count++;
    var container = $('<div />');
    var val1 = Math.round(Math.random()*5);
    var val2 = Math.round(Math.random()*5);
    var lbl = $('<label />');
    lbl.html(val1 + ' + ' + val2 + ' = ');
    container.append(lbl);
    var input = $('<input type="text" />');
    container.append(input);
    var btn = $('<input type="button" value="SVARA" />');
    var val;
    btn.click(function() { 

        results.push({
            number1 : val1,
            number2 : val2,
            answer : input.val()
        });

        input.attr('disabled', true);
        $(this).attr('disabled', true);

        $(this).after(function() {
            if(val1 + val2 == input.val()) return 'RÄTT!';
            return 'FEL';
        });

        getQuestion(); 

    });
    container.append(btn);
    $('body').append(container);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Look at http://stackoverflow.com/questions/2276021/evaluating-a-string-as-a-mathematical-expression-in-javascript — Cheery, Oct 17 '14 at 21:51
You can have an attribute in `getQuestion(operation)`. Then based on that do either: `+`,`-`,`/`, or `*`. — Spencer Wieczorek, Oct 17 '14 at 21:53

score 2 · Answer 1 · answered Oct 17 '14 at 22:08

You can create an array of operators '+', '-', '*' and '/' and called it operators. Then you can generate a random number from 0 until operators.length - 1 and use as a random index. Finally you can use that random operator instead of + in your code.

Demo on Fiddle

$(function() {
    getQuestion();
});

var count = 0,
    results = [];
function getQuestion() {
    count++;
    var operators = ['+', '-', '/', '*']  // An array of Operators
    var container = $('<div />');
    var val1 = Math.round(Math.random()*5);
    var val2 = Math.round(Math.random()*5);
    var operator = operators[Math.round(Math.random()*(operators.length - 1))];  // Choose a random operator
    var lbl = $('<label />');
    lbl.html(val1 + ' ' + operator + ' ' + val2 + ' = ');
    container.append(lbl);
    var input = $('<input type="text" />');
    container.append(input);
    var btn = $('<input type="button" value="SVARA" />');
    var val;
    btn.click(function() { 

        results.push({
            number1 : val1,
            number2 : val2,
            answer : input.val()
        });

        input.attr('disabled', true);
        $(this).attr('disabled', true);

        $(this).after(function() {
            if(eval(val1 + operator + val2) == input.val()) return 'RÄTT!';
            return 'FEL';
        });

        getQuestion(); 

    });
    container.append(btn);
    $('body').append(container);
}

Thnaks a lot for the help guys! – user4155260 Oct 18 '14 at 12:20 — user4155260, Oct 18 '14 at 12:20

score 0 · Answer 2 · answered Oct 17 '14 at 22:06

$(function() {
    getQuestion();
});

var count = 0,    
    results = [],
    op = ['+', '-', '*', '/'],
    operation = function(v1,v2, o) {
      switch(o) {
          case '+': return v1 + v2; break;
          case '-': return v1 - v2; break;
          case '*': return v1 * v2; break;
          case '/': return v1 / v2; break;
      }
    };
function getQuestion() {
    count++;
    var container = $('<div />');
    var val1 = Math.round(Math.random()*5);
    var val2 = Math.round(Math.random()*5);
    var oper = Math.round(Math.random()*op.length) % 4;
    var lbl = $('<label />');
    lbl.html(val1 + ' ' + op[oper] + ' ' + val2 + ' = ');
    container.append(lbl);
    var input = $('<input type="text" />');
    container.append(input);
    var btn = $('<input type="button" value="SVARA" />');
    var val;
    btn.click(function() { 

        results.push({
            number1 : val1,
            number2 : val2,
            answer : input.val()
        });

        input.attr('disabled', true);
        $(this).attr('disabled', true);

        $(this).after(function() {
            if(operation(val1, val2, op[oper]) == input.val()) return 'RÄTT!';
            return 'FEL';
        });

        getQuestion(); 

    });
    container.append(btn);
    $('body').append(container);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Sure, no problem. Glad I could help. You might want to put a check to ensure you do not *divide by zero* .... how to make `4 / 3 = 1.3333333333` not give a `FEL` :) — PeterKA, Oct 18 '14 at 23:37

Math game JQuery/JavaScript

2 Answers2

Demo on Fiddle