JavaScript Storyteller Part B

Story Window...

All that's left is to make your story appear in another window when the user clicks on the Create Story button.

Save your input form again.
Find the document.write(story) line in your newStory() function. Replace it with this new line that calls the function to create a new window.
Calling the function also passes to the function the values in the variables lastName and story. Change lastName to something you collected from the user in your input form. Choose something that will work in the title: "Last Name's story".

When you call the function, replace lastName with the variable you chose from your story. Replace story if you called your variable something different, like Story. (Recall that variable names are case sensitive.)

setupStoryWindow(lastName, story);
/* lastName, or whatever you chose from your story, is passed to name and story is passed to content in the setupStoryWindow function */
After the end of the newStory function, make a blank line and insert this code to create the new window:

/* This function opens a new window for the story, using something the user entered to personalize the title, like "Last Name's story" */
function setupStoryWindow(name, content)

Note that the function definition receives the values that were held by the variables you listed in the function call (lastName and story or whatever you chose). The values are passed in the same order to the function. The value in lastName is passed to name and the value in story is passed to content. The function definition will use name and content to refer to those variables.
Continue with the function body:

{

/* some HTML to put around the story itself, including a page title with user's name */

var header = '<head><title>' +name+ "\'s " +
'Story</title></head>';

/* Notice the use of double quotes around the string above so the apostrophe will be ignored by JavaScript.*/

/* open new window and "fill" it with HTML, including the story */
var storyWindow = window.open('', 'storyWindow'); storyWindow.document.write(header); storyWindow.document.write('<body>'+content+'</body></html>');
storyWindow.document.close();

/* raise this window to top, in case it's not visible */ storyWindow.focus();

}

Save the file and preview it in Firefox. Does your story show up in a new window? Does your name's story show up as the page title? If not, use Firefox Error Console to find the problem and fix it.

You may notice that your formatting did not carry over to the new window. If you look carefully at the code above, you notice that we did not link to the style sheet. Let's add it now.
Find var header in the setupStoryWindow function. Close the string after <head> and concatenate it to the link to the CSS style sheet.

var header = '<head>' + '<link href="story.css" rel="stylesheet" type="text/css"><title>' +name+ "\'s " + 'Story</title></head>';
Save the file and preview it in Firefox. Do your colors and the appearance of the page come through as expected? If not, copy the link to your stylesheet that's linked at the top of the header and paste it into this line. Make sure this file and the css are in the same folder.
When you're finished, be sure to upload your storytellerB folder to
1. Your Web space using your SFTP software.
2. Catalyst Collect It, Project 2B.
Go to the Catalyst WebQ and answer the remaining questions.

When you finish the WebQ, you are finished with the project. Congratulations! Send the link to your story to your family and friends so they can play, too.