Yes, that seems about right.
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?
thank you -
unfortunately, my code is not working - I will start from the beginning and try to correct my mistakes
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:
form.elements.correctAnswer.style.display = '';
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.
’ + 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 = ’ ';
Great!
is working now, thank you!
to make an image visible i am using the following code
if (Number(question.guess) == answer) {
question.result = true;
document.getElementById(“CorrectTick.jpg”).style.visibility = “true”;
}
but this code is not working, can you advice me how i can correct this please?
There doesn’t seem to be enough information to help you with that. A test page that demonstrates the problem would help.
in my html document i have added the following image
<div id=“correct”><img src=“correct.jpg” width=“92” height=“88” style= “visibility:hidden”/></div>
and in the javascript
i added
if (Number(question.guess) == answer) {
question.result = true;
document.getElementById(“CorrectTick.jpg”).style.visibility = “true”;
}
i want the image named ‘correctTick’ to be displayed for every correct answer on the html file. at the moment when the correct answer is entered, this image does not display.
I think that you should move the visibility style to the div instead, and work with that instead of the image
i tried with the div but i didnt know the correct way to write it the javascript
<div id=“correct” style= “visibility:hidden”><img src=“correct.jpg” width=“92” height=“88” /></div>
document.getElementById(“correct”).style.visibility = “visible”;
also tried
document.getElementById(“correct”).style.visibility = “true”;
It seems that ‘visible’ is the correct way.
Thank You!
I also want to add countdown time on my game, upon the first answer typed in the answer textbox and stop when the summary displayed is printed/displayed.
hence to build this i have added the following code:
<input type=“text” id=“clock” size=“5” readonly=“readonly” />
<script type=“text/javascript”>
var int=self.setInterval(“clock()”,1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById(“clock”).value=t;
}
</script>
with this i can display the current time but i need to learn how to start and stop the clock - for example to give each player 30 seconds for completing 10 questions.
could you advise how i could approach this event please?
On the element that shows the time, you can set a property on it to keep track of specific information, such as the time.
In this case it could be the intended end time (30 seconds from the start) that you store as a property on the element, so that you just need to work out the difference between now and that end time.
using the following code, i can make the game to stop at
<script type=“text/javascript”>
function timeMsg()
{
var t=setTimeout(“alertMsg()”,30000);
}
function alertMsg()
{
alert(“Game over!”);
}
</script>
but i also like to display the timer to be displayed on the page for the player. could you advise how i can display the time as a clock on the page please?
Sure thing, use the advice from my previous post, so that you can trigger an update every second (or even sooner) to recalculate the remaining time.
Ok -
using the following codes i can display timer, starting from 0 upwards and has set the game to end after 60 seconds.
<head>
[COLOR=“#808080”]<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()
{
timer_is_on=0;
timedCount();
}
</script>
</head>[/COLOR]
<input name=“answer” autocomplete=“off” onfocus=“doTimer()”>
<input type=“submit” name=“submit” value=“answer” onclick=“timeMsg()” >
<script type=“text/javascript”>
function timeMsg()
{
var t=setTimeout(“alertMsg()”,60000);
}
function alertMsg()
{
alert(“Game over!”);
}
</script>
but i don’t know how to reverse the time, for example, set variable c =30; and value c = c-1;
could you comment on the correct structure please?
Store the intended end time (30 seconds from now) as a property on the display element, which allows your timer to easily access that info so that you can work out the difference between now and that end time.
by display element, do you mean?
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=30000;
timedCount();
}
}
could you please explain more - as i don’t fully understand the terms used in javascript.
By “display element” I mean the HTML element that shows the time, that currently being the div with an id of “txt”
HTML elements are just objects, which like other JavaScript objects use properties to store information on them.
For example:
var counter = document.getElementById('txt');
counter.endTime = new Date().valueOf() + 30 * 60 * 1000; // 30 seconds from now
...
var counter = document.getElementById('txt');
if (new Date() > counter.endTime) {
// it's all over
}
or
var counter = document.getElementById('txt'),
d = new Date();
counter.endTime = d.setSeconds(d.getSeconds() + 30); // 30 seconds from now
...
var counter = document.getElementById('txt');
if (new Date() > counter.endTime) {
// it's all over
}