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

[faez]

could you advise how I can place the content of the alert, show below, into a text or label box on my html page i.e. the form, please?

alert(question.guess + ' is not the right answer.\n\n' + question.first + ' ' + question.operator + ' ' + question.second + ' is ' + question.answer);

.............for example, is there a way that I could write

form.elements.CorrectAnswer.text = question.guess + ' is not the right answer.\n\n' + question.first + ' ' + question.operator + ' ' + question.second + ' is ' + question.answer

[paul_wilkins]

could you advise how I can place the content of the alert, show below, into a text or label box on my html page

It's not possible to have multiple lines within a text or label box.

You can though use a div element to contain some content, for example:

<div class="correctAnswer"></div>

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

[faez]

THANK YOU!

As a general question, is it also possible to display the content of a variable such as the var 'correctAnswer' outside of a form opening <form> and closing </form> tag, in HTML document?

for example, can we display the content of a variable in a div tag, that does not belong to a form tag.



As a second question, I have often seen experienced programmers, like yourself, using the <span> tag. however, I don't fully understand the correct use of the tag. hence, I would greatly appreciate it if you could comment on use of the <span> tag, please.

[paul_wilkins]

As a general question, is it also possible to display the content of a variable such as the var 'correctAnswer' outside of a form opening <form> and closing </form> tag, in HTML document?

for example, can we display the content of a variable in a div tag, that does not belong to a form tag.

Yes we can, with document.getElementById('identifier')

As a second question, I have often seen experienced programmers, like yourself, using the <span> tag. however, I don't fully understand the correct use of the tag. hence, I would greatly appreciate it if you could comment on use of the <span> tag, please.

A span tag is an inline version of the div tag, and that's about the only difference between the two. Neither of them have a context that applies to them, as for example occurs with other tags such as the p tag, or the ul tag.

When it's not suitable to edit the entire contents of an element, as we have been doing with the div tag, that's where you can use a span tag instead to provide an inline section to be edited instead.

[faez]

Thank you for your detailed and clear explanation.

[faez]

for this game, I would like to allow players to change question numbers at run time. for example, by using a drop down list for players to select or a text box for players to type in their number of questions.

could you please advise me, how I should approach this code please?

[faez]

for this game, I would like to allow players to change question numbers at run time. for example, by using a drop down list for players to select or a text box for players to type in their number of questions.

could you please advise me, how I should approach this code please?

[paul_wilkins]

could you please advise me, how I should approach this code please?

Do you see in the code how there is a value for the number of questions?

[paul_wilkins]

could you please advise me, how I should approach this code please?

Do you see in the code how there is a value for the number of questions?

this.totalQuestions = 10;

[faez]

yes, using the following code I can changed the number of questions.

this.totalQuestions = 30;

but i dont know how to change this at run time - upon player selection/request?

[faez]

is there a way that i could overwrite the total question number, at run time? for example, replace 10 with 20 questions?

[paul_wilkins]

is there a way that i could overwrite the total question number, at run time? for example, replace 10 with 20 questions?

Do you recall how we did a similar thing with the init function, by passing it a config parameter?

[faez]

yes, I have studied your previous posts and suggested codes, thank you!.

so far I can ask the player, at run time, to enter their required question number:

<html>
<head>

<script type="text/javascript">

function prompter()
{
var reply = prompt("How many questions would you like to, play?", "");

alert("You game will now have " + reply + " questions!");



}

</script>
</head>
<body>

<div id="QuestionNumber">
<input type="button" onclick="prompter()" value="Total Questions">
</div>

</body>
</html>

howevere, I dont know how to make,

init: function (form)
{

this.totalQuestions = var reply;
}

else
alert ("Game number was not changed" + reply + " questions!");

function reloadPage()
{
window.location.reload()
}
}


could you advise please?

[paul_wilkins]

could you advise please?

Sure thing, can I see what you currently have for your page?

[faez]

here is my javascript code,

window.questions = {
history: [],

init: function (form, config) {
var prop;
this.minValue = 3;
this.maxValue = 97;
this.totalQuestions = 30;
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];

}
}
},



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;



var correctAnswer = form.querySelector('.correctAnswer');
correctAnswer.innerHTML = '<p>' + '<u>' + question.guess + '</u>'+ ' is NOT the right answer.</p>' +
'<p>' + question.first + ' ' + question.operator + ' ' + question.second + ' is ' + question.answer + '</p>';



// alert(question.guess + ' is not the right answer.\n\n' + question.first + ' ' + question.operator + ' ' + question.second + ' is ' + question.answer);

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


// this code is for the incorrect answer (becarefull) to show upon incorrect answer and removes the correct image and message

document.getElementById("incorrect").style.visibility = "visible";
document.getElementById("TryAgain").style.visibility = "visible";

form.elements.answer.style.backgroundColor="#F08080";

