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" />
13 <script type="text/javascript">
15 sp_auth_credentials: "mkwstest/mkwstest"
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>
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>
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>
43 <script type="text/javascript" src="mkws-widget-credo.js"></script>
44 <script type="text/javascript" src="mkws-widget-ru.js"></script>
56 background-color: #888892;
60 flex-direction: column;
67 background-color: #002868;
72 justify-content: space-between;
77 background-color: #4368a1;
81 border: 1px solid #7492c3;
82 padding: 0.1em 0.15em;
84 header button:hover, header button:active, header button:focus {
85 background-color: #2f5591;
88 background-color: #F0AD4E;
89 border-color: #EEA236;
93 #maybe:hover, #maybe:active, #maybe:focus {
94 background-color: #EC971F;
95 border-color: #D58512;
98 background-color: #5CB85C;
99 border-color: #4CAE4C;
103 #yes:hover, #yes:focus, #yes:active {
104 background-color: #449D44;
105 border-color: #398439;
108 background-color: #D9534F;
109 border-color: #D43F3A;
113 #no:hover, #no:focus, #no:active {
114 background-color: #C9302C;
115 border-color: #AC2925;
118 background-color: #54d8a8;
136 justify-content: flex-end;
142 justify-content: center;
154 <button id="widget-markup-button">Widget</button>
155 <button id="queries-button">Queries</button>
159 <button id="results-table-button">Table</button>
160 <button id="results-csv-button">| delimited</button>
165 <header id="current-bar">
166 Relevant to query <span id="query"></span>?
167 <button id="yes" class="judgement">Yes</button>
168 <button id="no" class="judgement">No</button>
169 <button id="maybe" class="judgement">Maybe</button>
172 <div id="widget-markup" class="dialog" title="Widget markup">
173 <textarea></textarea>
175 <div id="queries" class="dialog" title="Queries">
176 <textarea></textarea>
178 <div id="results-csv" class="dialog" title="| delimited results">
179 <textarea readonly></textarea>
181 <div id="results-table" class="dialog" title="Results as table">
186 <div id="test-subject"></div>
190 (function () { // wrapper
192 this.queries = ["sushi", "wurst", "berlin", "hammer", "bristol", "copenhagen", "tea", "latte"];
193 $("#queries > textarea").html(this.queries.join("\n"));
194 this.widgetMarkup = '<div class="mkws-reference" autosearch="{{query}}">Loading..</div>';
195 $("#widget-markup > textarea").html(this.widgetMarkup);
201 var showNext = function () {
202 if (next < this.queries.length) {
203 $('#test-subject').html(this.widgetMarkup.replace("{{query}}", this.queries[next]));
204 $('#query').html('"' + this.queries[next] + '"');
206 mkws.init('#test-subject');
209 var startEval = function () {
210 $(".dialog").dialog("close");
212 context.results = {};
215 var judge = function (e) {
216 var query = $('#test-subject > div').attr('autosearch');
217 context.results[query] = {judgement: $(this).html()};
222 $(".dialog").dialog({
227 open: function(event, ui) {
228 $(this).parent().css('position', 'fixed');
233 var updateMarkup = function () {
234 context.widgetMarkup = $("#widget-markup > textarea").val();
237 $("#widget-markup-button").click(function () {
238 $("#widget-markup").dialog("open");
240 $("#widget-markup").dialog("option", "buttons", [
241 {text: "Start new evaluation", click: updateMarkup},
242 {text: "Cancel", click: function() { $(this).dialog("close"); }}
246 var updateQueries = function () {
247 context.queries = $("#queries > textarea").val().split("\n");
250 $("#queries-button").click(function () {
251 $("#queries").dialog("open");
253 $("#queries").dialog("option", "buttons", [
254 {text: "Start new evaluation", click: updateQueries},
255 {text: "Cancel", click: function() { $(this).dialog("close"); }}
259 $("#results-table-button").click(function () {
260 $("#results-table").dialog("open");
262 $("#results-csv-button").click(function () {
263 $("#results-csv").dialog("open");
265 $("#results-table").dialog("option", "open", function () {
266 var html = "<tr><th>Query</th><th>Relevant?</th><tr>";
267 for (var i = 0; i < context.queries.length; i++) {
268 var q = context.queries[i];
269 var r = context.results;
271 html += "<tr><td>" + q + "</td><td>" + r[q].judgement + "</td></tr>\n";
274 $("#results-table > table").html(html);
276 $("#results-csv").dialog("option", "open", function () {
277 var csv = "Query|Relevant?\n";
278 for (var i = 0; i < context.queries.length; i++) {
279 var q = context.queries[i];
280 var r = context.results;
282 csv += [q, r[q].judgement].join("|") + "\n";
285 $("#results-csv > textarea").html(csv);
288 $('button.judgement').click(judge);