Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Help using text in forms

    Hello,

    I am working on creating a project and I need some help. I have 2 form boxes, one that displays text, and one that does not. What my goal is, is to have someone type the text displayed in the top form in the bottom one and have the word that they are typing highlighted in the display text. If someone type the word wrong, it will be red text in the bottom form.

    Sorry, this is hard to explain. I know this can be done, but not quite sure how. Below is my html I started. Any help would be appreciated.

    Thanks.

    Code:
    <html>
    <form>
    <center><textarea name="display" cols="80" rows"18">This is a typing test. Type this same text into the box below.</textarea></center><br>
    <center><textarea name="display" cols="80" rows"18"></textarea></center>
    </form>
    </html>

  • #2
    Regular Coder
    Join Date
    May 2005
    Posts
    220
    Thanks
    1
    Thanked 2 Times in 2 Posts
    I found a javascript code that is somewhat close to what I am trying to do, however as you type the words I would like each displayed word to be underlined.

    On another note, the done button is really lame. It calculates how the time it takes to click the button which I think is not very accurate. If I could just get someone to help me make each word underlined as it is typed I think I can make a timer that works better.

    Thanks.

    Code:
    <HEAD>
    
    <SCRIPT LANGUAGE="JavaScript">
    
    <!-- Original: Michael Tartaglia <stonedstan@hotmail.com> -->
    <!-- Web Site:  http://www.geocities.com/SiliconValley/Horizon/5235 -->
    
    <!-- Begin
    msg = new Array("Practicing with your typing can greatly help your overall computer skills.",
    "A new computer is sold in the US every hour!",
    "When do birds migrate from North to South?",
    "Perplexing phrases, like this one, are tougher to type.")
    word = 10
    function m() {
    msg = new Array("Practicing with your typing can greatly help your overall computer skills.",
    "A new computer is sold in the US every hour!",
    "When do birds migrate from North to South?",
    "Perplexing phrases, like this one, are tough to type.")
    word = 10
    }
    function e() {
    msg = new Array("If you can correctly, and quickly, type this perplexing sentence, you are one superb typist!",
    "You are one superb typist if you can correctly, and quickly, type this long phrase.",
    "I believe you're a good typist, so I believe you will correctly copy this statement!",
    "Because this is not a fairly simple phrase, could you swiftly, and precisely, copy it?")
    word = 15
    }
    function s() {
    msg = new Array("Computers are the medium of the future.",
    "Can you type this phrase rather quickly?",
    "Who is the President of the US?",
    "I believe that you can type well!")
    word = 7
    }
    function beginIt() {
    randNum = Math.floor((Math.random() * 10)) % 4
    msgType = msg[randNum]
    day = new Date();
    startType = day.getTime();
    document.theForm.given.value = msgType
    document.theForm.typed.focus();
    document.theForm.typed.select();
    }
    function cheat() {
    alert("You can not change that!");
    document.theForm.typed.focus();
    }
    function stopIt() {
    dayTwo = new Date();
    endType = dayTwo.getTime();
    totalTime = ((endType - startType) / 1000)
    spd = Math.round((word/totalTime) * 60)
    if (document.theForm.typed.value == document.theForm.given.value) {
    alert("\nYou typed a " + word + " word sentence in " 
    + totalTime + " seconds, a speed of about " + spd + " words per minute!")
    }
    else {
    alert("You made an error, but typed at a speed of " + spd + " words per minute.")
       }
    }
    // End -->
    </SCRIPT>
    </HEAD>
    
    <BODY>
    
    <CENTER>
    <FORM name="theForm">
    <TABLE BORDER=3 CELLSPACING=0 CELLPADDING=0>
    <TR>
    <TD>Are you a....</TD>
    <TD align=center><input type=radio name="sme" value="Beginner" onClick="s()" checked>Beginner
    <input type=radio name="sme" value="Novice" onClick="m()">Novice
    <input type=radio name="sme" value="Expert" onClick="e()">Expert</TD>
    </TR>
    <TR><TD colspan=2><BR>
    <center><input type=button value="Start Typing Test" name="start" onClick="beginIt()"></center><P>
    <textarea name="given" cols=53 rows=3 wrap=on onFocus="cheat()"></textarea></TD>
    </TR>
    <TR><TD colspan=2><center><input type=text name="typed" size=45>
    <input type=button value="DONE"  name="stop"  onClick="stopIt()"></center></TD>
    </TR>
    </TABLE></FORM>
    </CENTER>
    
    <p><center>
    <font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
    by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
    </center><p>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •