diff --git a/static/js/script.js b/static/js/script.js
index 83963b4..7900c4b 100644
--- a/static/js/script.js
+++ b/static/js/script.js
@@ -116,31 +116,34 @@ document.addEventListener('DOMContentLoaded', function() {
const targetElement = document.getElementById('target-text');
let highlightedText = '';
- // Verwende den ursprünglichen Text für die Anzeige, nicht den trimmten
+ // Verwende den ursprünglichen Text für die Anzeige
const originalText = currentText;
- for (let i = 0; i < originalText.length; i++) {
+ // Erstelle eine Kopie des Textes für die Anzeige, um Tabulatoren korrekt zu behandeln
+ let displayText = originalText;
+
+ for (let i = 0; i < displayText.length; i++) {
if (i < userInput.length) {
- if (userInput[i] === originalText[i]) {
+ if (userInput[i] === displayText[i]) {
// Für korrekt getippte Leerzeichen und Tabulatoren: sichtbar machen
- if (originalText[i] === ' ') {
+ if (displayText[i] === ' ') {
highlightedText += '·';
- } else if (originalText[i] === '\t') {
+ } else if (displayText[i] === '\t') {
highlightedText += '→';
} else {
- highlightedText += `${originalText[i]}`;
+ highlightedText += `${displayText[i]}`;
}
} else {
- highlightedText += `${originalText[i]}`;
+ highlightedText += `${displayText[i]}`;
}
} else {
// Für nicht eingegebene Zeichen: Einrückungen anzeigen
- if (originalText[i] === ' ') {
+ if (displayText[i] === ' ') {
highlightedText += '·';
- } else if (originalText[i] === '\t') {
+ } else if (displayText[i] === '\t') {
highlightedText += '→';
} else {
- highlightedText += originalText[i];
+ highlightedText += displayText[i];
}
}
}