Creating Interactive Young Children Stories Using ASP!Contributed By Marc Draco
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 contains a simple HTML form,
and no ASP code. You can view the source
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
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
variable is read in from the querystring. If it does not exist, it is initialized to 1. The following
code accomplishes this:
Select Case is performed on the
iPage variable, and different
"parts" of the story are outputted based upon the page. The code resembles:
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.
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
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.
Story.aspin text format