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