Context Navigation

source: trunk/autoquest-htmlmonitor/src/main/js/autoquest-htmlmonitor.js @ 1684

Last change on this file since 1684 was 1248, checked in by pharms, 11 years ago
added tracing of key downs on tab key
File size: 36.4 KB

Line
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	}

Note: See TracBrowser for help on using the repository browser.

Download in other formats: