Warn with timer colors near timeout

README.md

@@ -13,6 +13,7 @@ Szkielet komponentu Joomla 6 do gromadzenia pytań testowych.
 - frontendowy widok pytań filtrowany po symbolu arkusza egzaminacyjnego,
 - frontendowy widok testu na podstawie wybranego zestawu pytań,
 - dwuetapowe rozpoczęcie testu z loginem użytkownika i możliwością przedłużenia czasu,
+- zegar odliczający czas testu i automatyczne zakończenie po jego upływie,
 - pozycję menu „Arkusz egzaminacyjny” z opcjonalnym symbolem arkusza,
 - listę wyboru dostępnych symboli arkuszy na stronie klienckiej,
 - możliwość rozwiązania arkusza i wyświetlenia wyniku oraz odpowiedzi poprawnych i zaznaczonych,
@@ -26,6 +27,6 @@ Szkielet komponentu Joomla 6 do gromadzenia pytań testowych.
 
 ## Instalacja
 
-W Joomla wybierz **System → Install → Install from Folder** i wskaż ten katalog. Manifestem instalacyjnym jest `com_testquestions.xml` (wersja 1.15.0).
+W Joomla wybierz **System → Install → Install from Folder** i wskaż ten katalog. Manifestem instalacyjnym jest `com_testquestions.xml` (wersja 1.16.3).
 
 Po instalacji komponent jest dostępny w panelu administratora jako **Pytania testowe**.

administrator/components/com_testquestions/sql/updates/mysql/1.15.1.sql

@@ -0,0 +1 @@
+-- No database changes required for version 1.15.1.

administrator/components/com_testquestions/sql/updates/mysql/1.15.2.sql

@@ -0,0 +1 @@
+-- No database changes required for version 1.15.2.

administrator/components/com_testquestions/sql/updates/mysql/1.16.0.sql

@@ -0,0 +1 @@
+-- No database changes required for version 1.16.0.

administrator/components/com_testquestions/sql/updates/mysql/1.16.1.sql

@@ -0,0 +1 @@
+-- No database changes required for version 1.16.1.

administrator/components/com_testquestions/sql/updates/mysql/1.16.2.sql

@@ -0,0 +1 @@
+-- No database changes required for version 1.16.2.

administrator/components/com_testquestions/sql/updates/mysql/1.16.3.sql

@@ -0,0 +1 @@
+-- No database changes required for version 1.16.3.

com_testquestions.xml

@@ -4,7 +4,7 @@
     <creationDate>2026-10-14</creationDate>
     <author>Komponent</author>
     <license>GNU General Public License version 2 or later</license>
-    <version>1.15.0</version>
+    <version>1.16.3</version>
     <description>COM_TESTQUESTIONS_DESCRIPTION</description>
     <element>com_testquestions</element>
     <namespace path="src">Komponent\Component\Testquestions</namespace>

components/com_testquestions/language/en-GB/com_testquestions.ini

@@ -21,7 +21,9 @@ COM_TESTQUESTIONS_SET_DURATION="Czas trwania testu"
 COM_TESTQUESTIONS_SET_NOT_FOUND="Nie znaleziono wybranego zestawu testowego."
 COM_TESTQUESTIONS_SELECT_SET="Wybierz zestaw pytań"
 COM_TESTQUESTIONS_SHOW_SET="Pokaż zestaw"
+COM_TESTQUESTIONS_YOUR_ANSWER="Twoja odpowiedź"
 COM_TESTQUESTIONS_PARTICIPANT_NAME="Login lub nazwa użytkownika"
 COM_TESTQUESTIONS_EXTRA_TIME="Przedłużenie czasu"
 COM_TESTQUESTIONS_START_TEST="Rozpocznij test"
 COM_TESTQUESTIONS_SET_START_HINT="Wybierz zestaw, wpisz login lub nazwę użytkownika i zatwierdź rozpoczęcie testu."
+COM_TESTQUESTIONS_TIMER_REMAINING="Pozostały czas"

components/com_testquestions/media/egzamin.css

@@ -18,6 +18,18 @@
     margin: auto;
 }
 
