modified: app.py

modified:   templates/quiz.html

app.py

@@ -202,12 +202,13 @@ def check_answer():
 def play_track():
     device_id = request.args.get('device_id')
     track_uri = request.args.get('track_uri')
+    position_ms = int(request.args.get('position_ms', 0))
     
     if not device_id or not track_uri:
         return {"error": "Missing device_id or track_uri"}, 400
     
     sp = get_spotify_client()
-    sp.start_playback(device_id=device_id, uris=[track_uri])
+    sp.start_playback(device_id=device_id, uris=[track_uri], position_ms=position_ms)
     
     return {"success": True}
 

templates/quiz.html

@@ -90,6 +90,13 @@
       font-style: italic;
       color: #666;
     }
+    .game-options {
+      text-align: center;
+      margin-bottom: 20px;
+    }
+    .game-options label {
+      margin-right: 20px;
+    }
   </style>
   <script>
     // Speichern aller Tracks für die Suche
@@ -123,19 +130,33 @@
         console.log('Ready with Device ID', device_id);
         document.getElementById('device_id').value = device_id;
         
-        // Starte die Wiedergabe, wenn der Player bereit ist
+        // Hole Optionen
-        fetch('/play_track?device_id=' + device_id + '&track_uri={{ track.uri }}', {
+        const playDuration = parseInt(getOption('playDuration', '0'), 10);
-          method: 'POST'
+        const startPosition = getOption('startPosition', 'start');
-        }).then(response => {
+        let position_ms = 0;
+        if (startPosition === 'random') {
+          // Schätze Songlänge (du kannst {{ track.duration_ms }} als Variable mitgeben!)
+          const duration = {{ track.duration_ms if track.duration_ms else 180000 }};
+          position_ms = Math.floor(Math.random() * (duration - 30000)); // max 30s vor Ende
+        }
+        // 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 => {
             if (!response.ok) {
               throw new Error('Network response was not ok');
             }
             return response.json();
-        }).catch(error => {
+          })
+          .catch(error => {
             console.error('Error starting playback:', error);
           });
 
-        // Korrekte Antwort basierend auf dem Spielmodus setzen
+        // Stoppe nach playDuration Sekunden (wenn nicht unendlich)
+        if (playDuration > 0) {
+          setTimeout(() => {
+            player.pause();
+          }, playDuration * 1000);
+        }
         setCorrectAnswer();
       });
 
@@ -286,6 +307,17 @@
     function switchGameMode(mode) {
       window.location.href = `/reset_quiz/{{ playlist_id }}?next_mode=${mode}`;
     }
+    
+    function setOption(key, value) {
+  localStorage.setItem(key, value);
+}
+function getOption(key, defaultValue) {
+  return localStorage.getItem(key) || defaultValue;
+}
+window.onload = function() {
+  document.getElementById('playDuration').value = getOption('playDuration', '0');
+  document.getElementById('startPosition').value = getOption('startPosition', 'start');
+};
   </script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
@@ -312,6 +344,24 @@
     <button class="btn {{ 'btn-success' if game_mode == 'year' else 'btn-secondary' }}" onclick="switchGameMode('year')">Jahr erraten</button>
   </div>
   
+  <!-- Optionen für das Spiel -->
+  <div class="game-options">
+    <label>Abspielzeit:
+      <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>Unendlich</option>
+      </select>
+    </label>
+    <label style="margin-left:20px;">Startposition:
+      <select id="startPosition" onchange="setOption('startPosition', this.value)">
+        <option value="start" selected>Anfang</option>
+        <option value="random">Zufällig</option>
+      </select>
+    </label>
+  </div>
+  
   <!-- Player Controls -->
   <div class="controls" style="text-align: center;">
     <button id="playPauseBtn" class="btn" onclick="togglePlay()">⏸️ Pause</button>