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?
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?
Sure thing, can I see what you currently have for your page?
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.\
’ + 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;
}
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.
would it be possible to demonstrate this with an example please? as i am new to the concept of config object via alert.
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.
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()
}
}
You would do it by passing the totalQuestions to the init method as a part of the config object.
is this the correct way?
window.questions = {
history: ,
init: function (form, config) {
var reply;
this.totalQuestions = var reply;
},
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);
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?
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?
It seems that nothing there needs to be changed.
Math.floor(Math.random() * 5) results in a random value that ranges from 0 to 4.
Thank you!!!
Could you also advice what is the mathematical equation for power? is there a special character for calculating power of an integer in JavaScript?
I am sorry for asking many questions, I have decided to build this game for my young brother, and I am excited to make this game fun, educational and relaxing.
Great, THANK YOU!
I am still not able to make the var numberOfQuestions to work - as at run time it does not change the question number[/quote]
Okay, so let’s simplify that numberOfQuestions part to help you understand what is happening there.
var numberOfQuestions = parseInt(window.prompt('...')), 10) || 10;
Breaking it apart in to its constituent pieces, we have:
var response = window.prompt('...'); // ask for the number of questions
var numberOfQuestions = parseInt(response, 10); // convert to a decimal integer
if (!numberOfQuestions) { // if it cannot be turned in to a decimal integer
numberOfQuestions = 10; // use a default value instead
}