modified: app.py

modified:   templates/quiz.html

app.py

@@ -10,9 +10,6 @@ import random
 from difflib import SequenceMatcher
 import re
 import json
-import unicodedata
-import secrets
-from datetime import datetime, timedelta
 
 app = Flask(__name__)
 app.secret_key = os.getenv("SECRET_KEY")
@@ -37,13 +34,15 @@ def get_translations():
 def get_spotify_client():
     token_info = session.get("token_info", None)
     if not token_info:
+        # Kein Token, redirect handled elsewhere
         return None
+    # Prüfen, ob Token abgelaufen ist
     sp_oauth = SpotifyOAuth(
         client_id=os.getenv("SPOTIPY_CLIENT_ID"),
         client_secret=os.getenv("SPOTIPY_CLIENT_SECRET"),
         redirect_uri=os.getenv("SPOTIPY_REDIRECT_URI"),
         scope=SCOPE,
-        cache_path=None  # <--- wichtig!
+        cache_path=".cache"
     )
     if sp_oauth.is_token_expired(token_info):
         token_info = sp_oauth.refresh_access_token(token_info['refresh_token'])
@@ -54,20 +53,13 @@ def similarity(a, b):
     return SequenceMatcher(None, a.lower(), b.lower()).ratio()
 
 def clean_title(title):
-    # Unicode-Normalisierung (z.B. é -> e)
-    title = unicodedata.normalize('NFKD', title)
-    title = "".join([c for c in title if not unicodedata.combining(c)])
     # Entfernt alles in () oder []
     title = re.sub(r"(\s*[\(\[][^)\]]*[\)\]])", "", title)
     # Vereinheitliche Apostrophen und Anführungszeichen
     title = title.replace("’", "'").replace("‘", "'").replace("`", "'")
     title = title.replace('"', '').replace("„", '').replace("“", '').replace("”", '')
-    title = title.replace("'", "")
-    # Entferne alle nicht-alphanumerischen Zeichen (außer Leerzeichen)
-    title = re.sub(r"[^a-zA-Z0-9äöüÄÖÜß ]", "", title)
-    # Mehrfache Leerzeichen zu einem
-    title = re.sub(r"\s+", " ", title)
-    return title.strip().lower()
+    title = title.replace("'", "")  # Optional: alle Apostrophen entfernen
+    return title.strip()
 
 def get_all_playlist_tracks(sp, playlist_id):
     tracks = []
@@ -117,28 +109,17 @@ def callback():
     user = sp.current_user()
     session["user"] = user
 
-    # Setze ein 30-Tage-Cookie mit Userdaten (ohne Token!)
-    resp = redirect("/playlists")
-    user_cookie = json.dumps({
-        "id": user.get("id"),
-        "display_name": user.get("display_name"),
-        "email": user.get("email"),
-        "images": user.get("images"),
-    })
-    resp.set_cookie("quizify_user", user_cookie, max_age=60*60*24*30, httponly=True, samesite="Lax")
-    return resp
+    return redirect("/playlists")
 
 @app.route("/playlists")
 def playlists():
     sp = get_spotify_client()
     playlists = sp.current_user_playlists()["items"]
-    user = get_user_from_cookie()
-    return render_template("playlists.html", playlists=playlists, translations=get_translations(), user=user)
+    return render_template("playlists.html", playlists=playlists, translations=get_translations())
 
 @app.route("/quiz/<playlist_id>")
 def quiz(playlist_id):
     game_mode = request.args.get('mode', 'artist')
-    is_multiplayer = request.args.get('local_multiplayer') == '1'
 
     sp = get_spotify_client()
     tracks = get_all_playlist_tracks(sp, playlist_id)
@@ -180,10 +161,8 @@ def quiz(playlist_id):
         }
         all_tracks.append(track_info)
 
