Question

I have a school project where we are making a small JavaScript game without a UI; this means we can only use prompt, alert or other popup scripts.

The game should work, at least it did before i broke it apart with the module. It’s a simple math game where user gets random +, questions and has to answer them correctly

The problem(s)

I don’t seem to be able to get any prompts to the user. I’m also having trouble debugging this in chrome dev tools, can you see anything that seems wrong right away? Thankful for any help at all 🙂

Heres the JSfiddle

http://jsfiddle.net/vuTGa/1/

This is our code, I only posted the vital parts – I left out the index.html and Mathgame.js because they seem to work perfect and also they do not contain a lot of code.

MathGame.logic.js

mathGame.logic = (function() {
    "use strict";
    var createQuestion, getQuestion;
    createQuestion = function() {
        var tal1, tal2;
        tal1 = Math.ceil(Math.random() * 10);
        tal2 = Math.ceil(Math.random() * 10);
        return {
            tal1: tal1,
            tal2: tal2,
            result: function() {
                return tal1 + tal2;
            }
        };
    };
    getQuestion = function() {
        return createQuestion();
    };
    return {
        getQuestion: getQuestion
    };
}());

MathGame.play.js

mathGame.play = function() {
    "use strict";
    var question, guess, answer, correct, questionGuess;
    // Starts game for user
    mathGame.ui.startCountDown();
    // Starts the timer in .logic
    // mathGame.logic.startCountDown();
    // Get random math
    question = mathGame.logic.getQuestion();
    // Send random math to User
    questionGuess = mathGame.ui.askMathQuestion(question.tal1, question.tal2);
    // The users guess
    guess = mathGame.ui.returnMathGuess;
    // See if the question is the same as the guess
    correct = (question() === guess);
    // Show the user how it went
    mathGame.ui.showResult(correct, guess, question);



    ##Mathgame.ui.js##
    mathGame.ui = {

        startCountDown: function() {
            "use strict";
            // Visa ready set go
            alert("READY");
            alert("SET");
            alert("GO");
        },
        askMathQuestion: function() {
            "use strict";
            prompt("askMathQuestion");
            //shows a math question to user
            // return Number(prompt(value1 + symbol +  value2));
            // e.g. value1 = 12
            //      value2 = 13
            //        symbol = "+"
            // 12 + 13  
            // return user guess
        },
        returnMathGuess: function() {
            "use strict";
        },
        showResult: function() {
            "use strict";
        }
    };

Answer 1

Well, so far I’ve only been able to pinpoint minor problems in your code. Since you’re using strict mode, the window object’s properties are not accessible globally. So you’ll need to use window.alert or set a variable:

var alert = this.alert; // "this" being the global, window object

The first thing I noticed is that you didn’t have a closing bracket to your math.play function declaration. I fixed that. But what the real problem you were having was that you were referencing properties of mathGame before they were created. For example, in the definition of mathGame.play(), you ran the function mathGame.ui.startCountDown(); but mathGame.ui was defined in the function below the call. So I took it out the function so that it could have access to it. That was the general problem with your script.

There was also a part where you called an object as if it were a function:

correct = (question() === guess);

question was already defined as the return value of the function mathGame.logic.getQuestion(); which was a string. I think you were confusing it with this:

question = mathGame.logic.getQuestion;

correct = (question() === guess); // now this works

I also fixed up some things I found superfluous. If you want the entire script to be in strict mode, then create a closure over it in strict mode:

(function() {
    "using strict";
    // everything below is in strict mode
})();

Here is the entire code:

(function() {
    "using strict";
    var mathGame = {},
        alert = this.alert,
        prompt = this.prompt;

    mathGame.play = function() {
        var question, guess, answer, correct, questionGuess;
        // Starts game for user
        mathGame.ui.startCountDown();
        // Starts the timer in .logic
        // mathGame.logic.startCountDown();
        // Get random math
        mathGame.logic = (function() {
            var createQuestion, getQuestion;
            createQuestion = function() {
                var tal1, tal2;
                tal1 = Math.ceil(Math.random() * 10);
                tal2 = Math.ceil(Math.random() * 10);
                return {
                    tal1: tal1,
                    tal2: tal2,
                    result: function() {
                        return tal1 + tal2;
                    }
                };
            };
            getQuestion = function() {
                return createQuestion();
            };
            return {
                getQuestion: getQuestion
            };
        }());

        question = mathGame.logic.getQuestion();
        // Send random math to User
        questionGuess = mathGame.ui.askMathQuestion(question.tal1, question.tal2);
        // The users guess
        guess = mathGame.ui.returnMathGuess;
        // See if the question is the same as the guess
        correct = (question === guess);
        // Show the user how it went
        mathGame.ui.showResult(correct, guess, question);
    };

    mathGame.ui = {

        startCountDown: function() {
            // Visa ready set go
            alert("READY");
            alert("SET");
            alert("GO");
        },
        askMathQuestion: function() {
            prompt("askMathQuestion");
            //shows a math question to user
            // return Number(prompt(value1 + symbol +  value2));
            // e.g. value1 = 12
            //      value2 = 13
            //        symbol = "+"
            // 12 + 13  
            // return user guess
        },
        returnMathGuess: function() {},
        showResult: function() {}

    };
    mathGame.play();
}).call(this); // global object

JSFiddle Demo

Note that in the HTML section of the code, I took out some script files because they were non-existent in website. If you need them again, here they are:

<script src="mathGame.js"></script>
<script src="mathGame.logic.js"></script>
<script src="mathGame.ui.js"></script>
<script src="mathGame.play.js"></script>