Penn Foster Graded Project 40267000 Tutorial 16 Case 1 French 101

Description

Penn Foster Graded Project 40267000 Tutorial 16 Case 1 French 101

In this graded project, you’re going to add dynamic content and styles using JavaScript, as you learned in this lesson. You’re going to create external script elements, event handlers, and functions for a Web site containing French phrases. Upon clicking on a phrase, an English translation will appear. Upon releasing the mouse, the French phrase should be visible once again.
Turn to page 956 and locate Case Problem 1. Follow the steps in this case to add the appropriate code to the project.

Grading
Your project will be graded on the following elements:
French5.htm
When viewed in browser, clicking on a phrase from 1 to 10 shows the English translation 15 points _______
When viewed in browser, releasing the mouse button on a phrase from 1 to 10 shows the French French phrase 15 points _______
English phrases are in red font, non-Italic 10 points _______
French phrases are in black font, Italic 10 points _______
When viewing code, two external script elements link to french5.js and engfr.js files 10 points _______
When viewing code, an event handler in body element runs function setUpTranlation() when page loads 10 points _______

Engfr.js
JavaScript file contains a function setUpTranslation() 10 points _______
JavaScript file contains a function swapFE() 10 points _______
JavaScript file contains a function swapEF() 10 points _______

New Perspectives on HTML, XHTML, and Dynamic HTML Tutorial 16 Case 1 French 101
Complete the following:
1. Use your text editor to open the french5txt.htm and engfrtxt.js files from the tutorial.16/case1 folder, enter your name and the date in the comment section of each file, and then save the files as french5.htm and engfr.js, respectively.
2. Go to the french5.htm file in your text editor and review the contents and structure of the file. Add two script elements that attach the french5.htm file to the french5.js and engfr.js script files. Close the french5.htm file, saving your changes.
3. Go to the engfr.js file in your text editor. Add a command to have the browser run the setUp() function when the page is loaded.
4. Create the setUp() function. The purpose of this function is to insert an ordered list of French phrases taken from the french array in the french5.js file and to add event handlers to switch these phrases to their English counterparts. Add the following commands to the setUp() function:
a. Declare a variable named transDoc that references the element with the ID doc. It is within this element that you’ll place the list of French phrases.
b. Create an element node named olElem containing the ol element.
c. Loop through all of the items in the french array. For each item in the array, create an element node named newLI containing a list item element. Set the text contained within newLI to the text of the current item in the french array. Set the ID of the newLI element to iphrase, where i is the value of the index number in the array. Set the cursor style of the list item to pointer. Have the browser run the swapFE() function when the user presses the mouse button down on the list item, and run the swapEF() function when the mouse button is released. Finally, append the newLI element as a child of the olElem object.
d. After the loop has finished, append the olElem object to the transDoc object.
5. Create the swapFE() function. The purpose of this function is to display the English phrase in place of the French phrase selected by the user. Add the following commands to the function:
a. The swapFE() function is only run in response to the mousedown event. Store the object in which the mousedown event occurred in a variable named phrase.
b. If the node name of the phrase object indicates that the phrase object is a text node, point the phrase object to the parent of that text node. This is done to ensure that the object being examined is the list item element containing the phrase, and not simply the text of the phrase itself.
c. Declare a variable named phraseNum that returns the index number of the phrase being selected. You can extract the index number by applying the parseInt() method to contents of the ID attribute of the phrase object.
d. Change the inner HTML of the phrase object to the item in the english array with an index equal to the phraseNum variable.
e. Change the font style of the phrase object to italic and the font color to the color value (155, 102, 102).
6. Create the swapEF() function. The purpose of this function is to display the French translation of the phrase selected by the user. The code of the function should be identical to that used in the swapFE() function, except that it should use the french array rather than the english array and the phrase text should be displayed in a normal black font.
7. Close the file, saving your changes.
8. Open french5.htm in your Web browser. Verify that a list of 10 French phrases appears on the Web page. Also, verify that as you press the mouse button on each
phrase, the English translation appears. When you release the mouse button, the French phrase should reappear.
9. Submit the completed project to your instructor.