diff --git a/typing-web/src/typing/index.html b/typing-web/src/typing/index.html new file mode 100644 index 0000000..0579360 --- /dev/null +++ b/typing-web/src/typing/index.html @@ -0,0 +1,41 @@ + + + Typing + + + + + +
+ +
+ Type the following text. +
+ +
+ Error +
+
+ +
+ +
+

+ Score! +

+ + + + + + + + + +
Correct:0
Incorrect:0
+
+ +
+ + + \ No newline at end of file diff --git a/typing-web/src/typing/scripts/main.js b/typing-web/src/typing/scripts/main.js new file mode 100644 index 0000000..11d381c --- /dev/null +++ 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(); +}); \ No newline at end of file diff --git a/typing-web/src/typing/style/main.css b/typing-web/src/typing/style/main.css new file mode 100644 index 0000000..700e023 --- /dev/null +++ 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; +} \ No newline at end of file