[Workshop] [Contents] [Experiments] [First Page] [Custom] [Quiz/Score] [Story] [Quiz/Timed] [Quiz/Math] [Stats]

A Custom Story

Summary: An JavaScript exercise on parsing and using document queries. In this case, we're using the queries to build a custom story.

Prerequisites: Basic knowledge of JavaScript. Understanding of how to load libraries. Ability to write forms in HTML.

Provides: Experience using and parsing document queries. Ideas on usage.

References: Using query strings in JavaScript. Writing forms.

Overview:

Introduction
Build a form
Test your query data
Test your fields
Use your fields

Introduction

In this exercise, we'll be building an interactive story. It is up to you whether the story appears on one page or multiple pages, although I would recommend the latter so that you can have experience passing information from page to page.

Build a form

Determine what custom information you'd like in your story, and build a page, begin.html with a form that allows the user to enter that information.

Make sure to name your fields.
Include method="get" and action="story.html" in your <form> tag.
Include a submit button.
Don't spend too much time makng it look nice; you can come back and clean it up later.

Test your query data

Build a simple version of the story.html page that simply prints out the value of location.search. Use this in conjunction with the previous page to test whether the data is sent from form to story.

The code portion of your page will look something like the following.

<script language="javascript">
document.write("<p>The query to this page was '")
document.write(location.search)
document.writeln("'</p>")
</script>

Test your fields

Make a backup copy of your story.html file, and then build a new one that extracts and prints the values in your fields. You will probably want to include the file extract.js and use the function queryField().

Parts of your page will look something like the following.

<script language="javascript" src="extract.js">
</script>
<script language="javascript">
document.write("<p>The color is '" + queryField("color") + "'</p>")
</script>

Use your fields

Instead of simply printing your fields, incorporate them into a simple story. You may want to use more than one page for your story, in which case you'll need to pass the query to the next page. The library textutils.js includes the function linkWithQuery(url,txt) to generate appropraite links.

If you use this option, the code to create your link will look something like the following

<script language="javascript">
document.write(linkWithQuery("more.html","Tell me more"))
</script>

[Workshop] [Contents] [Experiments] [First Page] [Custom] [Quiz/Score] [Story] [Quiz/Timed] [Quiz/Math] [Stats]

This page created Wed Jun 11 14:30:25 1997 by SamR's Site Suite.