Add website typing test

Author: binarybottle

code/website-typing-test/README.md

@@ -0,0 +1,25 @@
+# README
+
+## ChatGPT prompts to build this website:
+
+----
+
+Create a website with provided text prominently displayed in black color with a highly visible and legible font. The visitor to the website must type the provided text, but is not permitted to hit the backspace, return, tab, or arrow keys or correct any mistakes -- the visitor can only keep typing. As the visitor types each character (corresponding to a letter, number, space, symbol, or punctuation mark) in the provided text, the character on the screen changes color. If the visitor types the correct key, the character changes color to green. If the visitor types an incorrect key, the character changes color to red. The website logs the timing of each keystroke with millisecond precision. The website displays the following information as a table below the text, formatted as follows. Each row corresponds to a character and the following are filled in for the columns: (1) character from the provided text, (2) character the visitor typed, (3) the number 1 if these two match each other and 0 if they don't, (4) a time stamp when the key is pressed, (5) a time stamp when the key is released. Please create the necessary documents for such a website with as few dependencies and in the simplest way possible.
+
+The resulting website displays the text and the column headers for the table, but when I start typing, it searches the page rather than change the colors of the text. Also, the text is legible, but the table text is too bold and prominent.
+
+At the top of the page display the text "Please touch type the following text as you would usually type -- at your usual typing speed on a keyboard of your choice. Each correctly typed character will turn green and each incorrectly typed character will turn red. You will not be able to go back or correct any mistakes. Just keep typing until you have finished."
+
+----
+
+## Input text for website visitor
+
+At an average typing speed of 40 words per minute where a word is on average 5 characters, a person can type approximately 1,000 characters in 5 minutes.
+
+ChatGPT prompt: "Generate a random text string containing 1,000 characters with only lowercase letters and the following punctuation marks  , . / ; ' and include a space after every 5 characters."
+
+Resulting code is in generate_string.py
+
+Resulting random string:
+
+p'uco wnqum i/min crj'i gt;pl pwvd. pxlxm 'smdq g[cgo ivat; jh[ud vdizb bskts nnotb dw';, u,ko. ocm/z hld.p h/cur cenvd vj/sn h/,y. gz;an mlrgm dt,.n wajf/ /r'xi /h'pp qiwvt hcb/u 'gcg[ 'yqra khbdq tfdf; sojp, zm[wj ;sj[y pczzo ktji; iegid xjkk/ ;vm.i l''n/ h'cyx sk.'f iutza 'ydf, gtqga fvuie gyqy. v[h,; ebj[/ mkzwt icw[x txliv px.c[ wurbg ./krh o.hli a;cqv nntp; rix[. wrxhq 'lmni hwhza urg[' fs[v/ qeldu eol'f ugqgu y'hbk wuqr; gd'xf c,'im l.;hs [qyt' c/yhf w'lj/ tttbg '[qp. vkvb/ .qspv .nfg' mohw. t[ntx c.qlf /o'qb b;ygs defu. y;gnv ghiz' yly.. z;mm[ cgj/w qkei, xo;uf qqjmk zqp;k cgko; .dkbn rpihv pb;[s wbiem u,lsz vabzy ,obqm tmtoj p/;[u rz;[o c/k,[ ;/;vy qsxmr c.xrd ybtm[ e'[/h amfq/ [yxnc z'prc mox'a thvnn gofxr e.tfm i.pyb xrauq kv,vs nnyed sd[hs miwfp cknsf jvxxm qeba, dquls myprm ;'qpc ;;c,. .a.[p r/qvc jo'mg ahhet ,jk'u wo.c. qtzlr ;'i., hjp/n ztpkc j;qxw l;vl, tc;lr ;qwx. utq,' rlack ddcwu i;u/j jaskd ixeye r;[s' bhpdv pulbw qcyp/ pahls yirfi xl[oz ss;xx ,gt'u ,avqm pemkd rpdk

code/website-typing-test/generate_string.py

@@ -0,0 +1,26 @@
+import string
+import random
+
+def generate_random_string_with_specific_chars(length):
+    # Characters that can be typed without the Shift key, only lowercase and specified punctuation
+    chars = string.ascii_lowercase + ",./;'["
+
+    # Initialize the string and count for spaces
+    random_string = ''
+    space_count = 0
+
+    for _ in range(length):
+        # Add a space after every 5 characters on average
+        if space_count >= 5:
+            random_string += ' '
+            space_count = 0
+        else:
+            random_string += random.choice(chars)
+            space_count += 1
+
+    return random_string
+
+# Generate a new string with the specified characters
+random_text_specific = generate_random_string_with_specific_chars(1000)
+print(random_text_specific)  
+len(random_text_specific)  # Check the length of the generated string including spaces

code/website-typing-test/index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Typing Test</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="instructions">
+        <p>Please touch type the following text as you would usually type -- at your usual typing speed on a keyboard of your choice. Each correctly typed character will turn green and each incorrectly typed character will turn red. You will not be able to go back or correct any mistakes. Just keep typing until you have finished.</p>
+    </div>
+    <div id="text-container"></div>
+    <table id="keystroke-data">
+        <thead>
+            <tr>
+                <th>Expected Char</th>
+                <th>Typed Char</th>
+                <th>Match</th>
+                <th>Timestamp (Press)</th>
+                <th>Timestamp (Release)</th>
+            </tr>
+        </thead>
+        <tbody></tbody>
+    </table>
+    <script src="script.js"></script>
+</body>
+</html>

code/website-typing-test/script.js

@@ -0,0 +1,53 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const textToType = "p'uco wnqum i/min crj'i gt;pl pwvd. pxlxm 'smdq g[cgo ivat; jh[ud vdizb bskts nnotb dw';, u,ko. ocm/z hld.p h/cur cenvd vj/sn h/,y. gz;an mlrgm dt,.n wajf/ /r'xi /h'pp qiwvt hcb/u 'gcg[ 'yqra khbdq tfdf; sojp, zm[wj ;sj[y pczzo ktji; iegid xjkk/ ;vm.i l''n/ h'cyx sk.'f iutza 'ydf, gtqga fvuie gyqy. v[h,; ebj[/ mkzwt icw[x txliv px.c[ wurbg ./krh o.hli a;cqv nntp; rix[. wrxhq 'lmni hwhza urg[' fs[v/ qeldu eol'f ugqgu y'hbk wuqr; gd'xf c,'im l.;hs [qyt' c/yhf w'lj/ tttbg '[qp. vkvb/ .qspv .nfg' mohw. t[ntx c.qlf /o'qb b;ygs defu. y;gnv ghiz' yly.. z;mm[ cgj/w qkei, xo;uf qqjmk zqp;k cgko; .dkbn rpihv pb;[s wbiem u,lsz vabzy ,obqm tmtoj p/;[u rz;[o c/k,[ ;/;vy qsxmr c.xrd ybtm[ e'[/h amfq/ [yxnc z'prc mox'a thvnn gofxr e.tfm i.pyb xrauq kv,vs nnyed sd[hs miwfp cknsf jvxxm qeba, dquls myprm ;'qpc ;;c,. .a.[p r/qvc jo'mg ahhet ,jk'u wo.c. qtzlr ;'i., hjp/n ztpkc j;qxw l;vl, tc;lr ;qwx. utq,' rlack ddcwu i;u/j jaskd ixeye r;[s' bhpdv pulbw qcyp/ pahls yirfi xl[oz ss;xx ,gt'u ,avqm pemkd rpdk"; // Replace with your text
+    const container = document.getElementById('text-container');
+    container.innerHTML = textToType.split('').map(char => `<span>${char}</span>`).join('');
+
+    let currentIndex = 0;
+    const keystrokeData = [];
+
+    document.addEventListener('keydown', (e) => {
+        e.preventDefault(); // Prevent default browser actions
+        if (['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Enter'].includes(e.key)) {
+            return; // Still prevent the use of these keys
+        }
+
+        const keyPressTime = new Date().getTime();
+        const currentChar = textToType[currentIndex];
+        const span = container.getElementsByTagName('span')[currentIndex];
+        const isCorrect = e.key === currentChar;
+
+        span.className = isCorrect ? 'correct' : 'incorrect';
+
+        keystrokeData.push({
+            expected: currentChar,
+            typed: e.key,
+            match: isCorrect ? 1 : 0,
+            pressTime: keyPressTime,
+            releaseTime: null // This will be filled on keyup
+        });
+
+        currentIndex++;
+        updateTable();
+    });
+
+    document.addEventListener('keyup', (e) => {
+        const keyReleaseTime = new Date().getTime();
+        if (keystrokeData[currentIndex - 1]) {
+            keystrokeData[currentIndex - 1].releaseTime = keyReleaseTime;
+            updateTable();
+        }
+    });
+
+    function updateTable() {
+        const tbody = document.getElementById('keystroke-data').getElementsByTagName('tbody')[0];
+        tbody.innerHTML = '';
+        keystrokeData.forEach(data => {
+            const row = tbody.insertRow();
+            Object.values(data).forEach(text => {
+                const cell = row.insertCell();
+                cell.appendChild(document.createTextNode(text));
+            });
+        });
+    }
+});

code/website-typing-test/styles.css

@@ -0,0 +1,45 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+}
+
+#instructions {
+    margin: 20px;
+    padding: 10px;
+    text-align: left; /* Left-justify the instructions */
+    width: 80%; /* Adjust width as needed */
+}
+
+#text-container {
+    color: black;
+    border: 1px solid #ddd;
+    padding: 20px;
+    margin: 20px 0;
+    font-size: 1.5em; /* Increase the size of the provided text */
+    width: 80%; /* Adjust width as needed */
+}
+
+.correct {
+    color: green;
+}
+
+.incorrect {
+    color: red;
+}
+
+table {
+    border-collapse: collapse;
+    width: 60%; /* Make table smaller */
+    font-size: 0.8em; /* Decrease font size in the table */
+    margin-top: 500px; /* Push the table far down the page */
+}
+
+th, td {
+    border: 1px solid black;
+    text-align: left;
+    padding: 8px;
+}