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