1 | // Copyright 2012 Georg-August-Universität Göttingen, Germany |
---|
2 | // |
---|
3 | // Licensed under the Apache License, Version 2.0 (the "License"); |
---|
4 | // you may not use this file except in compliance with the License. |
---|
5 | // You may obtain a copy of the License at |
---|
6 | // |
---|
7 | // http://www.apache.org/licenses/LICENSE-2.0 |
---|
8 | // |
---|
9 | // Unless required by applicable law or agreed to in writing, software |
---|
10 | // distributed under the License is distributed on an "AS IS" BASIS, |
---|
11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
---|
12 | // See the License for the specific language governing permissions and |
---|
13 | // limitations under the License. |
---|
14 | |
---|
15 | /** |
---|
16 | * AutoQUEST - HTML Monitor |
---|
17 | * |
---|
18 | * Description: This script records the interactions done by an user on an |
---|
19 | * HTML-Website and sends them to a server. It does not register actions on |
---|
20 | * Flash, Java, or other special inputs. This script is tested on Firefox |
---|
21 | * 15.0.1. |
---|
22 | * |
---|
23 | * To insert it on your HTML-side, you need to write <script |
---|
24 | * language="JavaScript" type="text/javascript" src="autoquest-htmlmonitor.js"></script> in the |
---|
25 | * head and change the src-attribute to the location, you have chosen for this |
---|
26 | * script. |
---|
27 | * |
---|
28 | * To change the recorded events, edit the action config array. If you want to change |
---|
29 | * the server where the data is send to, rewrite the destination variable. The |
---|
30 | * records are send to the server, JSON-formatted, if there are 10 inputs or the |
---|
31 | * user changes/closes the site. |
---|
32 | * |
---|
33 | * Authors: Simon Leidenbach, Simon Reuss, Patrick Harms |
---|
34 | * |
---|
35 | * Version: 0.1 |
---|
36 | */ |
---|
37 | |
---|
38 | /** |
---|
39 | * the server to send the recorded data to |
---|
40 | */ |
---|
41 | var autoquestDestination; |
---|
42 | |
---|
43 | /** |
---|
44 | * an ID that is more or less unique for the client |
---|
45 | */ |
---|
46 | var autoquestClientId; |
---|
47 | |
---|
48 | /** |
---|
49 | * the maximum number of recorded events to be put into one package sent to the server |
---|
50 | */ |
---|
51 | var autoquestPackageSize = 10; |
---|
52 | |
---|
53 | /** |
---|
54 | * this variable defines the tags for which event handling shall be added, as well as the |
---|
55 | * event handling action to be monitored |
---|
56 | */ |
---|
57 | var autoquestActionConfig = [ |
---|
58 | { "tag": "a", "actions": [ "onclick", |
---|
59 | "onfocus" ] }, |
---|
60 | //{ "tag": "abbr", "actions": [ ] }, |
---|
61 | //{ "tag": "address", "actions": [ ] }, |
---|
62 | //{ "tag": "applet", "actions": [ ] }, |
---|
63 | { "tag": "area", "actions": [ "onclick", |
---|
64 | "onfocus" ] }, |
---|
65 | //{ "tag": "article", "actions": [ ] }, |
---|
66 | //{ "tag": "aside", "actions": [ ] }, |
---|
67 | { "tag": "audio", "actions": [ "onplaying", |
---|
68 | "onpause", |
---|
69 | "ontimeupdate" ] }, |
---|
70 | { "tag": "b", "actions": [ "onclick" ] }, |
---|
71 | //{ "tag": "bdi", "actions": [ ] }, |
---|
72 | //{ "tag": "bdo", "actions": [ ] }, |
---|
73 | //{ "tag": "blockquote", "actions": [ ] }, |
---|
74 | { "tag": "body", "actions": [ "onclick", |
---|
75 | "onkeydown", |
---|
76 | "onpagehide", |
---|
77 | "onpageshow", |
---|
78 | "onscroll", |
---|
79 | "onundo" ] }, |
---|
80 | { "tag": "button", "actions": [ "onclick", |
---|
81 | "onfocus" ] }, |
---|
82 | { "tag": "canvas", "actions": [ "onclick" ] }, |
---|
83 | //{ "tag": "caption", "actions": [ ] }, |
---|
84 | { "tag": "cite", "actions": [ "onclick" ] }, |
---|
85 | { "tag": "code", "actions": [ "onclick" ] }, |
---|
86 | //{ "tag": "col", "actions": [ ] }, |
---|
87 | //{ "tag": "colgroup", "actions": [ ] }, |
---|
88 | { "tag": "command", "actions": [ "onclick", |
---|
89 | "onfocus" ] }, |
---|
90 | //{ "tag": "datalist", "actions": [ ] }, |
---|
91 | { "tag": "dd", "actions": [ "onclick" ] }, |
---|
92 | { "tag": "del", "actions": [ "onclick" ] }, |
---|
93 | //{ "tag": "details", "actions": [ ] }, |
---|
94 | { "tag": "dfn", "actions": [ "onclick" ] }, |
---|
95 | { "tag": "div", "actions": [ "onclick", |
---|
96 | "onscroll" ] }, |
---|
97 | //{ "tag": "dl", "actions": [ ] }, |
---|
98 | { "tag": "dt", "actions": [ "onclick" ] }, |
---|
99 | { "tag": "em", "actions": [ "onclick" ] }, |
---|
100 | { "tag": "embed", "actions": [ "onclick" ] }, |
---|
101 | //{ "tag": "fieldset", "actions": [ ] }, |
---|
102 | //{ "tag": "figcaption", "actions": [ ] }, |
---|
103 | //{ "tag": "figure", "actions": [ ] }, |
---|
104 | //{ "tag": "footer", "actions": [ ] }, |
---|
105 | { "tag": "form", "actions": [ "onreset", |
---|
106 | "onsubmit" ] }, |
---|
107 | //{ "tag": "header", "actions": [ ] }, |
---|
108 | //{ "tag": "hgroup", "actions": [ ] }, |
---|
109 | { "tag": "h1", "actions": [ "onclick" ] }, |
---|
110 | { "tag": "h2", "actions": [ "onclick" ] }, |
---|
111 | { "tag": "h3", "actions": [ "onclick" ] }, |
---|
112 | { "tag": "h4", "actions": [ "onclick" ] }, |
---|
113 | { "tag": "h5", "actions": [ "onclick" ] }, |
---|
114 | { "tag": "h6", "actions": [ "onclick" ] }, |
---|
115 | //{ "tag": "hr", "actions": [ ] }, |
---|
116 | { "tag": "i", "actions": [ "onclick" ] }, |
---|
117 | //{ "tag": "iframe", "actions": [ ] }, |
---|
118 | { "tag": "img", "actions": [ "onabort", |
---|
119 | "onclick" ] }, |
---|
120 | { "tag": "input_button", "actions": [ "onclick", |
---|
121 | "onfocus" ] }, |
---|
122 | { "tag": "input_checkbox", "actions": [ "onchange", |
---|
123 | "onclick", |
---|
124 | "onfocus" ] }, |
---|
125 | { "tag": "input_color", "actions": [ "onchange", |
---|
126 | "onclick", |
---|
127 | "onfocus", |
---|
128 | "onselect" ] }, |
---|
129 | { "tag": "input_date", "actions": [ "onchange", |
---|
130 | "onclick", |
---|
131 | "onfocus", |
---|
132 | "onselect" ] }, |
---|
133 | { "tag": "input_datetime", "actions": [ "onchange", |
---|
134 | "onclick", |
---|
135 | "onfocus", |
---|
136 | "onselect" ] }, |
---|
137 | { "tag": "input_datetime-local", "actions": [ "onchange", |
---|
138 | "onclick", |
---|
139 | "onfocus", |
---|
140 | "onselect" ] }, |
---|
141 | { "tag": "input_email", "actions": [ "onchange", |
---|
142 | "onclick", |
---|
143 | "onfocus", |
---|
144 | "onselect" ] }, |
---|
145 | { "tag": "input_file", "actions": [ "onchange", |
---|
146 | "onclick", |
---|
147 | "onfocus", |
---|
148 | "onselect" ] }, |
---|
149 | { "tag": "input_image", "actions": [ "onclick", |
---|
150 | "onfocus" ] }, |
---|
151 | { "tag": "input_month", "actions": [ "onchange", |
---|
152 | "onclick", |
---|
153 | "onfocus", |
---|
154 | "onselect" ] }, |
---|
155 | { "tag": "input_number", "actions": [ "onchange", |
---|
156 | "onclick", |
---|
157 | "onfocus", |
---|
158 | "onselect" ] }, |
---|
159 | { "tag": "input_password", "actions": [ "onchange", |
---|
160 | "onclick", |
---|
161 | "onfocus" ] }, |
---|
162 | { "tag": "input_radio", "actions": [ "onchange", |
---|
163 | "onclick", |
---|
164 | "onfocus" ] }, |
---|
165 | { "tag": "input_range", "actions": [ "onchange", |
---|
166 | "onclick", |
---|
167 | "onfocus", |
---|
168 | "onselect" ] }, |
---|
169 | { "tag": "input_reset", "actions": [ "onclick", |
---|
170 | "onfocus" ] }, |
---|
171 | { "tag": "input_search", "actions": [ "onchange", |
---|
172 | "onclick", |
---|
173 | "onfocus", |
---|
174 | "onselect" ] }, |
---|
175 | { "tag": "input_submit", "actions": [ "onclick", |
---|
176 | "onfocus" ] }, |
---|
177 | { "tag": "input_tel", "actions": [ "onchange", |
---|
178 | "onclick", |
---|
179 | "onfocus", |
---|
180 | "onselect" ] }, |
---|
181 | { "tag": "input_text", "actions": [ "onchange", |
---|
182 | "onclick", |
---|
183 | "onfocus", |
---|
184 | "onselect" ] }, |
---|
185 | { "tag": "input_time", "actions": [ "onchange", |
---|
186 | "onclick", |
---|
187 | "onfocus", |
---|
188 | "onselect" ] }, |
---|
189 | { "tag": "input_url", "actions": [ "onchange", |
---|
190 | "onclick", |
---|
191 | "onfocus", |
---|
192 | "onselect" ] }, |
---|
193 | { "tag": "input_week", "actions": [ "onchange", |
---|
194 | "onclick", |
---|
195 | "onfocus", |
---|
196 | "onselect" ] }, |
---|
197 | { "tag": "input", "actions": [ "onchange", |
---|
198 | "onclick", |
---|
199 | "onfocus" ] }, |
---|
200 | { "tag": "ins", "actions": [ "onclick" ] }, |
---|
201 | { "tag": "kbd", "actions": [ "onclick" ] }, |
---|
202 | { "tag": "keygen", "actions": [ "onchange", |
---|
203 | "onfocus" ] }, |
---|
204 | //{ "tag": "label", "actions": [ ] }, |
---|
205 | //{ "tag": "legend", "actions": [ ] }, |
---|
206 | { "tag": "li", "actions": [ "onclick" ] }, |
---|
207 | //{ "tag": "map", "actions": [ ] }, |
---|
208 | { "tag": "mark", "actions": [ "onclick" ] }, |
---|
209 | { "tag": "menu", "actions": [ "onclick" ] }, |
---|
210 | { "tag": "meter", "actions": [ "onclick" ] }, |
---|
211 | //{ "tag": "nav", "actions": [ ] }, |
---|
212 | //{ "tag": "noscript", "actions": [ ] }, |
---|
213 | { "tag": "object", "actions": [ "onclick" ] }, |
---|
214 | //{ "tag": "ol", "actions": [ ] }, |
---|
215 | //{ "tag": "optgroup", "actions": [ ] }, |
---|
216 | //{ "tag": "option", "actions": [ ] }, |
---|
217 | { "tag": "output", "actions": [ "onclick" ] }, |
---|
218 | { "tag": "p", "actions": [ "onclick" ] }, |
---|
219 | //{ "tag": "param", "actions": [ ] }, |
---|
220 | //{ "tag": "pre", "actions": [ ] }, |
---|
221 | { "tag": "progress", "actions": [ "onclick" ] }, |
---|
222 | { "tag": "q", "actions": [ "onclick" ] }, |
---|
223 | //{ "tag": "rp", "actions": [ ] }, |
---|
224 | //{ "tag": "rt", "actions": [ ] }, |
---|
225 | //{ "tag": "ruby", "actions": [ ] }, |
---|
226 | { "tag": "s", "actions": [ "onclick" ] }, |
---|
227 | { "tag": "samp", "actions": [ "onclick" ] }, |
---|
228 | //{ "tag": "section", "actions": [ ] }, |
---|
229 | { "tag": "select", "actions": [ "onchange", |
---|
230 | "onfocus" ] }, |
---|
231 | { "tag": "small", "actions": [ "onclick" ] }, |
---|
232 | //{ "tag": "source", "actions": [ ] }, |
---|
233 | { "tag": "span", "actions": [ "onclick" ] }, |
---|
234 | { "tag": "strong", "actions": [ "onclick" ] }, |
---|
235 | //{ "tag": "sub", "actions": [ ] }, |
---|
236 | //{ "tag": "summary", "actions": [ ] }, |
---|
237 | //{ "tag": "sup", "actions": [ ] }, |
---|
238 | //{ "tag": "table", "actions": [ ] }, |
---|
239 | //{ "tag": "tbody", "actions": [ ] }, |
---|
240 | { "tag": "td", "actions": [ "onclick" ] }, |
---|
241 | { "tag": "textarea", "actions": [ "onchange", |
---|
242 | "onfocus", |
---|
243 | "onselect" ] }, |
---|
244 | //{ "tag": "tfoot", "actions": [ ] }, |
---|
245 | { "tag": "th", "actions": [ "onclick" ] }, |
---|
246 | //{ "tag": "thead", "actions": [ ] }, |
---|
247 | { "tag": "time", "actions": [ "onclick" ] }, |
---|
248 | //{ "tag": "tr", "actions": [ ] }, |
---|
249 | //{ "tag": "track", "actions": [ ] }, |
---|
250 | { "tag": "u", "actions": [ "onclick" ] }, |
---|
251 | //{ "tag": "ul", "actions": [ ] }, |
---|
252 | { "tag": "var", "actions": [ "onclick" ] }, |
---|
253 | { "tag": "video", "actions": [ "onplaying", |
---|
254 | "onpause", |
---|
255 | "ontimeupdate" ] } |
---|
256 | //{ "tag": "wbr", "actions": [ ] }, |
---|
257 | ]; |
---|
258 | |
---|
259 | /** |
---|
260 | * a possibility to trace, what is going on |
---|
261 | */ |
---|
262 | var autoquestDoLog = false; |
---|
263 | |
---|
264 | /** |
---|
265 | * stores the structure of the GUI of the current page |
---|
266 | */ |
---|
267 | var autoquestGUIModel; |
---|
268 | |
---|
269 | /** |
---|
270 | * stores events, which were recorded but not sent to the server yet |
---|
271 | */ |
---|
272 | var autoquestRecordedEvents = []; |
---|
273 | |
---|
274 | /** |
---|
275 | * stores the interval for sending data of inactive browser windows |
---|
276 | */ |
---|
277 | var autoquestSendInterval; |
---|
278 | |
---|
279 | /** |
---|
280 | * automatically executed to initialize the event handling |
---|
281 | */ |
---|
282 | (function() { |
---|
283 | initEventHandling(); |
---|
284 | }()); |
---|
285 | |
---|
286 | |
---|
287 | /** |
---|
288 | * initializes the event handling after the document is loaded completely |
---|
289 | */ |
---|
290 | function initEventHandling() { |
---|
291 | if (document.body) { |
---|
292 | if (document.readyState !== "complete") { |
---|
293 | // if the document is not loaded yet, try to add further event handling later |
---|
294 | setTimeout(initEventHandling, 200); |
---|
295 | } |
---|
296 | else if (!autoquestSendInterval) { |
---|
297 | log("adding event handling attributes"); |
---|
298 | determineDestination(); |
---|
299 | autoquestGUIModel = |
---|
300 | addEventHandlingAndGetJSONRepresentation(document.documentElement, ""); |
---|
301 | |
---|
302 | addDefaultEventHandling(); |
---|
303 | |
---|
304 | // recall sending data each 100 seconds to ensure, that for browser windows staying |
---|
305 | // open the data will be send, as well. |
---|
306 | autoquestSendInterval = setTimeout(sendRequest, 100000); |
---|
307 | } |
---|
308 | } |
---|
309 | else { |
---|
310 | setTimeout(initEventHandling, 200); |
---|
311 | } |
---|
312 | } |
---|
313 | |
---|
314 | /** |
---|
315 | * traverses the DOM-structure of the HTML-site and determines the URL of this script. Based on |
---|
316 | * this URL, it calculates the destination to which the traced interactions must be sent |
---|
317 | */ |
---|
318 | function determineDestination() { |
---|
319 | var scriptElements = document.getElementsByTagName("script"); |
---|
320 | var i; |
---|
321 | var index; |
---|
322 | |
---|
323 | for (i = 0; i < scriptElements.length; i++) { |
---|
324 | if ((scriptElements[i].type === "text/javascript") && (scriptElements[i].src)) { |
---|
325 | index = scriptElements[i].src.lastIndexOf("script/autoquest-htmlmonitor.js"); |
---|
326 | if (index > -1) { |
---|
327 | autoquestDestination = scriptElements[i].src.substring(0, index - 1); |
---|
328 | log("using destination " + autoquestDestination); |
---|
329 | } |
---|
330 | } |
---|
331 | } |
---|
332 | } |
---|
333 | |
---|
334 | /** |
---|
335 | * traverses the DOM-structure of the HTML-site and adds event handling attributes to each |
---|
336 | * relevant node. Furthermore returns a JSON representation of the node including the children |
---|
337 | * |
---|
338 | * @param node the node of the DOM structure that shall be adapted and whose children shall |
---|
339 | * be traversed |
---|
340 | * @param parentPath the path to the parent node of the provided node within the DOM-structure of |
---|
341 | * the HTML-site |
---|
342 | */ |
---|
343 | function addEventHandlingAndGetJSONRepresentation(node, parentPath) { |
---|
344 | var nodePath; |
---|
345 | var i; |
---|
346 | var jsonRepresentation = null; |
---|
347 | var childRepresentation; |
---|
348 | var childRepresentations = null; |
---|
349 | |
---|
350 | if (node.nodeType === Node.ELEMENT_NODE) { |
---|
351 | jsonRepresentation = "{\"tagName\":\"" + getTagName(node) + "\","; |
---|
352 | |
---|
353 | if ((node.id) && (node.id !== "")) { |
---|
354 | jsonRepresentation += "\"htmlId\":\"" + node.id + "\""; |
---|
355 | } |
---|
356 | else { |
---|
357 | jsonRepresentation += "\"index\":\"" + getNodeIndex(node) + "\""; |
---|
358 | } |
---|
359 | |
---|
360 | addEventHandling(node, parentPath); |
---|
361 | |
---|
362 | if (node.childNodes.length > 0) { |
---|
363 | nodePath = getNodePath(node, parentPath); |
---|
364 | |
---|
365 | for (i = 0; i < node.childNodes.length; i++) { |
---|
366 | childRepresentation = |
---|
367 | addEventHandlingAndGetJSONRepresentation(node.childNodes[i], nodePath); |
---|
368 | |
---|
369 | if (childRepresentation) { |
---|
370 | if (!childRepresentations) { |
---|
371 | childRepresentations = childRepresentation; |
---|
372 | } |
---|
373 | else { |
---|
374 | childRepresentations += "," + childRepresentation; |
---|
375 | } |
---|
376 | } |
---|
377 | } |
---|
378 | |
---|
379 | if (childRepresentations) { |
---|
380 | jsonRepresentation += ",\"children\":[" + childRepresentations + "]"; |
---|
381 | } |
---|
382 | } |
---|
383 | |
---|
384 | jsonRepresentation += "}"; |
---|
385 | } |
---|
386 | |
---|
387 | return jsonRepresentation; |
---|
388 | } |
---|
389 | |
---|
390 | /** |
---|
391 | * adds event handling functionality to the provided node. Calls |
---|
392 | * {@link #addEventHandlingWithJQuery(node,parentPath)} or |
---|
393 | * {@link #addEventHandlingWithoutJQuery(node,parentPath)} depending on the fact if jQuery is |
---|
394 | * available and must therefore be used, or not. |
---|
395 | * |
---|
396 | * @param node the node of the DOM structure that shall be equipped with event handling |
---|
397 | * @param parentPath the path to the parent node of the provided node within the DOM-structure of |
---|
398 | * the HTML-site |
---|
399 | */ |
---|
400 | function addEventHandling(node, parentPath) { |
---|
401 | if (typeof jQuery === 'undefined') { |
---|
402 | addEventHandlingWithoutJQuery(node, parentPath); |
---|
403 | } |
---|
404 | else { |
---|
405 | addEventHandlingWithJQuery(node, parentPath); |
---|
406 | } |
---|
407 | } |
---|
408 | |
---|
409 | /** |
---|
410 | * adds event handling functionality to the provided node using onxxx attributes |
---|
411 | * |
---|
412 | * @param node the node of the DOM structure that shall be equipped with event handling |
---|
413 | * @param parentPath the path to the parent node of the provided node within the DOM-structure of |
---|
414 | * the HTML-site |
---|
415 | */ |
---|
416 | function addEventHandlingWithoutJQuery(node, parentPath) { |
---|
417 | var nodePath = getNodePath(node, parentPath); |
---|
418 | var tagName = getTagName(node); |
---|
419 | var i; |
---|
420 | var k; |
---|
421 | |
---|
422 | for (i = 0; i < autoquestActionConfig.length; i++) { |
---|
423 | if (tagName === autoquestActionConfig[i].tag.toLowerCase()) { |
---|
424 | for (k = 0; k < autoquestActionConfig[i].actions.length; k++) { |
---|
425 | adaptEventHandlingAttribute(node, nodePath, autoquestActionConfig[i].actions[k]); |
---|
426 | } |
---|
427 | } |
---|
428 | } |
---|
429 | } |
---|
430 | |
---|
431 | /** |
---|
432 | * adds event handling functionality to the provided node using jQuery attributes. If the node |
---|
433 | * already used onxxx attributes, these are extended instead of using jQuery. |
---|
434 | * |
---|
435 | * @param node the node of the DOM structure that shall be equipped with event handling |
---|
436 | * @param parentPath the path to the parent node of the provided node within the DOM-structure of |
---|
437 | * the HTML-site |
---|
438 | */ |
---|
439 | function addEventHandlingWithJQuery(node, parentPath) { |
---|
440 | var nodePath = getNodePath(node, parentPath); |
---|
441 | var tagName = getTagName(node); |
---|
442 | var action; |
---|
443 | var i; |
---|
444 | var k; |
---|
445 | |
---|
446 | for (i = 0; i < autoquestActionConfig.length; i++) { |
---|
447 | if (tagName === autoquestActionConfig[i].tag.toLowerCase()) { |
---|
448 | for (k = 0; k < autoquestActionConfig[i].actions.length; k++) { |
---|
449 | action = autoquestActionConfig[i].actions[k]; |
---|
450 | if (jQuery(node).attr(action)) { |
---|
451 | // if there is an event handling attribute although jquery is present |
---|
452 | // edit this attribute accordingly |
---|
453 | adaptEventHandlingAttribute(node, nodePath, action); |
---|
454 | } |
---|
455 | else { |
---|
456 | registerEventHandler(node, nodePath, action); |
---|
457 | } |
---|
458 | } |
---|
459 | } |
---|
460 | } |
---|
461 | } |
---|
462 | |
---|
463 | /** |
---|
464 | * adapts the event handling attributed provided by the action parameter so that it calls |
---|
465 | * the {@link #handleEvent(node, action, path, event)} function in the case the event occurs. |
---|
466 | * Either the method creates an appropriate onxxx attribute on the node if there is none, or it |
---|
467 | * adds a call to the function as first thing called by the onxxx attribute. |
---|
468 | * |
---|
469 | * @param node the node of the DOM structure that shall be equipped with event handling |
---|
470 | * @param nodePath the path to the node within the DOM-structure of the HTML-site |
---|
471 | * @param action the event for which event handling shall be enabled |
---|
472 | */ |
---|
473 | function adaptEventHandlingAttribute(node, nodePath, action) { |
---|
474 | var value = "handleEvent(this, '" + action + "', '" + nodePath + "', event);"; |
---|
475 | var oldValue; |
---|
476 | |
---|
477 | if (!node.getAttribute(action)) { |
---|
478 | node.setAttribute(action, value); |
---|
479 | } |
---|
480 | else { |
---|
481 | oldValue = node.getAttribute(action); |
---|
482 | if (oldValue.indexOf(value) < 0) { |
---|
483 | node.setAttribute(action, value + ' ' + oldValue); |
---|
484 | } |
---|
485 | } |
---|
486 | } |
---|
487 | |
---|
488 | /** |
---|
489 | * registers an event handler using jQuery for the provided action on the given object so that it |
---|
490 | * calls the {@link #handleJQueryEvent(event)} function in the case the event occurs. |
---|
491 | * |
---|
492 | * @param node the node of the DOM structure that shall be equipped with event handling |
---|
493 | * @param nodePath the path to the node within the DOM-structure of the HTML-site |
---|
494 | * @param action the event for which event handling shall be enabled |
---|
495 | */ |
---|
496 | function registerEventHandler(node, nodePath, action) { |
---|
497 | var parameters = { action : action, path : nodePath}; |
---|
498 | |
---|
499 | if ((action === "onscroll") && (node === document.body)) { |
---|
500 | node = window; |
---|
501 | } |
---|
502 | |
---|
503 | if (jQuery(node).on) { |
---|
504 | jQuery(node).on(action.substring(2), parameters, handleJQueryEvent); |
---|
505 | } |
---|
506 | else { |
---|
507 | jQuery(node).bind(action.substring(2), parameters, handleJQueryEvent); |
---|
508 | } |
---|
509 | } |
---|
510 | |
---|
511 | /** |
---|
512 | * adds default event handling functionality for receiving load, unload, and other document |
---|
513 | * relevant events. The registration for events is done depending on the availability of jQuery. |
---|
514 | * If jQuery is available and must therefore be used, then the registration is done on the window |
---|
515 | * object. Otherwise, the appropriate attributes of the document's body tag are changed |
---|
516 | */ |
---|
517 | function addDefaultEventHandling() { |
---|
518 | var body; |
---|
519 | |
---|
520 | if (typeof jQuery === 'undefined') { |
---|
521 | body = document.getElementsByTagName("body").item(0); |
---|
522 | adaptEventHandlingAttribute(body, "/html[0]/body[0]", "onbeforeunload"); |
---|
523 | adaptEventHandlingAttribute(body, "/html[0]/body[0]", "onload"); |
---|
524 | adaptEventHandlingAttribute(body, "/html[0]/body[0]", "onunload"); |
---|
525 | //adaptEventHandlingAttribute(body, "/html[0]/body[0]", "onerror"); |
---|
526 | } |
---|
527 | else { |
---|
528 | registerEventHandler(window, "/html[0]/body[0]", "onbeforeunload"); |
---|
529 | registerEventHandler(window, "/html[0]/body[0]", "onload"); |
---|
530 | registerEventHandler(window, "/html[0]/body[0]", "onunload"); |
---|
531 | //registerEventHandler(body, "/html[0]/body[0]", "onerror"); |
---|
532 | } |
---|
533 | } |
---|
534 | |
---|
535 | /** |
---|
536 | * generates a path through the DOM-structure of the HTML-site depending on a node and the path |
---|
537 | * to its parent node. The result is the parent path plus a path element for the provided node. |
---|
538 | * The first part of the path element generated for the node is the tag name returned by |
---|
539 | * {@link #getTagName(node)}. If the node has an id, it becomes the second part of the path |
---|
540 | * element. If the node does not have an id, the method calculates the index of the node within |
---|
541 | * all children of the same type within the parent node. This index becomes then the second part |
---|
542 | * of the path element generated for the node. |
---|
543 | * |
---|
544 | * @param node the node of the DOM structure for which the path shall be created |
---|
545 | * @param parentPath the path to the parent node of the provided node |
---|
546 | * |
---|
547 | * @returns a path in the DOM-structure of the HTML-site including the parent path an a path |
---|
548 | * element for the provided node |
---|
549 | */ |
---|
550 | function getNodePath(node, parentPath) { |
---|
551 | var nodePath = parentPath + "/" + getTagName(node); |
---|
552 | |
---|
553 | if ((node.id) && (node.id !== "")) { |
---|
554 | nodePath += "(htmlId=" + node.id + ")"; |
---|
555 | } |
---|
556 | else { |
---|
557 | nodePath += "[" + getNodeIndex(node) + "]"; |
---|
558 | } |
---|
559 | |
---|
560 | return nodePath; |
---|
561 | } |
---|
562 | |
---|
563 | /** |
---|
564 | * called to handle events caused by the jQuery event handling mechanism. Forwards the event to |
---|
565 | * {@link #handleEvent(node, eventName, nodePath, event)} |
---|
566 | * |
---|
567 | * @param the event to be handled |
---|
568 | */ |
---|
569 | function handleJQueryEvent(event) { |
---|
570 | handleEvent(this, event.data.action, event.data.path, event); |
---|
571 | } |
---|
572 | |
---|
573 | /** |
---|
574 | * handles an event that happened on a node. This method is called by the event handling attributes |
---|
575 | * of the nodes. These attributes are generated by the |
---|
576 | * {@link #addEventHandlingAttributes(node,parentPath)} function. It creates a new Event object and |
---|
577 | * adds it to the list of <code>autoquestRecordedEvents</code>. If this list achieves the maximum |
---|
578 | * <code>autoquestPackageSize</code> the events in the list are sent to the server asynchronously |
---|
579 | * through calling {@link #sendRequest()}. |
---|
580 | * |
---|
581 | * @param node the node that fired the event |
---|
582 | * @param eventName the name of the event, e.g. onscroll |
---|
583 | * @param nodePath the path to the node in the HTML DOM on which the event occurred |
---|
584 | * @param event the HTML event that occured |
---|
585 | */ |
---|
586 | function handleEvent(node, eventName, nodePath, event) { |
---|
587 | var eventType; |
---|
588 | var eventObj = null; |
---|
589 | var tagName; |
---|
590 | var unmonitored; |
---|
591 | |
---|
592 | if (!autoquestDestination) { |
---|
593 | // do nothing if we have no destination to send data to |
---|
594 | return; |
---|
595 | } |
---|
596 | |
---|
597 | log("handling event " + eventName + " on " + node); |
---|
598 | |
---|
599 | eventType = eventName.toLowerCase(); |
---|
600 | |
---|
601 | // filter onkeydown events, which are not of interest |
---|
602 | if ((eventType === "onkeydown") && (node === document.body)) { |
---|
603 | // do not handle key downs on the body which are other than tabs (keycode 9) |
---|
604 | if (event.keyCode !== 9) { |
---|
605 | return; |
---|
606 | } |
---|
607 | } |
---|
608 | |
---|
609 | // check, if the preceeding event is more concrete, i.e. the new event to be handled is only |
---|
610 | // a propagation through the DOM and needs, therefore, not be handled |
---|
611 | if (autoquestRecordedEvents.length > 0) { |
---|
612 | eventObj = autoquestRecordedEvents[autoquestRecordedEvents.length - 1]; |
---|
613 | |
---|
614 | if ((eventObj.type === eventName) && (eventObj.nodePath.indexOf(nodePath) === 0)) { |
---|
615 | // the event is of the same type. |
---|
616 | if (eventObj.nodePath.length > nodePath.length) { |
---|
617 | // the new event is the same event as the previous one, but fired for the parent |
---|
618 | // GUI element of the previous event. This must not be handled. So ignore it |
---|
619 | log("discarding event " + eventName + " on " + node + |
---|
620 | " as it is already handled by a child"); |
---|
621 | return; |
---|
622 | } |
---|
623 | else if (eventType !== "onscroll") { |
---|
624 | // we have the same event on the same element. If it is an onscroll, we should |
---|
625 | // reuse it. But it is not an onscroll. So we ignore the existing event. |
---|
626 | eventObj = null; |
---|
627 | } |
---|
628 | } |
---|
629 | else { |
---|
630 | // the event is not of an equal type as the previous one. So we will not reuse it |
---|
631 | eventObj = null; |
---|
632 | } |
---|
633 | } |
---|
634 | |
---|
635 | if (!eventObj) { |
---|
636 | // we can not reuse the previous event. So create a new event and add it to the list |
---|
637 | eventObj = new Event(eventType, nodePath); |
---|
638 | log("storing event " + eventName); |
---|
639 | autoquestRecordedEvents.push(eventObj); |
---|
640 | } |
---|
641 | |
---|
642 | // now add further event parameters |
---|
643 | if ((eventType === "onclick") || (eventType === "ondblclick")) { |
---|
644 | eventObj.setClickCoordinates(getEventCoordinates(event)); |
---|
645 | } |
---|
646 | |
---|
647 | tagName = getTagName(node); |
---|
648 | |
---|
649 | // ensure to not monitor details for GUI elements marked as unmonitored |
---|
650 | if (node.getAttribute && node.getAttribute("class")) { |
---|
651 | unmonitored = node.getAttribute("class").indexOf("autoquest-unmonitored") >= 0; |
---|
652 | } |
---|
653 | else { |
---|
654 | unmonitored = false; |
---|
655 | } |
---|
656 | |
---|
657 | if (!unmonitored && ("input_password" !== tagName)) { |
---|
658 | // add further parameters for GUI elements which are monitored and which are no password |
---|
659 | // fields |
---|
660 | if ((eventType === "onkeypress") || |
---|
661 | (eventType === "onkeydown") || |
---|
662 | (eventType === "onkeyup")) |
---|
663 | { |
---|
664 | eventObj.setKey(event.keyCode); |
---|
665 | } |
---|
666 | else if (eventType === "onchange") { |
---|
667 | if ((tagName.indexOf("input") === 0) || |
---|
668 | (tagName === "textarea") || |
---|
669 | (tagName === "keygen")) |
---|
670 | { |
---|
671 | eventObj.setSelectedValue(node.value); |
---|
672 | } |
---|
673 | else if (tagName === "select") { |
---|
674 | eventObj.setSelectedValue(node.options.item(node.options.selectedIndex)); |
---|
675 | } |
---|
676 | } |
---|
677 | } |
---|
678 | |
---|
679 | if (eventType === "onscroll") { |
---|
680 | eventObj.setScrollPosition(getScrollCoordinates(node)); |
---|
681 | } |
---|
682 | |
---|
683 | // finally send the recorded data |
---|
684 | if (autoquestRecordedEvents.length >= autoquestPackageSize) { |
---|
685 | log("initiating sending events"); |
---|
686 | setTimeout(sendRequest, 100); |
---|
687 | } |
---|
688 | else if ((eventType === "onunload") || (eventType === "onbeforeunload")) { |
---|
689 | log("initiating sending events"); |
---|
690 | sendRequest(); |
---|
691 | } |
---|
692 | |
---|
693 | } |
---|
694 | |
---|
695 | /** |
---|
696 | * determines a tag name of a node. If the node is an input element, the tag name includes the |
---|
697 | * type of element. Otherwise the method simply returns the tag name. |
---|
698 | * |
---|
699 | * @param node the node for which the name must be determined |
---|
700 | * |
---|
701 | * @return the name as described |
---|
702 | */ |
---|
703 | function getTagName(node) { |
---|
704 | var tagName = null; |
---|
705 | |
---|
706 | if (node.tagName) { |
---|
707 | tagName = node.tagName.toLowerCase(); |
---|
708 | if ("input" === tagName) { |
---|
709 | if (node.type && (node.type !== "")) { |
---|
710 | tagName += "_" + node.type; |
---|
711 | } |
---|
712 | else { |
---|
713 | tagName += "_text"; |
---|
714 | } |
---|
715 | } |
---|
716 | } |
---|
717 | |
---|
718 | return tagName; |
---|
719 | } |
---|
720 | |
---|
721 | /** |
---|
722 | * determines the index of a node considering all nodes of the parent having the same name. If the |
---|
723 | * node has no parent, the method returns index 0. |
---|
724 | * |
---|
725 | * @param node the node for which the index must be determined |
---|
726 | * |
---|
727 | * @return the index as described |
---|
728 | */ |
---|
729 | function getNodeIndex(node) { |
---|
730 | var i; |
---|
731 | var index = 0; |
---|
732 | |
---|
733 | if (node.parentNode) { |
---|
734 | for (i = 0; i < node.parentNode.childNodes.length; i++) { |
---|
735 | if (node.parentNode.childNodes[i].tagName === node.tagName) { |
---|
736 | // if === also returns true if the nodes are not identical but only equal, |
---|
737 | // this may fail. |
---|
738 | if (node.parentNode.childNodes[i] === node) { |
---|
739 | break; |
---|
740 | } |
---|
741 | index++; |
---|
742 | } |
---|
743 | } |
---|
744 | |
---|
745 | } |
---|
746 | |
---|
747 | return index; |
---|
748 | } |
---|
749 | |
---|
750 | /** |
---|
751 | * sends the collected data to the server, named in the destination-variable. For this it generates |
---|
752 | * a JSON formatted message and uses Ajax and the <code>autoquestDestination</code> to send it to |
---|
753 | * the server |
---|
754 | */ |
---|
755 | function sendRequest() { |
---|
756 | var eventList = autoquestRecordedEvents; |
---|
757 | var message; |
---|
758 | var clientId; |
---|
759 | var i = 0; |
---|
760 | var request; |
---|
761 | |
---|
762 | if (eventList.length > 1) { |
---|
763 | log("creating message"); |
---|
764 | |
---|
765 | // put the last event into the new list to allow for checks for reoccurence of the same |
---|
766 | // event |
---|
767 | autoquestRecordedEvents = [ eventList.pop() ]; |
---|
768 | |
---|
769 | message = "{\"message\":{\"clientInfos\":{"; |
---|
770 | |
---|
771 | log("reading client id"); |
---|
772 | clientId = getClientId(); |
---|
773 | if ((clientId) && (clientId !== "")) { |
---|
774 | message += "\"clientId\":\"" + clientId + "\","; |
---|
775 | } |
---|
776 | |
---|
777 | log("adding other infos"); |
---|
778 | message += "\"userAgent\":\"" + navigator.userAgent + "\","; |
---|
779 | message += "\"title\":\"" + document.title + "\","; |
---|
780 | message += "\"url\":\"" + document.URL + "\"},"; |
---|
781 | |
---|
782 | message += "\"guiModel\":" + autoquestGUIModel + ","; |
---|
783 | |
---|
784 | message += "\"events\":["; |
---|
785 | |
---|
786 | for (i = 0; i < eventList.length; i++) { |
---|
787 | if (i > 0) { |
---|
788 | message += ","; |
---|
789 | } |
---|
790 | message += eventList[i].toJSON(); |
---|
791 | } |
---|
792 | |
---|
793 | message += "]}}"; |
---|
794 | |
---|
795 | request = null; |
---|
796 | |
---|
797 | // Mozilla |
---|
798 | if (window.XMLHttpRequest) { |
---|
799 | request = new XMLHttpRequest(); |
---|
800 | } |
---|
801 | // IE |
---|
802 | else if (window.ActiveXObject) { |
---|
803 | request = new ActiveXObject("Microsoft.XMLHTTP"); |
---|
804 | } |
---|
805 | |
---|
806 | request.open("POST", autoquestDestination, false); |
---|
807 | request.setRequestHeader("Content-Type", "application/json"); |
---|
808 | |
---|
809 | log("sending " + message); |
---|
810 | request.send(message); |
---|
811 | } |
---|
812 | } |
---|
813 | |
---|
814 | /** |
---|
815 | * determines the scroll coordinates of the scrolled element |
---|
816 | * |
---|
817 | * @param node the element that was scrolled |
---|
818 | * |
---|
819 | * @returns the coordinates of the scrolling as an array with x and y coordinate |
---|
820 | */ |
---|
821 | function getScrollCoordinates(node) { |
---|
822 | if (node.scrollLeft || node.scrollTop) { |
---|
823 | return [node.scrollLeft, node.scrollTop]; |
---|
824 | } |
---|
825 | else if ((node === window) && window.pageYOffset) { |
---|
826 | return [window.pageXOffset, window.pageYOffset]; |
---|
827 | } |
---|
828 | else if ((node == document) || (node == document.body) || (node == document.documentElement)) { |
---|
829 | if (document.body && (document.body.scrollLeft || document.body.scrollTop)) { |
---|
830 | return [document.body.scrollLeft, document.body.scrollTop]; |
---|
831 | } |
---|
832 | else if (document.documentElement && |
---|
833 | (document.documentElement.scrollLeft || document.documentElement.scrollTop)) |
---|
834 | { |
---|
835 | return [document.documentElement.scrollLeft, document.documentElement.scrollTop]; |
---|
836 | } |
---|
837 | } |
---|
838 | |
---|
839 | return [-1, -1]; |
---|
840 | } |
---|
841 | |
---|
842 | /** |
---|
843 | * determines the coordinates of an onclick or ondblclick event. If the coordinates to not come |
---|
844 | * with the provided event, they are determined based on the surrounding object |
---|
845 | * |
---|
846 | * @param event the event to extract the coordinates of |
---|
847 | * |
---|
848 | * @returns the coordinates of the event as an array with x and y coordinate |
---|
849 | */ |
---|
850 | function getEventCoordinates(event) { |
---|
851 | if (event.layerX) { |
---|
852 | return [event.layerX, event.layerY]; |
---|
853 | } |
---|
854 | else if (event.offsetX) { |
---|
855 | return [event.offsetX, event.offsetY]; |
---|
856 | } |
---|
857 | |
---|
858 | var obj = event.target || event.srcElement; |
---|
859 | var objOffset = getPageOffset(obj); |
---|
860 | |
---|
861 | return [(event.clientX - objOffset[0]), (event.clientY - objOffset[1])]; |
---|
862 | } |
---|
863 | |
---|
864 | /** |
---|
865 | * determines the page offset of an object using the parent objects offset |
---|
866 | */ |
---|
867 | function getPageOffset(object) { |
---|
868 | var top = 0; |
---|
869 | var left = 0; |
---|
870 | var obj = object; |
---|
871 | |
---|
872 | while (obj.offsetParent) { |
---|
873 | left += obj.offsetLeft; |
---|
874 | top += obj.offsetTop; |
---|
875 | obj = obj.offsetParent; |
---|
876 | } |
---|
877 | |
---|
878 | return [left, top]; |
---|
879 | } |
---|
880 | |
---|
881 | /** |
---|
882 | * generates a client id based on several information retrieved from the environment. The client |
---|
883 | * id is not always unique |
---|
884 | * |
---|
885 | * @returns the client id |
---|
886 | */ |
---|
887 | function getClientId() { |
---|
888 | var clientIdStr; |
---|
889 | var clientId; |
---|
890 | var i = 0; |
---|
891 | |
---|
892 | if (!autoquestClientId) { |
---|
893 | // create something like a more or less unique checksum. |
---|
894 | clientIdStr = |
---|
895 | navigator.appCodeName + navigator.appName + navigator.appVersion + |
---|
896 | navigator.cookieEnabled + navigator.language + navigator.platform + |
---|
897 | navigator.userAgent + navigator.javaEnabled() + window.location.protocol + |
---|
898 | window.location.host + new Date().getTimezoneOffset(); |
---|
899 | |
---|
900 | clientId = clientIdStr.length; |
---|
901 | |
---|
902 | for (i = 0; i < clientIdStr.length; i++) { |
---|
903 | clientId += clientIdStr.charCodeAt(i); |
---|
904 | } |
---|
905 | |
---|
906 | autoquestClientId = clientId; |
---|
907 | } |
---|
908 | |
---|
909 | return autoquestClientId; |
---|
910 | } |
---|
911 | |
---|
912 | /** |
---|
913 | * performs a simple logging by adding a specific div to the HTML |
---|
914 | * |
---|
915 | * @param text the text to be logged |
---|
916 | */ |
---|
917 | function log(text) { |
---|
918 | if (autoquestDoLog) { |
---|
919 | var loggingInfo = document.getElementById("loggingInfoParagraph"); |
---|
920 | |
---|
921 | if (!loggingInfo) { |
---|
922 | var div = document.createElement("div"); |
---|
923 | div.setAttribute("style", "z-index:1000000; background-color:#afa; " + |
---|
924 | "border:1px black solid; position:absolute; top:10px; right:10px; " + |
---|
925 | "width:350px; height:auto; font-size:8pt; font-family:Helvetica"); |
---|
926 | |
---|
927 | loggingInfo = document.createElement("div"); |
---|
928 | loggingInfo.id = "loggingInfoParagraph"; |
---|
929 | div.appendChild(loggingInfo); |
---|
930 | |
---|
931 | var body = document.getElementsByTagName("body")[0]; |
---|
932 | if (!body) { |
---|
933 | alert("could not enable logging"); |
---|
934 | } |
---|
935 | else { |
---|
936 | body.appendChild(div); |
---|
937 | } |
---|
938 | } |
---|
939 | |
---|
940 | loggingInfo.appendChild(document.createTextNode(text)); |
---|
941 | loggingInfo.appendChild(document.createElement("br")); |
---|
942 | } |
---|
943 | } |
---|
944 | |
---|
945 | /** |
---|
946 | * this class represents a single event |
---|
947 | * |
---|
948 | * @param type the type of the event |
---|
949 | * @param nodePath the path through the HTML DOM to the event target |
---|
950 | */ |
---|
951 | function Event(type, nodePath) { |
---|
952 | this.type = type; |
---|
953 | this.nodePath = nodePath; |
---|
954 | this.time = new Date().getTime(); |
---|
955 | |
---|
956 | this.setClickCoordinates = function(coordinates) { |
---|
957 | this.clickCoordinates = coordinates; |
---|
958 | }; |
---|
959 | |
---|
960 | this.setKey = function(key) { |
---|
961 | this.key = key; |
---|
962 | }; |
---|
963 | |
---|
964 | this.setSelectedValue = function(value) { |
---|
965 | this.selectedValue = encodeText(value); |
---|
966 | }; |
---|
967 | |
---|
968 | this.setScrollPosition = function(scrollPosition) { |
---|
969 | this.scrollPosition = scrollPosition; |
---|
970 | }; |
---|
971 | |
---|
972 | this.toJSON = function() { |
---|
973 | var eventInJSON = |
---|
974 | "{\"path\":\"" + this.nodePath + "\",\"time\":" + this.time + ",\"eventType\":\"" + |
---|
975 | this.type + "\""; |
---|
976 | |
---|
977 | if ((this.clickCoordinates) && (!isNaN(this.clickCoordinates[0]))) { |
---|
978 | eventInJSON += ",\"coordinates\":[" + this.clickCoordinates + "]"; |
---|
979 | } |
---|
980 | |
---|
981 | if (this.key) { |
---|
982 | eventInJSON += ",\"key\":" + this.key; |
---|
983 | } |
---|
984 | |
---|
985 | if (this.selectedValue) { |
---|
986 | eventInJSON += ",\"selectedValue\":\"" + this.selectedValue + "\""; |
---|
987 | } |
---|
988 | |
---|
989 | if ("onscroll" === this.type) { |
---|
990 | eventInJSON += ",\"scrollPosition\":[" + this.scrollPosition + "]"; |
---|
991 | } |
---|
992 | |
---|
993 | eventInJSON += "}"; |
---|
994 | |
---|
995 | return eventInJSON; |
---|
996 | }; |
---|
997 | |
---|
998 | function encodeText(text) { |
---|
999 | return text.replace(/\\/g, "\\\\").replace(/\"/g, "\\\""); |
---|
1000 | }; |
---|
1001 | } |
---|