-    user = get_user_from_cookie()
-    template = "quiz_multiplayer.html" if is_multiplayer else "quiz_single.html"
     return render_template(
-        template,
+        "quiz.html",
         track=track,
         access_token=access_token,
         playlist_id=playlist_id,
@@ -193,8 +172,7 @@ def quiz(playlist_id):
         total_questions=len(tracks),
         score=score,
         answered=answered,
-        translations=get_translations(),
-        user=user
+        translations=get_translations()
     )
 
 @app.route("/search_track", methods=["POST"])
@@ -237,8 +215,7 @@ def check_answer():
     game_mode = data.get('game_mode', 'artist')
     playlist_id = data.get('playlist_id')
 
-    # Immer clean_title für title und artist
-    if game_mode in ['title', 'artist']:
+    if game_mode == 'title':
         guess = clean_title(guess)
         correct_answer = clean_title(correct_answer)
 
@@ -267,13 +244,7 @@ def play_track():
         return {"error": "Missing device_id or track_uri"}, 400
     
     sp = get_spotify_client()
-    try:
-        sp.start_playback(device_id=device_id, uris=[track_uri], position_ms=position_ms)
-    except spotipy.exceptions.SpotifyException as e:
-        if "Device not found" in str(e):
-            # Spezieller Fehlercode, damit das Frontend weiß, dass es neu laden soll
-            return {"error": "device_not_found", "message": "Spotify-Player nicht gefunden. Die Seite wird neu geladen..."}, 409
-        return {"error": str(e)}, 500
+    sp.start_playback(device_id=device_id, uris=[track_uri], position_ms=position_ms)
     
     return {"success": True}
 
@@ -302,9 +273,12 @@ def toggle_playback():
 @app.route('/logout')
 def logout():
     session.clear()
-    resp = redirect(url_for('home'))
-    resp.set_cookie("quizify_user", "", expires=0)
-    return resp
+    return redirect(url_for('home'))
+
+@app.route('/')
+def index():
+    user = session.get('user')  # Benutzerinfos aus der Session holen, falls vorhanden
+    return render_template('index.html', user=user, translations=get_translations())
 
 @app.route("/reset_quiz/<playlist_id>")
 def reset_quiz(playlist_id):
@@ -315,50 +289,5 @@ def reset_quiz(playlist_id):
         return redirect(url_for('quiz', playlist_id=playlist_id, mode=next_mode))
     return redirect(url_for('playlists'))
 
-@app.route("/gamemodes/<playlist_id>")
-def gamemodes(playlist_id):
-    return render_template("gamemodes.html", playlist_id=playlist_id, translations=get_translations())
-
-invites = {}  # {token: expiry_datetime}
-
-@app.route("/invite")
-def invite():
-    duration = int(request.args.get("duration", 60))  # Minuten
-    token = secrets.token_urlsafe(16)
-    expires = datetime.utcnow() + timedelta(minutes=duration)
-    invites[token] = expires
-    invite_link = url_for('guest_join', token=token, _external=True)
-    # Gib nur den Link als Klartext zurück!
-    return invite_link
-
-@app.route("/invite/<token>")
-def guest_join(token):
-    expires = invites.get(token)
-    if not expires or expires < datetime.utcnow():
-        return "Invite link expired or invalid.", 403
-    # Setze ein Cookie, damit der Gast als eingeladener User erkannt wird (optional)
-    resp = redirect(url_for('login'))
-    resp.set_cookie("guest_token", token, max_age=60*60)  # 1 Stunde gültig
-    return resp
-
-def get_user_from_cookie():
-    user_cookie = request.cookies.get("quizify_user")
-    if user_cookie:
-        try:
-            return json.loads(user_cookie)
-        except Exception:
-            return None
-    return None
-
-@app.route("/playerselect/<playlist_id>")
-def playerselect(playlist_id):
-    game_mode = request.args.get('mode', 'artist')
-    return render_template(
-        "playerselect.html",
-        playlist_id=playlist_id,
-        game_mode=game_mode,
-        translations=get_translations()
-    )
-
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=5000, debug=True)

templates/quiz.html

