Musikunterricht in Thüringen

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 [05/04/2026 15:43] (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 231: Zeile 231:
             <button id="restart-btn" class="start-btn">Neue Prüfung starten</button>             <button id="restart-btn" class="start-btn">Neue Prüfung starten</button>
         </div>         </div>
 +        <div style="text-align: right; margin-top: 16px; font-size: 0.75rem; color: #999;">
 +  Made with <a href="https://claude.ai" target="_blank" style="color: #4CAF50; text-decoration: none;">claude.ai</a>
 +  by <a href="https://www.ericweber.de" target="_blank" style="color: #4CAF50; text-decoration: none;">Eric Weber</a>
 +</div>
     </div>     </div>
  
Zeile 286: Zeile 290:
             // 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 609:
                     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 615:
                 } 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 640:
                     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 646:
                 } 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