Initial Game Logic 2
This commit is contained in:
Juhn-Vitus Saß
@@ -1,35 +1,129 @@
|
||||
{% load static %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="{% static 'css/t-style.css' %}">
|
||||
<title>qivip</title>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div class="qp-question-container">
|
||||
<p class="text-gray-700 font-bold text-xl uppercase">Frage X</p>
|
||||
<img src="integral.png">
|
||||
<h1>Frage: {{ question.data.question }}</h1>
|
||||
<div>
|
||||
<div class="p-4">
|
||||
<p class="text-blue-500 text-xl">Verbleibende Zeit:</p>
|
||||
<p id="remaining_time" class="text-6xl">36</p>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<p class="text-blue-500 text-xl">7/14 Antworten</p>
|
||||
</div>
|
||||
{% extends 'base.html' %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mx-auto px-4">
|
||||
<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="grid grid-cols-2 gap-4 mb-6">
|
||||
<div class="p-4 bg-blue-50 rounded-lg">
|
||||
<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="p-4 bg-blue-50 rounded-lg">
|
||||
<p class="text-blue-600 text-xl mb-2">Antworten</p>
|
||||
<p id="answer-count" class="text-6xl font-bold text-blue-700">0/0</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="qp-answer-container-host" id="qp-answer-container-host">
|
||||
{% for option in question.data.options %}
|
||||
<div>
|
||||
<p>{{ option.value }}</p>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
{% for option in question_data.options %}
|
||||
<div class="p-4 bg-gray-100 rounded-lg" data-correct="{{ option.is_correct }}">
|
||||
<p class="text-lg">{{ option.value }}</p>
|
||||
<p id="option-count-{{ forloop.counter0 }}" class="text-gray-600 hidden">0 Antworten</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
{% include 'play/game/common_scripts.html' %}
|
||||
<script>
|
||||
const joinCode = '{{ quiz_game.join_code }}';
|
||||
const hostId = '{{ host_id }}';
|
||||
const questionStartTime = {{ start_time }};
|
||||
const questionDuration = 30000; // 30 seconds in milliseconds
|
||||
const gameSocket = initializeGameSocket(joinCode);
|
||||
let answeredParticipants = 0;
|
||||
let totalParticipants = 0;
|
||||
const optionCounts = {};
|
||||
|
||||
gameSocket.onmessage = function(e) {
|
||||
const data = JSON.parse(e.data);
|
||||
if (data.type === 'participant_answer') {
|
||||
answeredParticipants++;
|
||||
updateAnswerCount();
|
||||
updateOptionCount(data.answer);
|
||||
} else if (data.type === 'participant_list_update') {
|
||||
totalParticipants = data.participants.length;
|
||||
updateAnswerCount();
|
||||
} 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 updateAnswerCount() {
|
||||
const answerCountElement = document.getElementById('answer-count');
|
||||
if (answerCountElement) {
|
||||
answerCountElement.textContent = `${answeredParticipants}/${totalParticipants}`;
|
||||
}
|
||||
|
||||
// If everyone has answered, advance to scores
|
||||
if (answeredParticipants === totalParticipants && totalParticipants > 0) {
|
||||
advanceToScores();
|
||||
}
|
||||
}
|
||||
|
||||
function updateOptionCount(optionIndex) {
|
||||
optionCounts[optionIndex] = (optionCounts[optionIndex] || 0) + 1;
|
||||
const optionElement = document.getElementById(`option-count-${optionIndex}`);
|
||||
if (optionElement) {
|
||||
optionElement.textContent = `${optionCounts[optionIndex]} Antworten`;
|
||||
}
|
||||
}
|
||||
|
||||
function advanceToScores() {
|
||||
// Show correct answers and answer counts
|
||||
var correctOptions = document.querySelectorAll('[data-correct="True"]');
|
||||
for (var i = 0; i < correctOptions.length; i++) {
|
||||
correctOptions[i].classList.add('border-2', 'border-green-500');
|
||||
}
|
||||
|
||||
// Show answer counts
|
||||
var countElements = document.querySelectorAll('[id^="option-count-"]');
|
||||
for (var j = 0; j < countElements.length; j++) {
|
||||
countElements[j].classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Wait a moment to show the correct answer and counts
|
||||
setTimeout(function() {
|
||||
gameSocket.send(JSON.stringify({
|
||||
'type': 'advance_to_scores',
|
||||
'host_id': hostId
|
||||
}));
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
// 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) {
|
||||
advanceToScores();
|
||||
} else {
|
||||
requestAnimationFrame(updateTimer);
|
||||
}
|
||||
}
|
||||
|
||||
// Request initial participants list
|
||||
gameSocket.onopen = function(e) {
|
||||
gameSocket.send(JSON.stringify({
|
||||
'type': 'update_participants'
|
||||
}));
|
||||
updateTimer();
|
||||
};
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user