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 </style>
  52
  53 </head>
  54
  55 <body>
  56 Relevant to query <span id="query"></span>?
  57 <button id="yes" class="judgement">Yes</button>
  58 <button id="no" class="judgement">No</button>
  59 <button id="maybe" class="judgement">Maybe</button>
  60 Settings:
  61 <button id="widget-markup-button">Widget</button>
  62 <button id="queries-button">Queries</button>
  63 Results:
  64 <button id="results-table-button">Table</button>
  65 <button id="results-csv-button">CSV</button>
  66
  67 <div id="widget-markup" class="dialog" title="Widget markup">
  68   <textarea></textarea>
  69 </div>
  70 <div id="queries" class="dialog" title="Queries">
  71   <textarea></textarea>
  72 </div>
  73 <div id="results-csv" class="dialog" title="| delimited results">
  74   <textarea readonly></textarea>
  75 </div>
  76 <div id="results-table" class="dialog" title="Results as table">
  77   <table></table>
  78 </div>
  79
  80 <hr>
  81
  82 <div id="test-subject"></div>
  83
  84 <script>
  85 (function () { // wrapper
  86 // Initial data
  87 this.queries = ["sushi", "wurst", "berlin", "hammer", "bristol", "copenhagen", "tea", "latte"];
  88 $("#queries > textarea").html(this.queries.join("\n"));
  89 this.widgetMarkup = '<div class="mkws-reference" autosearch="{{query}}">Loading..</div>';
  90 $("#widget-markup > textarea").html(this.widgetMarkup);
  91
  92 this.results = {};
  93 var next;
  94 var context = this;
  95
  96 var showNext = function () {
  97   if (next <  this.queries.length) {
  98     $('#test-subject').html(this.widgetMarkup.replace("{{query}}", this.queries[next]));
  99     $('#query').html('"' + this.queries[next] + '"');
 100     next++;
 101     mkws.init('#test-subject');
 102   }
 103 }
 104 var startEval = function () {
 105   $(".dialog").dialog("close");
 106   next = 0;
 107   context.results = {};
 108   showNext();
 109 }
 110 var judge = function (e) {
 111   var query = $('#test-subject > div').attr('autosearch');
 112   context.results[query] = {judgement: $(this).html()};
 113   showNext();
 114 }
 115
 116 // Set up dialogs
 117 $(".dialog").dialog({
 118   autoOpen: false,
 119   height: 600,
 120   width: 600,
 121   modal: true,
 122   open: function(event, ui) {
 123     $(this).parent().css('position', 'fixed');
 124   }
 125 });
 126
 127 // Markup dialog
 128 var updateMarkup = function () {
 129   context.widgetMarkup = $("#widget-markup > textarea").val();
 130   startEval();
 131 }
 132 $("#widget-markup-button").click(function () {
 133   $("#widget-markup").dialog("open");
 134 });
 135 $("#widget-markup").dialog("option", "buttons", [
 136   {text: "Start new evaluation", click: updateMarkup},
 137   {text: "Cancel", click: function() { $(this).dialog("close"); }}
 138 ]);
 139
 140 // Queries dialog
 141 var updateQueries = function () {
 142   context.queries = $("#queries > textarea").val().split("\n");
 143   startEval();
 144 }
 145 $("#queries-button").click(function () {
 146   $("#queries").dialog("open");
 147 });
 148 $("#queries").dialog("option", "buttons", [
 149   {text: "Start new evaluation", click: updateQueries},
 150   {text: "Cancel", click: function() { $(this).dialog("close"); }}
 151 ]);
 152
 153 // Results dialogs
 154 $("#results-table-button").click(function () {
 155   $("#results-table").dialog("open");
 156 });
 157 $("#results-csv-button").click(function () {
 158   $("#results-csv").dialog("open");
 159 });
 160 $("#results-table").dialog("option", "open", function () {
 161   var html = "<tr><th>Query</th><th>Relevant?</th><tr>";
 162   for (var i = 0; i < context.queries.length; i++) {
 163     var q = context.queries[i];
 164     var r = context.results;
 165     if (r[q]) {
 166       html += "<tr><td>" + q + "</td><td>" + r[q].judgement + "</td></tr>\n";
 167     }
 168   }
 169   $("#results-table > table").html(html);
 170 });
 171 $("#results-csv").dialog("option", "open", function () {
 172   var csv = "Query|Relevant?\n";
 173   for (var i = 0; i < context.queries.length; i++) {
 174     var q = context.queries[i];
 175     var r = context.results;
 176     if (r[q]) {
 177       csv += [q, r[q].judgement].join("|") + "\n";
 178     }
 179   }
 180   $("#results-csv > textarea").html(csv);
 181 });
 182
 183 $('button.judgement').click(judge);
 184 startEval();
 185 })();// wrapper
 186 </script>
 187
 188 </body>
 189 </html>
 190