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" />
12 <script type="text/javascript">
14 sp_auth_credentials: "mkwstest/mkwstest"
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>
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>
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>
42 <script type="text/javascript" src="mkws-widget-credo.js"></script>
54 background-color: #bbbbbb;
58 flex-direction: column;
64 header button, #note > input {
67 background-color: #4368a1;
71 border: 1px solid #7492c3;
72 padding: 0.15em 0.25em;
74 header button:hover, header button:active, header button:focus {
75 background-color: #2f5591;
77 #top-bar, #current-bar, #note {
81 justify-content: space-between;
84 background-color: #002868;
88 background-color: #54d8a8;
97 background-color: #7de3be;
98 border-color: #7ed6b6;
102 background-color: #F0AD4E;
103 border-color: #EEA236;
107 #maybe:hover, #maybe:active, #maybe:focus {
108 background-color: #EC971F;
109 border-color: #D58512;
112 background-color: #5CB85C;
113 border-color: #4CAE4C;
117 #yes:hover, #yes:focus, #yes:active {
118 background-color: #449D44;
119 border-color: #398439;
122 background-color: #D9534F;
123 border-color: #D43F3A;
127 #no:hover, #no:focus, #no:active {
128 background-color: #C9302C;
129 border-color: #AC2925;
135 #settings, #judiciary {
140 #results, #query-info {
145 justify-content: flex-end;
154 justify-content: center;
164 justify-content: center;
166 #results-table table {
167 border-collapse: collapse;
170 #results-table td, #results-table th {
171 padding: .25em 1.25em;
174 #results-table tr:first-child {
175 border-bottom: 1px solid black;
178 border-bottom: 1px dotted black;
180 #results-table tr:last-child {
193 <button id="widget-markup-button">Widget</button>
194 <button id="mkws-config-button">MKWS config</button>
195 <button id="queries-button">Queries</button>
199 <button id="results-table-button">Table</button>
200 <button id="results-csv-button">| delimited</button>
205 <header id="current-bar">
206 <span id="judiciary">
207 Relevant to query <span id="query"></span>?
208 <button id="yes" class="judgement">Yes</button>
209 <button id="no" class="judgement">No</button>
210 <button id="maybe" class="judgement">Maybe</button>
212 <span id="query-info">
213 <span id="count"></span>
216 Note: <input type="text"></input>
220 <div id="widget-markup" class="dialog" title="Widget markup">
221 <textarea></textarea>
223 <div id="mkws-config" class="dialog" title="MKWS configuration">
224 <textarea></textarea>
226 <div id="queries" class="dialog" title="Queries">
227 <textarea></textarea>
229 <div id="results-csv" class="dialog" title="| delimited results">
230 <textarea readonly></textarea>
232 <div id="results-table" class="dialog" title="Results as table">
237 <div id="test-subject"></div>
241 (function () { // wrapper
243 this.queries = ["sushi", "wurst", "tea", "latte"];
244 this.widgetMarkup = '<div class="mkws-reference" autosearch="{{query}}">Loading..</div>';
245 if (localStorage.getItem('mkwstest-queries')) {
246 this.queries = JSON.parse(localStorage.getItem('mkwstest-queries'));
248 if (localStorage.getItem('mkwstest-widget-markup')) {
249 this.widgetMarkup = localStorage.getItem('mkwstest-widget-markup');
251 if (localStorage.getItem('mkwstest-mkws-config')) {
252 mkws_config = JSON.parse(localStorage.getItem('mkwstest-mkws-config'));
254 $("#queries > textarea").html(this.queries.join("\n"));
255 $("#widget-markup > textarea").html(this.widgetMarkup);
256 $("#mkws-config > textarea").html(JSON.stringify(mkws_config));
257 mkws.setMkwsConfig(mkws_config);
258 mkws.authenticated = false;
259 mkws.authenticating = false;
263 if (localStorage.getItem('mkwstest-results')) {
264 this.results = JSON.parse(localStorage.getItem('mkwstest-results'));
266 if (localStorage.getItem('mkwstest-next') !== null) {
267 next = parseInt(localStorage.getItem('mkwstest-next'));
272 var showNext = function () {
273 if (next < this.queries.length) {
274 $('#note > input').val("");
275 $('#test-subject').html(this.widgetMarkup.replace("{{query}}", this.queries[next]));
276 $('#query').html('"' + this.queries[next] + '"');
277 localStorage.setItem("mkwstest-next", next);
279 $('#count').html(next + " / " + this.queries.length);
280 mkws.init('#test-subject');
282 $("#results-table").dialog("open");
285 var startEval = function () {
286 $(".dialog").dialog("close");
288 context.results = {};
291 var judge = function (e) {
292 var query = $('#test-subject > div').attr('autosearch');
293 context.results[query] = {judgement: $(this).html(), note: $("#note > input").val() || ""};
294 localStorage.setItem("mkwstest-results", JSON.stringify(context.results));
299 $(".dialog").dialog({
304 open: function(event, ui) {
305 $(this).parent().css('position', 'fixed');
310 var updateMarkup = function () {
311 context.widgetMarkup = $("#widget-markup > textarea").val();
312 localStorage.setItem("mkwstest-widget-markup", context.widgetMarkup);
315 $("#widget-markup-button").click(function () {
316 $("#widget-markup").dialog("open");
318 $("#widget-markup").dialog("option", "buttons", [
319 {text: "Start new evaluation", click: updateMarkup},
320 {text: "Cancel", click: function() { $(this).dialog("close"); }}
323 // MKWS config dialog
324 var updateConfig = function () {
325 mkws.setMkwsConfig(JSON.parse($("#mkws-config > textarea").val()));
326 mkws.authenticated = false;
327 mkws.authenticating = false;
328 localStorage.setItem("mkwstest-mkws-config", $("#mkws-config > textarea").val());
331 $("#mkws-config-button").click(function () {
332 $("#mkws-config").dialog("open");
334 $("#mkws-config").dialog("option", "buttons", [
335 {text: "Start new evaluation", click: updateConfig},
336 {text: "Cancel", click: function() { $(this).dialog("close"); }}
340 var updateQueries = function () {
341 context.queries = $("#queries > textarea").val().split("\n");
342 // ignore empty query values
343 context.queries = $.grep(context.queries, function (query, index) { return query.match(/^\s*\S+/) } );
344 localStorage.setItem("mkwstest-queries", JSON.stringify(context.queries));
347 $("#queries-button").click(function () {
348 $("#queries").dialog("open");
350 $("#queries").dialog("option", "buttons", [
351 {text: "Start new evaluation", click: updateQueries},
352 {text: "Cancel", click: function() { $(this).dialog("close"); }}
356 $("#results-table-button").click(function () {
357 $("#results-table").dialog("open");
359 $("#results-csv-button").click(function () {
360 $("#results-csv").dialog("open");
362 $("#results-table").dialog("option", "open", function () {
363 var html = "<tr><th>Query</th><th>Relevant?</th><th>Note</th><tr>";
364 for (var i = 0; i < context.queries.length; i++) {
365 var q = context.queries[i];
366 var r = context.results;
368 html += "<tr><td>" + q + "</td><td>" + r[q].judgement + "</td><td>" + r[q].note + "</td></tr>\n";
371 $("#results-table > table").html(html);
373 $("#results-csv").dialog("option", "open", function () {
374 var csv = "Query|Relevant?|Note\n";
375 for (var i = 0; i < context.queries.length; i++) {
376 var q = context.queries[i];
377 var r = context.results;
379 csv += [q, r[q].judgement, r[q].note].join("|") + "\n";
382 $("#results-csv > textarea").html(csv);
385 $('button.judgement').click(judge);