To use StoryTeller, you need to create an HTML document and reference storyteller.js. When you download StoryTeller it comes with a pre-prepared template (blank.html). To get started, simply copy this file and rename it to whatever you like.
A story consists of a number of pages. Pages are defined as <div>s in the body of the HTML document. StoryTeller will recognise any element with the "data-page-id" attribute as a page of your story. This attribute specifies the unique name for each page.
The first page you want your reader to see should have data-page-id="start", the other pages can have whatever names you like.
Here's an example:
<div data-page-id="start">
<p>You are in an open field west of a big white house with a boarded front door.</p>
<p>There is a small mailbox here.</p>
</div>
<div data-page-id="north">
<p>You are facing the north side of a white house.
There is no door here, and all the windows are barred.</p>
</div>
<div data-page-id="south">
<p>You are facing the south side of a white house.
There is no door here, and all the windows are barred.</p>
</div>
In order to allow the reader to make choices, you add links. Links are defined like this:
[link("{pageId}")]{linkBody}[end]
{pageId} is the id of the page the reader will move to. {linkBody} is the content which will be turned into the link.
Adding links to the example:
<div data-page-id="start">
<p>You are in an open field west of a big white house with a boarded front door.</p>
<p>There is a small mailbox here.</p>
<p>[link("north")]Go North[end]</p>
<p>[link("south")]Go South[end]</p>
</div>
<div data-page-id="north">
<p>You are facing the north side of a white house.
There is no door here, and all the windows are barred.</p>
</div>
<div data-page-id="south">
<p>You are facing the south side of a white house.
There is no door here, and all the windows are barred.</p>
</div>
This should be enough to get started. For the details of more advanced features see the documentation included with StoryTeller.
No comments:
Post a Comment