Skip to content

Instantly share code, notes, and snippets.

@atoponce
Created February 25, 2022 23:29
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save atoponce/9a53450b8a94170d8b5dbb79e16f8401 to your computer and use it in GitHub Desktop.
Save atoponce/9a53450b8a94170d8b5dbb79e16f8401 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Keystroke Analysis</title>
<meta charset="utf-8">
<style>
#intro {
font-size: large;
}
#words {
font-size: x-large;
margin: 20px;
}
#results {
margin: 20px;
}
#keydown {
font-family: monospace;
height: 200px;
width: 100%;
}
#keyup {
font-family: monospace;
height: 200px;
width: 100%;
}
</style>
</head>
<body>
<h1>Keystroke Analysis</h1>
<div>
<label for="checkbox" id="intro">Check here and start typing to record your keystrokes:</label>
<input type="checkbox" id="checkbox" name="checkbox">
</div>
<div id="words"></div>
<div id="results">
<p>Key down millisecond timing events:</p>
<textarea readonly id="keydown"></textarea>
<p>Key up millisecond timing events:</p>
<textarea readonly id="keyup"></textarea>
</div>
</body>
<script>
const RESULTS = {}
const PRESSED = []
const RELEASED = []
const checkbox = document.getElementById('checkbox')
document.addEventListener("keydown", function() {
if (checkbox.checked) {
keyDown()
keyUp()
}
})
function keyDown(e) {
const keyDown = Date.now() % 1000
const keyDownElement = document.getElementById("keydown")
PRESSED.push(keyDown)
RESULTS.down = PRESSED
keyDownElement.innerText = RESULTS.down.join(", ")
keyDownElement.scrollTop = keyDownElement.scrollHeight
}
function keyUp(e) {
const keyUp = Date.now() % 1000
const keyUpElement = document.getElementById("keyup")
RELEASED.push(keyUp)
RESULTS.up = RELEASED
keyUpElement.innerText = RESULTS.up.join(", ")
keyUpElement.scrollTop = keyUpElement.scrollHeight
}
function populatePage() {
const request = new XMLHttpRequest()
request.open("GET", "http://metaphorpsum.com/sentences/20?p=true, true")
request.send()
request.onload = function() {
if (request.status === 200) {
const wordElement = document.getElementById("words")
const paragraph = request.responseText
wordElement.innerHTML = paragraph
}
}
}
populatePage()
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment