examples/htdocs/tester.html

   1 <!doctype html>
   2 <html>
   3
   4 <head>
   5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6 <title>MKWS demo: Reference & Credo, and popup widget, development</title>
   7 <link rel="stylesheet" type="text/css" href="tools/htdocs/mkws.css" />
   8 <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
   9 <link rel="stylesheet" type="text/css" href="mkws-widget-reference.css" />
  10 <link rel="stylesheet" type="text/css" href="mkws-widget-credo.css" />
  11 <link rel="stylesheet" type="text/css" href="mkws-widget-ru.css" />
  12
  13 <script type="text/javascript">
  14   var mkws_config = {
  15     sp_auth_credentials: "mkwstest/mkwstest"
  16   };
  17 </script>
  18
  19 <script type="text/javascript" src="tools/htdocs/jquery-1.10.0.min.js"></script>
  20 <script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
  21
  22 <script type="text/javascript" src="tools/htdocs/pz2.js"></script>
  23 <script type="text/javascript" src="tools/htdocs/handlebars-v2.0.0.js"></script>
  24 <script type="text/javascript" src="tools/htdocs/jquery.json-2.4.js"></script>
  25 <script type="text/javascript" src="tools/htdocs/jsnlog.min.js"></script>
  26
  27 <script type="text/javascript" src="src/mkws-handlebars.js"></script>
  28 <script type="text/javascript" src="src/mkws-core.js"></script>
  29 <script type="text/javascript" src="src/mkws-team.js"></script>
  30 <script type="text/javascript" src="src/mkws-filter.js"></script>
  31 <script type="text/javascript" src="src/mkws-widget.js"></script>
  32 <script type="text/javascript" src="src/mkws-widget-main.js"></script>
  33 <script type="text/javascript" src="src/mkws-widget-facets.js"></script>
  34 <script type="text/javascript" src="src/mkws-widget-authname.js"></script>
  35 <script type="text/javascript" src="src/mkws-widget-categories.js"></script>
  36 <script type="text/javascript" src="src/mkws-widget-log.js"></script>
  37 <script type="text/javascript" src="src/mkws-widget-record.js"></script>
  38 <script type="text/javascript" src="src/mkws-widget-reference.js"></script>
  39 <script type="text/javascript" src="src/mkws-widget-builder.js"></script>
  40 <script type="text/javascript" src="src/mkws-templates.js"></script>
  41 <script type="text/javascript" src="src/mkws-popup.js"></script>
  42
  43 <script type="text/javascript" src="mkws-widget-credo.js"></script>
  44 <script type="text/javascript" src="mkws-widget-ru.js"></script>
  45
  46 <style>
  47 .dialog > textarea {
  48   height: 100%;
  49   width: 100%;
  50 }
  51 html {
  52   margin: 0;
  53   height: 100%;
  54 }
  55 body {
  56   background-color: #888892;
  57   margin: 0;
  58   padding: 0;
  59   display: flex;
  60   flex-direction: column;
  61   height: 100%;
  62 }
  63 header {
  64   font-size: 1.3em;
  65 }
  66 #top-bar {
  67   background-color: #002868;
  68   color: white;
  69   padding: .5em;
  70   display: flex;
  71   align-items: center;
  72   justify-content: space-between;
  73 }
  74 header button {
  75   margin-left: 1em;
  76   border-radius: 4px;
  77   background-color: #4368a1;
  78   color: #dbe9ff;
  79   font: inherit;
  80   font-weight: normal;
  81   border: 1px solid #7492c3;
  82   padding: 0.1em 0.15em;
  83 }
  84 header button:hover, header button:active, header button:focus {
  85   background-color: #2f5591;
  86 }
  87 #maybe {
  88   background-color: #F0AD4E;
  89   border-color: #EEA236;
  90   color: #664009;
  91   color: white;
  92 }
  93 #maybe:hover, #maybe:active, #maybe:focus {
  94   background-color: #EC971F;
  95   border-color: #D58512;
  96 }
  97 #yes {
  98   background-color: #5CB85C;
  99   border-color: #4CAE4C;
 100   color: #214d21;
 101   color: white;
 102 }
 103 #yes:hover, #yes:focus, #yes:active {
 104   background-color: #449D44;
 105   border-color: #398439;
 106 }
 107 #no {
 108   background-color: #D9534F;
 109   border-color: #D43F3A;
 110   color: #4f1311;
 111   color: white;
 112 }
 113 #no:hover, #no:focus, #no:active {
 114   background-color: #C9302C;
 115   border-color: #AC2925;
 116 }
 117 #current-bar {
 118   background-color: #54d8a8;
 119   color: #002868;
 120   padding: .5em;
 121 }
 122 #query {
 123   font-weight: bold;
 124   font-size: 110%;
 125 }
 126 #settings {
 127   flex: 1;
 128   display: flex;
 129   align-items: center;
 130 }
 131 #results {
 132   flex: 1;
 133   display: flex;
 134   text-align: right;
 135   align-items: center;
 136   justify-content: flex-end;
 137 }
 138 #test-area {
 139   flex: 1;
 140   padding: 1em;
 141   display: flex;
 142   justify-content: center;
 143   align-items: center;
 144 }
 145 </style>
 146
 147 </head>
 148
 149 <body>
 150 <header>
 151   <div id="top-bar">
 152     <span id="settings">
 153       Settings:
 154       <button id="widget-markup-button">Widget</button>
 155       <button id="queries-button">Queries</button>
 156     </span>
 157     <span id="results">
 158       Results:
 159       <button id="results-table-button">Table</button>
 160       <button id="results-csv-button">| delimited</button>
 161     </span>
 162   </div>
 163 </header>
 164
 165 <header id="current-bar">
 166   Relevant to query <span id="query"></span>?
 167   <button id="yes" class="judgement">Yes</button>
 168   <button id="no" class="judgement">No</button>
 169   <button id="maybe" class="judgement">Maybe</button>
 170 </header>
 171
 172 <div id="widget-markup" class="dialog" title="Widget markup">
 173   <textarea></textarea>
 174 </div>
 175 <div id="queries" class="dialog" title="Queries">
 176   <textarea></textarea>
 177 </div>
 178 <div id="results-csv" class="dialog" title="| delimited results">
 179   <textarea readonly></textarea>
 180 </div>
 181 <div id="results-table" class="dialog" title="Results as table">
 182   <table></table>
 183 </div>
 184
 185 <div id="test-area">
 186   <div id="test-subject"></div>
 187 </div>
 188
 189 <script>
 190 (function () { // wrapper
 191 // Initial data
 192 this.queries = ["sushi", "wurst", "berlin", "hammer", "bristol", "copenhagen", "tea", "latte"];
 193 $("#queries > textarea").html(this.queries.join("\n"));
 194 this.widgetMarkup = '<div class="mkws-reference" autosearch="{{query}}">Loading..</div>';
 195 $("#widget-markup > textarea").html(this.widgetMarkup);
 196
 197 this.results = {};
 198 var next;
 199 var context = this;
 200
 201 var showNext = function () {
 202   if (next <  this.queries.length) {
 203     $('#test-subject').html(this.widgetMarkup.replace("{{query}}", this.queries[next]));
 204     $('#query').html('"' + this.queries[next] + '"');
 205     next++;
 206     mkws.init('#test-subject');
 207   }
 208 }
 209 var startEval = function () {
 210   $(".dialog").dialog("close");
 211   next = 0;
 212   context.results = {};
 213   showNext();
 214 }
 215 var judge = function (e) {
 216   var query = $('#test-subject > div').attr('autosearch');
 217   context.results[query] = {judgement: $(this).html()};
 218   showNext();
 219 }
 220
 221 // Set up dialogs
 222 $(".dialog").dialog({
 223   autoOpen: false,
 224   height: 600,
 225   width: 600,
 226   modal: true,
 227   open: function(event, ui) {
 228     $(this).parent().css('position', 'fixed');
 229   }
 230 });
 231
 232 // Markup dialog
 233 var updateMarkup = function () {
 234   context.widgetMarkup = $("#widget-markup > textarea").val();
 235   startEval();
 236 }
 237 $("#widget-markup-button").click(function () {
 238   $("#widget-markup").dialog("open");
 239 });
 240 $("#widget-markup").dialog("option", "buttons", [
 241   {text: "Start new evaluation", click: updateMarkup},
 242   {text: "Cancel", click: function() { $(this).dialog("close"); }}
 243 ]);
 244
 245 // Queries dialog
 246 var updateQueries = function () {
 247   context.queries = $("#queries > textarea").val().split("\n");
 248   startEval();
 249 }
 250 $("#queries-button").click(function () {
 251   $("#queries").dialog("open");
 252 });
 253 $("#queries").dialog("option", "buttons", [
 254   {text: "Start new evaluation", click: updateQueries},
 255   {text: "Cancel", click: function() { $(this).dialog("close"); }}
 256 ]);
 257
 258 // Results dialogs
 259 $("#results-table-button").click(function () {
 260   $("#results-table").dialog("open");
 261 });
 262 $("#results-csv-button").click(function () {
 263   $("#results-csv").dialog("open");
 264 });
 265 $("#results-table").dialog("option", "open", function () {
 266   var html = "<tr><th>Query</th><th>Relevant?</th><tr>";
 267   for (var i = 0; i < context.queries.length; i++) {
 268     var q = context.queries[i];
 269     var r = context.results;
 270     if (r[q]) {
 271       html += "<tr><td>" + q + "</td><td>" + r[q].judgement + "</td></tr>\n";
 272     }
 273   }
 274   $("#results-table > table").html(html);
 275 });
 276 $("#results-csv").dialog("option", "open", function () {
 277   var csv = "Query|Relevant?\n";
 278   for (var i = 0; i < context.queries.length; i++) {
 279     var q = context.queries[i];
 280     var r = context.results;
 281     if (r[q]) {
 282       csv += [q, r[q].judgement].join("|") + "\n";
 283     }
 284   }
 285   $("#results-csv > textarea").html(csv);
 286 });
 287
 288 $('button.judgement').click(judge);
 289 startEval();
 290 })();// wrapper
 291 </script>
 292
 293 </body>
 294 </html>
 295