pop-up hint button

**McKirahan** · Jul 23 '05, 04:30 PM

Re: pop-up hint button

"piperzen" <piperzen@gmail .com> wrote in message
news:1105385596 .210349.143090@ f14g2000cwb.goo glegroups.com.. .[color=blue]
> Hi,
>
> I'm developing a set of language learning exercises for
> http://www.yale.edu/swahili , and we've run into a javascript question
> that the programmer doesn't know how to tackle (we mostly work in php,
> etc.). This is for an educational project that is available to the
> public for free, so I'm hoping someone might be able to volunteer a
> little time to help us sort this out.
>
> What we want to do is this:
> When a student is supposed to input an answer, but they are stuck, we
> want to give them a hint. Suppose the answer is "tomorrow". When they
> click on the HINT button the first time, a balloon would pop up for 1
> second with the letter "t" inside. When they click on the HINT button
> the second time, the balloon would show "to". Every time they clicked
> on HINT, one more letter would be added to the clue in the balloon.
>
> (Instead of having the balloon disappear after 1 second, the other
> option would be for the balloon to stay in place for as long as the
> mouse hovered over the HINT button.)
>
> This seems like something that shouldn't be too hard to program - if
> you can bang out the code, we'll be sure to give you credit for it!
> Many thanks,
> Martin
>[/color]

Here's a couple of ideas. Watch for word-wrap.

The first puts the hint on the status bar.

The second uses the button's "title" to show the hint "onmouseove r".

Let me know what does and doesn't work for you and well refine it.

<html>
<head>
<title>hints.ht m</title>
<script type="text/javascript">
var hints = new Array();
hints[0] = "";
hints[1] = "tomorrow";
hints[2] = "yesterday" ;
var hintz = new Array(0,0,0);
function hint(i) {
var what = hints[i].substr(0,hintz[i]);
document.getEle mentById("hint" +i).title = what;
window.status = what;
if (hintz[i] < hints[i].length) hintz[i]++;
}
</script>
</head>
<body>
<form>
1. What is the day after today called?
<input type="text" name="answer1">
<input type="button" name="hint1" value="Hint" onclick="hint(1 )" title="">
<br>
2. What is the day before today called?
<input type="text" name="answer2">
<input type="button" name="hint2" value="Hint" onmouseover="hi nt(2)"
title="">
</form>
</body>
</html>

**McKirahan** · Jul 23 '05, 04:30 PM

Re: pop-up hint button

"McKirahan" <News@McKirahan .com> wrote in message
news:lMKdnbBpz9 0mbH_cRVn-3A@comcast.com. ..

Here's another variation (Q3) that inserts the hint (letter-by-letter)
directly into the text box.

<html>
<head>
<title>hints.ht m</title>
<script type="text/javascript">
var hints = new Array();
hints[0] = "";
hints[1] = "tomorrow";
hints[2] = "yesterday" ;
hints[3] = "today";
var hintz = new Array(0,0,0,0);
function hint(i) {
if (hintz[i] < hints[i].length) hintz[i]++;
var what = hints[i].substr(0,hintz[i]);
if (i==1) window.status = what;
if (i==2) document.getEle mentById("hint" +i).title = what;
if (i==3) document.getEle mentById("answe r"+i).value = what;
}
function resets() {
for (var i=0; i<hintz.length ; i++) {
hintz[i] = 0;
}
}
</script>
</head>
<body>
<form>
Q1. What is the day after today called?
<input type="text" name="answer1">
<input type="button" name="hint1" value="Hint" onclick="hint(1 )"
title="Click to view a hint in the status bar.">
<br>
Q2. What is the day before today called?
<input type="text" name="answer2">
<input type="button" name="hint2" value="Hint" onmouseover="hi nt(2)"
title="">
<br>
Q3. What is the day before tomorrow and after yesterday called?
<input type="text" name="answer3" id="answer3">
<input type="button" name="hint3" value="Hint" onclick="hint(3 )"
title="Click to view a letter-by-letter hint.">
<br>
<input type="reset" onclick="resets ()">
</form>
</body>
</html>

**RobG** · Jul 23 '05, 04:30 PM

Re: pop-up hint button

McKirahan wrote:[color=blue]
> "McKirahan" <News@McKirahan .com> wrote in message
> news:lMKdnbBpz9 0mbH_cRVn-3A@comcast.com. ..
>
> Here's another variation (Q3) that inserts the hint (letter-by-letter)
> directly into the text box.[/color]

That is a much better idea. Modifying the document title using
JavaScript does not necessarily modify the text displayed in the
browser's window title (to my limited knowledge, there is no public
specification that says the window title has to display the document
title at all).

Modifying the status bar text may also not work depending on the user's
browser settings.

Your posted code brings the following error in Firefox:

document.getEle mentById("hint" +i) has no properties

--
Rob

**McKirahan** · Jul 23 '05, 04:30 PM

Re: pop-up hint button

"RobG" <rgqld@iinet.ne t.auau> wrote in message
news:S0FEd.85$U d4.8693@news.op tus.net.au...[color=blue]
> McKirahan wrote:[color=green]
> > "McKirahan" <News@McKirahan .com> wrote in message
> > news:lMKdnbBpz9 0mbH_cRVn-3A@comcast.com. ..
> >
> > Here's another variation (Q3) that inserts the hint (letter-by-letter)
> > directly into the text box.[/color]
>
> That is a much better idea. Modifying the document title using
> JavaScript does not necessarily modify the text displayed in the
> browser's window title (to my limited knowledge, there is no public
> specification that says the window title has to display the document
> title at all).
>
> Modifying the status bar text may also not work depending on the user's
> browser settings.
>
> Your posted code brings the following error in Firefox:
>
> document.getEle mentById("hint" +i) has no properties
>
> --
> Rob[/color]

