MusikimUnterricht.de

Benutzer-Werkzeuge

Webseiten-Werkzeuge

tools:tonhoehentrainer

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Nächste Überarbeitung		Vorherige Überarbeitung
tools:tonhoehentrainer [19/05/2025 17:47] – angelegt Eric Webertools:tonhoehentrainer [20/05/2025 08:42] (aktuell) – Eric Weber
Zeile 5: Zeile 5:
     <title>Gehörtraining: Tonhöhenvergleich</title>     <title>Gehörtraining: Tonhöhenvergleich</title>
     <style>     <style>
-        body {+        .ear-training-app {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             max-width: 800px;             max-width: 800px;
Zeile 12: Zeile 12:
             background-color: #f5f5f5;             background-color: #f5f5f5;
         }         }
-        h1, h2 {+        .ear-training-app h1, .ear-training-app h2 {
             color: #333;             color: #333;
             text-align: center;             text-align: center;
         }         }
-        .container {+        .ear-training-app .container {
             background-color: white;             background-color: white;
             border-radius: 10px;             border-radius: 10px;
Zeile 23: Zeile 23:
             margin-bottom: 20px;             margin-bottom: 20px;
         }         }
-        .settings {+        .ear-training-app .settings {
             display: flex;             display: flex;
             flex-direction: column;             flex-direction: column;
             gap: 15px;             gap: 15px;
         }         }
-        .difficulty-options {+        .ear-training-app .difficulty-options {
             display: flex;             display: flex;
             gap: 10px;             gap: 10px;
Zeile 34: Zeile 34:
             margin: 10px 0;             margin: 10px 0;
         }         }
-        .difficulty-btn {+        .ear-training-app .difficulty-btn {
             padding: 10px 15px;             padding: 10px 15px;
             border: none;             border: none;
Zeile 41: Zeile 41:
             font-weight: bold;             font-weight: bold;
             transition: background-color 0.3s;             transition: background-color 0.3s;
 +            background-color: #E0E0E0;  /* Hellgrauer Standardhintergrund */
         }         }
-        .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 */
         }         }
-        .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 58: Zeile 59:
             display: block;             display: block;
         }         }
-        .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 70: Zeile 71:
             display: block;             display: block;
         }         }
-        .answer-btns {+        .ear-training-app .answer-btns {
             display: flex;             display: flex;
             justify-content: center;             justify-content: center;
Zeile 76: Zeile 77:
             margin: 20px 0;             margin: 20px 0;
         }         }
-        .answer-btn {+        .ear-training-app .answer-btn {
             padding: 15px 30px;             padding: 15px 30px;
             border: none;             border: none;
Zeile 85: Zeile 86:
             transition: background-color 0.3s;             transition: background-color 0.3s;
         }         }
-        .higher-btn {+        .ear-training-app .higher-btn {
             background-color: #FFEB3B;             background-color: #FFEB3B;
         }         }
-        .lower-btn {+        .ear-training-app .lower-btn {
             background-color: #FFEB3B;             background-color: #FFEB3B;
         }         }
-        .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 */
         }         }
-        .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 */
         }         }
-        .progress {+        .ear-training-app .progress {
             display: flex;             display: flex;
             justify-content: space-between;             justify-content: space-between;
             margin-top: 20px;             margin-top: 20px;
         }         }
-        .progress-dots {+        .ear-training-app .progress-dots {
             display: flex;             display: flex;
             gap: 10px;             gap: 10px;
             margin-bottom: 10px;             margin-bottom: 10px;
         }         }
-        .dot {+        .ear-training-app .dot {
             width: 20px;             width: 20px;
             height: 20px;             height: 20px;
Zeile 115: Zeile 116:
             background-color: #ddd;             background-color: #ddd;
         }         }
-        .dot.correct {+        .ear-training-app .dot.correct {
             background-color: #4CAF50;             background-color: #4CAF50;
         }         }
