HTML and CSS Reference
In-Depth Information
Case Problem 2
Use JavaScript
to create a
French-to-English
translation page.
Data Files needed for this case Problem: french.css, frenchtxt.htm, modernizr-1.5.js,
phrases.js, transtxt.js
French 101
Professor Eve Granger teaches French 101 at a local university. She's work-
ing on a Web site containing French phrases that she wants her students to review for the
weekly quiz. She's asked you to help her create the Web site. She wants a student to be
able to click and hold the mouse button down on a French phrase on the site and have
the English translation appear. When the student releases the mouse button, the French
phrase should reappear. Figure 13-40 shows a preview of the Web page you'll create for
Professor Granger.
Figure 13-40
French-english translation page
As a test case, Professor Granger already has created an external JavaScript file named
phrases.js
that contains two arrays. The
french
array contains 10 French phrases. The
english
array contains the 10 English translations of those phrases. You'll use these arrays
to insert the English translation of each phrase in Professor Granger's document, and then
to restore the French phrases. Once your program works, you'll be able to create similar
pages that contain hundreds of translated phrases—but this is a good start.
Complete the following:
1. Using your text editor, open
frenchtxt.htm
and
transtxt.js
from the tutorial.13\case2
folder, enter
your name
and
the date
in the head section, and then save the files as
french.htm
and
translate.js
, respectively.
2. Go to the
french.htm
file in your text editor and add script elements to link the file to
the
phrases.js
and
translate.js
files. Take some time to study the content of the docu-
ment body and then close the file, saving your changes.
