zach
/
artseyio-typing-tutor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add start button and cleanup

This commit is contained in:
Zach Graham 2023-08-04 23:01:34 -05:00
parent 3cab30027a
commit f4744db60a
3 changed files with 30 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/artsey-tutor.css
View File

@ -62,6 +62,7 @@ body {
padding: 12px;
margin: 0 auto;
background-color: slategray;
visibility: collapse;
}
.keyboard-key {
@ -138,4 +139,10 @@ body {
#typing-text {
visibility:hidden;
position: absolute;
}
#startButton {
width: 200px;
font-size: 36px;
background-color: steelblue;
}

24
index.html
View File

@ -24,21 +24,9 @@
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Learn ARTSEY<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/learn">Learn</a></li>
</ul>
<ul class="nav navbar-nav navbar-right"></ul>
</div>
@ -49,8 +37,8 @@
<div class="flex-items">
<div id="letterbox">
</div>
<button id="startButton" type="button" class="btn btn-primary">Start!</button>
</div>
<div class="flex-items" id="text-to-type">‎</div>
<div id="keyboard">
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
@ -68,8 +56,8 @@
<input id="typing-text" type="text" value="Hello there">
</fieldset>
</form>
<script src="https://code.jquery.com/jquery-3.7.0.slim.min.js"
integrity="sha256-tG5mcZUtJsZvyKAxYLVXrmjKBVLd6VpVccqz/r4ypFE=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>

28
js/artsey-tutor.js
View File

@ -67,7 +67,7 @@ async function highlightLetter(letterDiv) {
$(letterDiv).addClass("letterbox-letter-hl");
}
async function unhighlightLetter(letterDiv) {
async function unHighlightLetter(letterDiv) {
$(letterDiv).removeClass("letterbox-letter-hl");
$(letterDiv).addClass("letterbox-letter");
}
@ -95,7 +95,7 @@ async function setNextLetter() {
return;
let prevIndex = currentLetterIndex-1;
if (prevIndex >= -1)
await unhighlightLetter(letterbox.children()[currentLetterIndex]);
await unHighlightLetter(letterbox.children()[currentLetterIndex]);
currentLetterIndex++;
currentLetter = currentString.charAt(currentLetterIndex).toLowerCase();
currentMapping = mappings[(await getMappingForLetter(currentLetter)).toString()];
@ -109,14 +109,20 @@ let currentString = "hello world";
let currentMapping = [0, 0, 0, 0, 0, 0, 0, 0];
$(document).ready(async function () {
$('body').on("keyup", (function(e) {
console.log("current letter: " + currentLetter + " typed letter: " + String.fromCharCode(e.which).toLowerCase());
if (currentLetter === String.fromCharCode(e.which).toLowerCase())
setNextLetter();
}));
$("#startButton").on("click", async function () {
$('#startButton').hide();
$('body').on("keyup", (async function(e) {
console.log("current letter: " + currentLetter + " typed letter: " + String.fromCharCode(e.which).toLowerCase());
if (currentLetter === String.fromCharCode(e.which).toLowerCase())
await setNextLetter();
}));
await sleep(1000);
await setTypingText(currentString);
await sleep(500);
await setNextLetter();
await sleep(1000);
await setTypingText(currentString);
await sleep(500);
await setNextLetter();
$("#keyboard").css({opacity: 0, visibility: "visible"}).animate({opacity: 100}, 200, function () {
console.log("keyboard visible!");
});
})
});