diff --git a/templates/quiz.html b/templates/quiz.html index 6ee08d9..71c8a32 100644 --- a/templates/quiz.html +++ b/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); + } +} @@ -350,12 +397,15 @@ window.onload = function() {