Basics about HTML, CSS and a wild imagination to use resources from the web to tel a story.

what you will need

Download or clone our Restory template available at https://github.com/janastu/restory-template

SWeets from a store you have subscribed. you can visit http://thestore.swtr.in/ to subscribe

If you want to create your own annotaions and SWeets about resources on web. You can visit http://restory.swtr.us/

Now it's time to see how to get a SWeet or an annotated image into your Restory. Like the Cat pic above, and the Text box below is pulled from http://thestore.swtr.in/ Visit http://restory.swtr.us/#/linked-data and click on Tags "lolcat" to see all the cat-images you are seeing in this theme.

This paragraph you are reading is text written by a nerd developing this theme for you. But, the White box you see above this paragraph, is not written by this same nerd. It is annotated paragraph from Wiki article on Lol cat.

Enough with the Cats now

So, by now i assume you have the Restory Template downloaded into your computer. This current theme is from narrative-theme2.html, corresponding style sheet you should familiarise with will be narrative-theme2.css in css directory, and a javascript file in JS directory chapters.js

Let's first open the narrative-theme2.html in your favourite text editor, or a note pad will do.go to line no. 3, and give a Title to your story. now to line no. 27 to give a heading to your story.

Now you will need a list of SWeet Id's to pull a particular Image or text into our story. the below cat image is from SWeet Id 5331, you create a div with the Id in it like shown below in the HTML file.

How to find a SWeet ID

Visit http://thestore.swtr.in/ to locate the SWeet you want in your story and click on the icon in the right bottom corner of the box and you will find the SWeet ID in the browser URL http://thestore.swtr.in/sweets/5444 is the url for the cat pic above.

That is about fetching annotated content from a store. If you want to add your own narrative, that much simple. insert your text between <p> and </p> tags, in the HTML file, which will generate a paragraph in the story.

Exercise Area

Task 1

Get a lolcat annotated image below this line.

Task 2

Print or display the SWeet ID of the Lolcat annotation here

Haven't you got enough of these cats yet?? Lol...

To get annotations with other tags, or from a different user, and customise, you will have to make a javascript call in js/chapters.js file. At present you can see it's a JSON format, meaning a key value pair 4 items. el, who, what and tag are the Keys which will be constant. the Values can be changed by the User.

el is the HTML section tag, inside which you want a particular set of SWeets. In this theme it is always "#story-content". WHO defines the user of the SWeet, WHAT defines type such as img-annor for image annotation and txt-anno for text annotation. Tag will be the common Tag across all the sweets from that section.

For detailed user manual About using the SWTR App, visit Click here...