modified: app.py

modified:   templates/quiz.html

app.py

@@ -258,7 +258,11 @@ def check_answer():
     correct_answer = data.get('correct_answer', '').lower()
     game_mode = data.get('game_mode', 'artist')
     playlist_id = data.get('playlist_id')
+    all_tracks = data.get('all_tracks', [])
 
+    # Originalwert für Vergleich speichern
+    original_guess = guess
+    
     # Bei Titel und Künstler: Sonderzeichen entfernen für besseren Vergleich
     if game_mode == 'title' or game_mode == 'artist':
         guess = clean_title(guess)
@@ -274,10 +278,28 @@ def check_answer():
         key = f'score_{playlist_id}'
         session[key] = session.get(key, 0) + 1
 
-    return {
+    # Bei falscher Antwort: Finde das eingegebene Lied in all_tracks
+    guessed_track = None
+    if not is_correct and all_tracks:
+        for track in all_tracks:
+            if game_mode == 'title':
+                if clean_title(track['name'].lower()) == guess:
+                    guessed_track = track
+                    break
+            elif game_mode == 'artist':
+                if clean_title(track['artist'].lower()) == guess:
+                    guessed_track = track
+                    break
+
+    response = {
         "correct": is_correct,
         "correct_answer": correct_answer
     }
+    
+    if guessed_track:
+        response["guessed_track"] = guessed_track
+
+    return response
 
 @app.route("/play_track", methods=["POST"])
 def play_track():

templates/quiz.html

@@ -381,7 +381,8 @@
           guess: guess,
           correct_answer: correctAnswer,
           game_mode: currentGameMode,
-          playlist_id: "{{ playlist_id }}"
+          playlist_id: "{{ playlist_id }}",
+          all_tracks: allTracks  // Sende alle Tracks mit, um das falsche Lied zu finden
         })
       })
       .then(response => response.json())
@@ -394,8 +395,31 @@
           resultContainer.innerHTML = `<h3>${i18n.correct}</h3>`;
         } else {
           resultContainer.className = 'result-container incorrect';
-          resultContainer.innerHTML = `<h3>${i18n.wrong}</h3>
+          
-            <p>${i18n.right_answer} <strong>${data.correct_answer}</strong></p>`;
+          // Wenn ein falsches Lied erkannt wurde, zeige Vergleich an
+          if (data.guessed_track) {
+            resultContainer.innerHTML = `
+              <h3>${i18n.wrong}</h3>
+              <div style="display:flex; gap:20px; margin-top:20px; justify-content:center; flex-wrap:wrap;">
+                <!-- Falsches Lied (Links) -->
+                <div style="flex:1; min-width:250px; max-width:350px; padding:15px; background:rgba(244,67,54,0.15); border:2px solid #f44336; border-radius:12px;">
+                  <h4 style="color:#f44336; margin-bottom:10px;">❌ ${i18n.your_answer || 'Your Answer'}</h4>
+                  <p style="margin:5px 0;"><strong>${i18n.song || 'Song'}:</strong> ${data.guessed_track.name}</p>
+                  <p style="margin:5px 0;"><strong>${i18n.artist || 'Artist'}:</strong> ${data.guessed_track.artist}</p>
+                </div>
+                <!-- Richtiges Lied (Rechts) -->
+                <div style="flex:1; min-width:250px; max-width:350px; padding:15px; background:rgba(76,175,80,0.15); border:2px solid #4CAF50; border-radius:12px;">
+                  <h4 style="color:#4CAF50; margin-bottom:10px;">✓ ${i18n.correct_answer || 'Correct Answer'}</h4>
+                  <p style="margin:5px 0;"><strong>${i18n.song || 'Song'}:</strong> {{ track.name | clean }}</p>
+                  <p style="margin:5px 0;"><strong>${i18n.artist || 'Artist'}:</strong> {{ track.artists[0].name | clean }}</p>
+                </div>
+              </div>
+            `;
+          } else {
+            // Fallback: Nur die richtige Antwort anzeigen
+            resultContainer.innerHTML = `<h3>${i18n.wrong}</h3>
+              <p>${i18n.right_answer} <strong>${data.correct_answer}</strong></p>`;
+          }
         }
 
         // Song-Infos ergänzen