-        .dot.incorrect {+        .ear-training-app .dot.incorrect {
             background-color: #F44336;             background-color: #F44336;
         }         }
-        .dot.current {+        .ear-training-app .dot.current {
             border: 2px solid #2196F3;             border: 2px solid #2196F3;
         }         }
-        .stats {+        .ear-training-app .stats {
             text-align: center;             text-align: center;
             font-weight: bold;             font-weight: bold;
             margin-top: 10px;             margin-top: 10px;
         }         }
-        .hidden {+        .ear-training-app .hidden {
             display: none;             display: none;
         }         }
-        .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 144: Zeile 145:
             margin: 10px auto;             margin: 10px auto;
         }         }
-        .result-message {+        .ear-training-app .result-message {
             text-align: center;             text-align: center;
             font-size: 18px;             font-size: 18px;
Zeile 150: Zeile 151:
             font-weight: bold;             font-weight: bold;
         }         }
-        .audio-status {+        .ear-training-app .audio-status {
             text-align: center;             text-align: center;
             margin: 10px 0;             margin: 10px 0;
Zeile 157: Zeile 158:
             border-radius: 5px;             border-radius: 5px;
         }         }
-        .difficulty-description {+        .ear-training-app .difficulty-description {
             font-size: 14px;             font-size: 14px;
             text-align: center;             text-align: center;
Zeile 163: Zeile 164:
             color: #666;             color: #666;
         }         }
-        .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 174: Zeile 175:
             display: inline-block;             display: inline-block;
         }         }
-        #retry-next {+        .ear-training-app #retry-next {
             text-align: center;             text-align: center;
         }         }
Zeile 180: Zeile 181:
 </head> </head>
 <body> <body>
-    <h1>Gehörtraining: Tonhöhenvergleich</h1> +    <div class="ear-training-app"> 
-     +        <h1>Gehörtraining: Tonhöhenvergleich</h1> 
-    <div class="container settings"> +         
-        <h2>Einstellungen</h2> +        <div class="container settings"> 
-        <div> +            <h2>Einstellungen</h2> 
-            <p>Wähle den Schwierigkeitsgrad:</p> +            <div> 
-            <div class="difficulty-options"> +                <p>Wähle den Schwierigkeitsgrad:</p> 
-                <button class="difficulty-btn active" data-difficulty="easy">Einfach</button> +                <div class="difficulty-options"> 
-                <button class="difficulty-btn" data-difficulty="medium">Fortgeschritten</button> +                    <button class="difficulty-btn active" data-difficulty="easy">Einfach</button> 
-                <button class="difficulty-btn" data-difficulty="hard">Profi</button>+                    <button class="difficulty-btn" data-difficulty="medium">Fortgeschritten</button> 
 +                    <button class="difficulty-btn" data-difficulty="hard">Profi</button> 
 +                </div> 
 +                <div class="difficulty-description" id="difficulty-description"> 
 +                    Große Terz (maximal 4 Halbtöne Unterschied) 
 +                </div>
             </div>             </div>
-            <div class="difficulty-description" id="difficulty-description"> +            <div id="audio-permission" class="audio-status"> 
-                Einfach: Große Terz (maximal 4 Halbtöne Unterschied)+                Bitte klicke hier um Audio zu aktivieren
             </div>             </div>
 +            <button id="start-test" class="start-btn">Prüfung starten</button>
         </div>         </div>
-        <div id="audio-permission" class="audio-status"> 
-            Bitte klicke hier um Audio zu aktivieren 
-        </div> 
-        <button id="start-test" class="start-btn">Prüfung starten</button> 
-    </div> 
  
