diff --git a/asterix-examples/src/main/resources/tiny-social/tinysocial.html b/asterix-examples/src/main/resources/tiny-social/tinysocial.html
index 9002267..104f19c 100644
--- a/asterix-examples/src/main/resources/tiny-social/tinysocial.html
+++ b/asterix-examples/src/main/resources/tiny-social/tinysocial.html
@@ -7,15 +7,23 @@
     <style>
         .pretty-printed {
             background-color: #eeeeee;
+            margin-bottom: 1em;
+        }
+
+        .how-to-run {
+            background-color: #c8c8c8;
+            margin-bottom: 1em;
         }
 
         body {
             font-family : "Helvetica";
+            margin-bottom: 1em;
         }
     </style>
 
     <script src="../js/jquery.min.js"></script>
     <script src="../core/js/easyXDM/easyXDM.debug.js"></script>
+    <script src="http://localhost:19101/sdk/static/js/asterix-api-core.js"></script>
     <script src="js/tinysocial.js"></script>
 </head>
 <body>
@@ -32,9 +40,13 @@
             return $user;<br/>
         </div>
 
-        <button>Run #0-A</button>
-    </div>
+        <div class="how-to-run">
+            javascript here
+        </div>
 
+        <button id="run0a">Run #0-A</button>
+    </div>
+    <hr/>
     <h2>Query 0-B - Range Scan</h2>
     <div class="sample-query">
         
@@ -46,8 +58,12 @@
             return $user;<br/>
         </div>
         
-        <button>Run #0-B</button>
+        <div class="how-to-run">
+        </div>
+
+        <button id="run0b">Run #0-B</button>
     </div>
+    <hr/>
 
     <h2>Query 1 - Other Query Filters</h2>
     <div class="sample-query">
@@ -60,103 +76,151 @@
             return $user;<br/>
         </div>
         
-        <button>Run #1</button>
+        <div class="how-to-run">
+        </div>
+
+        <button id="run1">Run #1</button>
     </div>
+    <hr/>
 
     <h2>Query 2-A - Equijoin</h2>
     <div class="sample-query">
         <div class="pretty-printed">
         </div>
         
-        <button>Run #2-A</button>
+        <button id="run2a">Run #2-A</button>
     </div>
+    <hr/>
 
     <h2>Query 2-B - Index join</h2>
     <div class="sample-query">
         <div class="pretty-printed">
         </div>
         
-        <button>Run #2-B</button>
+        <div class="how-to-run">
+        </div>
+
+        <button id="run2b">Run #2-B</button>
     </div>
+    <hr/>
 
     <h2>Query 3 - Nested Outer Join</h2>
     <div class="sample-query">
         <div class="pretty-printed">
         </div>
         
-        <button>Run #3</button>
+        <div class="how-to-run">
+        </div>
+
+        <button id="run3">Run #3</button>
     </div>
+    <hr/>
 
     <h2>Query 4 - Theta Join</h2>
     <div class="sample-query">
         <div class="pretty-printed">
         </div>
         
-        <button>Run #4</button>
+        <div class="how-to-run">
+        </div>
+
+        <button id="run4">Run #4</button>
     </div>
+    <hr/>
 
     <h2>Query 5 - Fuzzy Join</h2>
     <div class="sample-query">
         <div class="pretty-printed">
         </div>
         
-        <button>Run #5</button>
+        <div class="how-to-run">
+        </div>
+
+        <button id="run5">Run #5</button>
     </div>
+    <hr/>
 
     <h2>Query 6 - Existential Quantification</h2>
     <div class="sample-query">
         <div class="pretty-printed">
         </div>
         
-        <button>Run #6</button>
+        <div class="how-to-run">
+        </div>
+
+        <button id="run6">Run #6</button>
     </div>
+    <hr/>
 
     <h2>Query 7 - Universal Quantification</h2>
     <div class="sample-query">
         <div class="pretty-printed">
         </div>
         
-        <button>Run #7</button>
+        <div class="how-to-run">
+        </div>
+
+        <button id="run7">Run #7</button>
     </div>
+    <hr/>
 
     <h2>Query 8 - Simple Aggregation</h2>
     <div class="sample-query">
         <div class="pretty-printed">
         </div>
         
-        <button>Run #8</button>
+        <div class="how-to-run">
+        </div>
+
+        <button id="run8">Run #8</button>
     </div>
+    <hr/>
 
     <h2>Query 9-A - Grouping and Aggregation</h2>
     <div class="sample-query">
         <div class="pretty-printed">
         </div>
         
-        <button>Run #9-A</button>
+        <div class="how-to-run">
+        </div>
+
+        <button id="run9a">Run #9-A</button>
     </div>
+    <hr/>
 
     <h2>Query 9-B - (Hash-Based) Grouping and Aggregation</h2>
     <div class="sample-query">
         <div class="pretty-printed">
         </div>
         
-        <button>Run #9-B</button>
+        <div class="how-to-run">
+        </div>
+
+        <button id="run9b">Run #9-B</button>
     </div>
+    <hr/>
 
     <h2>Query 10 - Grouping and Limits</h2>
     <div class="sample-query">
         <div class="pretty-printed">
         </div>
         
-        <button>Run #10</button>
+        <div class="how-to-run">
+        </div>
+
+        <button id="run10">Run #10</button>
     </div>
+    <hr/>
 
     <h2>Query 11 - Left Outer Fuzzy Join</h2>
     <div class="sample-query">
         <div class="pretty-printed">
         </div>
         
-        <button>Run #11</button>
+        <div class="how-to-run">
+        </div>
+
+        <button id="run11">Run #11</button>
     </div>
 
 </body>