modified: app.py

modified:   templates/quiz.html

app.py

@@ -14,6 +14,14 @@ import json
 app = Flask(__name__)
 app.secret_key = os.getenv("SECRET_KEY")
 
+# Jinja2-Filter für die Bereinigung von Titeln/Künstlern
+@app.template_filter('clean')
+def clean_filter(text):
+    """Template-Filter um Sonderzeichen aus Titeln/Künstlern zu entfernen"""
+    if not text:
+        return ""
+    return clean_title(str(text))
+
 # Erweiterte Berechtigungen für Web Playback SDK
 SCOPE = "user-library-read playlist-read-private streaming user-read-email user-read-private"
 
@@ -176,8 +184,8 @@ def quiz(playlist_id):
     for item in tracks:
         track_info = {
             "id": item["id"],
-            "name": item["name"],
-            "artist": item["artists"][0]["name"],
+            "name": clean_title(item["name"]),  # Bereinigter Name für Frontend
+            "artist": clean_title(item["artists"][0]["name"]),  # Bereinigter Künstler
             "uri": item["uri"],
             "release_date": item.get("album", {}).get("release_date", "Unbekannt")[:4]
         }
@@ -251,9 +259,6 @@ def check_answer():
     game_mode = data.get('game_mode', 'artist')
     playlist_id = data.get('playlist_id')
 
-    # Speichere Original für Anzeige
-    original_answer = correct_answer
-
     # Bei Titel und Künstler: Sonderzeichen entfernen für besseren Vergleich
     if game_mode == 'title' or game_mode == 'artist':
         guess = clean_title(guess)
@@ -271,7 +276,7 @@ def check_answer():
 
     return {
         "correct": is_correct,
-        "correct_answer": original_answer
+        "correct_answer": correct_answer
     }
 
 @app.route("/play_track", methods=["POST"])

templates/quiz.html

@@ -297,11 +297,11 @@
     
     function setCorrectAnswer() {
       if (currentGameMode === 'artist') {
-        correctAnswer = "{{ track.artists[0].name }}";
+        correctAnswer = "{{ track.artists[0].name | clean }}";
         document.getElementById('question-text').innerText = i18n.question_artist;
         document.getElementById('answerInput').placeholder = i18n.input_artist;
       } else if (currentGameMode === 'title') {
-        correctAnswer = "{{ track.name }}";
+        correctAnswer = "{{ track.name | clean }}";
         document.getElementById('question-text').innerText = i18n.question_title;
         document.getElementById('answerInput').placeholder = i18n.input_title;
       } else if (currentGameMode === 'year') {
@@ -312,17 +312,6 @@
       }
     }
     
-    // Hilfsfunktion: Entfernt Sonderzeichen wie in Python clean_title
-    function cleanTitle(title) {
-      // Entferne Klammerzusätze
-      title = title.replace(/(\s*[\(\[][^)\]]*[\)\]])/g, '');
-      // Entferne Apostrophe und Anführungszeichen
-      title = title.replace(/['''`´ʼ""„""']/g, '');
-      // Entferne weitere Sonderzeichen (außer Buchstaben, Zahlen, Leerzeichen, - und &)
-      title = title.replace(/[^\w\s\-&]/g, '');
-      return title.trim();
-    }
-    
     function togglePlay() {
       const deviceId = document.getElementById('device_id').value;
       
@@ -367,9 +356,8 @@
           item.className = 'search-item';
           item.innerHTML = `<strong>${result.name}</strong> - ${result.artist}`;
           item.onclick = function() {
-            // Setze den bereinigten Wert (ohne Sonderzeichen) ins Input
-            const valueToSet = currentGameMode === 'artist' ? result.artist : result.name;
-            document.getElementById('answerInput').value = cleanTitle(valueToSet);
+            document.getElementById('answerInput').value = 
+              currentGameMode === 'artist' ? result.artist : result.name;
             resultsContainer.style.display = 'none';
           };
           resultsContainer.appendChild(item);
@@ -415,9 +403,9 @@
           <div style="margin-top:20px; padding:20px; background:rgba(15,20,35,0.8); border-radius:15px; border:1px solid rgba(29,185,84,0.3);">
             <img src="{{ track.album.images[0].url }}" alt="Cover" style="width:120px; height:120px; border-radius:12px; margin-bottom:15px; box-shadow:0 4px 15px rgba(0,0,0,0.5);"><br>
             <div style="text-align:left; display:inline-block; margin-top:10px;">
-              <p style="margin:8px 0;"><strong style="color:#1DB954;">${i18n.song || 'Song'}:</strong> <span style="color:#e0e0e0;">{{ track.name }}</span></p>
-              <p style="margin:8px 0;"><strong style="color:#1DB954;">${i18n.artist || 'Artist'}:</strong> <span style="color:#e0e0e0;">{{ track.artists[0].name }}</span></p>
-              <p style="margin:8px 0;"><strong style="color:#1DB954;">${i18n.album || 'Album'}:</strong> <span style="color:#e0e0e0;">{{ track.album.name }}</span></p>
+              <p style="margin:8px 0;"><strong style="color:#1DB954;">${i18n.song || 'Song'}:</strong> <span style="color:#e0e0e0;">{{ track.name | clean }}</span></p>
+              <p style="margin:8px 0;"><strong style="color:#1DB954;">${i18n.artist || 'Artist'}:</strong> <span style="color:#e0e0e0;">{{ track.artists[0].name | clean }}</span></p>
+              <p style="margin:8px 0;"><strong style="color:#1DB954;">${i18n.album || 'Album'}:</strong> <span style="color:#e0e0e0;">{{ track.album.name | clean }}</span></p>
               <p style="margin:8px 0;"><strong style="color:#1DB954;">${i18n.year || 'Year'}:</strong> <span style="color:#e0e0e0;">{{ track.album.release_date[:4] }}</span></p>
               <a href="{{ track.external_urls.spotify }}" target="_blank" style="display:inline-block; margin-top:10px; padding:8px 16px; background:linear-gradient(135deg, #1DB954 0%, #1ed760 100%); color:#fff; text-decoration:none; border-radius:20px; font-weight:600; transition:all 0.3s ease;">${i18n.open_on_spotify || 'Open on Spotify'}</a>
             </div>