I didn't get any errors using FF 1.0 but, on the other hand, only Q3 worked.

None of the buttons changed the document title though.

Thus, perhaps this might work best.

<html>
<head>
<title>hints.ht ml</title>
<script type="text/javascript">
var hints = new Array();
hints[0] = "";
hints[1] = "tomorrow";
hints[2] = "yesterday" ;
hints[3] = "today";
var hintz = new Array(0,0,0,0);
function hint(i) {
if (hintz[i] < hints[i].length) hintz[i]++;
var what = hints[i].substr(0,hintz[i]);
document.getEle mentById("answe r"+i).value = what;
}
function resets() {
for (var i=0; i<hintz.length ; i++) {
hintz[i] = 0;
}
}
</script>
</head>
<body>
<form>
1. What is the day after today called?
<input type="text" name="answer1" id="answer1">
<input type="button" name="hint1" value="Hint" onclick="hint(1 )"
title="Click to view a letter-by-letter hint.">
<br><br>
2. What is the day before today called?
<input type="text" name="answer2" id="answer2">
<input type="button" name="hint2" value="Hint" onclick="hint(2 )"
title="Click to view a letter-by-letter hint.">
<br><br>
3. What is the day before tomorrow and after yesterday called?
<input type="text" name="answer3" id="answer3">
<input type="button" name="hint3" value="Hint" onclick="hint(3 )"
title="Click to view a letter-by-letter hint.">
<br><br>
<input type="reset" onclick="resets ()">
</form>
</body>
</html>

**RobG** · Jul 23 '05, 04:30 PM

Re: pop-up hint button

McKirahan wrote:
[...][color=blue]
> I didn't get any errors using FF 1.0 but, on the other hand, only Q3 worked.[/color]

For the record, Look at your code again:

[...][color=blue]
> if (i==2) document.getEle mentById("hint" +i).title = what;
> if (i==3) document.getEle mentById("answe r"+i).value = what;[/color]
[...][color=blue]
> <input type="text" name="answer2">
> <input type="button" name="hint2" value="Hint" onmouseover="hi nt(2)"
> title="">
> <br>
> Q3. What is the day before tomorrow and after yesterday called?
> <input type="text" name="answer3" id="answer3">[/color]

In IE, getElementById will grab a reference to any element with a
matching name or ID - either one will do. Firefox doesn't -
getElementById *must* match the id. In both browsers, the name and id
can be different (but you may then strike problems with Netscape 4).
The usual trick is to add both name and id and make them the same (as
you've done with answer3)

Add id="hint2" to the element named "hint2" and life is sweet.

Q3 worked because you put an appropriate ID on the element you are
looking for when using getElementById( ) - "answer3".

[...][color=blue]
> <input type="text" name="answer3" id="answer3">
> <input type="button" name="hint3" value="Hint" onclick="hint(3 )"
> title="Click to view a letter-by-letter hint.">[/color]

If you turn on Firefox's JavaScript console (Tools menu) you will see
the error.
[color=blue]
>
> None of the buttons changed the document title though.[/color]

No, because I (mistakenly) thought you were using document.title, not
the button title - my error. However, the W3C HTML 4.01 spec says"

"Values of the title attribute may be rendered by user agents in a
variety of ways."

The key word is "may". So you can't rely on the browser displaying the
title as a tool tip, even though most of them do.

--
Rob

**piperzen** · Jul 23 '05, 04:47 PM

Re: pop-up hint button

Thanks so much for your help! I passed your codes on to our
programmer, and the hint button is now live. At the moment, it is a
little difficult to find (we're still in early development!), but for
now:
1) go to http://www.yale.edu/swahili
2) click on Learning Guide on the left
3) under "Topics" select "Somo la Kwanza" and under "Skills" select
"Msamiati (Vocabulary)"
4) from the drop-down list box, select "Kamusi TypeCheck"

Any of the exercises will display the code for the hint button. Click
on the word "kidokezo," which is Swahili for "hint," in order to see
the feature in action!

Again, many thanks for your help.
Cheers,
Martin

**McKirahan** · Jul 23 '05, 04:47 PM

Re: pop-up hint button

"piperzen" <piperzen@gmail .com> wrote in message
news:1106668721 .022403.17380@f 14g2000cwb.goog legroups.com...[color=blue]
> Thanks so much for your help! I passed your codes on to our
> programmer, and the hint button is now live. At the moment, it is a
> little difficult to find (we're still in early development!), but for
> now:
> 1) go to http://www.yale.edu/swahili
> 2) click on Learning Guide on the left
> 3) under "Topics" select "Somo la Kwanza" and under "Skills" select
> "Msamiati (Vocabulary)"
> 4) from the drop-down list box, select "Kamusi TypeCheck"
>
> Any of the exercises will display the code for the hint button. Click
> on the word "kidokezo," which is Swahili for "hint," in order to see
> the feature in action!
>
> Again, many thanks for your help.
> Cheers,
> Martin
>[/color]

You might want to add a "title" to the tag to describe what will happen if
they click "kidokezo"; otherwise, they might expect a hint to be displayed
elsewhere.

For example,

| <input type="button" name="hint1" value="kidokezo " onclick="hint(0 )">

Perhaps:
title="Click to reveal the next letter."
or
title="Click to view a letter-by-letter hint."

When the mouse is over the button for a second, it will pop up under most
browsers (at least IE and FF).

pop-up hint button

pop-up hint button

Comment

Comment

Comment

Comment

Comment

Comment

Comment