Creating Interactive Young Children Stories Using ASP!

Note: this article is written by Scott Mitchell- the idea,and 95% of the sample source code, was submitted by Marc Draco I found this idea very heart-warming, and decided to whip up an article on the topic. :)

Fact: Little kids like stories.
Fact: Humans like control. Psychological studies have consistently shown cross-culture feelings of frustration and angst when we sense a lack of control.

Why not combine these two facts, and let your child create interactive stories using ASP! Junior will be ecstatic- he will have his own stories, and will be largely in control of determining the outcome. Furthermore, such an interactive experience will give Junior good exposure to a computer, and, one day, might influence him to become a computer scientist. :)

This article demonstrates a rather simple and rather static way of creating an interactive story. It does not use databases- rather the options are hard coded. Granted, databases should be used, administration pages should be written, but I doubt Junior will mind. This article does present some useful information, especially for those getting familiar with passing information from one ASP page to another. In this article, both a FORM and the querystring are used to send information from one page to another.

For our interactive story, we will need two ASP pages. The first will be used to collect information from your child. This page, StoryMaker.asp presents a text box for the child to enter his or her name, and several radio button pairs, where the child can select a number of parameters, such as what his favorite color is. Feel free to view the on-line demo for StoryMaker.asp! StoryMaker.asp contains a simple HTML form, and no ASP code. You can view the source code for StoryMaker.asp.

This form information is passed to a second ASP page, Story.asp, which is responsible for displaying the custom story, along with custom pictures! The story is separated into five "pages," much like a story book has several pages. Story.asp receives seven form field variables from StoryMaker.asp:

• Player - The name of the child
  
• Sex - The gender of the child (boy or girl)
  
• Weather - The weather the child chooses (Warm, Wind, Rain, Cold)
  
• Move - How the child will move around throughout the story (Bounce, Walk, Skip, Fly)
  
• Colour - The child's favorite color (Green, Red, Black, White)
  
• Object - The object the child would like the story to revolve around (Slipper, Flower, Teapot, Chest)
  
• Place - The place the child would like her story to take place (Castle, Forest, House, Island)
  

There is also an iPage variable that is passed through the querystring. When this variable is not present, the page number defaults to 1. At the top of Story.asp, the iPage variable is read in from the querystring. If it does not exist, it is initialized to 1. The following code accomplishes this:

'Obtain the current page Dim iPage iPage = Request("page") if Len(iPage) = 0 then iPage=1

Next, a Select Case is performed on the iPage variable, and different "parts" of the story are outputted based upon the page. The code resembles:

1: Select Case iPage 2: Case 1: 3: Response.Write "This is a story about a little " &_ 4: Request(Cstr("sex")) & name & "!" 5: Response.Write "<IMG SRC="" & _ 6: HeOrShe & ".jpg"" ALIGN=RIGHT /images/demos/story.">" 7: Case 2: 8: ... 9: Case 3: 10: ... 11: End Select

There are a total of five pages, so there are a total of 5 Case statements before the End Select (these have been removed for brevity, though). Take a look at lines 5 and 6 - note that an image is automatically loaded based upon the sex of the child. (HeOrShe is a local variable that is set to either "he" or "she" based upon Request("sex").) These two images, of a boy and girl, are shown below. Such an approach is used for each page to demonstrate a custom picture. To see the system in action, visit StoryMaker.asp and try out some of the different combinations!

Finally, we need to provide the links for the Next and Previous pages. It is vital that when we call the next or previous page, we pass all of the form field variables. This will ensure us that each page will have all of the information entered by the user in StoryMaker.asp. We will use the querystring to pass this information from one page to another, using an HREF tag to create a hyperlink. The following code creates the next and previous links, if needed.

'provide next, prev links. These need to pass all of the info through 'the querystring If iPage > 1 then 'show previous page link Response.Write "<A HREF="" & & & "&place=" & _ Server.URLEncode(Request(" & "&player=" & _ Server.URLEncode(Request(" & "&colour=" & _ Server.URLEncode(Request(" & "&move=" & _ Server.URLEncode(REquest(" & "&object=" & _ Server.URLEncode(Request(" "&sex=" & _ Server.URLEncode(Request(" """ story.asp?page=" & iPage-1 & " &weather=" & _ Server.URLEncode(Request(" weather")) place")) player")) colour")) move")) object")) sex"))>Previous Page</A>" & _ "&nbsp;&nbsp;&nbsp;&nbsp;" End If If iPage < 5 then 'show next page link Response.Write "<A HREF="" & & & "&place=" & _ Server.URLEncode(Request(" & "&player=" & _ Server.URLEncode(Request(" & "&colour=" & _ Server.URLEncode(Request(" & "&move=" & _ Server.URLEncode(REquest(" & "&object=" & _ Server.URLEncode(Request(" "&sex=" & _ Server.URLEncode(Request(" """ story.asp?page=" & ipage+1 & " &weather=" & _ Server.URLEncode(Request(" weather")) place")) player")) colour")) move")) object")) sex"))>Onto the Next Page!</A>" End If

We use the Server.URLEncode method to guarantee that the information passed through the querystring is properly encoded. For more information on Server.URLEncode, please read the technical docs. Note that we do not display the previous page unless iPage is greater than 1. Also, we do not display the next button unless iPage is less than 5 (since there are 5 pages in total). Finally, in the next link, we pass the iPage variable through the querystring, first incrementing it, whereas in the previous link we decrement iPage.

Well, I hope you found this topic as heat-warming as I did. Just the thought of seeing these little kids getting excited over creating their own stories on the computer brings a smile to my face. You are strongly encouraged to enhance this system, adding professional images, placing the options in a database, and doing all that other good stuff.

Happy Programming!

Attachments: