HTML and CSS Reference
In-Depth Information
Case Problem 2
Use JavaScript
to create a
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.
Search WWH ::

Custom Search