Part of MKWS-349, rename the CSS for the Wikipedia widget
[mkws-moved-to-github.git] / 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