@@ -6,15 +6,10 @@
   <script src="https://sdk.scdn.co/spotify-player.js"></script>
   <style>
     body {
-      background: linear-gradient(135deg, #191414 0%, #1DB954 100%);
-      color: #fff;
       font-family: Arial, sans-serif;
-      min-height: 100vh;
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 20px;
     }
     .controls {
       margin: 20px 0;
@@ -127,12 +122,19 @@
       player.addListener('account_error', ({ message }) => { console.error(message); });
       player.addListener('playback_error', ({ message }) => { console.error(message); });
 
+      // Playback status updates
+      player.addListener('player_state_changed', state => {
+        console.log(state);
+        updatePlayButton(state);
+      });
+
       // Ready
       player.addListener('ready', ({ device_id }) => {
         console.log('Ready with Device ID', device_id);
         document.getElementById('device_id').value = device_id;
         
-        const playDuration = getPlayDuration();
+        // Hole Optionen
+        const playDuration = parseInt(getOption('playDuration', '0'), 10);
         const startPosition = getOption('startPosition', 'start');
         let position_ms = 0;
         if (startPosition === 'random') {
@@ -142,14 +144,11 @@
         }
         // Starte Wiedergabe an gewünschter Stelle
         fetch(`/play_track?device_id=${device_id}&track_uri={{ track.uri }}&position_ms=${position_ms}`, { method: 'POST' })
-          .then(response => response.json())
-          .then(data => {
-            if (data.error === "device_not_found") {
-              alert(data.message || "Spotify-Player nicht gefunden. Die Seite wird neu geladen...");
-              window.location.reload();
-              return;
+          .then(response => {
+            if (!response.ok) {
+              throw new Error('Network response was not ok');
             }
-            // ...bisheriger Code für erfolgreiche Wiedergabe...
+            return response.json();
           })
           .catch(error => {
             console.error('Error starting playback:', error);
@@ -157,7 +156,7 @@
 
         // Stoppe nach playDuration Sekunden (wenn nicht unendlich)
         if (playDuration > 0) {
-          window.quizifyTimeout = setTimeout(() => {
+          setTimeout(() => {
             player.pause();
           }, playDuration * 1000);
         }
@@ -176,16 +175,25 @@
       window.spotifyPlayer = player;
     };
     
+    function updatePlayButton(state) {
+      let playButton = document.getElementById('playPauseBtn');
+      if (state && !state.paused) {
+        playButton.innerHTML = i18n.pause;
+      } else {
+        playButton.innerHTML = '▶️ Play';
+      }
+    }
+    
     function setCorrectAnswer() {
       if (currentGameMode === 'artist') {
         correctAnswer = "{{ track.artists[0].name }}";
         document.getElementById('question-text').innerText = i18n.question_artist;
         document.getElementById('answerInput').placeholder = i18n.input_artist;
-      } else if (currentGameMode === 'title' ) {
+      } else if (currentGameMode === 'title') {
         correctAnswer = "{{ track.name }}";
         document.getElementById('question-text').innerText = i18n.question_title;
         document.getElementById('answerInput').placeholder = i18n.input_title;
-      } else if (currentGameMode === 'year' ) {
+      } else if (currentGameMode === 'year') {
         correctAnswer = "{{ track.album.release_date[:4] }}";
         document.getElementById('question-text').innerText = i18n.question_year;
         document.getElementById('answerInput').placeholder = i18n.input_year;
@@ -300,10 +308,6 @@
     }
     
     function switchGameMode(mode) {
-      // Beim Moduswechsel Multiplayer-Daten löschen
-      localStorage.removeItem('quizify_multiplayer_names');
-      localStorage.removeItem('quizify_multiplayer_scores');
-      localStorage.removeItem('quizify_multiplayer_current');
       window.location.href = `/reset_quiz/{{ playlist_id }}?next_mode=${mode}`;
     }
     
@@ -314,260 +318,82 @@ function getOption(key, defaultValue) {
   return localStorage.getItem(key) || defaultValue;
 }
 window.onload = function() {
-  const playDuration = getOption('playDuration', '0');
-  const sel = document.getElementById('playDuration');
-  const custom = document.getElementById('customDuration');
-  const label = document.getElementById('customDurationLabel');
-  if (['10','15','30','0'].includes(playDuration)) {
-    sel.value = playDuration;
-    custom.style.display = 'none';
-    label.style.display = 'none';
-  } else {
-    sel.value = 'custom';
-    custom.value = playDuration;
-    custom.style.display = '';
-    label.style.display = '';
-  }
+  document.getElementById('playDuration').value = getOption('playDuration', '0');
   document.getElementById('startPosition').value = getOption('startPosition', 'start');
-  updateMultiplayerUI();
-
-  // Prüfe, ob MultiplayerPopup existiert und sichtbar ist
-  const mpPopup = document.getElementById('multiplayerPopup');
-  if (!mpPopup || mpPopup.style.display === 'none') {
-    quizifyReady();
-  }
 };
-
-function onPlayDurationChange() {
-  const sel = document.getElementById('playDuration');
-  const custom = document.getElementById('customDuration');
-  const label = document.getElementById('customDurationLabel');
-  if (sel.value === 'custom') {
-    custom.style.display = '';
-    label.style.display = '';
-    setOption('playDuration', custom.value || '10');
-  } else {
-    custom.style.display = 'none';
-    label.style.display = 'none';
-    setOption('playDuration', sel.value);
-  }
-}
-
-function getPlayDuration() {
-  const sel = document.getElementById('playDuration');
-  if (sel.value === 'custom') {
-    return parseInt(document.getElementById('customDuration').value) || 10;
-  }
-  return parseInt(sel.value);
-}
-
-// "Nochmal X Sekunden"-Button Funktion
-function replayDuration() {
-  const playDuration = getPlayDuration();
-  if (window.spotifyPlayer) {
-    window.spotifyPlayer.resume();
-    if (window.quizifyTimeout) clearTimeout(window.quizifyTimeout);
-    window.quizifyTimeout = setTimeout(() => {
-      window.spotifyPlayer.pause();
-    }, playDuration * 1000);
-  }
-}
-
-function updateMultiplayerUI() {
-  const names = JSON.parse(localStorage.getItem('quizify_multiplayer_names') || "[]");
-  const scores = JSON.parse(localStorage.getItem('quizify_multiplayer_scores') || "[]");
-  const current = parseInt(localStorage.getItem('quizify_multiplayer_current') || "0");
-  if(names.length > 1) {
-    document.getElementById('multiplayerBar').style.display = '';
-    let html = '';
-    names.forEach((n,i) => {
-      html += `<span style="margin:0 10px;${i===current?'font-weight:bold;text-decoration:underline;':''}">${n}: ${scores[i]}</span>`;
-    });
-    html += `<br><span style="font-size:0.95em;color:#bdbdbd;">Am Zug: <b>${names[current]}</b></span>`;
-    document.getElementById('multiplayerPlayers').innerHTML = html;
-    document.getElementById('answerInput').placeholder = "Antwort für " + names[current];
-  }
-}
-
-// Multiplayer: Nach jeder Antwort Punkte & Spieler wechseln
-const origCheckAnswer = checkAnswer;
-checkAnswer = function() {
-  const names = JSON.parse(localStorage.getItem('quizify_multiplayer_names') || "[]");
-  const scores = JSON.parse(localStorage.getItem('quizify_multiplayer_scores') || "[]");
-  const current = parseInt(localStorage.getItem('quizify_multiplayer_current') || "0");
-  const guess = document.getElementById('answerInput').value;
-  if (!guess) return;
-
-  fetch('/check_answer', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      guess: guess,
-      correct_answer: correctAnswer,
-      game_mode: currentGameMode,
-      playlist_id: "{{ playlist_id }}"
-    })
-  })
-  .then(response => response.json())
-  .then(data => {
-    const resultContainer = document.getElementById('resultContainer');
-    resultContainer.style.display = 'block';
-    if (data.correct) {
-      resultContainer.className = 'result-container correct';
-      resultContainer.innerHTML = `<h3>${i18n.correct}</h3>`;
-      scores[current] = (scores[current] || 0) + 1;
-      localStorage.setItem('quizify_multiplayer_scores', JSON.stringify(scores));
-    } else {
-      resultContainer.className = 'result-container incorrect';
-      resultContainer.innerHTML = `<h3>${i18n.wrong}</h3>
-        <p>${i18n.right_answer} <strong>${data.correct_answer}</strong></p>`;
-    }
-    // Song-Infos ergänzen (wie gehabt)
-    // ...
-    // Nächster Spieler
-    let next = (current + 1) % names.length;
-    localStorage.setItem('quizify_multiplayer_current', next);
-    updateMultiplayerUI();
-    document.getElementById('nextQuestionBtn').style.display = 'inline-block';
-  })
-  .catch(error => {
-    console.error('Error checking answer:', error);
-  });
-}
-
-// Beim Laden Multiplayer-UI anzeigen, falls aktiv
-window.onload = function() {
-  // ...dein bisheriger onload code...
-  updateMultiplayerUI();
-  // Starte Quiz nur, wenn KEIN Multiplayer-Popup offen ist
-  if (!document.getElementById('multiplayerPopup') || document.getElementById('multiplayerPopup').style.display === 'none') {
-    quizifyReady();
-  }
-}
-
-function quizifyReady() {
-  // Hier alles, was nach dem Schließen des Popups passieren soll
-  if (window.onSpotifyWebPlaybackSDKReady) {
-    window.onSpotifyWebPlaybackSDKReady();
-  }
-  setCorrectAnswer();
-}
-
-// Entferne Multiplayer-Daten, wenn NICHT im lokalen Multiplayer
-if (!window.location.search.includes('local_multiplayer=1')) {
-  localStorage.removeItem('quizify_multiplayer_names');
-  localStorage.removeItem('quizify_multiplayer_scores');
-  localStorage.removeItem('quizify_multiplayer_current');
-}
   </script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
-<body style="background: linear-gradient(135deg, #191414 0%, #1DB954 100%); min-height:100vh; margin:0; display:flex; align-items:center; justify-content:center;">
-  <div class="quiz-container" style="
-    background: rgba(25, 20, 20, 0.92);
-    padding: 40px 30px 30px 30px;
-    border-radius: 22px;
-    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
-    max-width: 500px;
-    width: 100%;
-    color: #fff;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    ">
-    <div style="text-align:center; margin-bottom: 10px;">
-      <span id="progressInfo">{{ translations['songs_in_playlist'] }} {{ total_questions }}</span>
-      <span id="scoreInfo" style="margin-left:20px;">
-        {{ translations['score'] }}: {{ score }} / {{ answered if answered > 0 else 1 }}
-        ({{ ((score / (answered if answered > 0 else 1)) * 100) | round(0) if answered > 0 else 0 }}{{ translations['percent'] }})
-      </span>
-    </div>
-    <div style="text-align:center; margin-bottom: 20px;">
-      <a href="/reset_quiz/{{ playlist_id }}" class="btn btn-danger" style="margin-top:10px;">{{ translations['end_quiz'] }}</a>
-    </div>
-    <h2 id="question-text" style="color:#fff;">{{ translations['question_artist'] }}</h2>
-    <input type="hidden" id="device_id" value="">
-    <div class="game-modes" style="margin-bottom:20px;">
-      <button class="btn {{ 'btn-success' if game_mode == 'artist' else 'btn-secondary' }}" onclick="switchGameMode('artist')">{{ translations['guess_artist'] }}</button>
-      <button class="btn {{ 'btn-success' if game_mode == 'title' else 'btn-secondary' }}" onclick="switchGameMode('title')">{{ translations['guess_title'] }}</button>
-      <button class="btn {{ 'btn-success' if game_mode == 'year' else 'btn-secondary' }}" onclick="switchGameMode('year')">{{ translations['guess_year'] }}</button>
-    </div>
-    <div class="game-options" style="margin-bottom:20px;">
-      <label>{{ translations['play_duration'] }}:
-        <select id="playDuration" onchange="onPlayDurationChange()">
-          <option value="10">10s</option>
-          <option value="15">15s</option>
-          <option value="30">30s</option>
-          <option value="0" selected>{{ translations['unlimited'] }}</option>
-          <option value="custom">{{ translations['custom'] }}</option>
-        </select>
-        <input type="number" id="customDuration" min="1" max="600" style="width:60px;display:none;" placeholder="Sek." onchange="setOption('playDuration', this.value)">
-        <span id="customDurationLabel" style="display:none;">s</span>
-      </label>
-      <label style="margin-left:20px;">{{ translations['start_position'] }}:
-        <select id="startPosition" onchange="setOption('startPosition', this.value)">
-          <option value="start" selected>{{ translations['start'] }}</option>
-          <option value="random">{{ translations['random'] }}</option>
-        </select>
-      </label>
-    </div>
-    <div class="controls" style="text-align: center; margin-bottom:20px;">
-      <button id="replayBtn" class="btn" onclick="replayDuration()">{{ translations['play_duration'] }} +</button>
-    </div>
-    <div style="text-align: center; margin-top: 10px;">
-      <input type="text" id="answerInput" placeholder="{{ translations['input_artist'] }}" oninput="searchTracks()" style="background:#222; color:#fff;">
-      <button class="btn" onclick="checkAnswer()">{{ translations['answer_button'] }}</button>
-      <div id="searchResults" class="search-results"></div>
-      <div id="resultContainer" class="result-container" style="background:#222; color:#fff; border:1px solid #444;"></div>
-      <a id="nextQuestionBtn" href="/quiz/{{ playlist_id }}?mode={{ game_mode }}" class="btn" style="display: none;">{{ translations['next_question'] }}</a>
-    </div>
-    <div class="hint-container" style="color:#bdbdbd;">
-      {% if game_mode == 'artist' %}
-        <p>{{ translations['tip_artist'] }}</p>
-      {% elif game_mode == 'title' %}
-        <p>{{ translations['tip_title'] }}</p>
-      {% elif game_mode == 'year' %}
-        <p>{{ translations['tip_year'] }}</p>
-      {% endif %}
-    </div>
-    <div id="multiplayerBar" style="display:none;margin-bottom:15px;text-align:center;">
-      <span id="multiplayerPlayers"></span>
-    </div>
-  </div>
-  {% if request.args.get('local_multiplayer') %}
-<div id="multiplayerPopup" style="position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:2000;">
-  <div style="background:#191414;padding:30px 40px;border-radius:18px;box-shadow:0 8px 32px 0 rgba(0,0,0,0.37);min-width:320px;text-align:center;">
-    <h3>Lokaler Multiplayer</h3>
-    <p>Gib bis zu 4 Spielernamen ein:</p>
-    <form id="multiplayerForm" onsubmit="startMultiplayer(event)">
-      <input type="text" id="player1" placeholder="Spieler 1" required style="margin:5px;width:80%"><br>
-      <input type="text" id="player2" placeholder="Spieler 2" style="margin:5px;width:80%"><br>
-      <input type="text" id="player3" placeholder="Spieler 3" style="margin:5px;width:80%"><br>
-      <input type="text" id="player4" placeholder="Spieler 4" style="margin:5px;width:80%"><br>
-      <button class="btn" type="submit" style="margin-top:10px;">Starten</button>
-    </form>
-  </div>
+<body>
+  <div style="text-align:center; margin-bottom: 10px;">
+  <span id="progressInfo">{{ translations['songs_in_playlist'] }} {{ total_questions }}</span>
+  <span id="scoreInfo" style="margin-left:20px;">
+    {{ translations['score'] }}: {{ score }} / {{ answered if answered > 0 else 1 }}
+    ({{ ((score / (answered if answered > 0 else 1)) * 100) | round(0) if answered > 0 else 0 }}{{ translations['percent'] }})
+  </span>
 </div>
-<script>
-function startMultiplayer(e) {
-  e.preventDefault();
-  const names = [];
-  for(let i=1;i<=4;i++) {
-    const val = document.getElementById('player'+i).value.trim();
-    if(val) names.push(val);
-  }
-  if(names.length < 2) {
-    alert("Bitte mindestens 2 Namen eingeben!");
-    return;
-  }
-  localStorage.setItem('quizify_multiplayer_names', JSON.stringify(names));
-  localStorage.setItem('quizify_multiplayer_scores', JSON.stringify(Array(names.length).fill(0)));
-  localStorage.setItem('quizify_multiplayer_current', 0);
-  document.getElementById('multiplayerPopup').style.display = 'none';
-  updateMultiplayerUI();
-  quizifyReady(); // <-- Musik und Quiz jetzt starten!
-}
-</script>
-{% endif %}
+  <div style="text-align:center; margin-bottom: 20px;">
+  <a href="/reset_quiz/{{ playlist_id }}" class="btn btn-danger" style="margin-top:10px;">{{ translations['end_quiz'] }}</a>
+</div>
+  <h2 id="question-text">{{ translations['question_artist'] }}</h2>
+  
+  <!-- Verstecktes Feld für device_id -->
+  <input type="hidden" id="device_id" value="">
+  
+  <!-- Spielmodi -->
+  <div class="game-modes">
+    <button class="btn {{ 'btn-success' if game_mode == 'artist' else 'btn-secondary' }}" onclick="switchGameMode('artist')">{{ translations['guess_artist'] }}</button>
+    <button class="btn {{ 'btn-success' if game_mode == 'title' else 'btn-secondary' }}" onclick="switchGameMode('title')">{{ translations['guess_title'] }}</button>
+    <button class="btn {{ 'btn-success' if game_mode == 'year' else 'btn-secondary' }}" onclick="switchGameMode('year')">{{ translations['guess_year'] }}</button>
+  </div>
+  
+  <!-- Optionen für das Spiel -->
+  <div class="game-options">
+    <label>{{ translations['play_duration'] }}:
+      <select id="playDuration" onchange="setOption('playDuration', this.value)">
+        <option value="10">10s</option>
+        <option value="15">15s</option>
+        <option value="30">30s</option>
+        <option value="0" selected>{{ translations['unlimited'] }}</option>
+      </select>
+    </label>
+    <label style="margin-left:20px;">{{ translations['start_position'] }}:
+      <select id="startPosition" onchange="setOption('startPosition', this.value)">
+        <option value="start" selected>{{ translations['start'] }}</option>
+        <option value="random">{{ translations['random'] }}</option>
+      </select>
+    </label>
+  </div>
+  
+  <!-- Player Controls -->
+  <div class="controls" style="text-align: center;">
+    <button id="playPauseBtn" class="btn" onclick="togglePlay()">{{ translations['pause'] }}</button>
+  </div>
+  
+  <!-- Antwort-Eingabe -->
+  <div style="text-align: center; margin-top: 30px;">
+    <input type="text" id="answerInput" placeholder="{{ translations['input_artist'] }}" oninput="searchTracks()">
+    <button class="btn" onclick="checkAnswer()">{{ translations['answer_button'] }}</button>
+    
+    <!-- Suchergebnisse -->
+    <div id="searchResults" class="search-results"></div>
+    
+    <!-- Ergebnis-Anzeige -->
+    <div id="resultContainer" class="result-container"></div>
+    
+    <!-- Nächste Frage Button, wird nach Antwort angezeigt -->
+    <a id="nextQuestionBtn" href="/quiz/{{ playlist_id }}?mode={{ game_mode }}" class="btn" style="display: none;">{{ translations['next_question'] }}</a>
+  </div>
+  
+  <!-- Hilfe-Text je nach Modus -->
+  <div class="hint-container">
+    {% if game_mode == 'artist' %}
+      <p>{{ translations['tip_artist'] }}</p>
+    {% elif game_mode == 'title' %}
+      <p>{{ translations['tip_title'] }}</p>
+    {% elif game_mode == 'year' %}
+      <p>{{ translations['tip_year'] }}</p>
+    {% endif %}
+  </div>
 </body>
 </html>