MusikimUnterricht.de

Benutzer-Werkzeuge

Webseiten-Werkzeuge

tools:tonhoehentrainer

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige ÜberarbeitungVorherige Überarbeitung
Nächste Überarbeitung		Vorherige Überarbeitung
tools:tonhoehentrainer [19/05/2025 17:51] – Eric Webertools:tonhoehentrainer [20/05/2025 08:42] (aktuell) – Eric Weber
Zeile 1: Zeile 1:
-<!DOCTYPE html> +<html>
-<html lang="de">+
 <head> <head>
     <meta charset="UTF-8">     <meta charset="UTF-8">
Zeile 42: Zeile 41:
             font-weight: bold;             font-weight: bold;
             transition: background-color 0.3s;             transition: background-color 0.3s;
 +            background-color: #E0E0E0;  /* Hellgrauer Standardhintergrund */
         }         }
         .ear-training-app .difficulty-btn.active {         .ear-training-app .difficulty-btn.active {
             background-color: #4CAF50;             background-color: #4CAF50;
-            color: white;+            color: green;  /* Weißer Text für besseren Kontrast */
         }         }
         .ear-training-app .start-btn {         .ear-training-app .start-btn {
             background-color: #4CAF50;             background-color: #4CAF50;
-            color: white;+            color: black;
             padding: 12px 20px;             padding: 12px 20px;
             border: none;             border: none;
Zeile 61: Zeile 61:
         .ear-training-app .play-tones-btn {         .ear-training-app .play-tones-btn {
             background-color: #2196F3;             background-color: #2196F3;
-            color: white;+            color: black;
             padding: 12px 20px;             padding: 12px 20px;
             border: none;             border: none;
Zeile 93: Zeile 93:
         }         }
         .ear-training-app .correct {         .ear-training-app .correct {
-            background-color: #4CAF50 !important; +            background-color: green !important;  /* Dunkleres Grün */ 
-            color: white;+            color: green !important;  /* Weißer Text für besseren Kontrast */
         }         }
         .ear-training-app .incorrect {         .ear-training-app .incorrect {
-            background-color: #F44336 !important; +            background-color: red !important;  /* Dunkleres Rot */ 
-            color: white;+            color: red !important;  /* Weißer Text für besseren Kontrast */
         }         }
         .ear-training-app .progress {         .ear-training-app .progress {
Zeile 135: Zeile 135:
         .ear-training-app .cancel-btn {         .ear-training-app .cancel-btn {
             background-color: #9E9E9E;             background-color: #9E9E9E;
-            color: white;+            color: black;
             padding: 10px 15px;             padding: 10px 15px;
             border: none;             border: none;
Zeile 166: Zeile 166:
         .ear-training-app .next-btn {         .ear-training-app .next-btn {
             background-color: #FF9800;             background-color: #FF9800;
-            color: white;+            color: black;
             padding: 10px 15px;             padding: 10px 15px;
             border: none;             border: none;
Zeile 194: Zeile 194:
                 </div>                 </div>
                 <div class="difficulty-description" id="difficulty-description">                 <div class="difficulty-description" id="difficulty-description">
-                    Einfach: Große Terz (maximal 4 Halbtöne Unterschied)+                    Große Terz (maximal 4 Halbtöne Unterschied)
                 </div>                 </div>
             </div>             </div>
Zeile 286: Zeile 286:
             // Schwierigkeitsgradbeschreibungen             // Schwierigkeitsgradbeschreibungen
             const difficultyDescriptions = {             const difficultyDescriptions = {
-                'easy': 'Einfach: Große Terz (maximal 4 Halbtöne Unterschied)', +                'easy': 'Große Terz (maximal 4 Halbtöne Unterschied)', 
-                'medium': 'Fortgeschritten: Quinte (maximal 7 Halbtöne Unterschied)', +                'medium': 'Quinte (maximal 7 Halbtöne Unterschied)', 
-                'hard': 'Profi: Oktave (maximal 12 Halbtöne Unterschied)'+                'hard': 'Oktave (maximal 12 Halbtöne Unterschied)'
             };             };
                          
Zeile 605: Zeile 605:
                     correctAnswers++;                     correctAnswers++;
                     higherBtn.classList.add('correct');                     higherBtn.classList.add('correct');
 +                    lowerBtn.classList.remove('incorrect');  // Sicherstellen dass der andere Button keine Klasse hat
                                          
                     // Bei richtiger Antwort nach 1 Sekunde automatisch zur nächsten Frage                     // Bei richtiger Antwort nach 1 Sekunde automatisch zur nächsten Frage
Zeile 610: Zeile 611:
                 } else {                 } else {
                     higherBtn.classList.add('incorrect');                     higherBtn.classList.add('incorrect');
 +                    lowerBtn.classList.add('correct');  // Zeigen, dass der andere Button die richtige Wahl gewesen wäre
                                          
                     // Bei falscher Antwort Optionen anzeigen                     // Bei falscher Antwort Optionen anzeigen
                     retryNextDiv.classList.remove('hidden');                     retryNextDiv.classList.remove('hidden');
                 }                 }
 +                
 +                // Buttons deaktivieren nach Antwort
 +                higherBtn.disabled = true;
 +                lowerBtn.disabled = true;
                                  
                 // Fortschritt aktualisieren                 // Fortschritt aktualisieren
Zeile 630: Zeile 636:
                     correctAnswers++;                     correctAnswers++;
                     lowerBtn.classList.add('correct');                     lowerBtn.classList.add('correct');
 +                    higherBtn.classList.remove('incorrect');  // Sicherstellen dass der andere Button keine Klasse hat
                                          
                     // Bei richtiger Antwort nach 1 Sekunde automatisch zur nächsten Frage                     // Bei richtiger Antwort nach 1 Sekunde automatisch zur nächsten Frage
Zeile 635: Zeile 642:
                 } else {                 } else {
                     lowerBtn.classList.add('incorrect');                     lowerBtn.classList.add('incorrect');
 +                    higherBtn.classList.add('correct');  // Zeigen, dass der andere Button die richtige Wahl gewesen wäre
                                          
                     // Bei falscher Antwort Optionen anzeigen                     // Bei falscher Antwort Optionen anzeigen
                     retryNextDiv.classList.remove('hidden');                     retryNextDiv.classList.remove('hidden');
                 }                 }
 +                
 +                // Buttons deaktivieren nach Antwort
 +                higherBtn.disabled = true;
 +                lowerBtn.disabled = true;
                                  
                 // Fortschritt aktualisieren                 // Fortschritt aktualisieren
tools/tonhoehentrainer.1747669918.txt.gz · Zuletzt geändert: von Eric Weber