10FastFingers でまじめにスコア狙いをし始めると、
- 途中経過が表示されない
- リトライがめんどくさい (Tab → Enter に慣れない)
みたいなことが気になります。大丈夫です。解決できます。
やり方
このスクリプトをブラウザのデベロッパーコンソールに貼り付けるだけです。
(別に変な事してないんですが一応免責として自己責任でお願いします。)
$(function(){function e(){for(var e=0,t=document.getElementById("words").getElementsByClassName("correct"),n=0;n<t.length;n++){var o=t.item(n);e=Math.round(e+o.textContent.length+1)}var r=Math.round(e/5/((60.01-countdown)/60));(e<0||e>2e3)&&(e=0),(r<0||r>400)&&(r=0),$("#preview").html("<h2><b>Key Strokes: </b>"+e+" - <b>WPM: </b>"+r+"</h2>")}$("#words").before("<div id='preview'></div>"),e(),$(document).keydown(function(t){e()}),$(document).keyup(function(e){27==e.which&&restart()})});
そうすると、
- タイピング中に入力文字数と WPM が表示されます
- ESC でリトライできます
べんり！！*1
これでだいぶタイプウェルと似た感覚でプレイできます。
Forefox/Chrome、Typing Test/Typing Test(advanced)、英語/日本語、あたりである程度使えそうなことを確認済です。
greasemonkey/tampermonkey あたりと組み合わせて使えばページ読み込み時に自動で適用もできます。
↑ で伝わらない人向けにもう少し細かく
ブラウザで 10FastFingers の Typing Test などのページを開いた状態で、
- 右クリックから開発者向けコンソールを開く
- 上のスクリプトを入力欄に貼り付けて Enter
- 出題文字列の上に Key Strokes: 0 - WPM: 0 と表示されればたぶん成功
- スクリプト貼付後はコンソールは消してしまって大丈夫です
- ページを開くたびに貼り付ける必要があります
 |
 |
スクリプトについて
discord 上でいただいた2つのスクリプト*2を適当に混合しつつ、ESC でリトライ機能を足したものです。minify 書ける前はこんな感じです。
$(function() {
$('#words').before("<div id='preview'></div>");
update();
$(document).keydown(function(k) { update() })
$(document).keyup(function(k) { if (k.which == 27) { restart(); } })
function update() {
var realCPM = 0;
var x = document.getElementById("words");
var corrects = x.getElementsByClassName("correct");
for(var i = 0; i < corrects.length; i++) {
var correctword = corrects.item(i);
realCPM = Math.round(realCPM + correctword.textContent.length + 1);
}
var realWPM = Math.round((realCPM / 5) / ((60.01 - countdown) / 60));
if (realCPM < 0 || realCPM > 2000) { realCPM = 0; }
if (realWPM < 0 || realWPM > 400) { realWPM = 0; }
$('#preview').html("<h2><b>Key Strokes: </b>" + realCPM + " - " + "<b>WPM: </b>" + realWPM + "</h2>");
}
})
ぶっちゃけ中味が気になる人が読めないほど複雑なことやってないんですが
- ページ読み込み時に Key Strokes と WPM の行を差し込む
- キー押下時にそれまでの打鍵数と速度を計測して更新
- ESC が押されたら reload (Tab → Enter を押したときと同じ挙動)
をしてるだけです。
$(document).keydown(function(k) { update() }) は setInterval(function() { update() }, 100} あたりで置き換えてもいいと思います。よしなに。
