Skip to content

Commit 8bc97f0

Browse files
McNamara84McNamara84
committed
Countdown von 60sec pro Frage eingeführt
1 parent cc14efc commit 8bc97f0

File tree

1 file changed

+71
-64
lines changed

1 file changed

+71
-64
lines changed

‎resources/views/quiz/index.blade.php‎

Lines changed: 71 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@
1818
<div id="quiz-container">
1919
<!-- Dynamischer Inhalt: Frage und Antwortoptionen -->
2020
</div>
21-
<!-- Navigationsbereich mit drei Buttons:
22-
"Zurück", "Antworten anzeigen" (zweistufig) und "Weiter" -->
21+
<!-- Navigationsbereich mit drei Buttons: "Zurück", "Antworten anzeigen" (mit Countdown) und "Weiter" -->
2322
<div class="mt-6 flex justify-center items-center space-x-4">
2423
<button id="back-button" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
2524
Zurück
2625
</button>
27-
<button id="show-results-button" class="hidden bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
28-
Antworten anzeigen
26+
<!-- Button ist von Anfang an sichtbar, aber deaktiviert und zeigt den Countdown -->
27+
<button id="show-results-button" disabled class="bg-green-500 text-white font-bold py-2 px-4 rounded">
28+
00:60
2929
</button>
3030
<button id="next-button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
3131
Weiter
@@ -35,15 +35,16 @@
3535
</div>
3636

