タイピング練習を行い、入力した文字数によって点数を計算するシンプルなシステムをHTMLとJavaScriptを使って実装する方法について解説します。指定した時間内にテキストを打ち、その結果で点数が変動する仕組みを作成します。
HTMLとJavaScriptでタイピング練習機能を作成
タイピング練習アプリケーションを作るために、まずはHTMLで長文を表示し、その文章をユーザーが打つことができるようにします。次に、入力した文字数をカウントし、指定した時間が経過した後に点数を表示する機能をJavaScriptで実装します。
HTML構造の作成
最初に、タイピングするためのテキストエリアと、表示する長い文章をHTMLで作成します。また、タイマーと結果表示用の要素も準備します。
<!DOCTYPE html>
<html>
<head>
<title>タイピング練習</title>
</head>
<body>
<h1>タイピング練習</h1>
<p>この文章を制限時間内に入力してください：</p>
<p id="text">ここに表示されるテキストがタイピング対象です。</p>
<textarea id="inputText" rows="5" cols="50"></textarea>
<p>残り時間: <span id="timeLeft">30</span> 秒</p>
<p>入力した文字数: <span id="charCount">0</span></p>
<p>結果: <span id="score">0</span></p>
<button onclick="startTimer()">スタート</button>
</body>
</html>ここで、`textarea`を使ってユーザーが入力するためのエリアを作り、`p`タグで残り時間、文字数、点数を表示するためのスペースを確保しています。
タイマーと入力カウントの実装
次に、指定された時間が経過したらタイピングを終了し、入力した文字数をカウントして点数を計算するJavaScriptのコードを作成します。以下はそのサンプルコードです。
let timeLeft = 30; // 残り時間（秒）
let timer;
function startTimer() {
// タイマー開始
timer = setInterval(function() {
if(timeLeft > 0) {
timeLeft--;
document.getElementById('timeLeft').textContent = timeLeft;
} else {
clearInterval(timer);
calculateScore();
}
}, 1000);
}
function calculateScore() {
let inputText = document.getElementById('inputText').value;
let charCount = inputText.length;
document.getElementById('charCount').textContent = charCount;
let score = charCount * 10; // 点数は文字数の10倍
document.getElementById('score').textContent = score;
}このJavaScriptコードでは、`startTimer`関数でタイマーを開始し、1秒ごとに残り時間を減らしています。時間がゼロになると、`calculateScore`関数を呼び出して、入力した文字数をカウントし、それに基づいて点数を計算します。
タイピング練習の流れ
ユーザーが「スタート」ボタンをクリックすると、タイマーが開始され、テキストエリアに入力が始まります。指定された時間（ここでは30秒）が経過すると、自動的に入力を終了し、入力した文字数に基づいて点数が計算されます。
このプログラムでは、文字数を10倍したものを点数として表示していますが、点数計算の方法は自由に変更できます。たとえば、正確性を加味した点数計算にすることも可能です。
まとめ
HTMLとJavaScriptを組み合わせることで、簡単にタイピング練習とその結果を表示するシステムを作成できます。指定された時間内にテキストを打ち、その入力文字数を元に点数を計算する仕組みを実現することができました。この方法を基に、さらに機能を追加して、より高度なタイピング練習ツールを作ることも可能です。
コメント