Przejdź do głównej zawartości

18. Tester prędkości pisania

Test prędkości pisania — użytkownik przepisuje wyświetlony tekst, aplikacja mierzy WPM (Words Per Minute) i dokładność.

function useTypingTest(targetText) {
const [input, setInput] = useState('');
const [startTime, setStartTime] = useState(null);
const [finished, setFinished] = useState(false);
function handleInput(e) {
const value = e.target.value;
if (!startTime && value.length === 1) setStartTime(Date.now());
setInput(value);
if (value === targetText) setFinished(true);
}
const wpm = useMemo(() => {
if (!startTime || !finished) return 0;
const minutes = (Date.now() - startTime) / 60000;
const words = targetText.split(' ').length;
return Math.round(words / minutes);
}, [finished, startTime, targetText]);
const accuracy = useMemo(() => {
if (!input.length) return 100;
let correct = 0;
for (let i = 0; i < input.length; i++) {
if (input[i] === targetText[i]) correct++;
}
return Math.round((correct / input.length) * 100);
}, [input, targetText]);
return { input, handleInput, wpm, accuracy, finished };
}
  • Wyświetlenie tekstu do przepisania
  • Pole wpisywania (textarea)
  • Podświetlenie poprawnych / błędnych liter
  • Wynik WPM i dokładność po zakończeniu
  • Restart testu
Ocena: 3.0

Powodzenia!

Tester pisania to projekt z ciekawym wyzwaniem — podświetlanie liter (poprawna/błędna/bieżąca) wymaga pracy ze stringami i renderowania per-znak. Nie używaj jednego input — zamiast tego porównuj każdy znak osobno i renderuj span z odpowiednim kolorem!