Creating a typing test

January 23, 2001
by Will Turnage

Dear Multimedia Handyman:

For my project, I want to create two text boxes. One will show words randomly, and the user will type that word into the other box. If the user mistypes the word, then it counts the errors.

Thank you,

Jeff Chun

Jeff:

What you're asking to do is very simple. Before you begin, you should think about what assets you'll need to do this task. For starters, you'll need two fields, one to display the current word, and one for typing the current word. The display field should not be editable, while the typing field should be editable. You'll also need two variables, one to count the number of typing errors, and another to keep track of your list of words.

You should start your movie by initializing your variables.

global gErrorCount
global gWordList

on prepareMovie

gErrorCount = 0
gWordList = ["Director", "Online", "Multimedia", "Handyman", "Column"]

end

Next, you'll need to create a handler that randomly selects a word, then places that word into your display field.

global gWordList

on selectRandomWord

   selectedWordNum = random(gWordList.count)
   put gWordList[selectedWordNum] into field "displayField"
   gWordList.deleteAt(selectedWordNum)

end

In this handler, the first line gets the total number of words in gWordList. Then, it selects a random number between 1 and the number of words in your list. The second line of the handler takes the randomly selected word from the list, and puts it into our display field. Finally, the handler deletes the selected word from gWordList . This final step ensures that your program won't select that word again during the round.

Now that you've written code to select the current word, the last thing to do is to create a behavior for your typing field. This behavior will compare what you've typed with what's in the display field. If the two words don't match, then it will count it as an error.

on keyDown me

  if (the key = BACKSPACE) then
    pass
  else

    typedWord = member("userEntry").text & the key
    currentWord = member("displayField").text
    correctFlag = true

    charCount = typedWord.char.count

    repeat with i = 1 to charCount
      if typedWord.char[i] <> currentWord.char[i] then
        gErrorCount = gErrorCount + 1
        flag = false
        exit repeat
      end if
    end repeat

    if correctFlag and charCount = currentWord.char.count then
      startNextWord()
    end if

    pass
  end if

end

This behavior checks what you type on keyDown events, or each time a key is entered into the typing field. It is very important when using the keyDown handler that you include the term pass in your handler. The keydown handler is executed when a key is pressed but before the field is updated. If you don't include the term pass, then the key will never get put into the typing field.

The first thing the handler checks is if the user typed the BACKSPACE key. If the user did, then it is automatically passed to the field without checking for errors. Next, the handler creates two local variables used in our check. The first variable contains the current word in your display field, and the second variable contains the contents of the typing field. Notice that you have to manually add the key to the end of the typedWord variable because it hasn't been added to the typing field yet. Next, the handler sets a flag variable to TRUE. This variable will track whether the word is misspelled or not. You can assume that the word is spelled correctly at first, and if the handler discovers later that the word is misspelled, it will switch the boolean to FALSE.

Now, the handler counts the number of characters in the typed field, and uses a repeat loop to compare each character of the typed field with each character of the display field. If they don't match, then the error count gets increased by one and the repeat loop stops. Also, it sets our misspelled flag to FALSE so that you know the word has been misspelled.

The last check in the handler determines if the word has not been misspelled and if the number of characters in the typing field is equal to the number of characters in the display field. If the word is not misspelled and the words are the same length, then the user typed the word correctly, and the handler moves on to the next word.

One final variation you might want to check for is case sensitivity. Oftentimes you might want the user to practice typing certain capital letters. But when Lingo compares two characters, it doesn't check for case sensitivity, so if you want to add that, you'll have to compare the ASCII codes of the characters using the charToNum function. Thus, your new if statement would look like this:

if charToNum (typedStr.char[i]) <> charToNum (currentWord.char[i])

Happy typing!

A sample Director 7 movie is available for download in Mac or Windows format.

Will Turnage is a multimedia programmer based in New York City. In addition to his weekly role as Director Online's Multimedia Handyman, he is also the Technology Director for Sony Music's Client Side Technologies Group. You can read more about his work at http://will.turnage.com/.