Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > pop-up hint button

Reply
Thread Tools

pop-up hint button

 
 
piperzen
Guest
Posts: n/a
 
      01-10-2005
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

 
Reply With Quote
 
 
 
 
McKirahan
Guest
Posts: n/a
 
      01-10-2005
"piperzen" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) oups.com...
> 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
>


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[i].substr(0,hintz[i]);
document.getElementById("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="hint(2)"
title="">
</form>
</body>
</html>


 
Reply With Quote
 
 
 
 
McKirahan
Guest
Posts: n/a
 
      01-10-2005
"McKirahan" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...

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[i] < hints[i].length) hintz[i]++;
var what = hints[i].substr(0,hintz[i]);
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[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="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>


 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      01-11-2005
McKirahan wrote:
> "McKirahan" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
>
> Here's another variation (Q3) that inserts the hint (letter-by-letter)
> directly into the text box.


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

--
Rob
 
Reply With Quote
 
McKirahan
Guest
Posts: n/a
 
      01-11-2005
"RobG" <(E-Mail Removed)> wrote in message
news:S0FEd.85$(E-Mail Removed)...
> McKirahan wrote:
> > "McKirahan" <(E-Mail Removed)> wrote in message
> > news:(E-Mail Removed)...
> >
> > Here's another variation (Q3) that inserts the hint (letter-by-letter)
> > directly into the text box.

>
> 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
>
> --
> Rob


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[i] < hints[i].length) hintz[i]++;
var what = hints[i].substr(0,hintz[i]);
document.getElementById("answer"+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>


 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      01-11-2005
McKirahan wrote:
[...]
> I didn't get any errors using FF 1.0 but, on the other hand, only Q3 worked.


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


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


If you turn on Firefox's JavaScript console (Tools menu) you will see
the error.

>
> None of the buttons changed the document title though.


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
 
Reply With Quote
 
piperzen
Guest
Posts: n/a
 
      01-25-2005
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

 
Reply With Quote
 
McKirahan
Guest
Posts: n/a
 
      01-25-2005
"piperzen" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) ups.com...
> 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
>


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


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
PIX VPN debugging hint Walter Roberson Cisco 0 10-18-2005 04:56 AM
How to create a hint? Marek ASP .Net 5 12-27-2004 04:13 PM
can anyone give me a hint Robert MCSD 0 08-11-2004 05:49 PM
[Eclipse] Another hint..required ShadowMan Java 5 06-11-2004 02:12 PM
More confused than ever. Please give me a hint. Daniel Pope Java 5 02-22-2004 04:20 PM



Advertisments