Add Readme, and fix paths

Author: alexiscott

README.org

@@ -1 +1 @@
-- See Pictures for assets.
+- Frontend Prototype for an interactive story. Uses SVG with clickable paths.

index-with-svg.html

@@ -20,7 +20,7 @@
 
     <script>
         async function fetchStory() {
-            const response = await fetch('data/story.json');
+            const response = await fetch('story.json');
             const data = await response.json();
 	    console.log("Data", data);
             return data.parts;

story.json

@@ -1,41 +1 @@
-{
-    "parts": {
-        "1": {
-            "text": "You are at a fork in the road. Do you go left or right?",
-            "choices": [
-                {"text": "Left", "svg": "<rect width='50' height='50' style='fill:blue;' />", "nextPart": 2},
-                {"text": "Right", "svg": "<circle cx='25' cy='25' r='25' style='fill:green;' />", "nextPart": 3}
-            ]
-        },
-        "2": {
-            "text": "You took the left path and found a river. Do you swim across or walk along the bank?",
-            "choices": [
-                {"text": "Swim", "svg": "<rect width='50' height='50' style='fill:blue;' />", "nextPart": 4},
-                {"text": "Walk", "svg": "<circle cx='25' cy='25' r='25' style='fill:green;' />", "nextPart": 5}
-            ]
-        },
-        "3": {
-            "text": "You took the right path and found a mountain. Do you climb it or walk around it?",
-            "choices": [
-                {"text": "Climb", "svg": "<rect width='50' height='50' style='fill:blue;' />", "nextPart": 6},
-                {"text": "Walk Around", "svg": "<circle cx='25' cy='25' r='25' style='fill:green;' />", "nextPart": 7}
-            ]
-        },
-        "4": {
-            "text": "You swam across the river and reached a village. The end.",
-            "choices": []
-        },
-        "5": {
-            "text": "You walked along the bank and found a bridge. The end.",
-            "choices": []
-        },
-        "6": {
-            "text": "You climbed the mountain and saw a beautiful sunset. The end.",
-            "choices": []
-        },
-        "7": {
-            "text": "You walked around the mountain and found a cave. The end.",
-            "choices": []
-        }
-    }
-}
+{"parts":{"1":{"choices":[{"nextPart":2,"svg":"<rect width='50' height='50' style='fill:blue;' />","text":"Left"},{"nextPart":3,"svg":"<circle cx='25' cy='25' r='25' style='fill:green;' />","text":"Right"}],"text":"Hello traveller. You are at a fork in the road. Do you go left or right?"},"2":{"choices":[{"nextPart":4,"svg":"<rect width='50' height='50' style='fill:blue;' />","text":"Swim"},{"nextPart":5,"svg":"<circle cx='25' cy='25' r='25' style='fill:green;' />","text":"Walk"}],"text":"You took the left path and found a river. Do you swim across or walk along the bank?"},"3":{"choices":[{"nextPart":6,"svg":"<rect width='50' height='50' style='fill:blue;' />","text":"Climb"},{"nextPart":7,"svg":"<circle cx='25' cy='25' r='25' style='fill:green;' />","text":"Walk Around"}],"text":"You took the right path and found a mountain. Do you climb it or walk around it?"},"4":{"choices":[],"text":"You swam across the river and reached a village. The end."},"5":{"choices":[],"text":"You walked along the bank and found a bridge. The end."},"6":{"choices":[],"text":"You climbed the mountain and saw a beautiful sunset. The end."},"7":{"choices":[],"text":"You walked around the mountain and found a cave. The end."}}}