Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- tools:akkordtrainer2 [07/11/2025 12:39] – angelegt Eric Weber
+++ tools:akkordtrainer2 [19/01/2026 15:13] (aktuell) – Eric Weber
@@ Zeile 1: / Zeile 1: @@
 <html>
-<html lang="de">
 <head>
     <meta charset="UTF-8">
@@ Zeile 43: / Zeile 42: @@
         button {
             padding: 10px 20px;
-            border: none;
+            border: 2px solid #333;
             border-radius: 5px;
             cursor: pointer;
             font-size: 14px;
-            transition: background-color 0.3s;
+            transition: all 0.3s;
+            font-weight: 600;
         }
         .btn-primary {
             background-color: #007bff;
-            color: white;
+            color: black;
+            border-color: #007bff;
         }
         .btn-primary:hover {
             background-color: #0056b3;
+            border-color: #0056b3;
         }
         .btn-secondary {
             background-color: #6c757d;
-            color: white;
+            color: black;
+            border-color: #6c757d;
         }
         .btn-secondary:hover {
             background-color: #545b62;
+            border-color: #545b62;
         }
         .btn-success {
             background-color: #28a745;
-            color: white;
+            color: black;
+            border-color: #28a745;
         }
         .btn-success:hover {
             background-color: #218838;
+            border-color: #218838;
         }
         .radio-group {
@@ Zeile 158: / Zeile 164: @@
         .play-sound-btn {
             background-color: #17a2b8;
-            color: white;
+            color: black;
             padding: 15px 30px;
             font-size: 18px;
             margin: 20px 0;
+            border: 2px solid #17a2b8;
         }
         .play-sound-btn:hover {
             background-color: #138496;
+            border-color: #138496;
         }
         .error-message {
@@ Zeile 186: / Zeile 194: @@
     <div class="chord-trainer">
         <div id="settings" class="settings-container">
-            <h2>Akkord-Trainer - Einstellungen</h2>
+            <h1>Akkord-Trainer 2</h1>
+            <h2>Jetzt mit echten Hörbeispielen</h2>
-            <div class="warning-box">
-                <strong>⚠️ Audio-Problem erkannt:</strong> Die Audio-Dateien können in dieser Umgebung nicht abgespielt werden.
-                Dies ist ein bekanntes Problem mit externen Audio-Quellen in Claude Artifacts.
-                <br><br>
-                <strong>Lösung:</strong> Bitte kopiere den HTML-Code und speichere ihn als .html-Datei auf deinem Computer.
-                Dann öffne die Datei in deinem Browser - dort sollte der Audio-Player funktionieren.
-            </div>
             <div class="section">
                 <h3>Dreiklänge</h3>
@@ Zeile 284: / Zeile 286: @@
                 <div class="radio-group">
                     <div class="radio-item">
-                        <input type="radio" id="simultaneous" name="playMode" value="simultaneous" checked>
+                        <input type="radio" id="successive" name="playMode" value="successive" checked>
-                        <label for="simultaneous">Simultan (gleichzeitig)</label>
+                        <label for="successive">Sukzessiv (nacheinander aufsteigend)</label>
                     </div>
                     <div class="radio-item">
-                        <input type="radio" id="successive" name="playMode" value="successive">
+                        <input type="radio" id="simultaneous" name="playMode" value="simultaneous">
-                        <label for="successive">Sukzessiv (nacheinander aufsteigend)</label>
+                        <label for="simultaneous">Simultan (gleichzeitig)</label>
                     </div>
                 </div>
@@ Zeile 559: / Zeile 561: @@
         function generateWrongAnswers(correctType, correctInversion) {
             const wrong = [];
-            const allTypes = Object.keys(chordDefinitions);
+            const selectedTypes = quizSettings.chordTypes;
-            const isTriad = chordDefinitions[correctType].intervals.length === 3;
+            const correctAnswer = chordDefinitions[correctType].name + ' - ' + getInversionName(correctType, correctInversion);
-            while (wrong.length < 4) {
+            // Erstelle alle möglichen Kombinationen
-                const randomType = allTypes[Math.floor(Math.random() * allTypes.length)];
+            const allPossibleAnswers = [];
-                const randomIsTriad = chordDefinitions[randomType].intervals.length === 3;
+            selectedTypes.forEach(type => {
-                const randomMaxInv = randomIsTriad ? 2 : 3;
+                const isTriad = chordDefinitions[type].intervals.length === 3;
-                const randomInv = Math.floor(Math.random() * (randomMaxInv + 1));
+                let maxInv = 0;
+                if (isTriad && quizSettings.triadInversion === 'all') {
+                    maxInv = 2;
+                } else if (!isTriad && quizSettings.seventhInversion === 'all') {
+                    maxInv = 3;
+                }
-                const answer = chordDefinitions[randomType].name + ' - ' + getInversionName(randomType, randomInv);
+                for (let inv = 0; inv <= maxInv; inv++) {
-                const correctAnswer = chordDefinitions[correctType].name + ' - ' + getInversionName(correctType, correctInversion);
+                    const answer = chordDefinitions[type].name + ' - ' + getInversionName(type, inv);
+                    if (answer !== correctAnswer) {
-                if (answer !== correctAnswer && !wrong.includes(answer)) {
+                        allPossibleAnswers.push(answer);
-                    wrong.push(answer);
+                    }
                 }
-            }
+            });
-            return wrong;
+            // Mische und wähle bis zu 4 falsche Antworten
+            const shuffled = allPossibleAnswers.sort(() => Math.random() - 0.5);
+            return shuffled.slice(0, Math.min(4, shuffled.length));
         }