Hyperlink pages and Site Maps — Roleplaying and Storytelling
Alternative task: 
Hyperlink pages and Site Maps — A small website with multiple pages. http://pad.p2pu.org/SoWChallengeCYOAALT

Suggest another alternative task:
Can you think of another Web Challenge that allows learners to demonstrate their understanding of hyperlinked pages and site maps?

Let us know!

What You're Going to do.
Twenty years ago, the most revolutionary and important feature of HTML and the HTTP was the ability to hyperlink and create connections between documents. Not only could references to specific documents such as scientific papers be easily included in a text, it became easier to move through pages of contents in a non-linear order.  

No longer were pages of a document ordered one after another, they could be linked together and accessed in many different sequences. Describing the way that pages linked together no longer relied on page numbers, so web developers and information architects started using site maps.

In this task you'll create a series of pages joined together by hyperlinks. You'll also share your script and produce a sitemap that describes how the pages are linked to each other. 


What you're going to produce.

You'll create a collection of hyperlinked HTML pages to make a simple gamebook, or Choose Your Own Adventure story and will produce a sitemap that illustrates the pages and pathways in your story. 

Not only did the hyperlink make it easier to connect information from remote sources, it also sparked "Hypertext Fiction", a new type of storytelling that played with hyperlinks to create a non-linear narrative experience. A branching adventure such as a gamebook is a simple form of hypertext fiction. 

Hypertext fiction was not as revolutionary or popular as the hyperlink itself, but the alternative pathways through a story are a good example of how the web broke us away from primarily sequentially orderered information.

Your gamebook will be made up of multiple pages or "story pieces" that are linked together. Each page you create will tell part of a story and will provide readers with a decision that influences the next page they read.

eg. You are in a forest on a path. The path you are on branches to the left or goes straight ahead. Do you go left or go straight ahead?
NOTE: tie this in with goodies and baddies?

You'll use some basic HTML and CSS skills to create your pages and a simple story idea to explore. This story could be a traditional dragon and knight style gamebook or it could illustrate the choices young people take in high school. 

Here's an example of a gamebook that describes a first day at a new school [http://battlecat.net/sandbox/cyoa/].


As a rough guide you should produce:
   * a short hyperlinked story with 2 or more potential endings
   * the text based script of your gamebook. (One .doc file or .txt file)
   * HTML pages that describe your story pieces (these may include images)
   * a CSS page that consistently styles at least the font of your pages
   * A cover page for the gamebook which illustrates the story concept
   * A sitemap sketch or document [clarify format?] that maps out the pages and their connection to each other.


Remember
Remember, [a lot of hypertext fiction sucked :-)] we're primarily working through this task to learn how hyperlinked pages connect together.

Why you're doing it.
Even with a simple website it's important to work out how the pages are connected to each other. Developing a sitemap to demonstrate the structure of a site is a useful planning approach.

What you're going to need.

• Internet Connection - for research and publishing.
• A Blog or portfolio – to publish your work on
• A web server – to publish your work on
• Pen & Paper - to sketch out your ideas
• A text editor - to code your pages in
• Tools/Software - to bring your ideas to life
• Time - 1-2 hours of research, 1-2 Hours of time to sketch your ideas out and as much time as you need to bring them to life.
• Belief in yourself - Don't doubt the quality of your idea by telling yourself that your idea isn't very good. It's very rare that an idea starts off as good, stick with it and it'll turn into a gem. You can always 'borrow' an idea from someone else as long as you remember to reference their work.*

Publishing your work.
You should publish your work on your web server. You should also write a blog post reflecting on the processes you went through, what you've learned, ideas you do or do not agree with and any ideas you have about taking this further.

When you've published your work let your study group know ( Tweet, P2PU wallpost, Facebook, Google+ etc etc ) about it and get ready to reply to the influx of comments about your awesome gamebook. Take criticism on board, be gracious of compliments and treat others as you'd like to be treat yourself.

If you continue to refine your gamebook idea, you might wish to create archive copies of your experience. Saving multiple versions of your site will allow you to review your previous work and this makes it easier to track how quickly you've learnt. 


A Few Resources.
   * Web Standards Curriculum: Planning out a Website [http://www.w3.org/wiki/Information_Architecture_-_planning_out_a_web_site]
   *  A visual vocabulary 
for describing information architecture and interaction design - http://www.jjg.net/ia/visvocab/
      * Gamebooks: Wikipedia [http://en.wikipedia.org/wiki/Gamebook]
   * Choosing Your Own Adventure [http://www.codinghorror.com/blog/2008/03/choosing-your-own-adventure.html]
   * Grammar Girl: Formatting Hyperlinks http://grammar.quickanddirtytips.com/formatting_hyperlinks.aspx
   * 


Remember this list is just to get your started - collaborate and share with your group.


Improvements or Amendments?
Help us improve this task and let us know how we could make it better.



* Respecting other people's work is an important part of working on the web.