forked from yaegaki/typing
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsample.html
107 lines (96 loc) · 3.55 KB
/
sample.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
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="typing.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
window.t = new Typing();
var question = $("#question");
var disp = $("#disp");
var temp = "";
var time = 0;
function register(str){
t.register(str);
temp = str;
//$("#disp>.answered").html("");
$("#hiragana").html(temp.substr(t.getAbsoluteAnswered(), temp.length));
$("#disp>.willanswer").html(t.getQuestion());
$("#check").html("-")
time = new Date();
$("#answer").focus();
}
$("#question").keypress(function(e){
if(e.which == 13){
register($(this).val());
}
});
$("#regist").on("click", function () {
register(question.val());
});
$("#answer").keypress(function (e) {
if (!t.answer(String.fromCharCode(e.which))){
$("#check").html("×");
$("#disp").css({color:"red"});
}
else {
$("#check").html("○");
$("#disp").css({color:"black"});
}
$("#answer").val("");
$("#hiragana").html(temp.substr(t.getAbsoluteAnswered(), temp.length));
//$("#disp>.answered").html(t.getAnsweredString().replace(/\s/g," "));
$("#disp>.willanswer").html(t.getRemainedQuestion().replace(/\s/g," "));
if (t.isFinish()) {
alert("終了!\n"+"ミスタイプ:"+ t.getFault() + "\nタイム:" + ((new Date() - time)/1000) + "秒");
}
return false;
});
$("#sample1").on("click", function(){
question.val("typing.jsのさんぷる");
register(question.val());
})
$("#sample2").on("click",function(){
question.val("ひらがなといちぶのきごうにたいおう さらに「ん」や「っ」、「ゃ」などのふくすうのにゅうりょくほうほうがあるものにもたいおう");
register(question.val());
})
})
</script>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
background: #eee;
}
.sample {
margin: 100px;
}
.sample>div {
font-size: xx-large;
}
.hiragana{
border: 1px solid black;
}
.willanswer {
border: 1px solid black;
display: inline;
}
</style>
</head>
<body>
<div class="sample">
<div id="check">-</div>
<input type="text" id="question"/>
<input value="登録" type="button" id="regist"/>
<div></div>
<input id="answer" type="text"/><input value="sample1" id="sample1" type="button"/>
<input value="sample2" id="sample2" type="button"/>
<div id="disp">
<pre><div id="hiragana" class="hiragana"></div></pre>
<div class="willanswer">please input string...</div>
</div>
</div>
</body>
</html>