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

feat: Optimiere Lektionen-Buttons und zeige Newline-Zeichen an

Browse source 
Co-authored-by: aider (deepseek/deepseek-reasoner) <aider@aider.chat>
This commit is contained in:
jamulix 2025-10-21 19:54:43 +02:00
commit a2106d067d
3 changed files with 32 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

5
static/css/style.css
View file

@ -88,6 +88,11 @@ body {
max-width: 900px;
}
.highlight-newline {
color: #888;
font-weight: bold;
}
@media (max-width: 768px) {
.container {
padding: 0 10px;

34
static/js/script.js
View file

@ -154,27 +154,41 @@ document.addEventListener('DOMContentLoaded', function() {
const originalText = currentText;
for (let i = 0; i < originalText.length; i++) {
const currentChar = originalText[i];
if (i < userInput.length) {
if (userInput[i] === originalText[i]) {
// Für korrekt getippte Leerzeichen und Tabulatoren: sichtbar machen
if (originalText[i] === ' ') {
if (userInput[i] === currentChar) {
// Für korrekt getippte Zeichen
if (currentChar === ' ') {
highlightedText += '<span class="highlight-correct highlight-space">·</span>';
} else if (originalText[i] === '\t') {
} else if (currentChar === '\t') {
highlightedText += '<span class="highlight-correct highlight-tab">→</span>';
} else if (currentChar === '\n') {
highlightedText += '<span class="highlight-correct highlight-newline">↵</span>';
} else {
highlightedText += `<span class="highlight-correct">${originalText[i]}</span>`;
highlightedText += `<span class="highlight-correct">${currentChar}</span>`;
}
} else {
highlightedText += `<span class="highlight-incorrect">${originalText[i]}</span>`;
// Für falsch getippte Zeichen
if (currentChar === ' ') {
highlightedText += '<span class="highlight-incorrect highlight-space">·</span>';
} else if (currentChar === '\t') {
highlightedText += '<span class="highlight-incorrect highlight-tab">→</span>';
} else if (currentChar === '\n') {
highlightedText += '<span class="highlight-incorrect highlight-newline">↵</span>';
} else {
highlightedText += `<span class="highlight-incorrect">${currentChar}</span>`;
}
}
} else {
// Für nicht eingegebene Zeichen: Einrückungen anzeigen
if (originalText[i] === ' ') {
// Für nicht eingegebene Zeichen
if (currentChar === ' ') {
highlightedText += '<span class="highlight-space">·</span>';
} else if (originalText[i] === '\t') {
} else if (currentChar === '\t') {
highlightedText += '<span class="highlight-tab">→</span>';
} else if (currentChar === '\n') {
highlightedText += '<span class="highlight-newline">↵</span>';
} else {
highlightedText += originalText[i];
highlightedText += currentChar;
}
}
}

6
templates/index.html
View file

@ -97,10 +97,10 @@
<h5 class="card-title">Lektionen</h5>
<div class="row">
{% for lesson in lessons %}
<div class="col-md-3 mb-2">
<button class="btn btn-outline-primary w-100 lesson-btn"
<div class="col-md-2 col-3 mb-2">
<button class="btn btn-outline-primary btn-sm w-100 lesson-btn"
data-lesson-index="{{ loop.index0 }}">
{{ lesson.get('description', 'Lektion ' ~ (loop.index0 + 1)) }}
{{ lesson.get('description', '# ' ~ (loop.index0 + 1)) }}
</button>
</div>
{% endfor %}