pop-up hint button

P

piperzen

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
 
M

McKirahan

piperzen said:
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
Click to expand...

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 "onmouseover".

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

<html>
<head>
<title>hints.htm</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.substr(0,hintz);
document.getElementById("hint"+i).title = what;
window.status = what;
if (hintz < hints.length) hintz++;
}
</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="hint(2)"
title="">
</form>
</body>
</html>
 
M

McKirahan

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

<html>
<head>
<title>hints.htm</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 < hints.length) hintz++;
var what = hints.substr(0,hintz);
if (i==1) window.status = what;
if (i==2) document.getElementById("hint"+i).title = what;
if (i==3) document.getElementById("answer"+i).value = what;
}
function resets() {
for (var i=0; i<hintz.length; i++) {
hintz = 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="hint(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>
 
R

RobG

McKirahan said:
Here's another variation (Q3) that inserts the hint (letter-by-letter)
directly into the text box.
Click to expand...

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.getElementById("hint"+i) has no properties
 
M

McKirahan

RobG said:
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.getElementById("hint"+i) has no properties
Click to expand...

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.html</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 < hints.length) hintz++;
var what = hints.substr(0,hintz);
document.getElementById("answer"+i).value = what;
}
function resets() {
for (var i=0; i<hintz.length; i++) {
hintz = 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>
 
R

RobG

McKirahan wrote:
[...]
I didn't get any errors using FF 1.0 but, on the other hand, only Q3 worked.
Click to expand...

For the record, Look at your code again:

[...]
if (i==2) document.getElementById("hint"+i).title = what;
if (i==3) document.getElementById("answer"+i).value = what; [...]
<input type="text" name="answer2">
<input type="button" name="hint2" value="Hint" onmouseover="hint(2)"
title="">
<br>
Q3. What is the day before tomorrow and after yesterday called?
<input type="text" name="answer3" id="answer3">
Click to expand...

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".

[...]
<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.">
Click to expand...

If you turn on Firefox's JavaScript console (Tools menu) you will see
the error.
None of the buttons changed the document title though.
Click to expand...

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.
 
P

piperzen

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
 
M

McKirahan

piperzen said:
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
Click to expand...

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).
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Problems with using event handlers for button and textarea input 1
pop up blockers 2
Function call from button to automatic 7
What should I do Before I give up programming? 6
CSS Grid. Im having trouble containing a title an image and a button 1
Im having trouble containing a title an image and a button 2
using path hint in javax.jnlp's openFileDialog 5
Word balloon- Multiple phrases, loop? 0

Members online

Total: 41 (members: 1, guests: 40)
Robots: 316

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,012
Latest member
RoxanneDzm

Latest Threads

Top