30:T556,story = [ {scene: 0, description: "You face a choice. You see a hallway on your left, and a stairwell on your right. What will you do? ", img:await FileAttachment("one.png").url(), choices:[ { id: 1, label: "turn left", description: "You turn left and go down the hall", gotoScene: 1 }, { id: 2, label: "turn right", description: "You turn right and climb the stairs", gotoScene: 2 } ]}, {scene:1, description: "You enter a hallway. There's a big dragon here. Uh Oh.", img: await FileAttachment("two.png").url(), choices:[ { id: 3, label: "face dragon", description: "you've faced the dragon - you win! -- let's start again!", gotoScene: 0 }, { id: 4, label: "run away", description: "you're scared - you lose -- let's start over! ", gotoScene: 0 } ]}, {scene: 2, description: "You eventually reach a dark and smelly room. There's a goblin here. Oh no!", img: await FileAttachment("three.png").url(), choices:[ { id: 5, label: "face goblin", description: "you've faced the goblin -- you win! let's start over", gotoScene: 0 }, { id: 6, label: "run away", description: "you try to run away but the goblin eats you. Let's start over", gotoScene: 0 }]} ]31:[{"id":"6a19a2ea5d82c08daa3617759774d819f73f62c2bb22c2c2d3e53392fc6e0745ff661dbcc3b3702341a9354943441cc7ffa2d51044e170dfb2d550ba9e4c7301","href":"https://static.observableusercontent.com/files/6a19a2ea5d82c08daa3617759774d819f73f62c2bb22c2c2d3e53392fc6e0745ff661dbcc3b3702341a9354943441cc7ffa2d51044e170dfb2d550ba9e4c7301","name":"one.png","type":"image/png","lastModified":1614578020716.307,"size":1100},{"id":"5ce65e1f720236db2599c21c6d37aba8aed319200f96b82f602fb243e4ed482d125916859ee809f5b5eaa878d64e2afc7a36a4cd50fbc5f8811f528c588378df","href":"https://static.observableusercontent.com/files/5ce65e1f720236db2599c21c6d37aba8aed319200f96b82f602fb243e4ed482d125916859ee809f5b5eaa878d64e2afc7a36a4cd50fbc5f8811f528c588378df","name":"three.png","type":"image/png","lastModified":1614578020833.188,"size":716},{"id":"86a8971b5923f9d9ae8983f67e50fa2ca9ea5ca8146f22c76a1ad526bcc3d18b05d491f81c101a7cf34bb6b00363e72356bdd79484047c020047ffdf07ebe0b9","href":"https://static.observableusercontent.com/files/86a8971b5923f9d9ae8983f67e50fa2ca9ea5ca8146f22c76a1ad526bcc3d18b05d491f81c101a7cf34bb6b00363e72356bdd79484047c020047ffdf07ebe0b9","name":"two.png","type":"image/png","lastModified":1614578020865.972,"size":1221}] 2e:{"title":"Interactive Story","cells":[{"id":0,"value":"md`# Interactive Story `","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"md`You can create simple interactive stories with text and images. Just fork this page and update the *story* block below`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"view = html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"{init()}","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"init = ()=>{\n renderStep();\n bindEvents();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"nextStep = ()=>{\n let theSelect = view.querySelector('#choices select')\n view.querySelector(\"#log\").appendChild(html`

${theSelect.options[theSelect.selectedIndex].dataset.description}

`)\n mutable currentScene = theSelect.value\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"renderStep = ()=>{\n console.log(\"renderStep: currentScene\", currentScene)\n view.querySelector('#log').appendChild(html`\n

${story[currentScene].description}

\n `);\n \n view.querySelector('#choices').replaceChild(html``, view.querySelector('#choices').childNodes[0]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"bindEvents = ()=>{\n view.querySelector(\"#choices\").removeEventListener(\"change\", nextStep)\n view.querySelector(\"#choices\").addEventListener(\"change\", nextStep)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"mutable currentScene = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}