dschlueter/typewriter_tutor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fortschrittsbalken zeigt jetzt Zeichen-Fortschritt der aktuellen Lektion

Browse source 
- Anzeige: "Fortschritt: X von Y" (X = eingegebene Zeichen, Y = Lektionslänge)
- Prozentanzeige basiert auf Cursor-Position / Lektionslänge
- Aktualisiert sich bei jeder Eingabe in Echtzeit
- Beispiel: Bei 1001 von 2000 Zeichen zeigt der Balken 50%

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jamulix 2025-10-29 00:17:12 +01:00
commit 0f2113732a
2 changed files with 32 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

25
static/js/main.js
View file

@ -350,6 +350,30 @@ class TypewriterApp {
}
}
/**
* Update progress bar based on current position in lesson
*/
updateProgressBar() {
const totalChars = this.fullText.length;
const currentChars = this.currentCharIndex;
const progressPercent = totalChars > 0 ? Math.round((currentChars / totalChars) * 100) : 0;
// Update text values
const progressCurrent = document.getElementById('progress-current');
const progressTotal = document.getElementById('progress-total');
const progressPercentElement = document.getElementById('progress-percent');
const progressBar = document.getElementById('progress-bar');
if (progressCurrent) progressCurrent.textContent = currentChars;
if (progressTotal) progressTotal.textContent = totalChars;
if (progressPercentElement) progressPercentElement.textContent = `${progressPercent}%`;
if (progressBar) {
progressBar.style.width = `${progressPercent}%`;
progressBar.setAttribute('aria-valuenow', currentChars);
progressBar.setAttribute('aria-valuemax', totalChars);
}
}
/**
* Update text display
* @param {boolean} isKeystroke - Whether this is triggered by a keystroke
@ -357,6 +381,7 @@ class TypewriterApp {
updateDisplay(isKeystroke = false) {
this.textDisplayManager.updateDisplay(this.userInput, this.currentCharIndex, isKeystroke);
this.updateTrainingTimeDisplay();
this.updateProgressBar();
}
/**

14
templates/index.html
View file

@ -61,15 +61,15 @@
<!-- Fortschrittsbalken -->
<div class="mb-3">
<div class="d-flex justify-content-between align-items-center">
<small>Fortschritt: {{ current_lesson_index + 1 }} von {{ lessons|length }}</small>
<small>{{ ((current_lesson_index + 1) / lessons|length * 100) | round | int }}%</small>
<small id="progress-text">Fortschritt: <span id="progress-current">{{ current_position }}</span> von <span id="progress-total">{{ current_text|length }}</span></small>
<small id="progress-percent">{{ ((current_position / current_text|length * 100) if current_text|length > 0 else 0) | round | int }}%</small>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar" role="progressbar"
style="width: {{ ((current_lesson_index + 1) / lessons|length * 100) | round | int }}%;"
aria-valuenow="{{ current_lesson_index + 1 }}"
aria-valuemin="0"
aria-valuemax="{{ lessons|length }}">
<div id="progress-bar" class="progress-bar" role="progressbar"
style="width: {{ ((current_position / current_text|length * 100) if current_text|length > 0 else 0) | round | int }}%;"
aria-valuenow="{{ current_position }}"
aria-valuemin="0"
aria-valuemax="{{ current_text|length }}">
</div>
</div>
</div>