henrik2399/qivip
1
0
Fork 0
Code Issues 24 Pull Requests 14 Actions Packages Projects Releases Wiki Activity

First Iteration of Map Question Type

Browse Source
This commit is contained in:
juhnsa
2025-07-15 23:26:18 +02:00
committed by ben8
parent bb36b3e71f
commit e816c3f75a
10 changed files with 660 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
django/templates/play/game/question_host.html
View File

@@ -50,8 +50,7 @@
</div>
{% if question_data.type == "multiple_choice" or question_data.type == "true_false" %}
{% if question_data.type == "multiple_choice" or question_data.type == "true_false" %}
<div class="grid grid-cols-2 gap-4" id="options-container">
{% for option in question_data.options %}
<button
@@ -162,8 +161,93 @@ class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-
Abschicken
</button>
</form>
{% endif %}
{% elif question_data.type == "guess" %}
{% endif %}
{% elif question_data.type == "map" and request.session.mode == "learn" %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<div class="text-sm text-gray-600 dark:text-gray-400 mb-2">Ziel auswählen</div>
<div id="map" class="h-96"></div>
<input type="hidden" value="" id="singleanswer" name="singleanswer">
<div class="mt-4">
<button onclick="submitAnswerMap()" class="bg-blue-400 text-white px-4 py-2 rounded-md hover:bg-blue-500 transition-colors">
Abgeben
</button>
</div>
<input type="hidden" id="location" name="location" value="">
<script>
let marker = null;
const locationInput = document.getElementById('location');
const map = L.map('map').setView([51.72, 10.45], 3);
// Prüfe, ob Dark Mode aktiv ist
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
// Wähle das passende Karten-Design
const tileUrl = isDarkMode
? 'https://{s}.basemaps.cartocdn.com/rastertiles/dark_nolabels/{z}/{x}/{y}.png'
: 'https://{s}.basemaps.cartocdn.com/rastertiles/light_nolabels/{z}/{x}/{y}.png';
L.tileLayer(tileUrl, {
maxZoom: 19,
attribution: '© OpenStreetMap © CARTO'
}).addTo(map);
function updateInput(latlng) {
locationInput.value = `${latlng.lat.toFixed(6)},${latlng.lng.toFixed(6)}`;
}
function placeOrMoveMarker(latlng) {
if (marker) {
marker.setLatLng(latlng);
} else {
marker = L.marker(latlng, { draggable: true }).addTo(map);
marker.on('dragend', () => {
updateInput(marker.getLatLng());
});
}
updateInput(latlng);
}
map.on('click', e => placeOrMoveMarker(e.latlng));
function submitAnswerMap() {
const answer = document.getElementById("location").value;
if (answer === "") {
alert("Bitte einen Ort auf der Karte auswählen!");
return;
}
// Add grey overlay
const overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(128, 128, 128, 0.5)';
overlay.style.zIndex = '1000';
overlay.style.display = 'flex';
overlay.style.justifyContent = 'center';
overlay.style.alignItems = 'center';
overlay.style.color = 'white';
overlay.style.fontSize = '24px';
overlay.style.fontWeight = 'bold';
overlay.textContent = 'Antwort übermittelt';
document.body.appendChild(overlay);
const now = Date.now();
const timeRemaining = Math.max(0, questionDuration - (now - questionStartTime));
// Submit the answer
submitAnswer(answer);
}
</script>
{% elif question_data.type == "map" and request.session.mode != "learn" %}
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2 text-center">Bitte den gesuchten Ort auf der Karte auswählen</p>
{% elif question_data.type == "guess" %}
{% if request.session.mode == "learn" %}
<form class="flex flex-col items-center gap-4 mt-4">
<!-- Slider mit Beschriftung -->
@@ -193,11 +277,7 @@ class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-
</form>
{% endif %}
{% endif %}
</div>
</div>
{% endblock %}

109
django/templates/play/game/question_participant.html
View File

@@ -25,8 +25,7 @@
<div class="w-full bg-gray-300 rounded-full h-4 my-4">
<div id="time-bar" class="bg-blue-600 h-4 rounded-full transition-all duration-100 linear" style="width: 100%;"></div>
</div>
{% if question_data.type == "multiple_choice" or question_data.type == "true_false" %}
{% if question_data.type == "multiple_choice" or question_data.type == "true_false" %}
<div class="grid grid-cols-2 gap-4" id="options-container">
{% for option in question_data.options %}
<button data-index="{{ forloop.counter0 }}"
@@ -168,6 +167,58 @@
Abschicken
</button>
</form>
{% elif question_data.type == "map" %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<div class="text-sm text-gray-600 dark:text-gray-400 mb-2">Ziel auswählen</div>
<div id="map" class="h-96"></div>
<input type="hidden" value="" id="location" name="location">
<div class="mt-4">
<button onclick="submitAnswerMap()" class="bg-blue-400 text-white px-4 py-2 rounded-md hover:bg-blue-500 transition-colors">
Abgeben
</button>
</div>
<script>
let marker = null;
const locationInput = document.getElementById('location');
const map = L.map('map').setView([51.72, 10.45], 3);
// Prüfe, ob Dark Mode aktiv ist
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
// Wähle das passende Karten-Design
const tileUrl = isDarkMode
? 'https://{s}.basemaps.cartocdn.com/rastertiles/dark_nolabels/{z}/{x}/{y}.png'
: 'https://{s}.basemaps.cartocdn.com/rastertiles/light_nolabels/{z}/{x}/{y}.png';
L.tileLayer(tileUrl, {
maxZoom: 19,
attribution: '© OpenStreetMap © CARTO'
}).addTo(map);
function updateInput(latlng) {
locationInput.value = `${latlng.lat.toFixed(6)},${latlng.lng.toFixed(6)}`;
}
function placeOrMoveMarker(latlng) {
if (marker) {
marker.setLatLng(latlng);
} else {
marker = L.marker(latlng, { draggable: true }).addTo(map);
marker.on('dragend', () => {
updateInput(marker.getLatLng());
});
}
updateInput(latlng);
}
map.on('click', e => placeOrMoveMarker(e.latlng));
</script>
{% else %}
<p>aaaaah gibts nicht</p>
{% endif %}
</div>
</div>
@@ -203,7 +254,22 @@
wsUtil.handleClose(e);
};
function submitAnswer(optionIndex) {
function submitAnswer(optionIndex=0, has_options=true) {
if (!has_options){
answer = document.getElementById("singleanswer").value;
if (answer == ""){
alert("Bitte eine Antwort eingeben!");
return;
}
gameSocket.send(JSON.stringify({
type: 'submit_answer',
participant_id: participantId,
answer:answer,
time_remaining: questionDuration
}));
}
if (hasAnswered) return;
let input = ""; // Declare input here
@@ -249,7 +315,42 @@
}
}
function submitAnswerMap() {
answer = document.getElementById("location").value;
if (answer == ""){
alert("Bitte eine Antwort eingeben!");
return;
}
// Add grey overlay
const overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
overlay.style.backgroundColor = 'rgba(128, 128, 128, 0.5)';
overlay.style.zIndex = '1000';
overlay.style.display = 'flex';
overlay.style.justifyContent = 'center';
overlay.style.alignItems = 'center';
overlay.style.color = 'white';
overlay.style.fontSize = '24px';
overlay.style.fontWeight = 'bold';
overlay.textContent = 'Antwort übermittelt';
document.body.appendChild(overlay);
const now = Date.now();
const timeRemaining = Math.max(0, questionDuration - (now - questionStartTime));
gameSocket.send(JSON.stringify({
type: 'submit_answer',
participant_id: participantId,
answer: answer,
time_remaining: timeRemaining
}));
}
// Timer
function updateTimer() {

97
django/templates/play/game/score_overview.html
View File

@@ -9,9 +9,100 @@
<h2 class="text-xl font-bold mb-4">Aktuelle Frage</h2>
<p class="text-lg mb-2">{{ question_data.question }}</p>
{% if question_data.type != "order" and question_data.type != "guess" %}
{% if question_data.type == "map" %}
<!-- Map Question Display -->
<div class="mb-4">
<div id="map" class="h-96 w-full rounded-lg border border-gray-300 dark:border-gray-600"></div>
</div>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Parse the target location from the string format "lat,lng"
const targetCoords = '{{ question_data.target_location|escapejs }}'.split(',');
let targetLat, targetLng;
if (targetCoords.length === 2) {
targetLat = parseFloat(targetCoords[0].trim());
targetLng = parseFloat(targetCoords[1].trim());
// Normalize longitude to be within -180 to 180
targetLng = ((targetLng % 360) + 540) % 360 - 180;
// Clamp latitude to valid range (-90 to 90)
targetLat = Math.max(-90, Math.min(90, targetLat));
console.log('Normalized coordinates:', { lat: targetLat, lng: targetLng });
}
// Validate coordinates
if (isNaN(targetLat) || isNaN(targetLng)) {
console.warn('Invalid coordinates, hiding map');
document.getElementById('map-container').style.display = 'none';
return; // Exit the function early
}
const targetLocation = [targetLat, targetLng];
console.log('Using coordinates:', targetLocation);
// Initialize map centered on target location
const map = L.map('map').setView(targetLocation, 7);
// Check for dark mode
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
// Choose appropriate map style
const tileUrl = isDarkMode
? 'https://{s}.basemaps.cartocdn.com/rastertiles/dark_all/{z}/{x}/{y}.png'
: 'https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png';
L.tileLayer(tileUrl, {
maxZoom: 19,
attribution: '© OpenStreetMap © CARTO',
noWrap: true
}).addTo(map);
// Add target marker
L.marker(targetLocation, {
icon: L.divIcon({
html: '🎯',
className: 'text-3xl',
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -32]
})
}).addTo(map)
.bindPopup('Zielort')
.openPopup();
// Add tolerance radius circle if available
{% if question_data.tolerance_radius %}
(function() {
try {
const toleranceRadius = parseFloat('{{ question_data.tolerance_radius|escapejs }}'.replace(',', '.'));
if (!isNaN(toleranceRadius) && toleranceRadius > 0) {
L.circle(targetLocation, {
color: isDarkMode ? '#3b82f6' : '#2563eb',
fillColor: isDarkMode ? '#3b82f6' : '#2563eb',
fillOpacity: 0.2,
radius: toleranceRadius
}).addTo(map);
console.log('Added tolerance radius:', toleranceRadius);
}
} catch (e) {
console.error('Error adding tolerance radius:', e);
}
})();
{% endif %}
});
</script>
{% elif question_data.type != "order" and question_data.type != "guess" %}
<div class="grid grid-cols-2 gap-4">
{% for option in question_data.options %}
<div id="option-box-{{ forloop.counter0 }}" class=" dark:bg-transparent relative p-4 rounded-lg overflow-auto break-words hyphens-auto {% if option.is_correct %} border-2 border-green-500{% else %}border-2 border-red-500{% endif %}">
@@ -25,7 +116,7 @@
</div>
{% endfor %}
</div>
{% elif question_data.type == "guess" %}
{% elif question_data.type == "guess" %}
<div id="option-box-0" class="relative p-4 rounded-lg border-2 border-green-500 overflow-auto">
<div id="option-fill-0" class="absolute left-0 top-0 h-full bg-green-300 opacity-50 z-0 transition-all duration-1500" style="width: 0%;"></div>
<div class="relative z-10">