azconabeckerfamily/typing-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
Michael Becker 2024-04-16 20:30:15 -04:00
parent 7ecbb21fe2
commit e9a0419f6c
3 changed files with 146 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
typing-web/src/typing/index.html Normal file
View File

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

84
typing-web/src/typing/scripts/main.js Normal file
View File

@ -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();
});

21
typing-web/src/typing/style/main.css Normal file
View File

@ -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;
}