how can I make a simple mind game, that includes addition, multiplications...

**faez** · Mar 25, 2012 12:24

hello,

I would like to create a simple mind game, that includes addition, multiplications, times and divisions.
in this game i like users to answer questions by direct input and at the end of the game, have an update of their performance.
In this game i also like to alert users of wrong answers and display play time and speed.

could you please advise me how i can code this. i am new to making games and is excited to learn how to build games.

**Elementax** · Mar 25, 2012 21:01

I don't know a whole lot when it comes to game production, but I am thinking you would be better off making this using something other than jQuery, my guess would be Flash maybe? I'm sure it can be done in java, etc, and it has been, but from seeing games in the past, Flash seems to be the most effective.

**Jason__C** · Mar 26, 2012 00:41

One option would be to go the Desktop Platform. Such as Java (already mentioned), or you can go the .NET (Windows Forms) route to make your game. It would be much easier for it not to be a web application, if that is possible.

**paul_wilkins** · Mar 26, 2012 05:58

Originally Posted by faez

hello,

I would like to create a simple mind game, that includes addition, multiplications, times and divisions.
in this game i like users to answer questions by direct input and at the end of the game, have an update of their performance.
In this game i also like to alert users of wrong answers and display play time and speed.

could you please advise me how i can code this. i am new to making games and is excited to learn how to build games.

Here's how I might code something like this:

Code:

Question: 10 / 10

What is 8 minus 3?

[5             ] [Answer]

You got 8 questions right.
You played for 28 seconds, and took an average of 2.8 seconds to answer each question.

HTML Code:

<html>
<head>
</head>
<body>
<form id="game">
    <p>Question: <span id="questionnumber"></p>
    <p>What is <span id="first"></span> <span id="operator"></span> <span id="second"></span>?</p>
    <p><input name="answer" autocomplete="off"></label> <input type="submit" name="submit" value="answer"></p>
</form>
<script src="script.js"></script>
</body>
</html>

Code javascript:

window.questions = {
    history: [],
    init: function (form) {
        this.minValue = 1;
        this.maxValue = 20;
        this.totalQuestions = 10;
        this.startTime = new Date();
        form.questions = this;
        form.onsubmit = this.ask;
        form.questions.show(form);
    },
    get: function () {
        var question = {},
            operatorType = Math.floor(Math.random() * 4);
        do {
            question.first = Math.floor(Math.random() * 12) + 1;
            question.second = Math.floor(Math.random() * 12) + 1;
            switch (operatorType) {
            case 0:
                question.operator = 'plus';
                question.answer = question.first + question.second;
                break;
            case 1:
                question.operator = 'minus';
                question.answer = question.first - question.second;
                break;
            case 2:
                question.operator = 'times';
                question.answer = question.first * question.second;
                break;
            case 3:
                question.operator = 'divided by';
                question.answer = (question.first / question.second * 100) / 100;
                break;
            default:
                question.operator = '';
                question.answer = '';
            }
        } while (!this.valid(question));
        return question;
    },
    valid: function (question) {
        var isValid = (question.answer === Math.floor(question.answer)
            && question.answer >= this.minValue
            && question.answer <= this.maxValue);
        if (isValid && question.operator === 'divided by') {
            isValid === (question.first > 1 && question.second > 1);
        }
        return isValid;
    },
    ask: function (evt) {
        var form = this,
            that = form.questions;
        if (!form.elements.answer.value) {
            return false;
        }
        that.answer(form);
        if (that.history.length < that.totalQuestions) {
            that.show(form);
        } else {
            that.endTime = new Date();
            that.summary();
        }
        return false;
    },
    show: function (form) {
        var question = this.get();
        this.history.push(question);
        document.getElementById('questionnumber').innerHTML = this.history.length + ' / ' + this.totalQuestions;
        document.getElementById('first').innerHTML = question.first;
        document.getElementById('operator').innerHTML = question.operator;
        document.getElementById('second').innerHTML = question.second;
        form.elements.answer.value = '';
        form.elements.answer.focus();
    },
    answer: function (form) {
        var question = this.history[this.history.length - 1],
            answer = question.answer;
        question.guess = form.elements.answer.value;
        question.result = true;
        if (Number(question.guess) !== answer) {
            question.result = false;
            alert(question.guess + ' is not the right answer.\n\n' + question.first + ' ' + question.operator + ' ' + question.second + ' is ' + question.answer);
        }
    },
    summary: function () {
        var i,
            correct = 0,
            playtime = Math.floor((this.endTime - this.startTime) / 1000),
            average = Math.floor(playtime / this.totalQuestions * 10) / 10,
            summary = document.createDocumentFragment();
        for (i = 0; i < this.history.length; i += 1) {
            correct += (this.history[i].result ? 1 : 0);
        }
        summary.appendChild(document.createTextNode('You got ' + correct + ' questions right.'));
        summary.appendChild(document.createElement('br'));
        summary.appendChild(document.createTextNode('You played for ' + playtime + ' seconds, and took an average of ' + average + ' seconds to answer each question.'));
        document.body.appendChild(summary);
    }
};
window.questions.init(document.getElementById('game'));

