modified: templates/quiz.html

templates/quiz.html

@@ -133,8 +133,7 @@
         console.log('Ready with Device ID', device_id);
         document.getElementById('device_id').value = device_id;
         
-        // Hole Optionen
-        const playDuration = parseInt(getOption('playDuration', '0'), 10);
+        const playDuration = getPlayDuration();
         const startPosition = getOption('startPosition', 'start');
         let position_ms = 0;
         if (startPosition === 'random') {
@@ -156,7 +155,7 @@
 
         // Stoppe nach playDuration Sekunden (wenn nicht unendlich)
         if (playDuration > 0) {
-          setTimeout(() => {
+          window.quizifyTimeout = setTimeout(() => {
             player.pause();
           }, playDuration * 1000);
         }
@@ -189,11 +188,11 @@
         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;
@@ -318,9 +317,57 @@ function getOption(key, defaultValue) {
   return localStorage.getItem(key) || defaultValue;
 }
 window.onload = function() {
-  document.getElementById('playDuration').value = getOption('playDuration', '0');
+  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('startPosition').value = getOption('startPosition', 'start');
 };
+
+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);
+  }
+}
   </script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
@@ -350,12 +397,15 @@ window.onload = function() {
   <!-- Optionen für das Spiel -->
   <div class="game-options">
     <label>{{ translations['play_duration'] }}:
-      <select id="playDuration" onchange="setOption('playDuration', this.value)">
+      <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">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)">
@@ -365,6 +415,11 @@ window.onload = function() {
     </label>
   </div>
   
+  <!-- "Nochmal X Sekunden"-Button -->
+  <div class="controls" style="text-align: center;">
+    <button id="replayBtn" class="btn" onclick="replayDuration()">{{ translations['play_duration'] }} +</button>
+  </div>
+  
   <!-- Player Controls -->
   <div class="controls" style="text-align: center;">
     <button id="playPauseBtn" class="btn" onclick="togglePlay()">{{ translations['pause'] }}</button>