Overview | Part B Folder | newStory function | User Input | Build Story | Image | Gender | Caps Function | A/An Function | Image Rollover | Story Window | Questions

Build your story

 

Header scripts
are located in the head section of an HTML page.

1. In the header script, immediately after the start script tag and before any of the functions, you need to declare the variable story. Initialize it to the empty string, "" (two quotes with nothing in between) as follows, right after the opening curly bracket:
   
   
   <script type="text/javascript">
   function newStory()
   {
        var story = "";
   
   
   This statement will reset the story to nothing if the user runs the story multiple times.
   
   
2. Return to your function and find the variable declarations where you obtain the values the user entered. Immediately afterwards, you will add this next statement. Be sure to use single quotes. Place a blank line between the single quotes for now to make room for adding your story. The story will be treated as a string constant that will be printed to the screen literally.
   
   
   story = '
   /* Leave a blank line for your story here! Be sure to close it up later! */
   ';
   
   
   
3. Copy your story into the blank line between the quotes. It should look similar to this:
   
   
   story = '<h1><span class="highlight">Gettysburg</span>'s Address</h1>
   <p>Four score and seven <span class="highlight">years</span> ago our....</p>';
   
   
   
4. After you paste in your story, close up the empty spaces until your story fills all the lines.:
   
   
   story = '<h1><span class="highlight">Gettysburg</span>'s Address</h1><p>Four score and seven <span class="highlight">years</span> ago our....</p>';
   
   
   
   
5. If you prefer to break your story into pieces to make it easier for you to read and code, use +=.
   
   
   1. Add story += ' ' to add more to the story. Recall that += is another assignment operator. It adds onto the current value in the variable rather than replacing it like =.
      
      

      story = '<h1><span class="highlight">Gettysburg </span>'s Address</h1><p>Four score and seven <span class="highlight">years</span> ago our....</p>';
      
      story += '
      //more story, if any, goes here.
      ';

      
      
   2. Paste more of your story between the single quotes. Delete the line breaks and close up any empty spaces after you paste your story in place.
      
      
6. Find all the places in your story where you have apostrophes. Wherever you have an apostrophe, place a back-slash before it to "escape" it, so JavaScript won't think it's the end of the string. Very important!
   
   

   story += 'Alice\'s favorite dessert is pie.';

   
   Recall that you set a span with class of "highlight" in Project 2A for each word that will be entered by the user. Look at your input form and note the id's you gave to each input text box.
   
   
7. In your story, find each word to be replaced with the word entered in the first input text box. Replace it with the id for the first input field, in the example, word1.
   
   
   story = '<h1><span class="highlight">word1</span> Address</h1><p>Four score and seven....</p>';
   
   
   
8. Repeat this process for the rest of the inputs.
   
   
   story = '<h1><span class="highlight">word1</span> Address</h1><p>Four score and seven <span class="highlight">word2</span> ago our....</p>';
   
   
   
9. Variables inside quotes are taken as strings, or constants. To make sure that variables stay variables, every time you substitute a variable name, you have to close the string before it, concatenate it with a plus sign (+), and then afterwards concatenate it with the text following it and add another quotation mark to begin the next text string.
   
   
   story = '<h1><span class="highlight">' +word1+ '</span> Address</h1>
   <p>Four score and seven <span class="highlight">' +word2+ '</span> ago our....</p>';
   
   
   
10. Continue until all the words to be replaced in your story are replaced with the id from the appropriate input field.
    
    
11. At the end of your story and before the closing } that marks the end of the function, replace the alert with document.write(story);.
    
    
         document.write(story);
    
    
    
12. Save the file and preview in the browser. Fill in all of the fields. Does your story appear?
    
    If your story doesn't appear, use Error Console to find and fix your errors. If you have an apostrophe within your story, place a back-slash in front of it to "escape" it, so JavaScript won't think it's the end of the string.
    
    If some of your words aren't changed when you click Create Story, find them in your story. Did you replace that word with ' +id+ ', where id is the id of the particular text box where the user enters that word?
    

13. Go to the Catalyst quiz and answer Questions 5, 6, 7, and 8.

Now that you have added the variables to your story, add an image to enhance your story....