Skip to content

Instantly share code, notes, and snippets.

@leeper

leeper/jsevents.html

Last active May 16, 2016 08:24
Show Gist options
  • Save leeper/3848d20e9624ce8e409d893d6d493818 to your computer and use it in GitHub Desktop.
Save leeper/3848d20e9624ce8e409d893d6d493818 to your computer and use it in GitHub Desktop.
Download ZIP
Javascript event tracking
Raw
jsevents.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<form>
<div>
<p>Mouse: <input type="text" id="xmove" />
<input type="text" id="ymove" />
<input type="text" id="tmove" /></p>
<p>Click: <input type="text" id="xmouse" />
<input type="text" id="ymouse" />
<input type="text" id="kmouse" />
<input type="text" id="tmouse" /></p>
<p>Key: <input type="text" id="kkey" />
<input type="text" id="tkey" /></p>
<p>Text Location: <input type="text" id="text_top" />
<input type="text" id="text_left" />
<input type="text" id="text_right" />
<input type="text" id="text_bottom" /></p>
<p>Resize: <input type="text" id="xresize" />
<input type="text" id="yresize" />
<input type="text" id="tresize" /></p>
<p>Focus: <input type="text" id="focus" />
<input type="text" id="tfocus" /></p>
</div>
</form>
</div>
<div id = "paragraph" style="text-align:center;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lacus leo, lacinia in orci ac, aliquet laoreet lectus. Pellentesque est elit, vulputate id mollis eget, blandit non nibh. Cras placerat tincidunt sapien, sit amet placerat erat ornare nec. Sed consectetur neque nibh, in imperdiet dolor euismod id. Donec faucibus, nulla sit amet viverra molestie, libero neque porta tortor, in lobortis eros erat eget justo. Cras et enim vel ipsum pharetra vestibulum. Suspendisse at dolor vel ex ultricies vestibulum et non libero. Integer velit urna, lacinia eu venenatis eu, commodo eu diam.</p>
<p>Curabitur viverra volutpat turpis id egestas. Pellentesque dignissim, libero id ultricies malesuada, velit arcu dignissim ante, in cursus lacus dui id ante. Etiam sit amet dui sed tellus commodo semper vitae vitae tortor. Donec ut gravida purus, vitae fermentum erat. Nulla ac enim in lectus aliquet euismod. Sed vel pulvinar turpis. Nulla aliquet, quam nec tempor lobortis, ex ipsum fringilla elit, vitae egestas lorem turpis id massa. Duis sit amet auctor enim. Vestibulum neque erat, laoreet eu vestibulum quis, cursus vel lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Mauris sagittis nisi lobortis consequat accumsan. Phasellus lacus sapien, vehicula at nisi eu, euismod viverra enim. Praesent porttitor eu arcu ultricies pulvinar. Curabitur mattis ornare quam, id viverra justo molestie sed. Praesent consectetur est sed ipsum molestie, non lacinia lacus maximus. Cras nisi sapien, consequat a augue aliquet, aliquet scelerisque urna. Nam quis finibus massa, vel vehicula augue. Proin vulputate eget libero sodales tristique. Donec mattis neque ante, et efficitur odio varius ut. Donec fermentum molestie quam id varius. Nam finibus turpis ut condimentum interdum. Pellentesque aliquam pretium ante, et tincidunt elit faucibus sed. Quisque elementum dolor nisi, eu fermentum lectus vehicula ut. Quisque id dui euismod, vehicula leo in, vestibulum lacus.</p>
<p>Mauris in vulputate sapien. In venenatis nulla enim, eu pretium lacus lobortis pellentesque. Duis eros lorem, scelerisque sed nibh vitae, accumsan accumsan magna. Pellentesque lobortis sapien vitae consectetur accumsan. Nam at ornare elit. Sed in arcu ultrices, mollis diam eu, laoreet purus. Donec sed mollis nisi. Vivamus vitae purus sed arcu finibus laoreet. Aenean vehicula egestas magna id sodales. Maecenas luctus ipsum non quam convallis, et rhoncus dolor accumsan. Nam gravida lectus at neque consequat cursus. Quisque nisi tellus, feugiat sit amet odio sit amet, gravida fringilla est. Integer auctor nunc non condimentum efficitur. Vivamus et magna pretium, sodales lorem vel, feugiat sapien. Morbi vitae efficitur tellus.</p>
<p>Integer vestibulum consequat sem, eu venenatis lectus malesuada quis. Aliquam non dictum odio, pulvinar tempus lacus. Pellentesque nec justo sem. Sed nisl lorem, lacinia vel nulla eget, ultrices sagittis nisi. Quisque dictum lacinia diam eget varius. Mauris vitae sodales ligula. Quisque in augue id lacus elementum varius. Praesent placerat viverra aliquet. Cras sed felis auctor, tristique tellus sed, imperdiet est.</p>
</div>
<script>
// save current datetime
start = new Date();
// define function to store text location
function storeParagraphLocation() {
var box = document.getElementById("paragraph").getBoundingClientRect();
var top = document.getElementById("text_top").value;
var left = document.getElementById("text_left").value;
var right = document.getElementById("text_right").value;
var bottom = document.getElementById("text_bottom").value;
if (top == "") {
document.getElementById("text_top").value = box.top;
document.getElementById("text_left").value = box.left;
document.getElementById("text_right").value = box.right;
document.getElementById("text_bottom").value = box.bottom;
} else {
document.getElementById("text_top").value = top + "," + box.top;
document.getElementById("text_left").value = left + "," + box.left;
document.getElementById("text_right").value = right + "," + box.right;
document.getElementById("text_bottom").value = bottom + "," + box.bottom;
}
};
// store display location of text
storeParagraphLocation();
// setup event listeners
document.addEventListener("mousedown", function(event) {
recordEvent(event, "mousedown");
});
document.addEventListener("mouseup", function(event) {
recordEvent(event, "mouseup");
});
document.addEventListener("mousemove", function(event) {
recordEvent(event, "move");
});
document.addEventListener("keypress", function(event) {
recordEvent(event, "key");
});
window.addEventListener("resize", function(event) {
recordEvent(event, "resize");
});
document.addEventListener("blur", function(event) {
recordEvent(event, "blur");
});
document.addEventListener("focus", function(event) {
recordEvent(event, "focus");
});
// utility to *get* the value of an element
function getValue(element) {
return document.getElementById(element).value;
// Qualtrics.SurveyEngine.getEmbeddedData(element, value)
};
// utility to *set* the value of an element
function setValue(element, value) {
return document.getElementById(element).value = value;
// Qualtrics.SurveyEngine.setEmbeddedData(element, value)
};
// function to record events in form field
function recordEvent(e, field) {
// store time of event
var t = new Date().getTime() - start.getTime();
if (field == "blur") {
var tarray = getValue("tfocus");
} else if (field == "mouseup" | field == "mousedown") {
var tarray = getValue("tmouse");
} else {
var tarray = getValue("t" + field);
}
if (tarray == "") {
var newtval = t;
} else {
var newtval = tarray + "," + t;
}
// record substance of event
if (field == "move" | field == "resize") {
if (field == "resize") {
// retrieve window size
var x = window.innerWidth;
var y = window.innerHeight;
// store new paragraph location in resized window
storeParagraphLocation();
} else {
var x = e.clientX;
var y = e.clientY;
}
// retrieve current values
var xarray = getValue("x" + field);
var yarray = getValue("y" + field);
if (xarray == "") {
var newxval = x;
var newyval = y;
} else {
var newxval = xarray + "," + x;
var newyval = yarray + "," + y;
}
// store new values
setValue("x" + field, newxval);
setValue("y" + field, newyval);
setValue("t" + field, newtval);
} else if (field == "mouseup" | field == "mousedown") {
var x = e.clientX;
var y = e.clientY;
if (field == "mousedown") {
var k = "1";
} else {
var k = "0";
}
// retrieve current values
var karray = getValue("kmouse");
var xarray = getValue("xmouse");
var yarray = getValue("ymouse");
if (karray == "") {
var newxval = x;
var newyval = y;
var newkval = k;
} else {
var newxval = xarray + "," + x;
var newyval = yarray + "," + y;
var newkval = karray + "," + k;
}
setValue("xmouse", newxval);
setValue("ymouse", newyval);
setValue("kmouse", newkval);
setValue("tmouse", newtval);
} else if (field == "key") {
var k = e.keyCode;
var karray = getValue("k" + field);
if (karray == "") {
var newkval = String.fromCharCode(k);
} else {
var newkval = karray + "," + String.fromCharCode(k);
}
setValue("k" + field, newkval);
setValue("t" + field, newtval);
} else if (field == "focus" | field == "blur") {
var karray = getValue("focus");
if (field == "focus") {
var k = "1";
} else {
var k = "0";
}
if (karray == "") {
var newkval = k;
} else {
var newkval = karray + "," + k;
}
setValue("focus", newkval);
setValue("tfocus", newtval);
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment