atoponce · February 25, 2022 23:29
diff --git a/keystrokes.html b/keystrokes.html

 <!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>

	<!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>