Main Menu
Multiwingspan Home Page
Multiwingspan Games
Gnasher @ Multiwingspan
Multiwingspan Calendar
Multiwingspan Clock
About Multiwingspan
Programming
Visual Basic 6.0 Guide
Visual Basic 6.0 Examples
Turbo Pascal Guide
SWI Prolog Guide
Visual Basic 2005 Guide
Structured Query Language
Web Design
HTML Design Tasks
Introduction To HTML
Introduction To CSS
Introduction To Javascript
Notes
AS/A2 Level Computing

HTML Tasks
Making The Story Program

The story program works by asking the user to enter some words into an online form. These words are then used to make a unique story. HTML cannot do this by itself, so we will need to use some Javascript to make the story program work.

There are 3 stages involved in making the story program work.

  1. Designing The Story
  2. Making The Form
  3. Writing The Javascript Program

An Example Of The Whole Page

<html>
<head>
<title>MHA Story Program Example</title>
<script language='Javascript'>
function makeStory() {
var myPerson1 = document.storyForm.person1.value
var myPlace1= document.storyForm.place1.value
var myColour1 = document.storyForm.colour1.value
document.write("One day " + myPerson1 + " was walking to " + myPlace1 + ".")
document.write(myPerson1 + " had always wanted to have " + myColour1 + " hair.")
}
</script>
</head>
<body>
<form name="storyForm">
<input type = "text" name ="person1">Enter the name of a person.<br>
<input type = "text" name = "place1">Enter the name of a place.<br>
<input type = "text" name = "colour1">Enter a colour.<br>
<button onclick="makeStory()">Make The Story</button>
</form>
</body>
</html>

Try out this code to get an idea of what the program does.

Stage 1 - Designing Your Story

The best way to do this is by writing a paragraph of normal text. You could take the first paragraph of a fairy take if you are struggling for ideas.

Underline a random selection of words in the story - these will be changed by the person who uses your program.

Stage 2 - Making The Form

Study the code from the example page that you have just made.

<input type = "text" name ="person1">Enter the name of a person.<br>

The line above adds a text box to the form. Each item text box needs a different name. The names used in the example are helpful to a programmer because they hint at what is being done with the text box.

Stage 3 - Writing the Javascript Program

Study the Javascript section carefully.

  1. <script language='Javascript'>
  2. function makeStory() {
  3. var myPerson1 = document.storyForm.person1.value
  4. var myPlace1= document.storyForm.place1.value
  5. var myColour1 = document.storyForm.colour1.value
  6. document.write("One day " + myPerson1 + " was walking to " + myPlace1 + ".")
  7. document.write(myPerson1 + " had always wanted to have " + myColour1 + " hair.")
  8. }
  9. </script>

Lines 3 - 5 are used to find out what has been entered into the text boxes and to store it with a name that the program can understand. Line 3 means,

'Find out what has been entered into the text box called person1 that is in the form called storyForm. Store this text using the name myPerson1'.

Each name (like myPerson1, myPlace1 etc) needs to be different.

Lines 6 and 7 write the story into a new web page. The bits of the story that do not come from the form are in double quotation marks. The things that have been entered in the form are 'added' to each bit of text.

Notice that you can use any of the things on the form more than once in your story. The name myPerson1 has been used twice. It is the same word each time.

Return To HTML Tasks || Return To Homepage