initial commit

2024-04-16 20:30:15 -04:00 · 2024-04-16 20:30:15 -04:00 · e9a0419f6c
commit e9a0419f6c
parent 7ecbb21fe2
3 changed files with 146 additions and 0 deletions
--- a/typing-web/src/typing/index.html
+++ b/typing-web/src/typing/index.html
@ -0,0 +1,41 @@
+<html>
+    <head>
+        <title>Typing</title>
+        <link rel="stylesheet" type="text/css" href="style/main.css" />
+        <script type="text/javascript" src="scripts/main.js"></script>
+    </head>
+    <body>
+
+        <div class="tt" id="tt-main">
+
+            <div class="tt-instructions">
+                Type the following text.
+            </div>
+
+            <div class="tt-prompt">
+                Error
+            </div>
+            <div class="tt-input">
+                <input type="text" />
+            </div>
+
+            <div class="tt-score">
+                <p>
+                    Score!
+                </p>
+                <table>
+                    <tr>
+                        <td>Correct:</td>
+                        <td><span id="ttScoreCorrect">0</span></td>
+                    </tr>
+                    <tr>
+                        <td>Incorrect:</td>
+                        <td><span id="ttScoreIncorrect">0</span></td>
+                    </tr>
+                </table>
+            </div>
+
+        </div>
+
+    </body>
+</html>
--- a/typing-web/src/typing/scripts/main.js
+++ b/typing-web/src/typing/scripts/main.js
@ -0,0 +1,84 @@
+function TypingTutor()
+{
+    this.ttElem = document.getElementById("tt-main");
+    this.ttInput = this.ttElem.children[2].children[0];
+    this.ttPrompt = this.ttElem.children[1];
+
+    this.ttScore = this.ttElem.children[3];
+    this.ttScoreCorrect = document.getElementById("ttScoreCorrect");
+    this.ttScoreIncorrect = document.getElementById("ttScoreIncorrect");
+
+    this.lines = [
+
+        "aa aa aa aa",
+        "dad dad dad dad",
+        "sad sad sad sad",
+        "fad fad fad fad",
+
+        "asdf asdf asdf asdf",
+        "jkl; jkl; jkl; jkl;",
+
+        "bat bat bat bat",
+        "cat cat cat cat",
+
+    ];
+
+    this.lineIndex = -1;
+
+    this.nCorrect = 0;
+    this.nIncorrect = 0;
+
+    this.check = function()
+    {
+        if (this.ttInput.value == this.ttPrompt.innerText)
+        {
+            return true;
+        }
+        return false;
+    };
+    this.next = function()
+    {
+
+        this.lineIndex++;
+        if (this.lineIndex >= this.lines.length)
+        {
+            this.lineIndex = 0;
+        }
+
+        this.ttPrompt.innerText = this.lines[this.lineIndex];
+        this.ttInput.value = "";
+
+    };
+
+    this.update = function()
+    {
+        this.ttScoreCorrect.innerHTML = this.nCorrect;
+        this.ttScoreIncorrect.innerHTML = this.nIncorrect;
+    };
+
+    this.ttInput._Native = this;
+    this.ttInput.addEventListener("keydown", function(e)
+    {
+        if (e.keyCode == 13)
+        {
+            if (this._Native.check())
+            {
+                this._Native.nCorrect++;
+                this._Native.next();
+            }
+            else
+            {
+                this._Native.nIncorrect++;
+                this._Native.ttInput.value = "";
+            }
+            this._Native.update();
+        }
+    });
+
+    this.next();
+}
+
+window.addEventListener("load", function()
+{
+    window._app = new TypingTutor();
+});
--- a/typing-web/src/typing/style/main.css
+++ b/typing-web/src/typing/style/main.css
@ -0,0 +1,21 @@
+div.tt > div.tt-prompt, div.tt > div.tt-input > input
+{
+    font-family: monospace;
+    font-size: 32pt;
+    padding: 16px;
+    width: 100%;
+    box-sizing: border-box;
+
+    text-align: center;
+}
+div.tt > div.tt-prompt
+{
+    background-color: #cccccc;
+    border: 1px solid #aaaaaa;
+}
+
+div.tt > div.tt-instructions
+{
+    font-size: 32pt;
+    padding: 32px;
+}