pop-up hint button - Javascript

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

Jul 23 '05 #1

Subscribe Post Reply

3278

McKirahan

"piperzen" <pi******@gmail.com> wrote in message
news:11**********************@f14g2000cwb.googlegr 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>

Jul 23 '05 #2

McKirahan

"McKirahan" <Ne**@McKirahan.com> wrote in message
news:lM********************@comcast.com...

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>

Jul 23 '05 #3

RobG

McKirahan wrote:

"McKirahan" <Ne**@McKirahan.com> wrote in message
news:lM********************@comcast.com...

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

Jul 23 '05 #4

McKirahan

"RobG" <rg***@iinet.net.auau> wrote in message
news:S0***************@news.optus.net.au...

McKirahan wrote:
"McKirahan" <Ne**@McKirahan.com> wrote in message
news:lM********************@comcast.com...

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>

Jul 23 '05 #5

RobG

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

Jul 23 '05 #6

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

Jul 23 '05 #7

McKirahan

"piperzen" <pi******@gmail.com> wrote in message
news:11*********************@f14g2000cwb.googlegro 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).

Jul 23 '05 #8

Similar topics

Strange timing data for list.pop()

by: Roy Smith | last post by:

In the recent "transforming a list into a string" thread, we've been discussing the fact that list.pop() is O(1), but list.pop(0) is O(n). I decided to do a little timing experiment. To be sure,...

Python

Help: retrieving e-mail from yahoo pop server. what's wrong?

by: Andre | last post by:

Hi guys, newbie question. I am having trouble with a script that is supposed to login me to my account on yahoo pop server. When i do this: import getpass, poplib, re POPHOST =...

Python

A Q. on pop().

by: spencer | last post by:

Hi, The code. def buildStackMajor(): for node in dirStackMinor: #print 's is the node...', node dirStackMajor.append(node) dirStackMinor.pop() print 'POP the stack...', len(dirStackMinor)...

Python

push and pop - stacks

by: Will | last post by:

Hi, Sorry to be a pest... But I can figure this out. I'm pushing to a stack. then I need to check to see if the word is a palindrome. Is the code below correct? if so, how can I check the...

C / C++

`void **' revisited: void *pop(void **root)

by: Stig Brautaset | last post by:

Hi group, I'm playing with a little generic linked list/stack library, and have a little problem with the interface of the pop() function. If I used a struct like this it would be simple: ...

C / C++

`errno' (Dan Pop)

by: Vijay Kumar R Zanvar | last post by:

> In <pan.2004.04.22.04.06.05.969827@bar.net> "Mac" <foo@bar.net> writes: > > >Is it legal to declare errno after you've included errno.h? > > > >For example: > > > >#include<errno.h> > > >...

C / C++

pop method question

by: Nicholas Parsons | last post by:

Howdy Folks, I was just playing around in IDLE at the interactive prompt and typed in dir({}) for the fun of it. I was quite surprised to see a pop method defined there. I mean is that a...

Python

pop() clarification

by: Scott | last post by:

As said before I'm new to programming, and I need in depth explaination to understand everything the way I want to know it, call it a personality quirk ;p. With pop() you remove the last element...

Python

Function pop causing crash

by: j_depp_99 | last post by:

The program below fails on execution and I think the error is in my pop function but it all looks correct.Also could someone check my code as to why my print function is not working? I havent...

C / C++

need to push pop strings on a stack

by: merrittr | last post by:

I need some C advice I want to read in string commands from a user when the user enters a \n I want to push it on the stac. Then at some point , if the user enters the word print pop off and print...

C / C++

Steps manually installing IntelliJ IDEA.

by: erikbower65 | last post by:

Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...

General

Development of Funny H5 Game - Toy Claw

by: kcodez | last post by:

As a H5 game development enthusiast, I recently wrote a very interesting little game - Toy Claw ((http://claw.kjeek.com/))。Here I will summarize and share the development experience here, and hope it...

HTML / CSS

How to insert a new record in a database

by: Taofi | last post by:

I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...

DB2 Database

Cancel Print Action if Sub form has No Records

by: DJRhino1175 | last post by:

When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...

Microsoft Access / VBA

Python code for finding the longest common subsequence

by: Rina0 | last post by:

I am looking for a Python code to find the longest common subsequence of two strings. I found this blog post that describes the length of longest common subsequence problem and provides a solution in...

Python

React to native button blinking effect

by: lllomh | last post by:

Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{

Software Development

How does React native implement an English player?

by: lllomh | last post by:

How does React native implement an English player?

Mobile Development

How to calculate date of retirement from date of birth

by: Mushico | last post by:

How to calculate date of retirement from date of birth

Data Management

Windows 11 and Access Combo Box Issue

by: DJRhino | last post by:

Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...

Microsoft Access / VBA