diff --git a/src/css/styles.css b/src/css/styles.css index fea5dd5..74d0592 100644 --- a/src/css/styles.css +++ b/src/css/styles.css @@ -72,6 +72,7 @@ form button { #quiz { display: flex; + flex-direction: column; } #chart { @@ -79,6 +80,17 @@ form button { display: flex; justify-content: center; align-items: center; + margin-bottom: 20px; +} + +@media (min-width: 768px) { + #quiz { + flex-direction: row; + } + + #chart { + margin-bottom: 0; + } } #question-text, #options { @@ -106,6 +118,13 @@ form button { margin-top: 20px; } +#timer { + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 20px; +} + table { width: 100%; border-collapse: collapse; diff --git a/src/js/quiz.js b/src/js/quiz.js index e6a1b3f..3ab5d36 100644 --- a/src/js/quiz.js +++ b/src/js/quiz.js @@ -10,7 +10,8 @@ document.addEventListener('DOMContentLoaded', function () { let currentQuestionIndex = 0; let score = 0; let quizResults = []; - let timeLeft = 25000; // 25 seconds in milliseconds + const initialTimeLeft = 250000; // 25 seconds in milliseconds + let timeLeft = initialTimeLeft; let timer; let startTime = new Date().toISOString(); @@ -62,8 +63,8 @@ document.addEventListener('DOMContentLoaded', function () { // Complete timer reset stopTimer(); - timeLeft = 25000; // 25 seconds in milliseconds - timerDisplay.textContent = (timeLeft / 1000).toFixed(1); // Display in seconds + timeLeft = initialTimeLeft; // Reset to initial time + timerDisplay.textContent = Math.ceil(timeLeft / 1000); // Display in whole seconds const question = questions[currentQuestionIndex]; const chartFile = `charts/${question.chart}-${version}.vl.json`; @@ -116,11 +117,11 @@ document.addEventListener('DOMContentLoaded', function () { stopTimer(); // Ensure display shows starting value - timerDisplay.textContent = (timeLeft / 1000).toFixed(1); // Display in seconds + timerDisplay.textContent = Math.ceil(timeLeft / 1000); // Display in whole seconds timer = setInterval(() => { timeLeft -= 100; // Decrease by 100 milliseconds - timerDisplay.textContent = (timeLeft / 1000).toFixed(1); // Display in seconds + timerDisplay.textContent = Math.ceil(timeLeft / 1000); // Display in whole seconds if (timeLeft <= 0) { stopTimer(); @@ -183,7 +184,7 @@ document.addEventListener('DOMContentLoaded', function () { currentQuestionIndex++; // Reset timer state before showing next question - timeLeft = 25000; // 25 seconds in milliseconds + timeLeft = initialTimeLeft; // Reset to initial time displayQuestion(); }