Click to See Complete Forum and Search --> : Please help! I'll pay you!


swede_guitarist
12-07-2002, 10:42 AM
Hello

I've got to write the following code, and I haven't got a clue where to start. It has to be given in on tuesday and I'm clueless. To you it is probably incredibly easy, but due to unforseen circumstances, I missed the 3 javascript lessons and haven't yet received the book I ordered, so I'm a complete novice.

Please could you help me? I promise if you do I'll put a fiver in the post or something. Thanks very much indeed, Paul.

Write an HTML page which creates a simple form. It
should have two textfields, one for the question and one for the student’s answer. b) Use Math.random to write a function called aNumber which produces an integer in the range 1 to 12.
c) Write a function called genQuestion which sets the question textfield to display a string such as “6
times 7” where 6 and 7 represent the numbers that have been randomly generated. Use two
GLOBAL variables, declared as follows, to hold the two numbers returned by the aNumber function.
<SCRIPT LANGUAGE = "JavaScript">
var x, y; // global variables declared outside any function definitions
A global variable is one declared outside a function definition, and is accessible from all functions in
the program. (Compare this with variables declared within a function, which are only accessible from
the function they are declared in).
d) Write a function called buttonPressed, which is invoked whenever the Check my Answer button is
pressed. This function should compare the number typed by the student with the correct product of the
two numbers (held as global variables). Use the window.alert method to create a pop-up box which
either states “Correct – well done!” or “Wrong – Please try again”. If the answer is correct, a new
question should be generated. Whether right or wrong the student’s answer textfield should be cleared.
2. The use of computers in education is often referred to as Computer Aided Learning (CAL). One problem
that develops in CAL environments is student fatigue. Varying the computer’s dialogue to hold the
student’s attention can eliminate this. Modify the program you wrote above, so that various comments are
printed for each correct answer and each incorrect answer as follows:
Responses to a correct answer:
Very good!
Excellent!
Correct - Nice work!
Correct – keep up the good work!
Responses to an incorrect answer:
No. Please try again.
Wrong. Try once more.
Incorrect – Don’t give up.
No – keep trying.
You should use random number generation to choose a number from 1 to 4 that will be used to select an
appropriate response to each answer.

MikeOS
12-07-2002, 06:20 PM
Firstly, I don't want payment (unless you have an attractive sister - lol). Ok, I used XHTML instead of HTML, but I'm sure you can modify these examples. I also haven't bothered much with layout, so I'm sure you can do that to, and I haven't bothered with browser detection. Anyway here's the first script that generates the set alert messages.


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" type="text/html; charset=iso-8859-1" />
<title>Questions</title>
<script language="JavaScript">
var x;
var y;
function aNumber()
{
x = Math.ceil(Math.random() * 12)
y = Math.ceil(Math.random() * 12)
genQuestion()
}

function genQuestion()
{
document.myform.question.value = x + " times " + y
}

function buttonPressed()
{
var realAnswer = x * y
var usersAnswer = parseInt(document.myform.answer.value)
if (isNaN(usersAnswer) || usersAnswer == "")
{
alert("You must enter a numeical value for your answer")
}
else if (usersAnswer != realAnswer)
{
alert("Wrong - Please try again")
}
else
{
alert("Correct - Well Done!")
}
document.myform.answer.value = ""
aNumber()
}
</script>
<noscript>
<p>your browser doesn't support Javascript, please blah blah blah</p>
</noscript>
</head>
<body onload="aNumber()">
<form name="myform">
Question: <input type="text" name="question" id="question" disabled="disabled" /><br />
Answer: <input type="text" name="answer" id="answer" maxlength="3" size="3" /><br />
<input type="button" name="usersanser" id="usersanswer" value="Check My Answer" onclick="buttonPressed()" />
</form>
</body>
</html>

So as you can see the x and y variables have been declared globally. The aNumber() function generates the random numbers and assigns them to those variables, and then calls the genQuestion() function. Note the aNumber() function is called once the page has loaded.

The genQuestion() function assigns the question to the question input box as a string as requested.

The buttonPressed() function begins by getting the correct answer and assigning it to the realAnswer variable. The users answer is assigned to the usersAnswers variable. Then all this is checked by the conditional statements and the appropriate path taken. I included some simple validation on the users answer here, just in case they didn't enter anything or entered a non numerical value.

Once that is done the answer input box is cleared and the aNumber() function is called again, so the whole process repeats.

Ok, here is the modified answer that allows for different wrong and right responses.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" type="text/html; charset=iso-8859-1" />
<title>Questions</title>
<script language="JavaScript">
var x;
var y;

var messageWrong = new Array()
messageWrong[1] = "No. Please try again."
messageWrong[2] = "Wrong. Try once more."
messageWrong[3] = "Incorrect - Don’t give up."
messageWrong[4] = "No - keep trying."

var messageRight = new Array()
messageRight[1] = "Very good!"
messageRight[2] = "Excellent!"
messageRight[3] = "Correct - Nice work!"
messageRight[4] = "Correct - keep up the good work!"

function aNumber()
{
x = Math.ceil(Math.random() * 12)
y = Math.ceil(Math.random() * 12)
genQuestion()
}

function genQuestion()
{
document.myform.question.value = x + " times " + y
}

function buttonPressed()
{
var realAnswer = x * y
var usersAnswer = parseInt(document.myform.answer.value)
var atRandom = Math.ceil(Math.random() * 4)
if (isNaN(usersAnswer) || usersAnswer == "")
{
alert("You must enter a numeical value for your answer")
}
else if (usersAnswer != realAnswer)
{
alert(messageWrong[atRandom])
}
else
{
alert(messageRight[atRandom])
}
document.myform.answer.value = ""
aNumber()
}
</script>
<noscript>
<p>your browser doesn't support Javascript, please blah blah blah</p>
</noscript>
</head>
<body onload="aNumber()">
<form name="myform">
Question: <input type="text" name="question" id="question" disabled="disabled" /><br />
Answer: <input type="text" name="answer" id="answer" maxlength="3" size="3" /><br />
<input type="button" name="usersanser" id="usersanswer" value="Check My Answer" onclick="buttonPressed()" />
</form>
</body>
</html>

I used two arrays to hold the different answers. I begun the array from 1 to keep things simple, this is perfectly valid but some people don't like it, they prefer it to start from zero, but I don't care.

The only changes are to the buttonPressed() function. It now generates a random number from 1 to 4 and holds it in the atRandom variable. This is used in the alert boxes with the appropriate array to display a random message.

Hope this helps, it probably isn't perfect and I have no doubt someone is going to moan about it, but again, I don't care. I'm going down the pub. Cya.

swede_guitarist
12-07-2002, 07:24 PM
Mate, you are an absolute star, I cannot thank you enough! If I had a sister I'd put you in touch! You've saved me!

One small thing, not wanting to be fussy, the code's brilliant...but how do I alter it slightly so that a new question is not generated until the previous one has been answered correctly. At present if the user enters and incorrect or invalid value, a new questions is generated.

Cheers mate, I really appreciate it

Thanks again

P

MikeOS
12-08-2002, 07:56 AM
To resolve this simply move the reference to the aNumber() function within the buttonPressed() function to within the else statement. So whereas the bottom of the buttonPressed() function currently looks like this:

else
{
alert("Correct - Well Done!")
}
aNumber()
document.myform.answer.value = ""
}

Move the aNumber() like so:

else
{
alert("Correct - Well Done!")
aNumber()
}

document.myform.answer.value = ""
}

So now a new question is only asked if they get the current one right.

swede_guitarist
12-10-2002, 05:09 AM
Cheers Dude, I cannot thank you enough!