-    <div id="test-area" class="container hidden"> +        <div id="test-area" class="container hidden"> 
-        <button id="play-tones" class="play-tones-btn">Töne abspielen</button> +            <button id="play-tones" class="play-tones-btn">Töne abspielen</button> 
-         +             
-        <div class="answer-btns"> +            <div class="answer-btns"> 
-            <button id="higher-btn" class="answer-btn higher-btn">Höher</button> +                <button id="higher-btn" class="answer-btn higher-btn">Höher</button> 
-            <button id="lower-btn" class="answer-btn lower-btn">Tiefer</button>+                <button id="lower-btn" class="answer-btn lower-btn">Tiefer</button> 
 +            </div> 
 +             
 +            <div id="retry-next" class="hidden"> 
 +                <button id="retry-btn" class="play-tones-btn">Nochmal hören</button> 
 +                <button id="next-btn" class="next-btn">Nächste Frage</button> 
 +            </div> 
 +             
 +            <div class="progress"> 
 +                <div class="progress-dots" id="progress-dots"></div> 
 +            </div> 
 +            <div class="stats" id="stats"> 
 +                Frage 1 von 10 | Richtig: 0% | Falsch: 0% 
 +            </div> 
 +             
 +            <button id="cancel-test" class="cancel-btn">Prüfung abbrechen</button>
         </div>         </div>
                  
-        <div id="retry-next" class="hidden"> +        <div id="final-result" class="container hidden"> 
-            <button id="retry-btn" class="play-tones-btn">Nochmal hören</button> +            <h2>Prüfungsergebnis</h2> 
-            <button id="next-btn" class="next-btn">Nächste Frage</button>+            <div class="result-message" id="result-message"></div> 
 +            <button id="restart-btn" class="start-btn">Neue Prüfung starten</button>
         </div>         </div>
-         
-        <div class="progress"> 
-            <div class="progress-dots" id="progress-dots"></div> 
-        </div> 
-        <div class="stats" id="stats"> 
-            Frage 1 von 10 | Richtig: 0% | Falsch: 0% 
-        </div> 
-         
-        <button id="cancel-test" class="cancel-btn">Prüfung abbrechen</button> 
-    </div> 
-     
-    <div id="final-result" class="container hidden"> 
-        <h2>Prüfungsergebnis</h2> 
-        <div class="result-message" id="result-message"></div> 
-        <button id="restart-btn" class="start-btn">Neue Prüfung starten</button> 
     </div>     </div>
  
Zeile 256: Zeile 259:
                          
             // Schwierigkeitsgrad-Buttons             // Schwierigkeitsgrad-Buttons
-            const difficultyBtns = document.querySelectorAll('.difficulty-btn');+            const difficultyBtns = document.querySelectorAll('.ear-training-app .difficulty-btn');
                          
             // Variablen für das Spiel             // Variablen für das Spiel
Zeile 283: 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 491: Zeile 494:
                 // UI aktualisieren                 // UI aktualisieren
                 testArea.classList.remove('hidden');                 testArea.classList.remove('hidden');
-                document.querySelector('.settings').classList.add('hidden');+                document.querySelector('.ear-training-app .settings').classList.add('hidden');
                 finalResult.classList.add('hidden');                 finalResult.classList.add('hidden');
                 retryNextDiv.classList.add('hidden');                 retryNextDiv.classList.add('hidden');
Zeile 507: Zeile 510:
             function cancelTest() {             function cancelTest() {
                 testArea.classList.add('hidden');                 testArea.classList.add('hidden');
-                document.querySelector('.settings').classList.remove('hidden');+                document.querySelector('.ear-training-app .settings').classList.remove('hidden');
             }             }
                          
Zeile 602: 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 607: 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 627: 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 632: 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
Zeile 656: Zeile 671:
             restartBtn.addEventListener('click', () => {             restartBtn.addEventListener('click', () => {
                 finalResult.classList.add('hidden');                 finalResult.classList.add('hidden');
-                document.querySelector('.settings').classList.remove('hidden');+                document.querySelector('.ear-training-app .settings').classList.remove('hidden');
             });             });
         });         });
tools/tonhoehentrainer.1747669635.txt.gz · Zuletzt geändert: von Eric Weber