• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Exercise—Interactive Story

Let's work through an example that uses arrays to create an interactive story. You might be familiar with this type of “adlib” game in which the user is asked for a series of words—for example, adjectives, nouns, and so on. The user's answers are then inserted into a well-known piece of text to make a totally unique and hopefully amusing story. Here's how to create your own game:

1.
Choose the story/rhyme/lyrics you want to use, pick out the words you want to replace, and give them each a unique variable name:


Once upon a entry1 dreary,
while I pondered, entry2 and weary,
Over many a entry3 and curious volume
of entry4 lore--
While I entry5, nearly napping,
entry6 there came a tapping,
As of some one entry7 rapping, rapping
at my entry8 door.
"'Tis some entry9," I muttered,
"tapping at my entry8 door--
Only this and nothing more."

Notice that the variable entry8 has been used twice—this is so that whatever word the user types in will be used in both lines of the story.

Save this text—we will be returning to it shortly.

2.
Now make a list of suitable descriptions for each of the replaced words:

  • “A time of day”

  • “A feeling”

  • “An adjective—eg. sunny”

  • “An adjective—eg. sunny”

  • “A verb—past tense, eg. walked”

  • “An adverb—eg. quickly or monstrously”

  • “An adverb—eg. quickly or monstrously”

  • “A room in a house”

  • “A profession”

  • “An exclamation!”

These will be the prompt messages that tell the user which kind of word to type in. In a moment, you will create an array out of these descriptions.

Meanwhile, make a list of default words that will appear in the story. These can be funny suggestions of your own if you want. They will be used in the final story if the user just hits OK and doesn't type anything:

"lunchtime"
"wet"
"plump"
"malodorous"
"wriggled"
"hungrily"
"fiercely"
"bathroom"
"Web developer"
"Yipes"

Now you're ready to start JavaScripting!

3.
Start with your template file and create a new array to hold the messages you want to appear in the prompt box, adding the prompt strings to the elements directly:

<script language="JavaScript">
<!-- Cloaking device on!
// create array for prompts
var promptmsg = new Array("A time of day","A feeling","An adjective - eg sunny", "An adjective - eg sunny","A verb - past tense eg walked","An adverb - eg quickly or monstrously","An adverb  - eg quickly or monstrously","A room in a house",
"A profession","An exclamation!");

// Cloaking device off -->
</script>


					  

4.
Next, create an array to hold the default words you want to appear in the story:

<script language="JavaScript">
<!-- Cloaking device on!
// create array for prompts
var promptmsg = new Array("A time of day","A feeling","An adjective - eg sunny", "An adjective - eg sunny","A verb - past tense eg walked","An adverb - eg quickly or monstrously","An adverb  - eg quickly or monstrously","A room in a house", "A profession","An exclamation!");

// create array for default text
var defaulttxt = new Array("lunchtime","wet","plump","malodorous" ,"wriggled","hungrily","fiercely","bathroom","Web developer","Yipes");

// Cloaking device off -->
</script>


					  

5.
Now create variables for the inputted prompts:

<script language="JavaScript">
<!-- Cloaking device on!
// create array for prompts
var promptmsg = new Array("A time of day","A feeling","An adjective - eg sunny","An adjective - eg sunny","A verb - past tense eg walked","An adverb - eg quickly or monstrously","An adverb  - eg quickly or monstrously","A room in a house", "A profession","An exclamation!");

// create array for default text
var defaulttxt = new Array("lunchtime","wet","plump","malodorous" ,"wriggled","hungrily","fiercely","bathroom","Web developer","Yipes");
// variables for prompt inputs
var entry1, entry2, entry3, entry4, entry5, entry6, entry7, entry8, entry9, entry10;

// Cloaking device off -->
</script>


					  

6.
Next, write the JavaScript to bring up the prompt boxes, adding the prompt message and default text by using array element values:

<script language="JavaScript">
<!-- Cloaking device on!
// create array for prompts
var promptmsg = new Array("A time of day","A feeling","An adjective - eg sunny","An adjective - eg sunny","A verb - past tense eg walked","An adverb - eg quickly or monstrously","An adverb  - eg quickly or mon strously","A room in a house", "A profession","An exclamation!");

// create array for default text
var defaulttxt = new Array("lunchtime","wet","plump","malodorous" ,"wriggled","hungrily","fiercely","bathroom","Web developer","Yipes");

// variables for prompt inputs
var entry1, entry2, entry3, entry4, entry5, entry6, entry7, entry8, entry9, entry10;

// bring on the prompts!
entry1  = prompt(promptmsg[0], defaulttxt[0]);
entry2  = prompt(promptmsg[1], defaulttxt[1]);
entry3  = prompt(promptmsg[2], defaulttxt[2]);
entry4  = prompt(promptmsg[3], defaulttxt[3]);
entry5  = prompt(promptmsg[4], defaulttxt[4]);
entry6  = prompt(promptmsg[5], defaulttxt[5]);
entry7  = prompt(promptmsg[6], defaulttxt[6]);
entry8  = prompt(promptmsg[7], defaulttxt[7]);
entry9  = prompt(promptmsg[8], defaulttxt[8]);
entry10 = prompt(promptmsg[9], defaulttxt[9]);

// Cloaking device off -->
</script>


					  

7.
Now that you have all the pieces in place, you can return to the story/rhyme/lyrics text you saved earlier. You need to turn each line into an alert that contains the story text.

Inside the parentheses, the text should appear in double quotes ("). Remember that you can include single quotes (') inside double quotes and vice versa. In the ninth line of the story, notice that both single and double quotes are used in the text. Enclose the text in double quotes, and to display the double quote, you can use the escape character for the double quote (\ "). This enables the double quote to be displayed without causing an error.

The strings of text and the variable values the user typed in are concatenated together using the + operator.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint