115 lines
4.0 KiB
HTML
115 lines
4.0 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex justify-end mb-4">
|
|
<button onclick="leaveGame()" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">
|
|
Spiel verlassen
|
|
</button>
|
|
</div>
|
|
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
|
|
<p class="text-gray-700 font-bold text-xl mb-4">Frage {{ question_index|add:1 }} von {{ total_questions }}</p>
|
|
<h1 class="text-3xl font-bold mb-6">{{ question_data.question }}</h1>
|
|
|
|
<div class="p-4 bg-blue-50 rounded-lg mb-6">
|
|
<p class="text-blue-600 text-xl mb-2">Verbleibende Zeit</p>
|
|
<p id="remaining-time" class="text-6xl font-bold text-blue-700">30</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4" id="options-container">
|
|
{% for option in question_data.options %}
|
|
<button
|
|
class="p-4 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option"
|
|
data-index="{{ forloop.counter0 }}"
|
|
onclick="submitAnswer({{ forloop.counter0 }});">
|
|
<p class="text-lg">{{ option.value }}</p>
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
{% include 'play/game/common_scripts.html' %}
|
|
<script>
|
|
let hasAnswered = false;
|
|
const joinCode = '{{ quiz_game.join_code }}';
|
|
const participantId = '{{ participant.participant_id }}';
|
|
const questionStartTime = {{ start_time }};
|
|
const questionDuration = '{{ current_question.time_per_question }}'*1000; //Zeit pro Frage (indviduell eingestellt)
|
|
const gameSocket = initializeGameSocket(joinCode);
|
|
|
|
gameSocket.onmessage = function(e) {
|
|
const data = JSON.parse(e.data);
|
|
if (data.type === 'redirect' && data.url) {
|
|
window.location.href = data.url;
|
|
} else if (data.type === 'game_state_update' &&
|
|
data.action === 'show_scores' &&
|
|
data.redirect_url) {
|
|
window.location.href = data.redirect_url;
|
|
}
|
|
};
|
|
|
|
gameSocket.onclose = function(e) {
|
|
wsUtil.handleClose(e);
|
|
};
|
|
|
|
function submitAnswer(optionIndex) {
|
|
if (hasAnswered) return;
|
|
|
|
hasAnswered = true;
|
|
const now = Date.now();
|
|
const timeRemaining = Math.max(0, questionDuration - (now - questionStartTime));
|
|
|
|
// Disable all options and highlight selected
|
|
const options = document.getElementsByClassName('answer-option');
|
|
for (let option of options) {
|
|
option.disabled = true;
|
|
option.classList.remove('hover:bg-blue-100');
|
|
if (parseInt(option.dataset.index) === optionIndex) {
|
|
option.classList.remove('bg-gray-100');
|
|
option.classList.add('bg-blue-600', 'text-white');
|
|
} else {
|
|
option.classList.add('opacity-50');
|
|
}
|
|
}
|
|
|
|
// Send answer to server
|
|
gameSocket.send(JSON.stringify({
|
|
type: 'submit_answer',
|
|
participant_id: participantId,
|
|
answer: optionIndex,
|
|
time_remaining: timeRemaining
|
|
}));
|
|
}
|
|
|
|
// Timer
|
|
function updateTimer() {
|
|
const now = Date.now();
|
|
const elapsed = now - questionStartTime;
|
|
const remaining = Math.max(0, Math.ceil((questionDuration - elapsed) / 1000));
|
|
|
|
document.getElementById('remaining-time').textContent = remaining;
|
|
|
|
if (remaining === 0 && !hasAnswered) {
|
|
// Auto-submit timeout answer
|
|
submitAnswer(-1);
|
|
} else if (remaining > 0) {
|
|
requestAnimationFrame(updateTimer);
|
|
}
|
|
}
|
|
|
|
function leaveGame() {
|
|
if (confirm('Möchtest du das Spiel wirklich verlassen?')) {
|
|
gameSocket.send(JSON.stringify({
|
|
type: 'leave_game',
|
|
participant_id: participantId
|
|
}));
|
|
}
|
|
}
|
|
|
|
// Start timer when page loads
|
|
updateTimer();
|
|
</script>
|
|
{% endblock %} |