-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (112 loc) · 3.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<title>Typing race</title>
<style type="text/css">
body {
text-align:center;
}
.words { display:inline}
textarea {resize: none}
form {
position: relative;
width: 400px;
margin: 0 auto;
text-align: left;
}
input{ display: block }
#word{ background-color: lightgreen }
#retry { display: none}
#textpanel {min-height: 200px}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script type="text/javascript">
var words, wordsCount, startTime, currentWordIndex;
function isLastWord(){
return currentWordIndex == wordsCount-1;
}
function prepareText(txt){
//Removing duplicate spaces.
txt = txt.replace(/ +(?= )/g,'');
}
function start(){
var textInput = $("#text");
text = textInput.val();
textInput.prop("disabled", true);
words = text.split(' ')
wordsCount = words.length;
startTime = null;
currentWordIndex = 0;
$("#word").prop("disabled", false);
$("#text").hide();
var html="";
for (i in words){
html+="<div id=\"" + getWordDivId(i) +"\" class=\"words\">" + words[i] +" </div> ";
}
$("#textToType").html(html);
highlightWord(0);
}
function getWordDivId(wordNumber){
return "word" + wordNumber;
}
function highlightWord (wordNumber){
if (wordNumber !==0)
$("#" + getWordDivId(wordNumber -1)).css("background-color", "white");
$("#" + getWordDivId(wordNumber)).css("background-color", "lightgrey");
}
$(document).ready(function(){
var wordTextBox = $("#word");
$("#word").prop("disabled", true);
wordTextBox.keydown(function() {
if (startTime == null)
startTime = new Date();
var currentWord = words[currentWordIndex];
if (!isLastWord())
currentWord += " ";
var val = wordTextBox.val();
if ((currentWord).lastIndexOf(val, 0) === 0){
wordTextBox.css("background-color", "lightgreen")
if (currentWord == val){
wordTextBox.val("");
if (isLastWord()){
var endTime = new Date();
var differenceMinutes = (endTime.getTime() - startTime.getTime())/60000;
var cpm = text.length/differenceMinutes
$("#result").text("Your result is " + cpm.toFixed(0) + " CPM.");
$("#retry").show();
$("#word").prop("disabled", true);
}
else{
highlightWord(++currentWordIndex)
}
}
}
else {
wordTextBox.css("background-color", "red")
}
});
$("#start").click(function(){
start();
$(this).css("visibility", "hidden");
});
$("#retry").click(function(){
start();
$("#result").text(" ");
$(this).hide();
});
});
</script>
</head>
<body>
<form id="form">
<div id="textpanel">
<textarea id="text" rows=10 cols=70>You can put any text here. Or just try typing these words.</textarea>
<div id="textToType"></div>
</div>
<input id="start" type="button" value="Start" />
Type here: <input type="text" id="word"/>
<div id="result" ></div>
<input id="retry" type="button" value="Retry" />
</form>
</body>
</html>