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