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