Lernmodus verbessert und Testmodus entfernt
This commit is contained in:
@@ -22,7 +22,8 @@ def lobby(request, join_code):
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
mode = request.GET.get('mode','default')
|
||||||
|
request.session['mode'] = mode
|
||||||
if "host_id" in request.COOKIES:
|
if "host_id" in request.COOKIES:
|
||||||
host_id = request.COOKIES['host_id']
|
host_id = request.COOKIES['host_id']
|
||||||
if host_id == quiz_game.host_id:
|
if host_id == quiz_game.host_id:
|
||||||
@@ -56,6 +57,8 @@ def select_mode(request,join_code):
|
|||||||
|
|
||||||
|
|
||||||
def create_participant(request, join_code):
|
def create_participant(request, join_code):
|
||||||
|
mode = request.GET.get('mode','default')
|
||||||
|
request.session['mode'] = mode
|
||||||
quiz_game = get_object_or_404(QuizGame, join_code=join_code)
|
quiz_game = get_object_or_404(QuizGame, join_code=join_code)
|
||||||
if mode!="learn":
|
if mode!="learn":
|
||||||
if "participant_id" in request.COOKIES:
|
if "participant_id" in request.COOKIES:
|
||||||
@@ -167,9 +170,18 @@ def scores(request, join_code):
|
|||||||
current_question = questions[quiz_game.current_question_index]
|
current_question = questions[quiz_game.current_question_index]
|
||||||
question_data = json.loads(current_question.data)
|
question_data = json.loads(current_question.data)
|
||||||
|
|
||||||
|
try:
|
||||||
|
my_participant = request.session.get('my_participant-participant_id')
|
||||||
|
participant = QuizGameParticipant.objects.get(participant_id=my_participant)
|
||||||
|
my_participant=participant
|
||||||
|
except:
|
||||||
|
participant = QuizGameParticipant.objects.none()
|
||||||
|
|
||||||
return render(request, 'play/game/score_overview.html', {
|
return render(request, 'play/game/score_overview.html', {
|
||||||
'quiz_game': quiz_game,
|
'quiz_game': quiz_game,
|
||||||
'participants': participants,
|
'participants': participants,
|
||||||
|
'participant': participant,
|
||||||
|
'my_participant':my_participant,
|
||||||
'is_host': is_host,
|
'is_host': is_host,
|
||||||
'host_id': quiz_game.host_id if is_host else None,
|
'host_id': quiz_game.host_id if is_host else None,
|
||||||
'is_last_question': quiz_game.current_question_index + 1 >= len(questions),
|
'is_last_question': quiz_game.current_question_index + 1 >= len(questions),
|
||||||
@@ -244,8 +256,11 @@ def question(request, join_code):
|
|||||||
participant_id = request.COOKIES['participant_id']
|
participant_id = request.COOKIES['participant_id']
|
||||||
try:
|
try:
|
||||||
participant = QuizGameParticipant.objects.get(participant_id=participant_id)
|
participant = QuizGameParticipant.objects.get(participant_id=participant_id)
|
||||||
|
|
||||||
|
|
||||||
except QuizGameParticipant.DoesNotExist:
|
except QuizGameParticipant.DoesNotExist:
|
||||||
return redirect('play:create_participant', join_code=join_code)
|
return redirect('play:create_participant', join_code=join_code)
|
||||||
|
request.session['my_participant-participant_id'] = participant.participant_id
|
||||||
|
|
||||||
return render(request, 'play/game/question_participant.html', {
|
return render(request, 'play/game/question_participant.html', {
|
||||||
'quiz_game': quiz_game,
|
'quiz_game': quiz_game,
|
||||||
@@ -281,7 +296,7 @@ def waiting_room(request, join_code):
|
|||||||
|
|
||||||
def selected_mode(request, join_code):
|
def selected_mode(request, join_code):
|
||||||
|
|
||||||
global mode
|
|
||||||
mode = request.GET.get('mode','default')
|
mode = request.GET.get('mode','default')
|
||||||
request.session['mode'] = mode
|
request.session['mode'] = mode
|
||||||
quiz_game = get_object_or_404(QuizGame, join_code=join_code)
|
quiz_game = get_object_or_404(QuizGame, join_code=join_code)
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
<div class="bg-white rounded-lg shadow-md p-8 mb-6">
|
<div class="bg-white rounded-lg shadow-md p-8 mb-6">
|
||||||
<div class="text-center mb-8">
|
<div class="text-center mb-8">
|
||||||
<h1 class="text-4xl font-bold text-blue-600 mb-4">Quiz beendet!</h1>
|
<h1 class="text-4xl font-bold text-blue-600 mb-4">Quiz beendet!</h1>
|
||||||
<p class="text-xl text-gray-600">Vielen Dank fürs Mitspielen!</p>
|
<p class="text-xl text-gray-600">Vielen Dank fürs Spielen!</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% if not is_host %}
|
{% if not is_host %}
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
{% extends 'base.html' %}
|
{% extends 'base.html' %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
{% if request.session.mode == "learn" %}
|
{% if request.session.mode == "learn" %}
|
||||||
@@ -13,12 +12,18 @@
|
|||||||
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
|
<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>
|
<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>
|
<h1 class="text-3xl font-bold mb-6">{{ question_data.question }}</h1>
|
||||||
|
{% if request.session.mode == "learn" %}
|
||||||
<div class="grid grid-cols-2 gap-4 mb-6">
|
<div class="grid grid-cols-1 gap-4 mb-6">
|
||||||
|
{% else %}
|
||||||
|
<div class="grid grid-cols-2 gap-4 mb-6">
|
||||||
|
{% endif %}
|
||||||
|
{% if request.session.mode != "learn" %}
|
||||||
<div class="p-4 bg-blue-50 rounded-lg">
|
<div class="p-4 bg-blue-50 rounded-lg">
|
||||||
<p class="text-blue-600 text-xl mb-2">Verbleibende Zeit</p>
|
<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>
|
<p id="remaining-time" class="text-6xl font-bold text-blue-700">30</p>
|
||||||
</div>
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
<div class="p-4 bg-blue-50 rounded-lg">
|
<div class="p-4 bg-blue-50 rounded-lg">
|
||||||
<p class="text-blue-600 text-xl mb-2">Antworten</p>
|
<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>
|
<p id="answer-count" class="text-6xl font-bold text-blue-700">0/0</p>
|
||||||
@@ -43,13 +48,15 @@
|
|||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{% block extra_js %}
|
{% block extra_js %}
|
||||||
{% include 'play/game/common_scripts.html' %}
|
{% include 'play/game/common_scripts.html' %}
|
||||||
<script>
|
<script>
|
||||||
const joinCode = '{{ quiz_game.join_code }}';
|
const joinCode = '{{ quiz_game.join_code }}';
|
||||||
const hostId = '{{ host_id }}';
|
const hostId = '{{ host_id }}';
|
||||||
const questionStartTime = {{ start_time }};
|
const questionStartTime = {{ start_time }};
|
||||||
const questionDuration = 30000; // 30 seconds in milliseconds
|
var questionDuration = 30000; // 30 seconds in milliseconds
|
||||||
const gameSocket = initializeGameSocket(joinCode);
|
const gameSocket = initializeGameSocket(joinCode);
|
||||||
let answeredParticipants = 0;
|
let answeredParticipants = 0;
|
||||||
let totalParticipants = 0;
|
let totalParticipants = 0;
|
||||||
@@ -99,7 +106,7 @@
|
|||||||
// Show correct answers and answer counts
|
// Show correct answers and answer counts
|
||||||
var correctOptions = document.querySelectorAll('[data-correct="True"]');
|
var correctOptions = document.querySelectorAll('[data-correct="True"]');
|
||||||
for (var i = 0; i < correctOptions.length; i++) {
|
for (var i = 0; i < correctOptions.length; i++) {
|
||||||
correctOptions[i].classList.add('border-2', 'border-green-500');
|
correctOptions[i].classList.add('border-2', 'border-blue-500');
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show answer counts
|
// Show answer counts
|
||||||
@@ -118,6 +125,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Timer
|
// Timer
|
||||||
|
{% if request.session.mode != "learn" %}
|
||||||
function updateTimer() {
|
function updateTimer() {
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
const elapsed = now - questionStartTime;
|
const elapsed = now - questionStartTime;
|
||||||
@@ -132,6 +140,9 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
// Request initial participants list
|
// Request initial participants list
|
||||||
gameSocket.onopen = function(e) {
|
gameSocket.onopen = function(e) {
|
||||||
gameSocket.send(JSON.stringify({
|
gameSocket.send(JSON.stringify({
|
||||||
|
|||||||
@@ -10,22 +10,25 @@
|
|||||||
<p class="text-lg mb-2">{{ question_data.question }}</p>
|
<p class="text-lg mb-2">{{ question_data.question }}</p>
|
||||||
<div class="grid grid-cols-2 gap-4">
|
<div class="grid grid-cols-2 gap-4">
|
||||||
{% for option in question_data.options %}
|
{% for option in question_data.options %}
|
||||||
<div class="p-4 rounded-lg {% if option.is_correct %}bg-green-100 border-2 border-green-500{% else %}bg-gray-100{% endif %}">
|
<div class="p-4 rounded-lg {% if option.is_correct %}bg-green-100 border-2 border-green-500 {% else %} bg-gray-100 {% endif %}">
|
||||||
<p class="text-lg">{{ option.value }}</p>
|
<p class="text-lg">{{ option.value }}</p>
|
||||||
<p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
|
<p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{% if request.session.mode != "learn" %}
|
||||||
|
|
||||||
<div class="mb-6">
|
<div class="mb-6">
|
||||||
<h2 class="text-xl font-bold mb-4">Punktestand</h2>
|
<h2 class="text-xl font-bold mb-4">Punktestand</h2>
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
{% for participant in participants %}
|
{% for participant in participants %}
|
||||||
|
{% if participant == my_participant or is_host %}
|
||||||
|
|
||||||
<div class="p-4 {% if forloop.first %}bg-yellow-100 border-2 border-yellow-500{% else %}bg-gray-100{% endif %} rounded-lg flex justify-between items-center">
|
<div class="p-4 {% if forloop.first %}bg-yellow-100 border-2 border-yellow-500{% else %}bg-gray-100{% endif %} rounded-lg flex justify-between items-center">
|
||||||
<div>
|
<div>
|
||||||
<p class="text-lg font-bold">{{ participant.display_name }}</p>
|
<p class="text-lg font-bold">{{ participant.display_name }}</p>
|
||||||
<p class="text-gray-600">{{ participant.score }} Punkte</p>
|
<p class="text-gray-600">{{ participant.score }} Punkte</p>
|
||||||
</div>
|
</div>
|
||||||
{% if participant.last_answer_correct %}
|
{% if participant.last_answer_correct %}
|
||||||
<span class="text-green-500">✓</span>
|
<span class="text-green-500">✓</span>
|
||||||
@@ -33,10 +36,17 @@
|
|||||||
<span class="text-red-500">✗</span>
|
<span class="text-red-500">✗</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
{% else %}
|
||||||
|
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
{% endif %}
|
||||||
{% if is_host %}
|
{% if is_host %}
|
||||||
{% if is_last_question %}
|
{% if is_last_question %}
|
||||||
<button id="finish-button" class="w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
|
<button id="finish-button" class="w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
|
||||||
@@ -112,7 +122,8 @@
|
|||||||
if (stats.hasOwnProperty(optionIndex)) {
|
if (stats.hasOwnProperty(optionIndex)) {
|
||||||
var element = document.getElementById('option-count-' + optionIndex);
|
var element = document.getElementById('option-count-' + optionIndex);
|
||||||
if (element) {
|
if (element) {
|
||||||
element.textContent = stats[optionIndex] + ' Antworten';
|
|
||||||
|
element.textContent = stats[optionIndex] + ' Antwort(en)';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,7 +6,7 @@
|
|||||||
<div class="rounded-md rounded-xl shadow-lg border-3 border-blue-100 p-10">
|
<div class="rounded-md rounded-xl shadow-lg border-3 border-blue-100 p-10">
|
||||||
<span class="flex justify-center font-bold p-4 text-center text-1xl lg:text-2xl">Bitte wählen Sie einen Spielmodus aus:</span>
|
<span class="flex justify-center font-bold p-4 text-center text-1xl lg:text-2xl">Bitte wählen Sie einen Spielmodus aus:</span>
|
||||||
|
|
||||||
<div class="grid sm:grid-cols-3 place-items-stretch text-center gap-4 p-4">
|
<div class="grid sm:grid-cols-2 place-items-stretch text-center gap-4 p-4">
|
||||||
|
|
||||||
<!-- Moderieren -->
|
<!-- Moderieren -->
|
||||||
<a class="qp-a-button bg-green-500 text-white flex justify-center items-center relative group h-20 gap-2" href="{% url 'play:selected_mode' join_code %}?mode=classic">
|
<a class="qp-a-button bg-green-500 text-white flex justify-center items-center relative group h-20 gap-2" href="{% url 'play:selected_mode' join_code %}?mode=classic">
|
||||||
@@ -34,18 +34,6 @@
|
|||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- Testmodus -->
|
|
||||||
<a class="qp-a-button bg-purple-500 text-white flex justify-center items-center relative group h-20 gap-2" href="{% url 'play:selected_mode' join_code %}?mode=test">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
Testmodus
|
|
||||||
<!-- Tooltip -->
|
|
||||||
<span class="absolute w-full h-1/2 top-1/4 left-0 hidden group-hover:flex items-center justify-center text-white bg-black bg-opacity-90 text-xs rounded px-2 z-10 pointer-events-none">
|
|
||||||
Ideal für die Schule (mit Feedback für Lehrkraft)
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user