**faez** · Mar 26, 2012 15:04

Thank you very much!

could you please also advice how i can perform the following actions?

(1) after the user's summary, can i redirect or alert the user to start a new round without having to refresh the webpage?
(2) could i also allow the user to either re-start the same level or move to difficult level or to quit?
(3) also, for advanced level can i allow users to select their (a) type (times, plus, minus or divide), (b) number of questions and (3) time taken to complete it?

**paul_wilkins** · Mar 26, 2012 17:05

Originally Posted by faez

could you please also advice how i can perform the following actions?

You want me to create the code for you for doing that too?

**faez** · Mar 26, 2012 17:41

I am using this exercise (my main goal is) to develop a better understanding of javascripts, hence, if possible, could you please list the kind of tags that i should be using.

Many thanks,

**paul_wilkins** · Mar 26, 2012 18:26

Originally Posted by faez

could you please also advice how i can perform the following actions?

(1) after the user's summary, can i redirect or alert the user to start a new round without having to refresh the webpage?

Yes you can, by using a button that would clear the history and then init the game again.

Originally Posted by faez

(2) could i also allow the user to either re-start the same level or move to difficult level or to quit?

Yes you can, by adjusting minValue and maxValue, and making some level-based changes to the function called valid.

Originally Posted by faez

(3) also, for advanced level can i allow users to select their (a) type (times, plus, minus or divide), (b) number of questions and (3) time taken to complete it?

Yes you can. The type of operations is currently picked at random, but a small update would allow you to provide a list of allowed operations, from which one is picked, the totalQuestions variable stores the number of questions, and the start time is recorded, so you can use a setInterval event to compare the elapased time against a desired amount of time for completion.

**faez** · Apr 7, 2012 09:42

Just wanted to say THANK YOU for your very useful code and advise!

**faez** · Apr 7, 2012 14:27

I am trying to place two sets of form on the same page using different levels. but only the first set of form is working the other ones are not correctly linking, could you please advise what i need to change so that each form is linked to the correct javascript file?

<body>

<form id="game">
<p>Level 1</p>
<p>Question: <span id="questionnumber"></p>
<p>What is <span id="first"></span> <span id="operator"></span> <span id="second"></span>?</p>
<p><input name="answer" autocomplete="off"></label> <input type="submit" name="submit" value="answer"></p>
</form>
<script src="script.js"></script>

<div>
<form id="gameLevel2">
<p>Level 2</p>
<p>Question: <span id="questionnumber"></p>
<p>What is <span id="first"></span> <span id="operator"></span> <span id="second"></span>?</p>
<p><input name="answer" autocomplete="off"></label> <input type="submit" name="submit" value="answer"></p>
</form>
<script src="scriptLevel2.js"></script>
<div>

<div>
<form id="gameLevel3">
<p>Level 2</p>
<p>Question: <span id="questionnumber"></p>
<p>What is <span id="first"></span> <span id="operator"></span> <span id="second"></span>?</p>
<p><input name="answer" autocomplete="off"></label> <input type="submit" name="submit" value="answer"></p>
</form>

<script src="scriptLevel3.js"></script>
</div>

</body>

**RyanReese** · Apr 7, 2012 15:11

I'm not a Javascript pro (I'm actuallly learning more of it now as we speak via lessons), but I'd do like...if(document.getElementById("gameLevel1")){} and use elseifs

Inside the brackets, do whatever code you want. I think using case: could also work here? I think that's a more optimized version of it?

**paul_wilkins** · Apr 7, 2012 17:36

Originally Posted by faez

