<snapdata remixID="14436784"><project name="Snap!HTML" app="Snap! 11.0.4, https://snap.berkeley.edu" version="2"><notes>HTML in SNAP!!!!</notes><thumbnail>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAB4CAYAAAB1ovlvAAACn0lEQVR4Xu3Uu20CQQBF0YEi6IJiCCiMiB6ogYCAIuiBgIAUyT/JsgM7WtlXi84UsG/m6mgXL29nOApEBRYARuXNfhQAEIS0AIBpfuMAMpAWADDNbxxABtICAKb5jQPIQFpgEsDNZjOu1+s4n8/pI4zPt8AkgO/Pfkf4eZbL5VitVmO/38+3iJv/a4HJAHe73TidTj9e+n6/j+Px+K8PMjavApMBfv8Dfj79drv9inJeedz2rwtMArjdbsfj8RiXy2UcDoexXq//+r6+/2QFJgF8shaeExQAMIhu8qsAgDSkBQBM8xsHkIG0AIBpfuMAMpAWADDNbxxABtICAKb5jQPIQFoAwDS/cQAZSAsAmOY3DiADaQEA0/zGAWQgLQBgmt84gAykBQBM8xsHkIG0AIBpfuMAMpAWADDNbxxABtICAKb5jQPIQFoAwDS/cQAZSAsAmOY3DiADaQEA0/zGAWQgLQBgmt84gAykBQBM8xsHkIG0AIBpfuMAMpAWADDNbxxABtICAKb5jQPIQFoAwDS/cQAZSAsAmOY3DiADaQEA0/zGAWQgLQBgmt84gAykBQBM8xsHkIG0AIBpfuMAMpAWADDNbxxABtICAKb5jQPIQFoAwDS/cQAZSAsAmOY3DiADaQEA0/zGAWQgLQBgmt84gAykBQBM8xsHkIG0AIBpfuMAMpAWADDNbxxABtICAKb5jQPIQFoAwDS/cQAZSAsAmOY3DiADaQEA0/zGAWQgLQBgmt84gAykBQBM8xsHkIG0AIBpfuMAMpAWADDNbxxABtICAKb5jQPIQFoAwDS/cQAZSAsAmOY3DiADaQEA0/zGAWQgLQBgmt84gAykBQBM8xsHkIG0AIBpfuMAMpAWADDNbxxABtICAKb5jb8Cu/v/qPYqrDMAAAAASUVORK5CYII=</thumbnail><scenes select="1"><scene name="Snap!HTML"><notes>HTML in SNAP!!!!</notes><palette><category name="HTML" color="0,116,143,1"/></palette><hidden></hidden><headers></headers><code></code><blocks><block-definition s="initalize HTML" type="command" category="HTML"><header></header><code></code><translations></translations><inputs></inputs><script><block s="doRun"><block s="reportJSFunction"><list></list><l>// if it already exists, delete it&#xD;if (document.querySelector("div#_root_container")) {&#xD;    document.querySelector("div#_root_container").remove();&#xD;}&#xD;&#xD;if (document.querySelector("style#_root_style")) {&#xD;    document.querySelector("style#_root_style").remove();&#xD;}&#xD;&#xD;// create it&#xD;let rootContainer = document.createElement("div");&#xD;rootContainer.id = "_root_container"&#xD;rootContainer.style.position = "absolute";&#xD;&#xD;let root = document.createElement("div");&#xD;root.id = "_root"&#xD;root.style.transformOrigin = "top left";&#xD;rootContainer.appendChild(root);&#xD;&#xD;document.body.appendChild(rootContainer);&#xD;&#xD;// pointer events&#xD;const style = document.createElement(&apos;style&apos;);&#xD;style.id = "_root_style";&#xD;style.textContent = `&#xD;  div#_root {&#xD;    pointer-events: none;&#xD;  }&#xD;&#xD;  div#_root * {&#xD;    pointer-events: auto;&#xD;  }&#xD;`;&#xD;document.head.appendChild(style);&#xD;&#xD;world.clearHTML = function (stage, width, height) {&#xD;if (document.querySelector("div#_root_container")) {&#xD;    document.querySelector("div#_root_container").remove();&#xD;}&#xD;}&#xD;&#xD;world.children[0].createNewProject = function () {&#xD;    this.backup(() =&gt; this.newProject()); world.clearHTML();&#xD;}; &#xD;&#xD;if (ProjectDialogMorph.prototype._openProject != undefined) return;&#xD;ProjectDialogMorph.prototype._openProject = ProjectDialogMorph.prototype.openProject;&#xD;ProjectDialogMorph.prototype.openProject = function () { this._openProject(); world.clearHTML(); } &#xD;</l></block><list></list></block><block s="fork"><block s="reifyScript"><script><block s="doForever"><script><block s="doRun"><block s="reportJSFunction"><list><l>stage</l><l>width</l><l>height</l></list><l>// get root&#xD;let rootContainer = document.querySelector("div#_root_container");&#xD;let root = document.querySelector("div#_root");&#xD;&#xD;// position and size it to the stage&#xD;const bounds = stage.bounds;&#xD;const origin = bounds.origin;&#xD;const corner = bounds.corner;&#xD;&#xD;const stageWidth = corner.x - origin.x;&#xD;const stageHeight = corner.y - origin.y;&#xD;rootContainer.style.top = origin.y.toString() + "px";&#xD;rootContainer.style.left = origin.x.toString() + "px";&#xD;root.style.width = width.toString() + "px";&#xD;root.style.height = height.toString() + "px";&#xD;rootContainer.style.width = stageWidth.toString() + "px";&#xD;rootContainer.style.height = stageHeight.toString() + "px";&#xD;&#xD;const scaleX = stageWidth / width;&#xD;const scaleY = stageHeight / height;&#xD;const scale = scaleX.toString() + ", " + scaleY.toString();&#xD;&#xD;root.style.transform = "scale(" + scale + ")"</l></block><list><block s="reportObject"><l>Stage</l></block><block s="reportAttributeOf"><l><option>width</option></l><l>Stage</l></block><block s="reportAttributeOf"><l><option>height</option></l><l>Stage</l></block></list></block></script></block></script><list></list></block><list></list></block></script></block-definition><block-definition s="clear HTML" type="command" category="HTML"><header></header><code></code><translations></translations><inputs></inputs><script><block s="doRun"><block s="reportJSFunction"><list></list><l>world.clearHTML();</l></block><list></list></block></script></block-definition><block-definition s="root" type="reporter" category="HTML"><header></header><code></code><translations></translations><inputs></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list></list><l>return document.querySelector("div#_root");</l></block><list></list></block></block></script></block-definition><block-definition s="create new %&apos;name&apos; element" type="reporter" category="HTML" space="true"><header></header><code></code><translations></translations><inputs><input type="%txt" initial="1">div<options>a&#xD;abbr&#xD;acronym&#xD;address&#xD;applet&#xD;area&#xD;article&#xD;aside&#xD;audio&#xD;b&#xD;base&#xD;basefont&#xD;bdi&#xD;bdo&#xD;big&#xD;blockquote&#xD;body&#xD;br&#xD;button&#xD;canvas&#xD;caption&#xD;center&#xD;cite&#xD;code&#xD;col&#xD;colgroup&#xD;data&#xD;datalist&#xD;dd&#xD;del&#xD;details&#xD;dfn&#xD;dialog&#xD;dir&#xD;div&#xD;dl&#xD;dt&#xD;em&#xD;embed&#xD;fieldset&#xD;figcaption&#xD;figure&#xD;font&#xD;footer&#xD;form&#xD;frame&#xD;frameset&#xD;h1&#xD;h2&#xD;h3&#xD;h4&#xD;h5&#xD;h6&#xD;head&#xD;header&#xD;hgroup&#xD;hr&#xD;html&#xD;i&#xD;iframe&#xD;img&#xD;input&#xD;ins&#xD;kbd&#xD;label&#xD;legend&#xD;li&#xD;link&#xD;main&#xD;map&#xD;mark&#xD;menu&#xD;meta&#xD;meter&#xD;nav&#xD;noframes&#xD;noscript&#xD;object&#xD;ol&#xD;optgroup&#xD;option&#xD;output&#xD;p&#xD;param&#xD;picture&#xD;pre&#xD;progress&#xD;q&#xD;rp&#xD;rt&#xD;ruby&#xD;s&#xD;smap&#xD;script&#xD;search&#xD;section&#xD;select&#xD;small&#xD;source&#xD;span&#xD;strike&#xD;strong&#xD;style&#xD;sub&#xD;summary&#xD;sup&#xD;svg&#xD;table&#xD;tbody&#xD;td&#xD;template&#xD;textarea&#xD;tfoot&#xD;th&#xD;thead&#xD;time&#xD;title&#xD;tr&#xD;track&#xD;tt&#xD;u&#xD;ul&#xD;var&#xD;video&#xD;wbr</options></input></inputs><script><block s="doDeclareVariables"><list><l>element</l></list></block><block s="doSetVar"><l>element</l><block s="evaluate"><block s="reportJSFunction"><list><l>name</l></list><l>return document.createElement(name);</l></block><list><block var="name"/></list></block></block><custom-block s="set css property %txt of %obj to %txt"><l>pointer-events</l><block var="element"/><l>auto</l></custom-block><block s="doReport"><block var="element"/></block></script></block-definition><block-definition s="new text node with %&apos;content&apos;" type="reporter" category="HTML"><header></header><code></code><translations></translations><inputs><input type="%mlt" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>content</l></list><l>return document.createTextNode(content);</l></block><list><block var="content"/></list></block></block></script></block-definition><block-definition s="html code from elements created in %&apos;root element&apos; %&apos;code&apos;" type="reporter" category="HTML"><header></header><code></code><translations></translations><inputs><input type="%upvar" initial="1"></input><input type="%cs" initial="1"></input></inputs><script><block s="doSetVar"><l>root element</l><custom-block s="create new %txt element"><l>div</l></custom-block></block><block s="doRun"><block var="code"/><list></list></block><block s="doReport"><custom-block s="get %txt of %obj"><l>inner html</l><block var="root element"/></custom-block></block></script></block-definition><block-definition s="append %&apos;element&apos; to %&apos;other&apos;" type="command" category="HTML" space="true"><header></header><code></code><translations></translations><inputs><input type="%obj" initial="1"></input><input type="%obj" initial="1"></input></inputs><script><block s="doRun"><block s="reportJSFunction"><list><l>element</l><l>other</l></list><l>other.appendChild(element);</l></block><list><block var="element"/><block var="other"/></list></block></script></block-definition><block-definition s="get css property %&apos;name&apos; of %&apos;element&apos;" type="reporter" category="HTML" space="true"><header></header><code></code><translations></translations><inputs><input type="%txt" initial="1">color</input><input type="%obj" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>element</l><l>name</l></list><l>return element.style.getPropertyValue(name);</l></block><list><block var="element"/><block var="name"/></list></block></block></script></block-definition><block-definition s="set css property %&apos;name&apos; of %&apos;element&apos; to %&apos;value&apos;" type="command" category="HTML"><header></header><code></code><translations></translations><inputs><input type="%txt" initial="1">color</input><input type="%obj" initial="1"></input><input type="%txt" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>element</l><l>name</l><l>value</l></list><l>return element.style.setProperty(name, value);</l></block><list><block var="element"/><block var="name"/><block var="value"/></list></block></block></script></block-definition><block-definition s="all css properties of %&apos;element&apos;" type="reporter" category="HTML"><header></header><code></code><translations></translations><inputs><input type="%obj" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>element</l></list><l>function getAllCssProperties(element) {&#xD;  const computedStyle = window.getComputedStyle(element);&#xD;  const cssProperties = {};&#xD;&#xD;  // Iterate through the CSSStyleDeclaration object&#xD;  for (let i = 0; i &lt; computedStyle.length; i++) {&#xD;    const propertyName = computedStyle[i];&#xD;    const propertyValue = computedStyle.getPropertyValue(propertyName);&#xD;    cssProperties[propertyName] = propertyValue;&#xD;  }&#xD;&#xD;  return cssProperties;&#xD;}&#xD;&#xD;const cssProps = getAllCssProperties(element);&#xD;const out = []&#xD;&#xD;Object.entries(cssProps).forEach(([key, value]) =&gt; {&#xD;  out.push(new List([key, value]));&#xD;});&#xD;&#xD;return new List(out);</l></block><list><block var="element"/></list></block></block></script></block-definition><block-definition s="make %&apos;element&apos; passthrough (to stage most of the time)" type="command" category="HTML" space="true"><header></header><code></code><translations></translations><inputs><input type="%obj" initial="1"></input></inputs><script><block s="doIf"><block s="reportVariadicEquals"><list><block var="element"/><custom-block s="root"></custom-block></list></block><script><custom-block s="set css property %txt of %obj to %txt"><l>pointer-events</l><custom-block s="get %txt of %obj"><l>parent</l><custom-block s="root"></custom-block></custom-block><l>none</l></custom-block></script><list></list></block><custom-block s="set css property %txt of %obj to %txt"><l>pointer-events</l><block var="element"/><l>none</l></custom-block></script></block-definition><block-definition s="call raw api %&apos;element&apos; . %&apos;name&apos; ( %&apos;args&apos; )" type="reporter" category="HTML" space="true"><header></header><code></code><translations></translations><inputs><input type="%obj" initial="1"></input><input type="%txt" initial="1"></input><input type="%mult%s" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>element</l><l>name</l><l>args</l></list><l>if (!(element instanceof Element)) return; // dont do that on non html ELEMENTS&#xD;&#xD;function listToArray(list) {&#xD;    return list.asArray().map((item) =&gt; {&#xD;        return item instanceof List ? listToArray(item) : item;&#xD;    });&#xD;}&#xD;return element[name](...listToArray(args));</l></block><list><block var="element"/><block var="name"/><block var="args"/></list></block></block></script></block-definition><block-definition s="run raw api %&apos;element&apos; . %&apos;name&apos; ( %&apos;args&apos; )" type="command" category="HTML"><header></header><code></code><translations></translations><inputs><input type="%obj" initial="1"></input><input type="%txt" initial="1"></input><input type="%mult%s" initial="1"></input></inputs><script><block s="doReport"><custom-block s="call raw api %obj . %txt ( %mult%s )"><block var="element"/><block var="name"/><block var="args"/></custom-block></block></script></block-definition><block-definition s="get raw var %&apos;element&apos; . %&apos;name&apos;" type="reporter" category="HTML" space="true"><header></header><code></code><translations></translations><inputs><input type="%obj" initial="1"></input><input type="%txt" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>element</l><l>name</l></list><l>if (!(element instanceof Element)) return; // dont do that on non html ELEMENTS&#xD;&#xD;return element[name];</l></block><list><block var="element"/><block var="name"/></list></block></block></script></block-definition><block-definition s="set raw var %&apos;element&apos; . %&apos;name&apos; = %&apos;value&apos;" type="command" category="HTML"><header></header><code></code><translations></translations><inputs><input type="%obj" initial="1"></input><input type="%txt" initial="1"></input><input type="%s" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>element</l><l>name</l><l>value</l></list><l>if (!(element instanceof Element)) return; // dont do that on non html ELEMENTS&#xD;&#xD;element[name] = value;</l></block><list><block var="element"/><block var="name"/><block var="value"/></list></block></block></script></block-definition><block-definition s="get %&apos;type&apos; of %&apos;element&apos;" type="reporter" category="HTML" space="true"><header></header><code></code><translations></translations><inputs><input type="%txt" readonly="true" initial="1">id<options>id&#xD;class&#xD;tag name&#xD;inner html&#xD;outer html&#xD;parent</options></input><input type="%obj" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>type</l><l>element</l></list><l>if (!(element instanceof Element)) return; // dont do that on non html ELEMENTS&#xD;&#xD;if (type == "id") return element.id;&#xD;else if (type == "class") return element.className;&#xD;else if (type == "tag name") return element.tagName.toLowerCase();&#xD;else if (type == "inner html") return element.innerHTML;&#xD;else if (type == "outer html") return element.outerHTML;&#xD;else if (type == "parent") return element.parentNode;&#xD;else return "unknown";</l></block><list><block var="type"/><block var="element"/></list></block></block></script></block-definition><block-definition s="set %&apos;type&apos; of %&apos;element&apos; to %&apos;value&apos;" type="command" category="HTML"><header></header><code></code><translations></translations><inputs><input type="%txt" readonly="true" initial="1">id<options>id&#xD;class&#xD;inner html&#xD;outer html</options></input><input type="%obj" initial="1"></input><input type="%s" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>type</l><l>element</l><l>value</l></list><l>if (!(element instanceof Element)) return; // dont do that on non html ELEMENTS&#xD;&#xD;if (type == "id") element.id = value;&#xD;else if (type == "class") element.className = value;&#xD;else if (type == "inner html") element.innerHTML = value;&#xD;else if (type == "outer html") element.outerHTML = value;</l></block><list><block var="type"/><block var="element"/><block var="value"/></list></block></block></script></block-definition><block-definition s="get element by id %&apos;id&apos;" type="reporter" category="HTML" space="true"><header></header><code></code><translations></translations><inputs><input type="%txt" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>id</l></list><l>return document.querySelector("div#_root").querySelector("#" + id);</l></block><list><block var="id"/></list></block></block></script></block-definition><block-definition s="get element by query selector %&apos;query&apos;" type="reporter" category="HTML"><header></header><code></code><translations></translations><inputs><input type="%txt" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>query</l></list><l>return document.querySelector("div#_root").querySelector(query);</l></block><list><block var="query"/></list></block></block></script></block-definition><block-definition s="get elements by query selector %&apos;query&apos;" type="reporter" category="HTML"><header></header><code></code><translations></translations><inputs><input type="%txt" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>query</l></list><l>return new List(document.querySelector("div#_root").querySelectorAll(query));</l></block><list><block var="query"/></list></block></block></script></block-definition><block-definition s="get elements by class name(s) %&apos;classNames&apos;" type="reporter" category="HTML"><header></header><code></code><translations></translations><inputs><input type="%txt" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>classNames</l></list><l>return new List(document.querySelector("div#_root").getElementsByClassName(classNames));</l></block><list><block var="classNames"/></list></block></block></script></block-definition><block-definition s="get elements by tag name %&apos;tagName&apos;" type="reporter" category="HTML"><header></header><code></code><translations></translations><inputs><input type="%txt" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>tagName</l></list><l>return new List(document.querySelector("div#_root").getElementsByTagName(tagName));</l></block><list><block var="tagName"/></list></block></block></script></block-definition><block-definition s="set attribute %&apos;name&apos; of %&apos;element&apos; to %&apos;value&apos;" type="command" category="HTML" space="true"><header></header><code></code><translations></translations><inputs><input type="%txt" initial="1"></input><input type="%obj" initial="1"></input><input type="%txt" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>element</l><l>value</l><l>name</l></list><l>element.setAttribute(name, value)</l></block><list><block var="element"/><block var="value"/><block var="name"/></list></block></block></script></block-definition><block-definition s="get attribute %&apos;name&apos; of %&apos;element&apos;" type="reporter" category="HTML"><header></header><code></code><translations></translations><inputs><input type="%txt" initial="1"></input><input type="%obj" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>element</l><l>name</l></list><l>return element.getAttribute(name);</l></block><list><block var="element"/><block var="name"/></list></block></block></script></block-definition><block-definition s="set attribute %&apos;name&apos; of %&apos;element&apos; to %&apos;value&apos;" type="command" category="HTML"><header></header><code></code><translations></translations><inputs><input type="%txt" initial="1"></input><input type="%obj" initial="1"></input><input type="%b" initial="1">false</input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>element</l><l>value</l><l>name</l></list><l>if (value) element.setAttribute(name, "true");&#xD;else element.removeAttribute(name);</l></block><list><block var="element"/><block var="value"/><block var="name"/></list></block></block></script></block-definition><block-definition s="get attribute %&apos;name&apos; of %&apos;element&apos; as boolean" type="predicate" category="HTML"><header></header><code></code><translations></translations><inputs><input type="%txt" initial="1"></input><input type="%obj" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>element</l><l>name</l></list><l>return element.getAttribute(name) != null;</l></block><list><block var="element"/><block var="name"/></list></block></block></script></block-definition><block-definition s="does %&apos;element&apos; match query selector %&apos;query&apos; ?" type="predicate" category="HTML" space="true"><header></header><code></code><translations></translations><inputs><input type="%obj" initial="1"></input><input type="%txt" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>element</l><l>query</l></list><l>return element.matches(query);</l></block><list><block var="element"/><block var="query"/></list></block></block></script></block-definition><block-definition s="when %&apos;element&apos; triggers %&apos;event&apos; , run %&apos;code&apos;" type="command" category="HTML" space="true"><header></header><code></code><translations></translations><inputs><input type="%obj" initial="1"></input><input type="%txt" initial="1"></input><input type="%cs" initial="1"></input></inputs><script><block s="doRun"><block s="reportJSFunction"><list><l>element</l><l>event</l><l>code</l></list><l>element.addEventListener(event, function() { invoke(code); });</l></block><list><block var="element"/><block var="event"/><block var="code"/></list></block></script><scripts><script x="103" y="144"><custom-block s="run raw api %obj . %txt ( %mult%s )"><block var="element"/><l>addEventListener</l><list><block var="event"/><block s="reportJSFunction"><list><l></l></list><l>alert("a");</l></block></list></custom-block></script></scripts></block-definition><block-definition s="when %&apos;element&apos; triggers %&apos;event&apos; , run %&apos;e&apos; %&apos;code&apos;" type="command" category="HTML"><header></header><code></code><translations></translations><inputs><input type="%obj" initial="1"></input><input type="%txt" initial="1"></input><input type="%upvar" initial="1"></input><input type="%cs" initial="1"></input></inputs><script><block s="doRun"><block s="reportJSFunction"><list><l>element</l><l>event</l><l>code</l><l>thisObject</l></list><l>element.addEventListener(event, function(e) { thisObject._e = e; invoke(code); });</l></block><list><block var="element"/><block var="event"/><block s="reifyScript"><script><block s="doSetVar"><l>e</l><block s="evaluate"><block s="reportJSFunction"><list><l>thisObject</l></list><l>const e = thisObject._e;&#xD;&#xD;delete thisObject._e;&#xD;console.log(e);&#xD;return e;</l></block><list><block s="reportEnvironment"><l><option>object</option></l></block></list></block></block><block s="fork"><block var="code"/><list></list></block></script><list></list></block><block s="reportEnvironment"><l><option>object</option></l></block></list></block></script></block-definition><block-definition s="get event var %&apos;event&apos; . %&apos;name&apos;" type="reporter" category="HTML" space="true"><header></header><code></code><translations></translations><inputs><input type="%obj" initial="1"></input><input type="%txt" initial="1"></input></inputs><script><block s="doReport"><block s="evaluate"><block s="reportJSFunction"><list><l>event</l><l>name</l></list><l>if (!(event instanceof Event)) return; // dont do that on non events&#xD;&#xD;return event[name];</l></block><list><block var="event"/><block var="name"/></list></block></block></script></block-definition></blocks><primitives></primitives><stage name="Stage" width="480" height="360" costume="0" color="255,255,255,1" tempo="60" threadsafe="false" penlog="false" volume="100" pan="0" lines="round" ternary="false" hyperops="true" codify="false" inheritance="true" sublistIDs="false" id="552"><pentrails>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAFoCAYAAACPNyggAAAOhUlEQVR4Xu3VwQkAAAjEMN1/abewn7jAQRC64wgQIECAAIF3gX1fNEiAAAECBAiMAHsCAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQICLAfIECAAAECgYAAB+gmCRAgQICAAPsBAgQIECAQCAhwgG6SAAECBAgIsB8gQIAAAQKBgAAH6CYJECBAgIAA+wECBAgQIBAICHCAbpIAAQIECAiwHyBAgAABAoGAAAfoJgkQIECAgAD7AQIECBAgEAgIcIBukgABAgQIHLFxAWmhEwHPAAAAAElFTkSuQmCC</pentrails><costumes><list struct="atomic" id="553"></list></costumes><sounds><list struct="atomic" id="554"></list></sounds><variables></variables><blocks></blocks><scripts></scripts><sprites select="1"><sprite name="Sprite" idx="1" x="-167.00000000000068" y="145" heading="90" scale="1" volume="100" pan="0" rotation="1" draggable="true" costume="0" color="80,80,80,1" pen="tip" id="559"><costumes><list struct="atomic" id="560"></list></costumes><sounds><list struct="atomic" id="561"></list></sounds><blocks></blocks><variables></variables><scripts><script x="79" y="10"><block s="receiveGo"></block><custom-block s="initalize HTML"></custom-block><block s="doDeclareVariables"><list><l>button</l></list></block><block s="doSetVar"><l>button</l><custom-block s="create new %txt element"><l>button</l></custom-block></block><custom-block s="set %txt of %obj to %s"><l>inner html</l><block var="button"/><l>Hello</l></custom-block><custom-block s="when %obj triggers %txt , run %upvar %cs"><block var="button"/><l>click</l><l>e</l><script><block s="doSayFor"><block s="reportJoinWords"><list><l>you clicked the button at </l><l>(</l><custom-block s="get event var %obj . %txt"><block var="e"/><l>x</l></custom-block><l>, </l><custom-block s="get event var %obj . %txt"><block var="e"/><l>y</l></custom-block><l>)</l></list></block><l>2</l></block></script></custom-block><custom-block s="append %obj to %obj"><block var="button"/><custom-block s="root"></custom-block></custom-block></script></scripts></sprite></sprites></stage><variables></variables></scene></scenes></project><media name="Snap!HTML" app="Snap! 11.0.4, https://snap.berkeley.edu" version="2"></media></snapdata>