Name: _________________________________________

Talk Like A Pirate

David Reed         Creighton University

In 1995, John Baur and Mark Summers invented a new holiday, International Talk Like a Pirate Day. As they proposed it, on every September 19th, people all around the world would be united in common purpose by talking like a pirate (with lots of "Arrrrs" and "Ahoys" and the like). Since then, International Talk Like a Pirate Day has received widespread publicity, especially since columnist Dave Barry began lobbying for the holiday. At the official Talk Like a Pirate Day Web site,, you can read about the history of the holiday, order official merchandise, and even experiment with a simple Web page that translates simple English phrases into pirate talk.

The following Web page is a framework for an alternative English-to-Pirate translator. As is, it contains two buttons, labeled "hello" and "stranger", and a text area. When the user clicks on a button, the corresponding Pirate word or phrase is added to the text area. For example, if the user were to click on the "hello" button, the word "ahoy" will appear in the text area. If she then clicks on the "stranger" button, then "scurvy dog" is added to the text area, resulting in the phrase "ahoy scurvy dog."

<html> <!-- pirate1.html Dave Reed --> <!------------------------------------------------------> <head> <title> Pirate Translator </title> </head> <body> <div style="text-align:center"> <h3>Land Lubber's Pirate Translator</h3> <p>Simply click on the buttons to translate<br /> words and/or phrases from English to pirate talk. <hr /> <form name="PirateForm"> <input type="button" value="hello" onClick="document.PirateForm.Output.value += 'ahoy ';"> <input type="button" value="stranger" onClick="document.PirateForm.Output.value += 'scurvy dog ';"> <br /><br /> <textarea name="Output" rows=10 cols=40></textarea> </form> </div> </body> </html>

EXERCISE 1:    Cut-and-paste this HTML text into a Web page named pirate1.html and verify that it behaves as described.

As the page is currently written, multiple translations are awkward. If you finish translating one phrase and want to begin a new one, simply refreshing the page does not suffice to clear the text area. Instead, you must click the mouse in the browser's Address box and hit enter to reload the page and reset the text area. To make repeated translations easier, add a button directly below the text area labeled "Clear". When the user clicks on this button, a function should be called to clear the text area (i.e., set its contents to be the empty string).

EXERCISE 2:    Extend pirate1.html by adding new words and phrases. For each new word or phrase, you will need to add a button with the appropriate label and translated pirate phrase. At a minimum, you must add the new words and phrases below. However, feel free to add a larger vocabulary (see for ideas).
English word/phrase    Pirate equivalent
Greetings:   pardon meavast
excuse mearrr
madamproud beauty
officerfoul blaggart
Questions:where iswhar be
can you help me findknow ye
is thatbe that
hotelfleabag inn

EXERCISE 3:    As the vocabulary of your pirate translator grows, the buttons in the page can appear cluttered. In particular, finding the button corresponding to a desired word or phrase can become a chore. Add an HTML table to your page to organize the buttons by category. For example, all greetings should appear together on the same row, with the label "Greetings:" in the left column. Similarly, all people should be grouped together on a row with the text label "People:", and so on for each category of speech. The screen shot below shows a sample page using a table to organize the layout. Feel free to add other elements to the page (e.g., pirate images) to improve its appearance.

Screen shot of translator page

Automatic Code Generation

As you no doubt noticed, each button in the pirate1.html page is of the same form. Individual buttons differ only in the button label (the word/phrase to be translated) and the translated word/phrase added to the text area. With a little more programming knowledge, it should be possible to automate the generation of the buttons so that the programmer would not need to add new buttons every time the vocabulary expands. Instead, the programmer could enter the words and phrases in a single list (denoted with [ and ] in JavaScript) and then have the buttons generated via JavaScript when the page loads. This can be accomplished with the following code, which uses a list named PHRASES to store the English and pirate words (preceded by category headings).

<script type="text/javascript"> PHRASES = [["Greetings", "hello", "ahoy", "pardon me", "avast", "excuse me", "arrr"], ["People", "stranger", "scurvy dog", "sir", "matey", "madam", "proud beauty"] ];, for (var i = 0; i < PHRASES.length; i++) { var category = PHRASES[i][0]; document.write("<tr valign='top'><td>" + category + ": <td>"); for (var j = 1; j < PHRASES[i].length; j+=2) { document.write("<input type=\"button\" value=\"" + PHRASES[i][j] + "\" onClick='document.PirateForm.Output.value += \"" + PHRASES[i][j+1] + " \";'>\n"); } } </script>

EXERCISE 4:    Save a copy of your pirate1.html page under the name pirate2.html. Then, modify this new page by replacing all of the buttons in the body with the above JavaScript code segment. Once you have tested the page to be sure that it behaves as described, extend it by adding your new words and phrases to the PHRASES list. When finished, this new page should behave exactly as your pirate1.html from EXERCISE 4. However, adding additional words and phrases should now be as easy as adding the new words and phrases to the PHRASES list.

Hand in printouts of pirate1.html and pirate2.html, attached to these sheets.