document.getElementById("correct").style.visibility = "hidden";
document.getElementById("WellDone").style.visibility = "hidden";


}


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


var correctAnswer = form.querySelector('.correctAnswer');
correctAnswer.innerHTML = '<p>' + '<u>' + question.guess + '</u>'+ ' is the RIGHT answer.</p>' ;

// this code is for the correct answer (welldone) to show upon correct answer and removes the incorrect image and message

form.elements.correctAnswer.style.display = '';
document.getElementById("correct").style.visibility = "visible";
document.getElementById("WellDone").style.visibility = "visible";

form.elements.answer.style.backgroundColor="#98FB98";

document.getElementById("incorrect").style.visibility = "hidden";
document.getElementById("TryAgain").style.visibility = "hidden";


}

},


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'));



function timeMsg()
{
var t=setTimeout("alertMsg()",60000);
}
function alertMsg()
{


var r=confirm("Game Over!");
if (r==true)
{
document.getElementById("Replay").style.visibility = "visible";}


else

{
window.location.href = window.location.href;


}

};


// this code is for the game over and it makes the reload button visible

var c=60;
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();
}
}

function stopCount()
{
clearTimeout(t);
timer_is_on=60;
}

[faez]

Could you advice me on my code please?

[paul_wilkins]

Could you advice me on my code please?

The way that you could do it is by passing a config object to the init method.

[faez]

would it be possible to demonstrate this with an example please? as i am new to the concept of config object via alert.

[paul_wilkins]

would it be possible to demonstrate this with an example please?

Sure thing, there are several examples given in post #18 of this thread.

Those pieces affect the minValue and maxValue parts of the questions object. The totalQuestions variauble is also a part of the questions object, that you can affect in the same way.

[faez]

Thank you.
I understand how to set the question numbers, max and min.
however, I would like the player to be able to change the pre-set number of questions online, which i am having difficulty with.

I dont know how to make (post #63),

init: function (form)
{

this.totalQuestions = var reply;
}

else
alert ("Game number was not changed" + reply + " questions!");

function reloadPage()
{
window.location.reload()
}
}

[paul_wilkins]

I would like the player to be able to change the pre-set number of questions online

You would do it by passing the totalQuestions to the init method as a part of the config object.

[faez]

is this the correct way?


window.questions = {
history: [],

init: function (form, config) {
var reply;

this.totalQuestions = var reply;

},

[paul_wilkins]

is this the correct way?

No, that's not the correct way. The correct way is by passing the totalQuestions to the init method as a part of the config object.

totalQuestions is a property of an object that is used to define the config. Before you can set the totalQuestions, you would want to get the number of questions that the person wants to use, right?

var numberOfQuestions = parseInt(window.prompt('...')), 10) || 10;

The parseInt(..., 10) converts the response to an integer using base 10 (decimal) so something like "09" is not mistaken for an Octal value.

The || 10 part occurs if parseInt doesn't result in a meaningful value. In that case, a default value of 10 will be assigned to numberOfQuestions.

You can then set the totalQuestions property of a config object, using that number of questions:

var config = {
    ...,
    totalQuestions: numberOfQuestions
}

And you can then init the questions object using that config info.

window.questions.init(..., config);

[faez]

THANK you for the explanations.

my html page, now have the following codes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mind Game</title>



<script type="text/javascript">

function prompter()
{
var reply = prompt("How many questions would you like to, play?", "");

alert("You game will now have " + reply + " questions!");

};
</script>

</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>

<script src="scriptTesting.js"></script>


<div id="QuestionNumber">
<input type="button" onclick="prompter()" value="Type your Question number">

<script type="text/javascript">
window.questions.init(var, config);
var config = {
var numberOfQuestions = parseInt(window.prompt('...')), 10) || 10;
totalQuestions: numberOfQuestions
};
</script>

</div>
</form>

</body>
</html>

however, at run time it does not change the question number.
could you kindly advise me how i can fix this please?

[faez]

as a second question - I have added an additional case to the 'operator type' called 'percent' and have change the operator type from 4 to 5:

get: function () {
var question = {},
operatorType = Math.floor(Math.random() * 5 );
do {
question.first = Math.floor(Math.random() * 12) + 1;
question.second = Math.floor(Math.random() * 12) + 1;
switch (operatorType) {
case 0:
question.operator = '+';
question.answer = question.first + question.second;
break;
case 1:
question.operator = '-';
question.answer = question.first - question.second;
break;
case 2:
question.operator = '*';
question.answer = question.first * question.second;
break;
case 3:
question.operator = '/';
question.answer = question.first / question.second ;
break;
case 4:
question.operator = 'percent';
question.answer = ((question.first / question.second) *100);
break;
default:
question.operator = '';
question.answer = '';
}

however, at run time, the percent or case 4 is not randomly selected (used in the question) - Could you kindly, indicate where I need to change?