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

Move tutor to learn page

This commit is contained in:
Zach Graham 2023-08-04 23:39:45 -05:00
parent f4744db60a
commit 2e18243da6
4 changed files with 85 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
css/artsey-tutor.css
View File

@ -36,7 +36,7 @@ body {
align-self: auto; align-self: auto;
order: 0; order: 0;
width: 500px; width: 500px;
font-size: 44px; font-size: 28px;
text-align: center; text-align: center;
margin: 0 auto 20px; margin: 0 auto 20px;
} }
@ -62,7 +62,7 @@ body {
padding: 12px; padding: 12px;
margin: 0 auto; margin: 0 auto;
background-color: slategray; background-color: slategray;
visibility: collapse; opacity: 0;
} }
.keyboard-key { .keyboard-key {
@ -145,4 +145,10 @@ body {
width: 200px; width: 200px;
font-size: 36px; font-size: 36px;
background-color: steelblue; background-color: steelblue;
}
#content-area {
border: 2px solid black;
margin-top: 100px;
border-radius: 4px;
} }

45
index.html
View File

@ -5,7 +5,7 @@
<title>ARTSEY Typing Tutor</title> <title>ARTSEY Typing Tutor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/artsey-tutor.css"> <link rel="stylesheet" href="/artsey-typing-tutor/css/artsey-tutor.css">
</head> </head>
<body> <body>
@ -19,48 +19,35 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
</button> </button>
<a class="navbar-brand" href="#">ARTSEY Typing Tutor</a> <a class="navbar-brand" href="/artsey-typing-tutor/index.html">ARTSEY Typing Tutor</a>
</div> </div>
<div id="navbar" class="navbar-collapse collapse"> <div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="/artsey-typing-tutor/index.html">Home</a></li>
<li><a href="/about">About</a></li> <li><a href="/artsey-typing-tutor/about.html">About</a></li>
<li><a href="/contact">Contact</a></li> <li><a href="/artsey-typing-tutor/contact.html">Contact</a></li>
<li><a href="/learn">Learn</a></li> <li><a href="/artsey-typing-tutor/learn.html">Learn</a></li>
</ul> </ul>
<ul class="nav navbar-nav navbar-right"></ul> <ul class="nav navbar-nav navbar-right"></ul>
</div> </div>
</div> </div>
</nav> </nav>
<div id="content-area" class="container">
<div class="flex-container"> <div class="flex-container">
<div class="flex-items"> <div class="flex-items">Hello there!</div>
<div id="letterbox"> <div class="flex-items"></div>
</div>
<button id="startButton" type="button" class="btn btn-primary">Start!</button>
</div> </div>
<div id="keyboard"> <form>
<div class="keyboard-key"></div> <fieldset>
<div class="keyboard-key"></div> <input id="typing-text" type="text" value="Hello there">
<div class="keyboard-key"></div> </fieldset>
<div class="keyboard-key"></div> </form>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
</div>
<div class="flex-items"></div>
</div> </div>
<form>
<fieldset>
<input id="typing-text" type="text" value="Hello there">
</fieldset>
</form>
<script src="https://code.jquery.com/jquery-3.7.0.min.js" <script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>
<script src="js/artsey-tutor.js"></script> <script src="/artsey-typing-tutor/js/artsey-tutor.js"></script>
</body> </body>
</html> </html>

2
js/artsey-tutor.js
View File

@ -121,7 +121,7 @@ $(document).ready(async function () {
await setTypingText(currentString); await setTypingText(currentString);
await sleep(500); await sleep(500);
await setNextLetter(); await setNextLetter();
$("#keyboard").css({opacity: 0, visibility: "visible"}).animate({opacity: 100}, 200, function () { $("#keyboard").animate({opacity: 1.0}, 1000, function () {
console.log("keyboard visible!"); console.log("keyboard visible!");
}); });
}) })

60
learn.html Normal file
View File

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ARTSEY Typing Tutor</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="/artsey-typing-tutor/css/artsey-tutor.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">ARTSEY Typing Tutor</a>
</div>
<div id="navbar" class="navbar-default">
<ul class="nav navbar-nav">
<li><a href="/artsey-typing-tutor/index.html">Home</a></li>
<li><a href="/artsey-typing-tutor/about.html">About</a></li>
<li><a href="/artsey-typing-tutor/contact.html">Contact</a></li>
<li class="active"><a href="/learn.html">Learn</a></li>
</ul>
<ul class="nav navbar-nav navbar-right"></ul>
</div>
</div>
</nav>
<div id="content-area" class="container">
<div class="flex-container">
<div class="flex-items">
<div id="letterbox"><div id="instruction-text">Click the button below to start.</div></div>
<button id="startButton" type="button" class="btn btn-primary">Start!</button>
</div>
<div id="keyboard">
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
<div class="keyboard-key"></div>
</div>
<div class="flex-items"></div>
</div>
</div>
<form>
<fieldset>
<input id="typing-text" type="text" value="Hello there">
</fieldset>
</form>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script type="text/javascript" src="/artsey-typing-tutor/js/artsey-tutor.js"></script>
</body>
</html>