+.com-testquestions #test-timer-container {
+    position: fixed;
+    left: 2rem;
+    bottom: 2rem;
+    z-index: 1050;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+}
+
 .com-testquestions .timer-text {
     position: absolute;
     top: 50%;

components/com_testquestions/tmpl/set/default.php

@@ -46,19 +46,33 @@ use Joomla\CMS\Factory;
             <?php if ($this->set->image) : ?><div class="foto_pyt"><img src="<?php echo htmlspecialchars($this->set->image, ENT_QUOTES, 'UTF-8'); ?>" alt="" loading="lazy"></div><?php endif; ?>
             <?php if ($this->set->test_content) : ?><div class="test-set-content"><?php echo $this->set->test_content; ?></div><?php endif; ?>
         </header>
+        <?php if (!$this->results && ((int) $this->set->duration + $extraTime) > 0) : ?>
+            <div class="timer-container mb-4" id="test-timer-container" data-duration="<?php echo ((int) $this->set->duration + $extraTime) * 60; ?>" aria-live="polite">
+                <svg width="120" height="120" viewBox="0 0 120 120" aria-hidden="true">
+                    <circle cx="60" cy="60" r="54" fill="none" stroke="#dfe3e7" stroke-width="8"></circle>
+                    <circle id="test-timer-ring" class="progress-ring__circle" cx="60" cy="60" r="54" fill="none" stroke="#4a86cf" stroke-width="8" stroke-linecap="round"></circle>
+                </svg>
+                <div id="test-timer-text" class="timer-text">--:--</div>
+            </div>
+        <?php endif; ?>
         <?php if ($this->results) : ?>
             <div class="alert alert-success test-result"><strong><?php echo \Joomla\CMS\Language\Text::_('COM_TESTQUESTIONS_RESULT'); ?>:</strong> <?php echo (int) $this->results['correct']; ?> / <?php echo (int) $this->results['total']; ?> (<?php echo htmlspecialchars((string) $this->results['percentage'], ENT_QUOTES, 'UTF-8'); ?>%)</div>
         <?php endif; ?>
         <?php if ($this->items) : ?>
-            <form action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI'], ENT_QUOTES, 'UTF-8'); ?>" method="post">
+            <form action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI'], ENT_QUOTES, 'UTF-8'); ?>" method="post" id="test-form">
             <?php foreach ($this->items as $number => $item) : ?>
                 <article class="testquestion mb-4">
                     <div class="pyt"><div class="question-header"><span class="question-number"><?php echo ($number + 1) . '.'; ?></span><div class="question-text"><?php echo $item->question; ?></div></div></div>
                     <?php if ($item->image) : ?><div class="foto_pyt"><img src="<?php echo htmlspecialchars($item->image, ENT_QUOTES, 'UTF-8'); ?>" alt="" loading="lazy"></div><?php endif; ?>
                     <?php if ($item->question_type === 'open') : ?>
                         <div class="<?php echo $this->results ? ($this->results['items'][$item->id]['correct'] ? 'odpup' : 'odpu') : 'odp'; ?>">
-                            <label for="set-answer-<?php echo (int) $number; ?>"><?php echo \Joomla\CMS\Language\Text::_('COM_TESTQUESTIONS_ENTER_ANSWER'); ?></label>
-                            <input type="text" id="set-answer-<?php echo (int) $number; ?>" name="answers[<?php echo (int) $item->id; ?>]" class="form-control" value="<?php echo $this->results ? htmlspecialchars($this->results['items'][$item->id]['selected'], ENT_QUOTES, 'UTF-8') : ''; ?>">
+                            <?php if ($this->results) : ?>
+                                <strong><?php echo \Joomla\CMS\Language\Text::_('COM_TESTQUESTIONS_YOUR_ANSWER'); ?>:</strong>
+                                <?php echo htmlspecialchars($this->results['items'][$item->id]['selected'] ?: '—', ENT_QUOTES, 'UTF-8'); ?>
+                            <?php else : ?>
+                                <label for="set-answer-<?php echo (int) $number; ?>"><?php echo \Joomla\CMS\Language\Text::_('COM_TESTQUESTIONS_ENTER_ANSWER'); ?></label>
+                                <input type="text" id="set-answer-<?php echo (int) $number; ?>" name="answers[<?php echo (int) $item->id; ?>]" class="form-control">
+                            <?php endif; ?>
                         </div>
                     <?php else : ?>
                         <ol type="A" class="answer-list">
@@ -84,8 +98,55 @@ use Joomla\CMS\Factory;
                 <input type="hidden" name="extra_time" value="<?php echo (int) $extraTime; ?>">
                 <input type="hidden" name="task" value="check">
                 <?php echo \Joomla\CMS\HTML\HTMLHelper::_('form.token'); ?>
-                <input type="submit" class="egzamin" value="<?php echo htmlspecialchars(\Joomla\CMS\Language\Text::_('COM_TESTQUESTIONS_FINISH_TEST'), ENT_QUOTES, 'UTF-8'); ?>">
+                <?php if (!$this->results) : ?>
+                    <input type="submit" class="egzamin" value="<?php echo htmlspecialchars(\Joomla\CMS\Language\Text::_('COM_TESTQUESTIONS_FINISH_TEST'), ENT_QUOTES, 'UTF-8'); ?>">
+                <?php endif; ?>
             </form>
         <?php endif; ?>
     <?php endif; ?>
 </div>
+<?php if ($this->started && !$this->results && ((int) $this->set->duration + $extraTime) > 0) : ?>
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    const container = document.getElementById('test-timer-container');
+    const text = document.getElementById('test-timer-text');
+    const ring = document.getElementById('test-timer-ring');
+    const form = document.getElementById('test-form');
+
+    if (!container || !text || !ring || !form) {
+        return;
+    }
+
+    const total = parseInt(container.dataset.duration, 10);
+    const circumference = 2 * Math.PI * 54;
+    let remaining = total;
+    let submitted = false;
+
+    ring.style.strokeDasharray = circumference + ' ' + circumference;
+
+    const update = function () {
+        const minutes = Math.floor(remaining / 60);
+        const seconds = remaining % 60;
+        const ratio = remaining / total;
+        text.textContent = String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0');
+        ring.style.strokeDashoffset = circumference * (1 - remaining / total);
+        ring.style.stroke = ratio <= 0.1 ? '#dc3545' : (ratio <= 0.2 ? '#fd7e14' : '#4a86cf');
+
+        if (remaining <= 0 && !submitted) {
+            submitted = true;
+            form.submit();
+        }
+    };
+
+    update();
+    const interval = window.setInterval(function () {
+        remaining -= 1;
+        update();
+
+        if (submitted) {
+            window.clearInterval(interval);
+        }
+    }, 1000);
+});
+</script>
+<?php endif; ?>

egzamin.css

@@ -154,6 +154,18 @@ div.odpup
     gap: .25rem;
 }
 
+.com-testquestions #test-timer-container {
+    position: fixed;
+    left: 2rem;
+    bottom: 2rem;
+    z-index: 1050;
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+}
+
 .com-testquestions .question-number {
     flex: 0 0 auto;
     white-space: nowrap;