I am trying to place two sets of form on the same page using different levels. but only the first set of form is working the other ones are not correctly linking, could you please advise what i need to change so that each form is linked to the correct javascript file?

You should only need the one script, which can be customized for each form.

By changing the id attributes inside of the form to be class attributes instead, you can replace the document.getElementById lines inside of the show function to use form.querySelector instead.

That way when you init the game for each form, the script will be able to easily find the parts that it needs to interact with.

**faez** · Apr 8, 2012 00:10

thank you!
do i also need to convert the linked javascript codes to embedded, using the <style type:"text/javascript">...</style>?

at the moment my codes are changed to the following:

<form>
<p>Level 1</p>
<p>Question: <span class="questionnumber"></p>
<p>What is <span class="first"></span> <span class="operator"></span> <span class="second"></span>?</p>
<p><input name="answer" autocomplete="off"></label> <input type="submit" name="submit" value="answer"></p>
</form>
<script src="script.js"></script>

show: function (form) {
var question = this.get();
this.history.push(question);
document.queryselector ('questionnumber').innerHTML = this.history.length + ' / ' + this.totalQuestions;
document.queryselector('first').innerHTML = question.first;
document.queryselector('operator').innerHTML = question.operator;
document.queryselector
('second').innerHTML = question.second;
form.elements.answer.value = '';
form.elements.answer.focus();
},

**paul_wilkins** · Apr 8, 2012 00:16

Originally Posted by faez

at the moment my codes are changed to the following:

Don't remove the id attribute on the form tag itself. That's what is used to tell the script which form to use.
Query selectors also use the same syntax that is used with CSS selectors, such as '.first'

**faez** · Apr 8, 2012 00:37

OK - i now understand that i need to link questionnumber, first, operator and second to its appropeiate form, but don't understand how to repeat the entire jave code three times, in the same file, using different rules? and, how to find the correct way to separately identity them?

how can i identify the correct place to call the id, e.g. 'games? For example, i have tried putting the id ('games') in the following lines but i got syntax error.

... init: function (form.game)
... get: function (games)

<form id="game">
<p>Level 1</p>
<p>Question: <span class="questionnumber"></p>
<p>What is <span class="first"></span> <span class="operator"></span> <span class="second"></span>?</p>
<p><input name="answer" autocomplete="off"></label> <input type="submit" name="submit" value="answer"></p>
</form>
<script src="script.js"></script>

**faez** · Apr 8, 2012 01:10

in fact, i have the same problem when trying to link other javascripts to my html document, such as,

<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onClick="doTimer()">
<input type="text" id="txt">
</form>
</body>

**faez** · Apr 8, 2012 02:00

As a second question, could you please suggest a better way to display the following code?

if (Number(question.guess) == answer) {
question.result = true;
alert(' Well done!!! ' + question.guess + ' is the right answer.\n\n' );
}

with this code i can inform users of their correct answer - however, ideally it would be better to display this message as a label (read only message) on the html page, rather than forcing the user to click ok, for every correct answer.

**paul_wilkins** · Apr 8, 2012 04:33

Originally Posted by faez

OK - i now understand that i need to link questionnumber, first, operator and second to its appropeiate form, but don't understand how to repeat the entire jave code three times

Don't repeat yourself is a fundamental maxim of programming. When you're tempted to repeat yourself, you're most certainly doing things wrong.

Don't repeat the entire code three times!

In this case, you can supply a replacement for parts that require customisation:

Code:

init: function (form, config) {
    var prop;
    this.minValue = 1;
    this.maxValue = 20;
    this.totalQuestions = 20;
    this.startTime = new Date();
    form.questions = this;
    form.onsubmit = this.ask;
    form.questions.show(form);

    for (prop in config) {
        if (config.hasOwnProperty(prop)) {
            this[prop] = config[prop];
        }
    }
},

Now you can supply different values when using init to set things up.

Code javascript:

window.questions.init(document.getElementById('game2'), {
    minValue: 7,
    maxValue: 50
});

And yes, you can even supply replacements for function methods too, for example with the valid function:

Code javascript:

window.questions.init(document.getElementById('game2'), {
    minValue: 7,
    maxValue: 50,
    valid: function (question) {
        ...
    }
});

Originally Posted by faez

how can i identify the correct place to call the id

As in the above samples of code.

The script file has the code that doesn't change:

Code javascript:

window.questions = {
    ...
};

