modified: app.py
modified: templates/quiz.html
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user