pop-up hint button

Discussion in 'Javascript' started by piperzen, Jan 10, 2005.

  1. piperzen

    piperzen Guest

    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
     
    piperzen, Jan 10, 2005
    #1
    1. Advertising

  2. piperzen

    McKirahan Guest

    "piperzen" <> wrote in message
    news:...
    > 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.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>
     
    McKirahan, Jan 10, 2005
    #2
    1. Advertising

  3. piperzen

    McKirahan Guest

    "McKirahan" <> wrote in message
    news:...

    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>
     
    McKirahan, Jan 10, 2005
    #3
  4. piperzen

    RobG Guest

    McKirahan wrote:
    > "McKirahan" <> wrote in message
    > news:...
    >
    > 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
     
    RobG, Jan 11, 2005
    #4
  5. piperzen

    McKirahan Guest

    "RobG" <> wrote in message
    news:S0FEd.85$...
    > McKirahan wrote:
    > > "McKirahan" <> wrote in message
    > > news:...
    > >
    > > 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 < 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>
     
    McKirahan, Jan 11, 2005
    #5
  6. piperzen

    RobG Guest

    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
     
    RobG, Jan 11, 2005
    #6
  7. piperzen

    piperzen Guest

    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
     
    piperzen, Jan 25, 2005
    #7
  8. piperzen

    McKirahan Guest

    "piperzen" <> wrote in message
    news:...
    > 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).
     
    McKirahan, Jan 25, 2005
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    2
    Views:
    8,608
    Randy Webb
    Feb 4, 2006
  2. Bone Ur
    Replies:
    4
    Views:
    423
    Bone Ur
    Dec 19, 2007
  3. Chris Davoli

    Tool Tip pop up - pop up time is too short

    Chris Davoli, Feb 24, 2009, in forum: ASP .Net
    Replies:
    1
    Views:
    502
    Lee Atkinson
    Feb 24, 2009
  4. samppi
    Replies:
    27
    Views:
    552
    David A. Black
    Dec 5, 2007
  5. Indu
    Replies:
    9
    Views:
    368
Loading...

Share This Page