And elsewhere, commonly at the end of the page just before the </body> tag, you have the code that you want to customize:

Code javascript:

window.questions.init(document.getElementById('game2'), {
    minValue: 7,
    maxValue: 50
});

**paul_wilkins** · Apr 8, 2012 04:40

Originally Posted by faez

ideally it would be better to display this message as a label (read only message) on the html page, rather than forcing the user to click ok, for every correct answer.

Place a response section in the form, such as:

HTML Code:

<div class="response"></div>

Then use that response section when giving the message instead:

Code javascript:

form.querySelector('.response').innerHTML = '<p>question.guess + ' is not the right answer.</p><p>' + question.first + ' ' + question.operator + ' ' + question.second + ' is ' + question.answer) + '</p>';

And lastly, clear it when someone tries again:

Code:

ask: function (evt) {
    var form = this,
        that = form.questions;
    form.querySelector('.response').innerHTML = '';
    ...
}

**faez** · Apr 8, 2012 08:56

I am not able to make the form connect correctly. To my understanding, I need to perform the following steps;

Step 1 – replace document.getElementById With document.queryselector

Step 2 – inside the form, replace ids with class but keep the form id i.e., so that each the form can connect with its related script,

<form id="game">
<p>Question: <span class="questionnumber"></p>
<p>What is <span class="first"></span> <span class="operator"></span> <span class="second"></span>?</p>
<p><input name="answer" autocomplete="off"></label> <input type="submit" name="submit" value="answer"></p>
</form>

Step 3 - replace init: function (form) {…},
with init: function (form, config) {…},

step 4 – insert, window.questions.init(document.getElementById('gamelevel2'), {
minValue: 7,
maxValue: 50,
valid: function (question) {
...
}
});

At the bottom of script. Thus, I would also need to have a third

window.questions.init(document.getElementById('gamelevel3'), {
minValue: 13,
maxValue: 100,
valid: function (question) {
...
}
});

Is this correct – did I understand the code structure correctly, please advise?

**paul_wilkins** · Apr 8, 2012 14:46

Originally Posted by faez

Is this correct – did I understand the code structure correctly, please advise?

Yes, that seems about right.

**faez** · Apr 8, 2012 15:21

I have added the following lable to my form;

<form id="gamelevel1">
<p>Level 1</p>
<p>Question: <span class="questionnumber"></p>
<p>What is <span class="first"></span> <span class="operator"></span> <span class="second"></span>?</p>
<p>
<input name="correctAnswer" type="label" class="textfield" value="Well done!!!!!!!!!" style="display:none"/>
</p>
<p><input name="answer" autocomplete="off"> <input type="submit" name="submit" value="answer">
</p>
</form>
<script src="script.js"></script>

and then in the script added

if (Number(question.guess) == answer) {
question.result = true;

now i want the label.correctAnswer to be displayed i.e. style="display:inline"

could you advice how i can write this in java please?

**faez** · Apr 8, 2012 15:26

thank you -
unfortunately, my code is not working - I will start from the beginning and try to correct my mistakes

**paul_wilkins** · Apr 8, 2012 15:31

Originally Posted by faez

now i want the label.correctAnswer to be displayed i.e. style="display:inline"

could you advice how i can write this in java please?

It's a form element, so you can access it via its name attribute with form.elements.correctAnswer
Also, when dealing with the display attribute, it's better to set it to an empty string instead.

So you could use something like:

Code javascript:

form.elements.correctAnswer.style.display = '';

**faez** · Apr 8, 2012 15:37

when i load the page, and type in the correct answer, the form.elements.correctAnswer does not display - could you advice where i am going wrong please.

answer: function (form) {
var question = this.history[this.history.length - 1],
answer = question.answer;
question.guess = form.elements.answer.value;
question.result = true;
if (Number(question.guess) !== answer) {
question.result = false;
alert(question.guess + ' is not the right answer.\n\n' + question.first + ' ' + question.operator + ' ' + question.second + ' is ' + question.answer);

}

if (Number(question.guess) == answer) {
question.result = true;
form.elements.correctAnswer.style.display = 'inline';
}

},

i have also try with
form.elements.correctAnswer.style.display = ' ';

User Tag List

Thread: how can I make a simple mind game, that includes addition, multiplications...

Thread Tools

Display

how can I make a simple mind game, that includes addition, multiplications...

Bookmarks

Bookmarks

Posting Permissions