Interactive Story

In this project, you’ll make an interactive story.    Like a “Choose your own Adventure” story, the reader will make choices that affect what happens in the story.  Each “choice” will be a link to the next page in the story.

Your story should have at least ten (10) pages – though it can have more.

This project is a place to show off everything you’ve learned about HTML and CSS.  You should try and make it look good, and your story should be entertaining.

The first page, index.html, should introduce the story, and have some choices for the reader.  Each of these ‘choices’ is really a link to another page!  Each page after that should have at least 2 choices for the reader, unless its a final page.  Each page should:

1.  Have all the usual tags <html>, <head>, <body>, with appropriate end tags.

2.  Have a link to a single, common, style sheet.  Your whole story website should share one style sheet.

3.  Have an image and some text on each page – its a story book website.  You could try using a background image instead of a regular image – this allows text over the image.

4.  Use color and nice big fonts in your story.  Look for a fun (or spooky) Google Font to use.

5.  All pages and images should be in a single folder called “story”.  Make a link on your index page to “story/index.html”.

Stories should be high school appropriate.  They will be on the web!  Don’t use the full names of any real people in your story.

Plan your Story

You should plan out your story in a graphics program on a single sheet.  Apple’s Pages is a good choice, though you can use another.  Each page should be a “box”, with arrows leading from one part of the story to another.   Save your plan graphic in PDF format, with the title story.pdf.

Start with a Template

You should get started by making a single page.  Put text and an image on the page.  Spend some time laying it out, maybe with a table.  Choose your font sizes, etc here.  Then make copies of that one page, and change them.  This is MUCH easier than making each page from scratch.  Plus, users will have a better experience if the pages have a common theme – colors, fonts, etc.

Your starting page should be named index.html.   The other pages can have any names you want.  You can name them page2.html, page3.html, etc.  Or you can name them based on what is happening in the story.

Link to your Story Graphic

From each ending page of your story, make a link to the story.pdf file you made earlier.  If you changed the story a little during production don’t worry!

And More…

Try adding a little javascript to your story.