3737
<script>
38-
// Liste der Fragen (vom Controller als JSON übergeben)
38+
// Globale Variablen
3939
const questions = @json($questions);
4040
let currentQuestionIndex = 0;
4141
let pollInterval;
42-
let currentResults = {}; // Zum Zwischenspeichern der abgefragten Ergebnisse
43-
// Globaler Status für den "show-results-button": 0 = initial, 1 = Ergebnisse sichtbar
42+
let countdownInterval;
43+
let currentResults = {}; // Zwischenspeicherung der abgefragten Ergebnisse
44+
// Status für den "show-results-button": 0 = initial, 1 = Ergebnisse sichtbar
4445
let showResultsButtonState = 0;
45-
46-
// Aktualisiert den aktiven Fragensatz im Backend
46+
47+
// Aktualisiert den aktiven Fragensatz im Backend (optional)
4748
function setActiveQuestion(questionId) {
4849
fetch("{{ route('quiz.active.update') }}", {
4950
method: "POST",
@@ -61,9 +62,8 @@ function setActiveQuestion(questionId) {
6162
})
6263
.catch(error => console.error("Fehler beim Aktualisieren des aktiven Fragewerts:", error));
6364
}
64-
65-
// Rendert die aktuelle Frage mit Antwortoptionen und dem "Fertig!"-Badge.
66-
// Beim Neuladen wird der Button "Antworten anzeigen" zurückgesetzt und reaktiviert.
65+
66+
// Rendert die aktuelle Frage, setzt den Countdown zurück und startet das Polling
6767
function renderQuestion() {
6868
if (currentQuestionIndex >= questions.length) {
6969
window.location.href = "{{ route('quiz.summary') }}";
@@ -72,98 +72,106 @@ function renderQuestion() {
7272
// Reset des Button-Status für die aktuelle Frage
7373
showResultsButtonState = 0;
7474
const showResultsButton = document.getElementById('show-results-button');
75-
showResultsButton.classList.add('hidden');
76-
showResultsButton.textContent = "Antworten anzeigen";
77-
// Wichtige Ergänzung: Button wieder aktivieren
78-
showResultsButton.disabled = false;
79-
75+
showResultsButton.disabled = true;
76+
// Setze den Button-Text auf den Countdown-Startwert
77+
showResultsButton.textContent = "00:60";
78+
// Falls ein alter Countdown läuft, beenden
79+
if (countdownInterval) clearInterval(countdownInterval);
80+
81+
// Starte den 60-Sekunden-Countdown
82+
let timeLeft = 60;
83+
countdownInterval = setInterval(() => {
84+
timeLeft--;
85+
let minutes = Math.floor(timeLeft / 60);
86+
let seconds = timeLeft % 60;
87+
showResultsButton.textContent =
88+
(minutes < 10 ? "0" : "") + minutes + ":" + (seconds < 10 ? "0" : "") + seconds;
89+
if(timeLeft <= 0) {
90+
clearInterval(countdownInterval);
91+
showResultsButton.textContent = "Antworten anzeigen";
92+
showResultsButton.disabled = false;
93+
}
94+
}, 1000);
95+
8096
const currentQuestion = questions[currentQuestionIndex];
8197
const container = document.getElementById('quiz-container');
8298
container.innerHTML = '';
83-
99+
84100
// Frageanzeige
85101
const questionTitle = document.createElement('h2');
86102
questionTitle.className = "text-2xl font-semibold mb-4";
87103
questionTitle.textContent = currentQuestion.question_text;
88104
container.appendChild(questionTitle);
89-
90-
// Badge "Fertig!" (wird eingeblendet, wenn alle 6 Stimmen vorliegen)
105+
106+
// "Fertig!"-Badge (wird eingeblendet, wenn alle 6 Stimmen vorliegen)
91107
const badge = document.createElement('div');
92108
badge.id = "ready-badge";
93109
badge.className = "hidden inline-block bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-full mb-4";
94110
badge.textContent = "Fertig!";
95111
container.appendChild(badge);
96-
97-
// Antwortoptionen: Erstelle pro Option eine Card und speichere, ob sie richtig ist.
112+
113+
// Antwortoptionen anzeigen
98114
const optionsList = document.createElement('div');
99115
optionsList.className = "space-y-4";
100116
currentQuestion.options.forEach(option => {
101117
const optionDiv = document.createElement('div');
102118
optionDiv.className = "option-card p-4 bg-gray-50 rounded shadow flex items-center justify-between";
103119
optionDiv.setAttribute('data-correct', option.is_correct ? "true" : "false");
104-
120+
105121
const optionText = document.createElement('span');
106122
optionText.className = "font-medium";
107123
optionText.textContent = `${option.letter}: ${option.option_text}`;
108-
124+
109125
const voteCount = document.createElement('span');
110126
voteCount.className = "text-xl font-bold text-blue-600";
111127
voteCount.id = `vote-${option.letter}`;
112128
voteCount.textContent = "";
113129
voteCount.style.visibility = 'hidden';
114-
130+
115131
optionDiv.appendChild(optionText);
116132
optionDiv.appendChild(voteCount);
117133
optionsList.appendChild(optionDiv);
118134
});
119135
container.appendChild(optionsList);
120-
136+
121137
// "Zurück"-Button deaktivieren, wenn erste Frage
122138
document.getElementById('back-button').disabled = (currentQuestionIndex === 0);
123-
124-
// Aktualisiere den aktiven Fragensatz zentral
139+
// Aktualisiere den aktiven Fragensatz
125140
setActiveQuestion(currentQuestion.id);
126-
127-
// Starte Polling der Live-Ergebnisse
141+
// Starte das Polling für die Live-Ergebnisse
128142
startPolling(currentQuestion.id);
129143
}
130-
131-
// Holt per AJAX die aktuellen Scan-Ergebnisse für die gegebene Frage
132-
// Speichert die Ergebnisse in currentResults und zeigt den Button, wenn alle 6 Stimmen da sind.
144+
145+
// Holt per AJAX die aktuellen Ergebnisse für die gegebene Frage
133146
function startPolling(questionId) {
134147
if (pollInterval) clearInterval(pollInterval);
135148
pollInterval = setInterval(() => {
136149
fetch("{{ url('/quiz/results') }}/" + questionId)
137-
.then(response => response.json())
138-
.then(data => {
139-
let totalVotes = 0;
140-
for (const letter in data) {
141-
totalVotes += parseInt(data[letter]);
142-
}
143-
if (totalVotes >= 6) {
144-
currentResults = data;
145-
document.getElementById('show-results-button').classList.remove('hidden');
146-
document.getElementById('ready-badge').classList.remove('hidden');
147-
} else {
148-
document.getElementById('show-results-button').classList.add('hidden');
149-
for (const letter in data) {
150-
const voteElement = document.getElementById('vote-' + letter);
151-
if (voteElement) {
152-
voteElement.textContent = "";
153-
voteElement.style.visibility = 'hidden';
154-
}
155-
}
156-
document.getElementById('ready-badge').classList.add('hidden');
150+
.then(response => response.json())
151+
.then(data => {
152+
let totalVotes = 0;
153+
for (const letter in data) {
154+
totalVotes += parseInt(data[letter]);
155+
}
156+
// Falls alle 6 Stimmen vorhanden sind, zeige das "Fertig!"-Badge und aktiviere den Button (falls noch nicht aktiviert)
157+
if (totalVotes >= 6) {
158+
currentResults = data;
159+
document.getElementById('ready-badge').classList.remove('hidden');
160+
const showResultsButton = document.getElementById('show-results-button');
161+
if (showResultsButton.disabled) {
162+
clearInterval(countdownInterval);
163+
showResultsButton.textContent = "Antworten anzeigen";
164+
showResultsButton.disabled = false;
157165
}
158-
})
159-
.catch(error => console.error("Fehler beim Abrufen der Ergebnisse:", error));
166+
}
167+
})
168+
.catch(error => console.error("Fehler beim Abrufen der Ergebnisse:", error));
160169
}, 2000);
161170
}
162-
171+
163172
// Event Listener für "Antworten anzeigen" / "Lösung anzeigen"
164173
document.getElementById('show-results-button').addEventListener('click', () => {
165174
if (showResultsButtonState === 0) {
166-
// Erster Klick: Ergebnisse anzeigen
167175
for (const letter in currentResults) {
168176
const voteElement = document.getElementById('vote-' + letter);
169177
if (voteElement) {
@@ -174,7 +182,6 @@ function startPolling(questionId) {
174182
document.getElementById('show-results-button').textContent = "Lösung anzeigen";
175183
showResultsButtonState = 1;
176184
} else if (showResultsButtonState === 1) {
177-
// Zweiter Klick: Optionenkarten einfärben
178185
const optionCards = document.querySelectorAll('.option-card');
179186
optionCards.forEach(card => {
180187
const isCorrect = card.getAttribute('data-correct') === "true";
@@ -189,25 +196,25 @@ function startPolling(questionId) {
189196
document.getElementById('show-results-button').disabled = true;
190197
}
191198
});
192-
193-
// Event Listener: "Weiter"
199+
200+
// "Weiter"-Button Event Listener
194201
document.getElementById('next-button').addEventListener('click', () => {
195202
if (pollInterval) clearInterval(pollInterval);
196203
currentQuestionIndex++;
197204
renderQuestion();
198205
});
199-
200-
// Event Listener: "Zurück"
206+
207+
// "Zurück"-Button Event Listener
201208
document.getElementById('back-button').addEventListener('click', () => {
202209
if (currentQuestionIndex > 0) {
203210
if (pollInterval) clearInterval(pollInterval);
204211
currentQuestionIndex--;
205212
renderQuestion();
206213
}
207214
});
208-
215+
209216
// Initiale Anzeige der ersten Frage
210217
renderQuestion();
211-
</script>
218+
</script>
212219
</body>
213220
</html>

0 commit comments

Comments
 (0)