Skip to content

Commit

Permalink
Merge pull request #4 from SST-CTF/otakar
Browse files Browse the repository at this point in the history 
Massive Design Changes
  • Loading branch information
Otakar Andrysek authored Nov 6, 2016
2 parents a9994ad + da4bdb0 commit cffb3df
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 108 deletions.
38 changes: 29 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,33 @@
# Typing Test
![Video of typing test](https://github.com/SST-CTF/typing-test/blob/master/Documentation/Nov-03-2016%2013-08-45.gif?raw=true)
#### Description
![GIF of typing test](https://github.com/SST-CTF/typing-test/blob/master/Documentation/Nov-03-2016%2013-08-45.gif?raw=true)
## Description
The best way to test typing speed and accuracy for a user provided string. This JS + HTML combo can be run server or client side.
#### Features / Todo
- [ ] Fix ghost text in entry field
### Features
- Test any string
- Can run local or server
- Copy / Paste Protection
- Gross and Net WPM
- Error checker
- Timer
- Looks pretty!

### Todo
- [x] Fix ghost text in entry field
- [ ] Improve progress bar
- [ ] Make the GUI look good
- [ ] Database Implementation
- [ ] Ballance WPM function
- [ ] Test Everything
- [ ] Database implementation
- [ ] Balance WPM function
- [ ] Test **Everything**


## Footnotes
###### Links
[Link to this GitHub page.](https://github.com/SST-CTF/typing-test)

[**Live demo coming soon!**](https://github.com/SST-CTF/typing-test)

#### Credit and Links
Otakar and Sterling from SST are currently working on this project. *More information will be added soon*
[Link to our CTF (Programming) team / club.](http://sstctf.org)
###### Questions?
If you have any questions, feel free contact us: [email protected]
###### Credit
Otakar and Sterling from SST are currently working on this project. *More information will be added soon*
125 changes: 26 additions & 99 deletions TypingTest.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,44 +21,19 @@
</style>

<body class="w3-light-grey">

<!-- Top container -->
<div class="w3-container w3-top w3-black w3-large w3-padding" style="z-index:4">
<button class="w3-btn w3-hide-large w3-padding-0 w3-hover-text-grey" onclick="w3_open();"><i class="fa fa-bars"></i> Menu</button>
<span class="w3-right">SST CTF</span>
</div>
<!-- Sidenav/menu -->
<nav class="w3-sidenav w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidenav">
<br>
<div class="w3-container w3-row">
<div class="w3-col s4">
<img src="/w3images/avatar2.png" class="w3-circle w3-margin-right" style="width:46px">
</div>
<div class="w3-col s8">
<span>Welcome, <strong>{USERNAME}</strong></span><br>
<a href="#" class="w3-hover-none w3-hover-text-red w3-show-inline-block"><i class="fa fa-envelope"></i></a>
<a href="#" class="w3-hover-none w3-hover-text-green w3-show-inline-block"><i class="fa fa-user"></i></a>
<a href="#" class="w3-hover-none w3-hover-text-blue w3-show-inline-block"><i class="fa fa-cog"></i></a>
</div>
</div>
<hr>
<div class="w3-container">
<h5>Dashboard</h5>
</div>
<a href="#" class="w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i> Close Menu</a>
<a href="#" class="w3-padding w3-blue"><i class="fa fa-users fa-fw"></i> Overview</a>
<a href="#" class="w3-padding"><i class="fa fa-eye fa-fw"></i> Views</a>
<a href="#" class="w3-padding"><i class="fa fa-users fa-fw"></i> Traffic</a>
<a href="#" class="w3-padding"><i class="fa fa-bullseye fa-fw"></i> Geo</a>
<a href="#" class="w3-padding"><i class="fa fa-diamond fa-fw"></i> Orders</a>
<a href="#" class="w3-padding"><i class="fa fa-bell fa-fw"></i> News</a>
<a href="#" class="w3-padding"><i class="fa fa-bank fa-fw"></i> General</a>
<a href="#" class="w3-padding"><i class="fa fa-history fa-fw"></i> History</a>
<a href="#" class="w3-padding"><i class="fa fa-cog fa-fw"></i> Settings</a><br><br>
</nav>

<!-- Overlay effect when opening sidenav on small screens -->
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>

<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:300px;margin-top:43px;">
<div class="w3-main" style="margin-left:10px;margin-top:43px;margin-right:10px;">

<!-- Header -->
<header class="w3-container" style="padding-top:22px">
<h5><b><i class="fa fa-dashboard"></i> SST CTF Typing Competition</b></h5>
Expand All @@ -68,111 +43,59 @@ <h5><b><i class="fa fa-dashboard"></i> SST CTF Typing Competition</b></h5>
<div class="w3-container w3-blue w3-padding-16">
<div class="w3-left"><i class="fa fa-calculator w3-xxxlarge"></i></div>
<div class="w3-right">
<h3>52</h3>
<h3>Net/Gross WPM</h3>
</div>
<div class="w3-clear"></div>
<h4>Net / Gross WPM</h4>
<h4>
<div id="stat_wpm">Not Started</div>
</h4>
</div>
</div>
<div class="w3-quarter">
<div class="w3-container w3-red w3-padding-16">
<div class="w3-left"><i class="fa fa-exclamation-triangle w3-xxxlarge"></i></div>
<div class="w3-right">
<h3>99</h3>
<h3>Entry Errors</h3>
</div>
<div class="w3-clear"></div>
<h4>Entry Errors</h4>
<h4>
<div id="stat_errors">Waiting...</div>
</h4>
</div>
</div>
<div class="w3-quarter">
<div class="w3-container w3-teal w3-padding-16">
<div class="w3-left"><i class="fa fa-bullseye w3-xxxlarge"></i></div>
<div class="w3-right">
<h3>23</h3>
<h3>Accuracy</h3>
</div>
<div class="w3-clear"></div>
<h4>Accuracy</h4>
<h4>
<div id="stat_score">Waiting...</div>
</h4>
</div>
</div>
<div class="w3-quarter">
<div class="w3-container w3-orange w3-text-white w3-padding-16">
<div class="w3-left"><i class="fa fa-clock-o w3-xxxlarge"></i></div>
<div class="w3-right">
<h3>50</h3>
<h3>Remaining Time</h3>
</div>
<div class="w3-clear"></div>
<h4>Remaining Time</h4>
<h4>
<div id="stat_timeleft">0:00</div>
</h4>
</div>
</div>
</div>


<!-- Begin Old Code -->
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="border-bottom: 2px solid #354562; padding: 4px" class="titlec">
<input disabled id="printB" onclick="window.print();" type="button" value="Print Results" name="printB" style="float: right; font-size: 8pt; font-family: Arial">
<input onclick="document.getElementById('AfterAction').style.display='none';document.getElementById('expectedArea').style.display='block';document.getElementById('typeArea').style.display='block';document.JobOp.typed.value='';document.JobOp.typed.disabled=false;randNum = Math.floor((Math.random() * 10)) % intToTestCnt;strToTestType = strToTest[randNum];document.JobOp.given.value = strToTestType;" type="button" value="New Test" name="newtest" style="float: right; font-size: 8pt; font-family: Arial">2015 SST Typing Competition
</td>
</tr>
</table>
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 4px" class="bodya" colspan="2">
<FORM name="JobOp">
<table border="0" cellpadding="5" width="100%">
<tr>
<td>
<table border="0" cellpadding="5" width="100%">
<tr>
<td align="center" style="border-left: 1px solid #344270; border-right: 2px solid #344270; border-top: 1px solid #344270; border-bottom: 2px solid #344270; padding: 5px; background-color: #CED3E8" background="Images/Blue_Back.gif">
<b>
<font face="Arial" size="2" color="#FFFFFF">Net / Gross WPM</font>
</b>
</td>
<td align="center" style="border-left: 1px solid #344270; border-right: 2px solid #344270; border-top: 1px solid #344270; border-bottom: 2px solid #344270; padding: 5px; background-color: #CED3E8" background="Images/Blue_Back.gif">
<b>
<font face="Arial" size="2" color="#FFFFFF">Entry Errors</font>
</b>
</td>
<td align="center" style="border-left: 1px solid #344270; border-right: 2px solid #344270; border-top: 1px solid #344270; border-bottom: 2px solid #344270; padding: 5px; background-color: #CED3E8" background="Images/Blue_Back.gif">
<b>
<font face="Arial" size="2" color="#FFFFFF">Accuracy</font>
</b>
</td>
<td align="center" style="border-left: 1px solid #344270; border-right: 2px solid #344270; border-top: 1px solid #344270; border-bottom: 2px solid #344270; padding: 5px; background-color: #CED3E8" background="Images/Blue_Back.gif">
<b>
<font face="Arial" size="2" color="#FFFFFF">Elapsed / Remaining</font>
</b>
</td>
</tr>
<tr>
<td align="center">
<font size="2" face="Arial">
<div id="stat_wpm">Not Started</div>
</font>
</td>
<td style="border-left: 1px dotted #8794C7; border-right: 1px dotted #8794C7; border-top-width: 1px; border-bottom-width: 1px" align="center">
<font size="2" face="Arial">
<div id="stat_errors">Waiting...</div>
</font>
</td>
<td style="border-left-width: 1px; border-right: 1px dotted #8794C7; border-top-width: 1px; border-bottom-width: 1px" align="center">
<font size="2" face="Arial">
<div id="stat_score">Waiting...</div>
</font>
</td>
<td align="center">
<font size="2" face="Arial">
<div id="stat_timeleft">0:00</div>
</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="border-left-width: 1px; border-right-width: 1px; border-top: 1px solid #344270; border-bottom-width: 1px">
<div id="expectedArea" style="display:block">
Expand Down Expand Up @@ -212,7 +135,7 @@ <h4>Remaining Time</h4>
<p style="margin-top: 0; margin-bottom: 0">
<font color="#7A88C0" face="Arial" size="1">
<textarea onkeypress="doCheck();" onkeydown="//calcStat()" name="typed" cols=53 rows=10 wrap=on style="width: 100%; border: 1px solid #344270; padding: 2px; font-family:Arial; font-size:9pt">
</textarea>
</textarea>
</font>
</div>
<div id="afterAction" style="display:none">
Expand All @@ -236,8 +159,12 @@ <h4>Remaining Time</h4>
<footer class="w3-container w3-padding-16 w3-light-grey">
<h4>FOOTER</h4>
<p>Powered by <a href="http://sstctf.org" target="_blank">SST CTF</a></p>
<br>
<input disabled id="printB" onclick="window.print();" type="button" value="Print Results" name="printB">
</footer>
<!-- End page content -->

<!-- These scripts are useful if we need to implement navigation in the future. For now deprecated. -->
</div>
<script>
// Get the Sidenav
Expand Down
Binary file added images/user.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit cffb3df

Please sign in to comment.