Hilfe-Seite implementiert
This commit is contained in:
jamulix
jamulix (aider)
parent
f0cbb393e6
commit
43ceb59652
3 changed files with 125 additions and 1 deletions
43
HILFE.md
Normal file
43
HILFE.md
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
# Typewriter Trainer - Hilfe
|
||||
|
||||
## Was ist das?
|
||||
Der Typewriter Trainer ist ein webbasierter Tipptrainer, der Ihnen hilft, das Zehnfingerschreiben zu erlernen und Ihre Tippgeschwindigkeit zu verbessern.
|
||||
|
||||
## Bedienung
|
||||
|
||||
### Grundfunktionen
|
||||
- **Tippen**: Tippen Sie den angezeigten Text direkt im Vorlagenfeld
|
||||
- **Cursor**: Der blaue/cyanfarbene Unterstrich zeigt Ihre aktuelle Position
|
||||
- **Farben**:
|
||||
- Grün: Korrekt getippte Zeichen
|
||||
- Rot: Falsche Zeichen (mit orangefarbener Überlagerung des falsch eingegebenen Zeichens)
|
||||
|
||||
### Steuerung
|
||||
- **Pfeiltasten**: Bewegen den Cursor nach links/rechts
|
||||
- **Backspace**: Löscht Zeichen an der Cursor-Position
|
||||
- **Enter**: Wird automatisch erkannt, wenn im Vorlagentext vorhanden
|
||||
|
||||
### Symbole in der Kopfzeile
|
||||
- **Lautsprecher**: Metronom ein/aus (standardmäßig aktiv)
|
||||
- **Schloss**: ErrorLock - bei geschlossenem Schloss müssen Fehler korrigiert werden, bevor weitergeschrieben werden kann
|
||||
- **Play/Pause**: Tippen pausieren/fortsetzen
|
||||
- **Mond/Sonne**: Dunkel/Hell-Modus wechseln
|
||||
|
||||
### Buttons
|
||||
- **Weiter**: Nächste Lektion laden
|
||||
- **Leistung**: Detaillierte Statistiken ein-/ausblenden
|
||||
- **Statistik**: Zur Statistik-Seite mit Diagrammen navigieren
|
||||
- **Beenden**: Sitzung beenden
|
||||
|
||||
### Statistiken
|
||||
- **ZPM**: Zeichen pro Minute
|
||||
- **WPM**: Wörter pro Minute (1 Wort = 5 Zeichen)
|
||||
- **Fehlerrate**: Prozentualer Anteil der Fehler
|
||||
|
||||
## Tipps für bessere Ergebnisse
|
||||
1. Üben Sie regelmäßig
|
||||
2. Konzentrieren Sie sich auf Genauigkeit vor Geschwindigkeit
|
||||
3. Nutzen Sie das Metronom für einen gleichmäßigen Rhythmus
|
||||
4. Korrigieren Sie Fehler sofort mit Backspace
|
||||
|
||||
Viel Erfolg beim Training!
|
||||
|
|
@ -34,6 +34,12 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
initializeTheme();
|
||||
document.getElementById('theme-toggle').addEventListener('click', toggleTheme);
|
||||
|
||||
// Hilfe Modal initialisieren
|
||||
document.getElementById('help-toggle').addEventListener('click', function() {
|
||||
const helpModal = new bootstrap.Modal(document.getElementById('helpModal'));
|
||||
helpModal.show();
|
||||
});
|
||||
|
||||
// Aktuelle Textdaten - mit Fallback falls undefiniert
|
||||
let fullText = window.fullText || "Kein Text verfügbar. Bitte laden Sie die Seite neu.";
|
||||
let currentCharIndex = window.currentCharIndex || 0;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,9 @@
|
|||
<i data-lucide="pause" id="play-pause-pause" style="width: 24px; height: 24px; position: absolute; top: 0; left: 0;"></i>
|
||||
<i data-lucide="play" id="play-pause-play" style="width: 24px; height: 24px; position: absolute; top: 0; left: 0; display: none;"></i>
|
||||
</div>
|
||||
<i data-lucide="help-circle" class="icon-placeholder" style="width: 24px; height: 24px; cursor: pointer;"></i>
|
||||
<div id="help-toggle" style="width: 24px; height: 24px; cursor: pointer;">
|
||||
<i data-lucide="help-circle" style="width: 24px; height: 24px;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -156,6 +158,79 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hilfe Modal -->
|
||||
<div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="helpModalLabel">Typewriter Trainer - Hilfe</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h6>Was ist das?</h6>
|
||||
<p>Der Typewriter Trainer ist ein webbasierter Tipptrainer, der Ihnen hilft, das Zehnfingerschreiben zu erlernen und Ihre Tippgeschwindigkeit zu verbessern.</p>
|
||||
|
||||
<h6>Bedienung</h6>
|
||||
|
||||
<h7>Grundfunktionen</h7>
|
||||
<ul>
|
||||
<li><strong>Tippen</strong>: Tippen Sie den angezeigten Text direkt im Vorlagenfeld</li>
|
||||
<li><strong>Cursor</strong>: Der blaue/cyanfarbene Unterstrich zeigt Ihre aktuelle Position</li>
|
||||
<li><strong>Farben</strong>:
|
||||
<ul>
|
||||
<li>Grün: Korrekt getippte Zeichen</li>
|
||||
<li>Rot: Falsche Zeichen (mit orangefarbener Überlagerung des falsch eingegebenen Zeichens)</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h7>Steuerung</h7>
|
||||
<ul>
|
||||
<li><strong>Pfeiltasten</strong>: Bewegen den Cursor nach links/rechts</li>
|
||||
<li><strong>Backspace</strong>: Löscht Zeichen an der Cursor-Position</li>
|
||||
<li><strong>Enter</strong>: Wird automatisch erkannt, wenn im Vorlagentext vorhanden</li>
|
||||
</ul>
|
||||
|
||||
<h7>Symbole in der Kopfzeile</h7>
|
||||
<ul>
|
||||
<li><strong>Lautsprecher</strong>: Metronom ein/aus (standardmäßig aktiv)</li>
|
||||
<li><strong>Schloss</strong>: ErrorLock - bei geschlossenem Schloss müssen Fehler korrigiert werden, bevor weitergeschrieben werden kann</li>
|
||||
<li><strong>Play/Pause</strong>: Tippen pausieren/fortsetzen</li>
|
||||
<li><strong>Mond/Sonne</strong>: Dunkel/Hell-Modus wechseln</li>
|
||||
</ul>
|
||||
|
||||
<h7>Buttons</h7>
|
||||
<ul>
|
||||
<li><strong>Weiter</strong>: Nächste Lektion laden</li>
|
||||
<li><strong>Leistung</strong>: Detaillierte Statistiken ein-/ausblenden</li>
|
||||
<li><strong>Statistik</strong>: Zur Statistik-Seite mit Diagrammen navigieren</li>
|
||||
<li><strong>Beenden</strong>: Sitzung beenden</li>
|
||||
</ul>
|
||||
|
||||
<h7>Statistiken</h7>
|
||||
<ul>
|
||||
<li><strong>ZPM</strong>: Zeichen pro Minute</li>
|
||||
<li><strong>WPM</strong>: Wörter pro Minute (1 Wort = 5 Zeichen)</li>
|
||||
<li><strong>Fehlerrate</strong>: Prozentualer Anteil der Fehler</li>
|
||||
</ul>
|
||||
|
||||
<h6>Tipps für bessere Ergebnisse</h6>
|
||||
<ol>
|
||||
<li>Üben Sie regelmäßig</li>
|
||||
<li>Konzentrieren Sie sich auf Genauigkeit vor Geschwindigkeit</li>
|
||||
<li>Nutzen Sie das Metronom für einen gleichmäßigen Rhythmus</li>
|
||||
<li>Korrigieren Sie Fehler sofort mit Backspace</li>
|
||||
</ol>
|
||||
|
||||
<p class="mt-3"><strong>Viel Erfolg beim Training!</strong></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Schließen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bootstrap JS und Font Awesome -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue