PHP Typing Speed Test
Build an interactive typing speed test that measures WPM and accuracy, with PHP-served random paragraphs.
PHPJavaScriptCSSGame
Overview
Create a typing speed test application. PHP selects random paragraphs, and JavaScript tracks WPM, accuracy, and errors in real time.
Random Text API (api.php)
php
<?php
header('Content-Type: application/json');
$paragraphs = [
"The quick brown fox jumps over the lazy dog near the riverbank.",
"Programming is the art of telling a computer what to do through instructions.",
"Every great developer was once a beginner who refused to give up.",
"PHP is a widely-used open source scripting language suited for web development.",
];
echo json_encode(['text' => $paragraphs[array_rand($paragraphs)], 'timestamp' => time()]);
?>Main Page (index.php)
php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Typing Speed Test</title>
<style>
body { font-family: 'Courier New', monospace; background: #0a0a23; color: #fff; padding: 2rem; }
#text-display { font-size: 1.4rem; line-height: 2; margin: 2rem 0; }
#text-display .correct { color: #00ff88; }
#text-display .incorrect { color: #ff4757; text-decoration: underline; }
#text-display .current { background: rgba(255,255,255,0.2); border-radius: 3px; }
#input-box { width: 100%; padding: 1rem; font-size: 1.2rem; background: #1a1a3e; color: #fff; border: 2px solid #6c63ff; border-radius: 8px; }
.stats { display: flex; gap: 2rem; margin-top: 1.5rem; }
.stat { background: #1a1a3e; padding: 1rem 2rem; border-radius: 12px; text-align: center; }
.stat-value { font-size: 2rem; font-weight: bold; color: #6c63ff; }
</style>
</head>
<body>
<h1>⌨️ Typing Speed Test</h1>
<div id="text-display">Loading...</div>
<input type="text" id="input-box" placeholder="Start typing..." autofocus>
<div class="stats">
<div class="stat"><div class="stat-value" id="wpm">0</div>WPM</div>
<div class="stat"><div class="stat-value" id="accuracy">100%</div>Accuracy</div>
<div class="stat"><div class="stat-value" id="time">0s</div>Time</div>
</div>
<script>
let text = '', startTime = null, charIndex = 0;
const display = document.getElementById('text-display');
const input = document.getElementById('input-box');
fetch('api.php').then(r => r.json()).then(data => { text = data.text; renderText(); });
function renderText() {
display.innerHTML = text.split('').map((ch, i) => {
let cls = i === charIndex ? 'current' : '';
if (i < charIndex) cls = input.value[i] === ch ? 'correct' : 'incorrect';
return '<span class="' + cls + '">' + ch + '</span>';
}).join('');
}
input.addEventListener('input', () => {
if (!startTime) startTime = Date.now();
charIndex = input.value.length;
renderText();
updateStats();
});
function updateStats() {
const elapsed = (Date.now() - startTime) / 1000;
const words = input.value.trim().split(/\s+/).length;
const wpm = Math.round((words / elapsed) * 60) || 0;
const correct = input.value.split('').filter((c, i) => c === text[i]).length;
const accuracy = Math.round((correct / input.value.length) * 100) || 100;
document.getElementById('wpm').textContent = wpm;
document.getElementById('accuracy').textContent = accuracy + '%';
document.getElementById('time').textContent = Math.round(elapsed) + 's';
}
</script>
</body>
</html>Technologies
- PHP — random text serving via JSON API - JavaScript — real-time WPM & accuracy tracking - CSS — dark theme styling
Related Projects
PHPApr 27, 2026
Analog Clock with PHP & CSS
Build a beautiful real-time analog clock using PHP for time calculation and CSS for the rotating hands and dial.
PHPCSSAnimationClock
Read more → Source
PHPApr 27, 2026
Animated Loading Spinners Gallery in PHP
Create a gallery of 10+ beautiful CSS loading spinner animations served dynamically through PHP.
PHPCSSAnimationSpinners
Read more → Source
PHPApr 27, 2026
PHP Color Palette Generator
Generate beautiful random color palettes with hex codes, RGB values, and one-click copy — all powered by PHP.
PHPCSSColorsDesign Tool
Read more → Source
Comments (0)
No comments yet. Be the first to comment!